「ワイヤーフレーム」の役割をご存じでしょうか。
これはいわばデザインの骨組みになる設計図なのですが、デザインとの違いや作成意図に関する疑問をお持ちの方もいらっしゃるでしょう。
そこで今回の記事ではワイヤーフレームの役割やデザインカンプとの違い、ワイヤーフレームをデザインに落とし込むときのポイントをご紹介します。
クライアントの方も、ぜひ参考にしてみてください。
目次
ワイヤーフレームとは
ワイヤーフレームとは、各ページのレイアウトを表した図です。
デザイン前に作成し、ページのどの場所にどんな内容を盛り込むかについて決めます。
したがって、原理上は全ページのワイヤーフレームが必要となります。
Webデザイナーはワイヤーフレームを参考にデザインします。
したがって、ワイヤーフレームはデザインの方向性を決める重要な要素と言えるでしょう。
ワイヤーフレームの役割
ワイヤーフレームには3つ役割があります。
クライアントと情報設計を確認すること
1つ目の役割は、「クライアントと情報設計を確認すること」です。
たとえばサイトを公開したときに「情報を増やしたい」であったり「デザインが想像と違う」であったり、「機能を変更したい」といった要求がクライアントから発生したとき、時間もお金も余分にかかってしまいます。
このような状況を防ぐため、ワイヤーフレームの段階で情報設計をすり合わせておく必要があります。
具体的に確認してもらうポイントは以下の通りです。
確認ポイント
・必要な情報は盛り込まれているか
・優先順位に問題はないか
・機能要件は満たしているか
デザイナーへの指示書として利用すること
2つ目は、「デザイナーへの指示書として利用すること」です。
ワイヤーフレームは情報設計の確認以外にも、デザイナーに対する指示書としても利用できます。
デザイナーが一目で何をデザインすればよいか判断できれば、良いワイヤーフレームと言えるでしょう。
具体的には、以下の情報が盛り込まれていると良いでしょう。
ワイヤーフレームに盛り込む情報
・ページの目的
・ターゲット、ペルソナ
・トーンイメージが分かる言葉
・参考サイト
・その他クライアントからのマスト要件
開発チームへの指示書
3つ目は、「開発チームへの指示書」です。
ワイヤーフレームは、エンジニアへのコーディング指示書でもあります。
機能要件（検索機能、問い合わせフォーム）やリンクの遷移先を視覚的に伝えられると良いでしょう。
デザインカンプとの違い
ワイヤーフレームと似た言葉にデザインカンプがありますが、どう違うのでしょうか。
ワイヤーフレームはいわば「設計図」で、デザインカンプは「完成見本」に当たります。
そもそもデザインカンプとは「Design Comprehensive Layout」の略です。
ワイヤーフレームではビジュアル面の問題は考慮せずに骨格の構成のみに集中します。
一方デザインカンプでは画像やテキストも挿入して、色や装飾も施します。
ビジュアルまで考えた後にやり直すコストは大きいので、やはりデザインカンプ以前の、ワイヤーフレームの段階でクライアントに確認する必要があります。
ワイヤーフレームからデザインへ
ワイヤーフレームが完成したら、いよいよデザインに移ります。
表現方法は指定がない限り自由ですが、ここでは軸となるポイントをご紹介します。
面積を変更する
1つ目は、面積を変更することです。
たとえば、アイキャッチとなる画像の大きさをワイヤーフレームの時よりも大きくすることが挙げられます。
配置を変更する
2つ目は、配置を変更することです。
重要度は変えず、もう少し細かい配置などを変えましょう。
たとえば画像の上にテキストを載せたり、画像とテキストを上下に配置していたのを、左右に配置するようにしたりなどです。
表現方法を変更する
3つ目は、表現方法を変更することです。
表現方法はワイヤーフレーム作成の段階で詰めるべき点ですが、ワイヤーフレーム作成者とデザイン作成者が異なる場合など、そういかないことがあるでしょう。
その場合は表現方法から変える必要があります。
たとえばスケジュールを載せる際によく使われる表現方法がカレンダーの使用です。
しかし、月に2～3回しかないイベントの日程を載せる場合、カレンダーだと無駄にスペースを使うことに繋がります。
そのため、単純にリスト化して載せる方が効果的です。
ワイヤーフレーム作成時のポイントと注意事項
各要素に明確な理由と根拠を付けること
1つ目のポイントは、「各要素に明確な理由と根拠を付けること」です。
具体的には、「なぜこの要素を盛り込むのか」と「なぜこの配置にするのか」を決めます。
これらを明確化することで、2つのメリットが期待できます。
1つ目のメリット：建設的な議論を行えるようになること
1つ目のメリットは、「建設的な議論を行えるようになること」です。
議論を行う場合に無駄になるのが、主観的な意見です。
しかし様々な意見が飛び交う現場では、意見が主観的か客観的かの判断も難しくなるでしょう。
そこで、議論の前段階で明確な理由・根拠を添えて意見することで、議論の際に出る意見も客観的なものになり易くなります。
その上で出る意見には、より具体的な説得力が求められるためです。
2つ目のメリット：作成後に効果検証がしやすくなること
2つ目のメリットは、「作成後に効果検証がしやすくなること」です。
webサイトを作成した後は効果測定を行い、ワイヤーフレームを作成した時の仮説（根拠・理由）が正しかったかについて検証します。
効果検証により、webサイトを改善し続けられます。
一方でなんとなくでワイヤーフレームを決めてしまうと、仮説がぶれるため効果検証もしにくくなってしまいます。
頭の中で理由をなんとなく把握しているような状態ではなく、しっかり言語化しておきましょう。
事前にリサーチ・分析をしっかり行うこと
2つ目のポイントは、「事前にリサーチ・分析をしっかり行うこと」です。
webサイトを作成するときには理由を明確化しなければならないと、先ほど説明しました。
そして、明確な理由を設定するためには、事前リサーチと分析が必須です。
たとえば無料で使用できる「ヒートマップ」を使えばユーザー行動が一目でわかります。
ヒートマップではユーザーが興味を持つ場所や「離脱」した場所が分かるため、改善点が洗い出しやすいです
デザイン作成ではなく情報設計を目的にすること
3つ目は、「デザイン作成ではなく情報設計を目的にすること」です。
デザインはいわゆる装飾で、ワイヤーフレームは骨組みに当たります。
この骨組みの設計は情報設計と呼ばれ、デザインとは切り離しておかないと余分な時間がかかってしまいます。
ワイヤーフレームはシンプルに作成すること
4つ目は、「ワイヤーフレームはシンプルに作成すること」です。
ワイヤーフレームは、簡単に変更できるようにシンプルに作成しましょう。
一度で完成することはほとんどないため、変更しやすい物を作っておくことが大切です。
完成時のワイヤーフレームには実際のテキストも入れること
5つ目は、「完成時のワイヤーフレームには実際のテキストも入れること」です。
最初からテキストを入れてしまうと変更が手間になります。
そのため、完成してから実際のテキストを入れるようにしましょう。
実際のテキストを入れる理由は、完成イメージとのずれを抑えるためです。
また、実際のテキストを入れておけば、デザイナーがデザインしやすいというメリットもあります。
加えて画像も挿入して置けるとベターでしょう。
まとめ
今回の記事では、ワイヤーフレームについて、デザインと比較しつつご紹介しました。
ワイヤーフレームは、デザインの方向性を決める非常に重要な設計図です。
ワイヤーフレームの持つ役割と目的を忘れずに、制作することが大切です。
当社では、デザイン修正ツールmitekakuを提供しています。
面倒なデザイン修正指示を簡易化・効率化できますし、導入・運用も容易です。
ワイヤーフレーム作成にも使えるので、ぜひ利用してみてください。
