ワイヤーフレーム制作の５つのアプローチ

ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。

ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。

コンテンツブロック型

内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早期から導入出来る制作方法で、制作時間もかかりません。ソフトウェアを使って制作することが出来ますが、コンテンツを入れない段階なので、紙上でも素早く作ることが出来ます。ただし想像力を要するタイプなので、情報共有のための補足情報は不可欠になります。

ディテール型

色はほとんど使いませんが、UI 要素や情報をなるべく完成品に近い形にするワイヤーフレーム。コンテンツブロック型に比べると、より多くの方に完成品の形やアイデアを共有しやすいです。しかし、詳細を作ることによって細かいところに目が行ってしまい、全体像に関するディスカッションにならない場合もあるので注意。

ストーリー型

タスクを設定し、開始から達成までの流れが分かるワイヤーフレーム。個々のページの構造より、それぞれがどのように繋がり、どういった使用感を与えるのかを示すのに有効。複数の機能や誘導先がある場合は、別々に用意しておかないと、混乱を招きます。また、提案している流れがどう有効であるのかも明確に示す必要があります。

コラボレーション型

Post-It Note や、UIマグネット を利用して、自由にコンテンツブロックや UI 要素を動かせる状態で作るダイナミックなワイヤーフレーム。会議や会話で出て来たアイデアを即座に反映することが出来る反面、その場でしか活用出来ないので後で別途『完成品』を作る必要があります。

半プロトタイプ型

見た目はワイヤーフレームですが、クリック、ポップアップ、表示・非表示といったウェブサイトにあるインタラクションが盛り込まれているタイプ。制作時間も多少かかり、共有する手段が限定される可能性がありますが、ワイヤーフレームの状態から完成品に近い使い心地を再現することが出来ます。特定のタスクにフォーカスして使い心地を調べたい場合は不向き。