ワイヤーフレームとは、WEBページのレイアウトを決める設計図のようなもので、WEB制作に欠かせない要素です。
略してワイヤーと呼ぶことが多く、現場では必ず使われる言葉ですので、WEB制作を始めたばかりで何もわからない人でもこれだけは押さえておく必要があります。
今回はワイヤーフレームの役割や作成方法について解説していきます。
ワイヤーフレームってなに？
上述のとおりワイヤーフレームとはWEBページのレイアウトを決める設計図です。
ページのどのあたりにロゴを配置して、メインビジュアルはここ、バナーや新作記事の表示はこの辺で、といったものを一目でわかるようにしてあります。
大抵の場合トップページと下部ページでは構成が微妙に違いますので、それぞれのページ用のワイヤーフレームを用意します。
ページレイアウトの数だけワイヤーフレームもあると捉えてもらえれば問題ありません。
ワイヤーフレームの役割
実際の作業に入る前に関係者全員でこのワイヤーフレームを共有しておくことで、全員が同じイメージを持ってコーディングを行うことができます。
逆にワイヤーフレームなしで言葉のみでの説明では何となくのイメージは持てても細かいところで差異が出てきてしまいます。
自分一人で作業しているならまだしも、複数人での作業や外注している時などは、人によって違うページを作ることになってしまい、サイトに統一感が生まれずちぐはぐなものになってしまいます。
また、それだけでなく事前にレイアウトを可視化しておくことで足りない項目や、不要な作業の洗い出しが可能になります。
ワイヤーフレームと似ているようで違う？混同に注意！
上記がワイヤーフレームの役割ですが、よく間違えられるものが3つありますので、それぞれ違いを見ていきましょう。
ディレクトリマップ
ディレクトリマップとは、WEBサイト全体の構成を一覧にしたものです。
ワイヤーフレームがページのレイアウトを示すものに対し、ディレクトリマップはサイト全体における各ページの配置や仕様をまとめたものであり、どのページにどれがぶら下がっているかなどを各ページのURLとともに一覧表にしています。
ワイヤーフレームだけではわからない各ページの関係を示す資料として、こちらもWEB制作の現場においては重要なものとなっています。
デザインカンプ
デザインカンプとは、WEBページの完成見本のことを指しています。
ワイヤーフレームはラフ画のような形になっていますので、それをより完成形に近づけイメージしやすいようにしたものとなっています。
外注を受けたWEB制作会社がクライアントにいくつか完成見本として提示し、その中からもっともクライアントのイメージに沿うものを選んでもらうのに使ったりします。
サイトマップ
サイトマップはWEBサイトの全体像を表示するもので、ディレクトリマップと似ていますが、ディレクトリマップやワイヤーフレームは制作時に使用するのに対し、サイトマップは制作後に使用するものです。
ユーザーにサイトの全体像を示すHTMLサイトマップと、SEO対策の際に使用するXMLサイトマップの2種類があります。
ワイヤーフレームの作成方法
ワイヤーフレームの役割と混同しやすい要素を確認したところで、実際の作成方法について見ていきましょう。
1、情報の整理
まず始めに行うのは情報の整理です。
情報の整理を行う上で大事なのは最初にそのページに載せる情報を全て書き出すことです。
例えば自社サイトのページを作成するのであれば、企業名やロゴ、主な業務内容や会社の沿革、連絡先、所在地などと思いつくものすべてを書き出します。
その後書き出した情報を性質が似ているもの同士でグループ分けします。
グループ分けすることで情報が分散してわかりづらくなるのを防ぎます。
それができたら次は優先順位を付けていきます。
WEBサイトの目的に沿った情報を優先的に表示することで、サイトに訪れたユーザーが探していた情報を提供しやすくなります。
例えばロゴマーク制作を外注する時の料金を知りたいユーザーからしてみれば、企業の社長の顔写真がでかでかと表示されても意味がないのは明らかです。
もちろん顔を出すことで誠意が伝わるなどの効果はありますが、それが優先順位トップに来るべきか、は要検討です。
2、情報のレイアウト
情報が整理できたら次はレイアウトです。
どの情報をどこに配置するのか、ここでワイヤーフレームのほぼ全てが決まります。
レイアウトにはトレンドがあり、時代によって流行りのデザインなどがあったりしますが、それぞれのデザインには異なる役割がありますので、自分の目的に沿ったもので考えましょう。
社長の顔写真の例もそうですが、何よりもユーザー視点に立ったレイアウトが重要です。
3、清書
ここまでできたらあとはワイヤーフレームを作成するツールを用いて清書していくだけです。
もちろん手書きの状態で完成させても構いませんが、データ上で残しておくことで修正や共有が楽になりますので、多くの場合はツールを使って清書することになります。
ツールも人によって異なりますが、パワーポイントやエクセルでも作成できますし、AdobeのIllustratorを使う人やワイヤーフレーム制作ようのオンラインサービスを使う人もいます。
ただ複数人で作業する場合はデータの共有のしやすや修正のしやすさという点を念頭におく必要があります。
まとめ
ワイヤーフレームはWEBページのレイアウトを決める設計図です。
これをしっかりと作ることで完成イメージを共有でき、複数人での作業時にはブレがなくなります。
また、事前にイメージを可視化しておくことで情報の不足や不要な要素の確認なども可能になります。
後々のトラブルを防ぐためにも、しっかりとしたワイヤーフレームを作成しましょう。