ワイヤーフレームからデザインへ

wiresample
ページを作成するときに、ページのレイアウトやデザインを決めるよりも前に、
そのページにどのような要素を配置するのか、その概要をまとめたものを用意する場合があります。(右図)

こうした実際のデザインの前にまとめたものを、ワイヤーフレームと呼びます。

WEB制作を行う場合には、見た目をデザインするだけではなく、
情報の整理や配置、インタラクションの設計など、さまざまな要素が入り込みます。

クライアントの要望に沿ったサイトを制作するためには、クライアントと制作サイドのイメージにすれ違いがないように、よくすり合わせることが重要なファクターとなります。
どのようなサイトを、どのような操作感覚で、どのように見せるのか、というイメージの共有は、
サイトがある程度できあがってからの、「やっぱりイメージが違った」「メニューが使いづらい」「リンクの構造が複雑」などの修整対応を減らすことに役立ちます。

ただ漠然とデザインをする、のではなく、デザインもきちんとした設計図を用意し、それに基づいて制作を進める必要があります。

とはいえ、ワイヤーフレームにもさまざまな形式や作り方があります。(というよりも、別にこれといった定型はありません。)
ワイヤーフレームを制作するための専用のアプリケーションや、
ワイヤーフレーム制作の際に便利な素材(ページ内の部品)を提供しているサイトもあります。
実際に自分で制作する場合には、

クライアントとのイメージの共有がしっかりとできること
ワイヤーフレームの作成業務自体に極端な付加がないこと

などに留意しながら、デザインの設計図を利用する必要があります。
(ワイヤーフレームの制作ばかりに時間がかかっていると、作業が進まないですよね…)

デザインを提案する際には、作りこんだ後でやり直し、なんてことにならないように、
十分に準備と、クライアントの承認を得てから作業を進めるようにしたほうが得策です。
(それですら、時には、やはり大がかりな修正が起こりうるのだから…!)

■参考
ウェブサイトの設計図 ワイヤーフレームを活用しよう

コメントをどうぞ