Webサイトの「ワイヤーフレーム」とは？ワイヤーフレームの役割と種類

Webサイト制作担当の方なら一度は耳にしたことがある、ワイヤーフレーム。
しかし、ワイヤーフレームが本当はどういうものなのか、なぜ作られるのか、しっかりと理解していますか？
今回はWebサイト制作の基盤になる「ワイヤーフレーム」について、一般的な定義をおさらいしてみます。

ワイヤーフレームって何？

ワイヤーフレームとは一言で言うと「Webサイトの設計図」です。この設計図にはWebサイトの構造や機能を大まかに定めた決まり事が書かれています。

その体裁はWeb制作会社によっても違いがありますが概ね、
・モノクロで作られている
・簡単な線や図形のみを使って作られている
といった特徴がみられます。

ワイヤーフレームはWebページ画面を模倣していて、ナビゲーションやボタン、テキスト、画像などの要素が配置されています。
設計段階なので内容詳細は省略されることが多く、テキストや画像などは仮当ての場合もあります。

ワイヤーフレームの役割を理解する

ワイヤーフレームの役割はあくまで設計図で、サイト構造のデザインを明確にする役割を持つ場合がほとんどです。

先述の通り、ワイヤーフレームでは詳細は省略されますが、

• どの情報を載せるか（取捨選択）
• どのような順番にするか（優先度）
• どの情報とどの情報をまとめるのか（グルーピング）

などを共有し決定するときに重要な役割を担います。

ワイヤーフレームに掲載する情報は、Webサイトを通して達成したい最終的な目的に沿って作成されるのが一般的です。
しかし、Web制作会社によっては、ワイヤーフレームを見た目のデザインの下書きという位置付けにしているケースもあります。
この場合、色や形、フォントなどの視覚要素をすり合わせるという役割も、ワイヤーフレームは担っているのです。
よってWebサイト制作を外注する際は、パートナーとなるWeb制作会社がワイヤーフレームをどういった役割で使用しているのか、よく確認することが大切です。

ワイヤーフレームをチェックする際のポイント

Web担当者として、構造のデザイン（設計図）として出来上がってきたワイヤーフレームをどうチェックいていくか。
ぜひ押さえておいてほしいのは、「細かい見た目のデザインについては考えすぎない」ことです。
というのもワイヤーフレーム（設計図）の段階で、見た目の細かいデザインを考えてしまうと、情報や構造のみをシンプルに評価することが難しくなるからです。
本来見るべきでない段階でデザインを詰めてしまうと、設計図で考慮すべきことが一度に詰めこまれることになり、初期段階から修正回数が増えてしまいます。
構造のデザインを変更したら、見た目のデザインも逐一修正する必要が出てくるので、何をするにも2度手間になってしまうでしょう。これは大変非効率ですね。
Webサイトのこの部分は赤色にしたい、画像やボタンなどを丸くしたい、といった細かい見た目のデザインを考えるのは、ワイヤーフレームが定まったあとにするのが望ましいです。
Webサイトを制作するにあたっての最終的な目的をよく確認しながら、まずはワイヤーフレームの示す構造のデザインを考えることに専念しましょう。

構造のデザインについての考え方

構造のデザインとは、Webサイト内でユーザーに対し情報をどのように提供するのか、どこにどの情報を掲載するか、どんな機能を持たせるかなどの情報設計です。

• 最初に提示すべき情報は何か
• どのようにコンテンツ間を移動するのか
• 本当に必要な情報が適切な量で含まれているか
• Webサイトを訪れる人が迷ってしまわないか
• 自分たちで更新していく部分は、更新がしやすいか

などのように考えていきます。

Webサイト制作担当の方はパートナーのWeb制作会社に対し、どういう意図を持ってワイヤーフレームが作られたのかを確認し、よく把握しておくべきでしょう。

まとめ

「デザイン」いうと、見た目や雰囲気のことを考えがちです。
しかし、Webサイトを通して達成したい目的がある場合は、構造のデザインであるワイヤーフレームをおざなりにしてはいけません。
作られたワイヤーフレームにおいては、構造のデザインを見直す目的がメインなのか、見た目のデザインを重視するためのものなのか、その役割をよく確認することが大切です。