ワイヤーフレーム制作

ワイヤーフレームとは

ワイヤーフレームとはWebサイトやアプリケーションの画面に必要な要素を決めるために作られるドキュメントで、各画面に掲載する情報や機能を「何を」「どこに」「どのように」表示させるかをまとめた、いわば設計図です。
基本的には、画面のレイアウトパターンの数だけワイヤーフレームを制作し、この情報を元にしてコンテンツの精査やビジュアルデザイン、実装を行います。

ワイヤーフレームの役割

上述の「設計図」をクライアントや制作側であるデザイナー・エンジニアなどのプロジェクトメンバー全員で共有・検討します。
そうすることにより認識のずれや齟齬をなくすと同時に、掲載内容の漏れや使い勝手の良し悪しに関わる問題を事前に防ぎ、プロジェクトの進行をスムーズにすることができます。
ワイヤーフレームを制作するタイミングとしては、デザインやコーディング・プログラミング作業に入る前の設計期間で制作します。

ワイヤーフレームの制作プロセス

まずは各画面の遷移を設計し、次の各画面に必要な要素を全て書き出して、ワイヤーフレーム上に大まかにレイアウトしていきます。ここで要素の不足があると、その後のデザインや実装にも影響があるので、綿密に設計していきます。

ワイヤーフレームを採用する際に気をつけていること

各画面をドキュメント化していくので、大規模プロジェクトなどのページ数が大量に必要な場合は膨大なドキュメントになりえます。そのような際は全レイアウトパターンを制作せず、コメントなどで補完することもあります。
またワイヤーフレームはその見た目上、画面デザインと混同してしまう場合がありますが、あくまでワイヤーフレームは画面に掲載する情報や機能をまとめた設計図で、ワイヤーフレームが決定後、そのドキュメントを元にデザインを制作します。
クライアントに確認いただく際に「当初想像していたイメージと違う」という感想を持たれることもあるので、ワイヤーフレームのフェーズで決定したいことはなにか？を事前に共有することが必要です。
またデザイナーもワイヤーフレームの情報のみに沿ったデザインにならないように注意が必要です。