デザインをする際にいきなり制作を始めるのでなく、まずはワイヤーフレームを作ることから始めます。確かに制作しながらデザインや盛り込む情報を決めていく方法もありますが、そのような場合、すべて作り終わってから不備に気づくことも少なくありません。作り終わってから新たなコンテンツを入れこむのは、せっかく作ったデザインが崩れてしまったり、「どこに配置するか」と悩むことで制作に時間がかかってしまったりする心配があります。ワイヤーフレームを作成しておけば、よりスムーズに効率よくデザイン作成を行うことができるでしょう。
ワイヤーフレームとはWebページのレイアウトを定める設計書のことです。単に「ワイヤー」と呼ぶこともあります。細かなデザインを定めるというよりも、どのような情報をどのように配置するかを定めるために作成されるため、ワイヤーフレームにはグラフィック要素を入れずにシンプルな見た目にします。同じWebページでもレイアウトのパターンの数だけ作成するべきです。
ワイヤーを作成する目的は主に三点。
１．イメージを「見える化」するため
見える化することで早い段階から不備に気づくことができます。例えば、「意外と見づらかった」や「項目が足りていない」「これはもう少し左に配置したほうがいいのではないか」というように具体的に修正箇所を洗い出すことが可能になります。大きな変更点ほど作成後に変更するのは難しいです。ワイヤーを作成している段階であればそのような心配もありません。
２．制作者同士の共有をしやすくするため
デザインは複数人で行うことが多いため、イメージを共有することは大変重要です。後から認識を合わせるために時間を使うことになってしまっては時間がもったいないです。そのようなことが起こらないためにもワイヤー作成は必要です。
３．議論をしやすくするため
例えばクライアントとの打ち合わせの際に、具体的なイメージがないと意見が出しにくくなってしまいます。より具体的な意見を得たり、円滑に打ち合わせを進めるためにもワイヤーの作成は重要です。
まず大切なのが「情報の整理」です。ついレイアウトから着手したくなりますが、必要な情報を決めるところから始めましょう。その理由はレイアウトから作成してしまうとその枠内に収まらない情報を排除してしまう心配があるからです。デザイン性の高さは重要ですが本当に必要な情報を優先させるようにしましょう。
情報整理に重要なことは以下の三点です。
・ピックアップ…載せるべき情報をすべて書き出す
・グルーピング…ピックアップしたものを性質別にグループに分ける
・ランキング…グルーピングした情報に優先順位をつける
これらの情報整理が終わったらレイアウトに着手しましょう。
必要な情報を盛り込み、一貫性のあるレイアウトを考えることに加え最も重要なのは、ワイヤーを作る段階から機能性や操作性を考えることです。どのようなレイアウトにすればユーザーがより使いやすいか、をユーザー目線で考える意識を持つようにしましょう。
イノベーションデザインラボでは、生産性・効率性を向上させるシステムを、ユーザー主体設計(User Centered design)をベースに UI（User Interface）／UX(User Experience)の技術を習得し、ユーザーの利用目的、ニーズに沿った設計志向で業務課題を解決します。まずは、お気軽にご相談ください。
