ワイヤーフレーム (Wire frame) WEBデザインカンプ( Design comprehensive layout)作成方法

アドビのフォトショップ(Photoshop)やイラストレーター（Illustrator)は、デザインの制作で無くてはならないソフトです。
WEBデザインはフォトショップ、印刷はイラストレーターという時代から、ディバイスとサイトの用途によって、どちらのソフトでもデザインを作成する時代に変わりつつあります。
写真の加工をフォトショップで行って、イラストレーターとリンクさせて作成するのが、おすすめです。
そこで今回は、フォトショップで制作する WEBサイト制作の「ワイヤーフレーム」「デザインカンプ」作成方法を紹介します。
イラストレーターでのワイヤーフレーム、デザインカンプは次回

WEBサイト制作の流れ

ざっくりとWEBサイト制作のフローを紹介します

ヒアリング→クライアントのイメージをリサーチ
サイト設計+ワイヤーフレーム作成
デザインカンプ作成
クライアントと打ち合わせしてイメージ共有の確認、この次点での修正
フィードバックを受けてのデザイン修正とブラッシュアップ
コーディング
完成→サイト公開

ワイヤーフレーム / Wire frameとは

概ね↓のような感じで、パワーポイントで、ディレクターが作成して、WEBデザイナーへ依頼があります。

ワイヤーフレームとは、WEBサイトのページの構成やレイアウト（物の配置・配列）を割付けしたページの枠組み＝設計図、ざっくりとした図、下書きのことを指します。
メニューや画像、テキストをページ内のどこに配置するかなど、クライアント側とのページ設計の交渉の際に欠かせないものです。
基本的には画像やテキストは使用せず、四角形や円形や記号などを使ってページの枠組みをします。
デザインやコーディングなどの作業に入る前に作成し、完成イメージを「見える化」することが目的で作られます。
クライアント側がWEBの知識があり、急ぎの案件で締め切りが迫っている場合など、作成しない事もあります。

デザイン依頼のいろんなパターンあるある

1 : デザイン依頼の時点で全て揃っているディレクターさん

指示書あり
カンパニーカラーの指定や、ペルソナをきちんと伝えてくれます。
情報共有のため、クライアントへのプレゼン用のパワーポイントも送ってくれる
（概ねそのパワーポイントの中にワイヤーがある）
参考サイトのURL２~３サイト
テキストも既に決まっていて、あとはコピペという時もあります。
こういった場合は、複数人のデザイナーさんページをデザインする事があります。

2 : デザイナーさんがディレクションも兼ねる場合

指示書あり
イラストレーター、フォトショでワイヤーフレームから少し発展したシンプルなデザインカンプが送られたりもします。
（ほぼ、ほぼ出来上がりに近い時が多々）
参考サイトのURL２~３サイト
キービジュアルのキャッチコピーも決められている事が多いです。

3 : 構成案に長方形の図形が….シンプルすぎる場合

指示書あり
エクセルに、構成案と、参考イメージ画像で構成されたものもしくは長方形の箱だけとか
参考サイトのURL２~３サイト

指示書もピンキリで、何も決まってない、ホワホワしたものもあれば、きっちりクライアントさんとの打ち合わせしたものを、書面でまとめたものと、、、様々です。
それでも、ワイヤーと指示書、参考サイトを確認してデザインを進めていきます。

デザインカンプ / Design comprehensive layoutとは

デザインカンプは、「 Design デザインComprehensive コンプリヘンスィヴLayout レイアウト」の略で、直訳すると包括的なレイアウト
包括的＝ひっくるめて、ひとつにまとめること
つまり、包括的とは「幅広く全体を含んでいる」という意味になります。
写真や、テキストが決まってない場合は、ダミーテキスト、仮の写真・画像を差し込みます。
その際、仮で差し込むデザインの写真や画像の内容がクライアントからのOK!もらえるもらえないに、とても大きく影響します。
無料画像商用可写真【おすすめ】画像サイト厳選6選と無料商用化映像・動画4選

クライアントとの打ち合わせはデザインカンプでイメージ共有

ワイヤーフレームを見せながらのクライアントとの打ち合わせは、完成イメージが共有することが困難な場合が多いので、デザインカンプで、ほぼ完成に近いデザインを数点提案し、クライアントとの打ち合せで、デザインを決定し、微調整する流れが齟齬もなくスムーズに進みます。
打ち合せの段階でのイメージ共有＝ヒアリングがとても大事です。
クライアントの思い描くサイトイメージとデザインの齟齬がなければ、テキスト間違い程度の修正で、納品できます。
もちろん、何度も修正を重ねる場合もあります。
そういった場合は、クライアント側がコミュニケーションを重ねていく中で、最初は言えなかった希望などが、出てきてしまった。。。
という場合が多く、大きな方向性の違いなどの場合は、追加見積もりで再度デザインする場合や、デザイナーを変更する場合もあります。
（ディレクションミスなので、作業料はもらえます！普通は。。。）

ワイヤーフレーム

省略

架空の ON LINEショップのコーポレートサイトのトップページデザインカンプ

コーポレートサイトのトップページのみ作成しましょう！

参考サイト

富士ベッド
http://www.fujibed.com/

課題

ECサイトを運営する架空の会社のコーポレートサイトのトップページ

架空の会社のサイトの内容を考える
名前を考えても良い

例）
ファッション・インナー
ファッション小物
キッズ・ベビー・玩具
食品・スイーツ
ドリンク・お酒
インテリア・寝具
日用雑貨・キッチン用品
本・電子書籍・音楽
ゲーム・ホビー・楽器
コスメ・健康・医薬品
家電・TV・カメラ
PC・スマホ・通信
スポーツ・ゴルフ
ペット・花・DIY工具
車・バイク
サービス・リフォーム

自分が仕事して楽しくなるアイテムにしましょう！