ワイヤーフレームとは？基本や作り方を解説。

Web制作ではデザイン制作に入る前に、ページ毎にコンテンツを整理した設計図（ワイヤーフレーム）を作成します。コンテンツ情報とデザインを紐付けるための重要な資料となるのでここで作り方を理解しておきましょう。

ワイヤーフレームの基本

ワイヤーフレームとはページに含めるコンテンツをまとめ、簡易的なレイアウトに落とし込んだ資料です。ワイヤーフレームの目的はコンテンツ情報を落とし込むためのもので、上流工程でクライアントと取り決めたビジネス視点を踏まえて作成するものになります。ワイヤーフレーム自体の詳細度やボリュームはサイト規模や案件の状況によって変わるので特に決まった様式はありません。

ワイヤーフレームはコンテンツ情報をまとめ簡易的なレイアウトや導線を示したものであるため、特別デザイン（色や形）を強く指定するためのものではありません。あくまでコンテンツの確認をするための資料なので必要以上に作り込むのではなくスピード感を持って作成・調整していくものと捉えましょう。ただし、コンテンツが多くなるページなどの場合はデザイン着手に入った段階でのレイアウト変更の対応が難しくなるため、デザイン着手時点でワイヤーフレームはクライアントと協議し必ず確定するようにしましょう。

ワイヤーフレームの作り方

ここからはワイヤーフレームの具体的な作り方について説明していきます。作成する時はクライアントにヒアリングする中で集めた情報、主にwebサイトの目的とペルソナ、ユーザーに伝えたい情報の優先度など要素を踏まえます。

準備をする
ワイヤーフレーム作成のためにまず必要な情報を揃えます。上記でも書きましたがこれはおそらくヒアリング時にすでに揃っている場合がほとんどでしょう。基本的には上記の要素を元にコンテンツの配置（レイアウト）や導線を書いて行きます。いきなり思いつくままに書いていくのではなく、まずは競合サイト（ベンチマークサイト）を参考するなどしましょう。優れたデザインは共通部分も多いためワイヤーフレーム作成に役立てる事ができます。その上でWebサイトの目的とユーザーの目的を達成する上で「どのようなレイアウトでコンテンツを配置し、全体としてどのような導線や流れを作るのが適切か」を考え落とし込んできます。基本的には「コンテンツの情報」「レイアウトや要素の大きさ」「テキスト（ダミーでも可）」「導線」などがわかれば大丈夫です。

ワイヤーフレーム作成のルールとポイントを守る
ワイヤーフレームにはいくつかのルールがあるのでそれも覚えておきましょう。

①意図しないビジュアルイメージは避ける
まず、ワイヤーフレームはあくまでコンテンツの内容や場所、レイアウトや導線を指定するものであるため、ビジュアルまで作り込んでしまわないようにしましょう。ワイヤーフレーム自体にデザイン意図が含まれてしまうと、デザイン作成時に引っ張られてしまう可能性があります。また意図せずともデザイナーが勘違いを起こし結果ワイヤーフレームそのままのデザインになってしまうことなどもあり得るため注意しましょう。

②コンテンツはグレースケールで
これはそのままの意味ですがワイヤーフレーム内のコンテンツはグレースケールで色付けするのが主流です。先の話にも通じますがグレー以外の「色」をつけるのは避けるようにしましょう。もちろん注釈は分かりやすいように赤字にするなどは大丈夫です。

③簡易的すぎなものは出来るだけ避ける
ワイヤーフレームでビジュアルを作り込むことは避けたほうがいいですが、逆にレイアウトや導線のイメージが湧きずらいようなものも避けましょう。ビジュアル指定は必要ありませんが、最低限クライアントやデザイナーから見てコンテンツの配置や大きさ、導線が掴める程度には仕上げましょう。

ワイヤーフレーム作成ツール

基本的には作成担当が慣れたツールで大丈夫ですが、クライアント含めたチーム全体が自由に閲覧できる事が理想です。手書きでも大丈夫ですがその場合、作成者本人にとっては分かりやすくとも第三者から見た際に分かりづらくなってしまわないようにしましょう。昨今ではワイヤーフレームに特化したツールもいくつか出できており、チーム内共有や高い視認性も担保できるのでできれば使って行きたいところです。下記におすすめのツールを記載しておきます。

・Adobe XD
・Google Slide
・cacoo
・Sketch
・パワーポイント

以上、ワイヤーフレームの基本と作り方の解説でした。