ワイヤーフレーム

戦略コンセプトや動線シナリオを反映しながら、
各画面に掲載する情報や基本レイアウトを明確にします。

ワイヤーフレームは画面設計のために作られるドキュメントです。画面に掲載する情報や機能を、画面ごとに定義したものです。各ページの骨格であり、この情報を元にしてコンテンツの精緻化やビジュアルデザインが行われます。またクライアント企業との間では、ワイヤーフレームの段階で一度協議を挟み、各画面の掲載内容に関する検討を行います。ワイヤーフレームの制作ツールとしてはPowerPointを採用することが多いですが、要望があれば他ツールでの制作も可能です。

ワイヤーフレームのデメリット

実は、私たちの現在のワークフローでは、ワイヤーフレームを作る機会はかなり減っています。代わりに、HTMLモックアップを用いて画面設計を行っています。それは、ワイヤーフレームには以下のようなデメリットがあるためです。

設計者がコーダーに文書構造の意図を説明する必要がある
設計者が考えたファイル構造やヘッダ情報を定義するために別のドキュメントを必要とする
コーディング時にWFやPSD上のテキストをコピペして移し替えなければならない
リンク構造や動き、使い勝手を紙面上で表現することに限界がある
共通パーツに修正を入れる際に、ページごとに修正を入れなければならない
レスポンシブWebの場合、PC用とスマホ用の2種類のWFを作る必要がある
更新するたびに新しいWFを印刷しなければならない

いずれも工夫次第で軽減できる問題ではありますが、HTMLモックアップであれば、これらのデメリットの多くが解消されるため、現在の画面設計では、HTMLプロトタイプを優先的に採用しています。ただし、デザインやHTMLを別会社が担当する、クライアント企業の担当者がワイヤーフレームでの確認・意思決定に慣れている、画面数が少なくワイヤーフレームの方がスムーズに進行できる、といったケースなど、考慮すべき事情がある場合は、画面設計にワイヤーフレームを選択することもあります。

ベイジは戦略的な設計もさることながら、生産性や効率の良さ、コミュニケーションの取りやすさもとても重視しています。その判断の上で、ワイヤーフレームとHTMLプロトタイプを使い分けています。このように、設計に強いこだわりを持つ私たちのWeb制作をご希望の方は、お気軽にご相談ください。