ワイヤーフレームとは? Webサイト制作で大切なページ構成を確認しよう 事例詳細|つなweB

Webサイトの制作には数々のステップがあります。中でもワイヤーフレームの確認は、トップページや各下層ページの内容を決める上で極めて重要なステップです。

 

サイトマップでWebサイト全体の設計図が決まると、制作会社はワイヤーフレームの作成に着手します。ワイヤーフレームとは、いわばページごとの設計図のようなもの。それぞれのページにどんな要素が入るかを考え、配置順やレイアウトをまとめていきます。同じページのワイヤーフレームを複数回つくるケースもありますが、最初の段階では、画像が入っていなかったり、文字もダミーテキストの状態であることが多いでしょう。

初めてワイヤーフレームを見ると誤解してしまうかもしれませんが、ワイヤーフレームはあくまで設計図であり、デザインではありません。この時点で見た目がそっけないと感じたとしても、最終的にはキチンとデザインされたWebサイトになるので安心しましょう。

ワイヤーフレームは、Webサイトの制作ステップを「内容の構成」段階と「デザイン」段階に切り分ける上で役立ちます。先に内容を固めておけば、デザイン工程では見せ方だけに集中できます。結果として、デザイン校正のやりとりが少なくて済むようになるのです。

 

ワイヤーフレームは、ページの内容を大まかにまとめた構成案です。一番最初につくる簡易ワイヤーフレームでは、テキストや画像が入っていない、またはダミーであることが多いです

 

ワイヤーフレームのつくり方は、制作会社によって違います。例えば、PowerPointやPhoto shop、Illustratorなどのツールでワイヤーをつくる制作会社の場合、クライアント側は書き出されたPDFを見て確認することになります。一方、制作会社によってはワイヤーフレームを直接HTMLで構築したり、「Adobe XD」というWebサイトのプロトタイプ制作に特化したツールを使うこともあります。その場合、クライアント側にはURLが送られてくるので、Webブラウザ上で内容を確認することになります。

Webブラウザ上で確認できるワイヤーフレームは、ページ間のリンクまで設定されていることがあります。確認する側にとっては、完成した姿をよりイメージしやすいというメリットがあります。しかし一方で、完成形に近いからこそ、最終的なデザインがあがってきた時にワイヤーフレームとの違いに戸惑ってしまうかもしれません。この時点で確認するのは、あくまでもページの構成だということを忘れないようにしましょう。

ワイヤーフレームをつくるツールは制作会社によって異なります。また、つくるツールによって書き出し方法も変わるため、どのように確認するかが変わってきます

 

※Web制作・運用バイブル 2022(2021年11月8日発売)掲載記事を転載

関連記事