Webサイト制作に欠かせないワイヤーフレーム。しかし意外にも、作成するディレクターをはじめデザイナーやクライアントにいたるまで、ワイヤーフレームに対するイメージや解釈にバラつきがあるようです。「ワイヤーフレームはデザインラフじゃない！」そう声をあげて言いたくなったので、今回はワイヤーフレームとは何か、その目的や作り方などを解説します。きちんと意図が伝わるワイヤーフレームを作ってWeb制作を円滑に進めていきましょう！
目次
結論から言うと、ワイヤーフレームを作成する段階でデザイン要素は必要ありません。確かに、ワイヤーフレームはWeb制作の初期段階で作るため「デザインラフでしょ？」と勘違いされがちですが、これこそがワイヤーフレームで陥りやすい落とし穴。
むしろ、デザインの視覚的要素が見る人を惑わせる要因となり、最も重要な「ワイヤーフレームの本質」が相手に伝わりにくいのです。これでは、メンバーそれぞれが別のゴールを目指して開発が進んでしまい兼ねません。
つまり、デザインはあくまでデザイナーが担当する領域であり、ワイヤーフレームに必要な要素ではないのです。
まずは、ワイヤーフレームの目的について全メンバーの認識を統一しておく必要があります。
ワイヤーフレームとは、Webサイトを制作する目的に沿って「何を（What）・どこに（Where）・どのように（How）」配置すべきかを図にした情報設計です。
例題として、TOPページのワイヤーフレームを取り挙げてみましょう。
つまり、ワイヤーフレームの作成者はWebデザイナーやクライアントに対し、ナゼこの情報を選びナゼここに配置したのか、全ての要素と配置について明確な根拠を説明できなければなりません。
ワイヤーフレームは語源である「ワイヤー（線）」と「フレーム（骨組み）」を組み合わせて作ります。一般的にはWebディレクターが担当するケースが多いようですが、会社によってはWebデザイナーが担当するケースもあるようです。
しかし、誰が担当者であろうとどんな情報をどこに配置すべきか「具体的な要素と配置」が一目で伝わる仕様でなければ意味がありません。なぜなら、ワイヤーフレームは下記の役目を一手に担っているからです。
具体的な要素と聞くと、ダミー画像やデモを盛り込むべきと連想する方も多いでしょう。しかし、ダミー要素は目的が不明瞭なためおすすめできません。
例えば、アウトドアのサイトであれば「臨場感が伝わる画像」といった具合に、何のために必要な画像なのか目的を明確にしておく方が重要です。
ワイヤーフレームの目的や役割を見失いそうになった時は、誰に見せるために作っているのかをイメージして下さい。なぜなら、その人の立場によってワイヤーフレームで確認したい項目が異なるからです。
ワイヤーフレームを受け取ったメンバーは、本格的な開発をスタートさせる前に修正点や内容に過不足がないかを議論しながら完成を目指します。そのためには、少なくとも上記の要素を満たしておく必要があるのです。言い換えれば、相手が確認したい要素さえ含まれていれば、ワイヤーフレームの役目は果たされていると判断できます。
Webサイトは多くの要素を組み合わせて完成させますが、中にはワイヤーフレームと混同されがちな要素も少なくありません。この段落では特に混同されやすい下記の3つについて、ワイヤーフレームとの違いを解説します。
どちらも、どんな情報がどこに配置されているかをまとめるという役割は同じですが、範囲と仕様に違いがあります。
▼範囲と仕様の違い
こちらも情報と配置場所を表すという点は共通していますが、範囲と使用するタイミングが異なります。
▼範囲と使用するタイミングの違い
どちらも1ページごとに作成するという点は同じですが、対象者と目的が大きく異なります。
▼対象者と目的の違い
ワイヤーフレームの作成には、少なくとも3段階のプロセスが必要です。
では早速、実際にワイヤーフレームを作る時の手順について見ていきましょう。
情報のピックアップと言っても、住所や電話番号などを単純に書き出すだけでは十分とは言えません。情報漏れによる手戻りを防ぐためにも、「準備→ピックアップ→グルーピング→ラベル付け→確認」の順に沿って進めていきましょう。
▼具体的な手順とポイント
大量にあるレイアウトの中からどれを選ぶべきか、そのヒントとなるのが情報のランキングです。なぜなら、Webページに掲載する情報は優先順位によって適切な場所に配置すべきだからです。
例えば、優先順位の高い情報が少なければ1カラム（縦1列）でも対応できるでしょうが、優先順位の高い項目が多ければ対応しきれません。
その点、サイドバーのある2カラムのレイアウトならサイドバーの上部をヘッダーの代役として活用できるため、優先順位の高い情報をより多く掲載することができるのです。
同様に、順位が似かよっているカテゴリーが複数ある場合はグローバルナビゲーションが存在するレイアウトが、明らかに優先順位が異なる場合は複数のロー（横ライン）が存在するレイアウトが有力な選択肢になります。
ほとんどのWebサイトでは、会社やサイトの顔である「ロゴ」が左上に表示されています。なぜなら、人には左から右に視線を動かす性質があり、最初に視線が集まる左上に最も優先順位の高いロゴを表示することで、認知度を高める効果が期待できるからです。
一方、クライアントから「営業中の問い合わせは電話よりメールが理想的」とリクエストされた場合は、住所や電話番号を目立たないフッターに配置し、メールフォームにリンクさせた「問い合わせ」ボタンを目立つ位置に配置した方が良いでしょう。
つまり、情報をレイアウトに配置する時には制作スタッフだけでなくクライアントの意向も確認しておく必要があるのです。
ワイヤーフレームの形式に決まりはありません。手書きや使い慣れているツールを代用するなど、会社やプロジェクトチームによって自由に選択できます。
例えば、ExcelやPowerPointはクライアントでも使える人が多いため修正のやり取りがしやすい反面、仕上がりが事務的になりがちです。一方、Webデザイナーが作成する場合はIllustratorなどのデザイン制作ツールに頼りたくなるでしょう。しかし、Webデザイナーがデザイン制作ツールを使用する場合、ついついデザインにこだわりすぎてワイヤーフレームの目的を見失うリスクがあります。
手書きは面倒だけど適切なツールが見つからないという時は、下記の便利ツールを活用してみるのも一つの方法です。
出典：figma
場所を選ばず作業できるブラウザ完結のツール。ワイヤーフレーム以外にもサイトマップやデザインカンプといったWeb制作に欠かせない工程が、これ1つで作れてしまう優れモノです。最大の魅力は、プレビュー画面を共有しているプロジェクトメンバーからのコメントが、画面上に表示される点でしょう。
出典：cacco
メンバーが多いプロジェクトにおすすめのツール。ソフトをインストールしなくても使えるオンライン形式なので、複数のメンバーとの同時編集が可能です。グラフや表が手軽に作図できるうえ、100種類もの豊富なテンプレートが用意されています。
1つのWebサイトをチームで作成する場合、ワイヤーフレームの作り方にも工夫が必要です。一体、どうしたらチーム作業が円滑に進むのでしょうか？
ワイヤーフレームは、誰が見ても内容が一目で把握できなければなりません。そのためには、いちいち説明しなくても意図が伝わるように下記のようなルールを事前に決定し、全メンバーで共有しておきましょう。
▼ルールの例
案件やチームメンバーにもよりますが、あくまで情報設計というワイヤーフレームの目的を見失わないように気を付けて下さい。基本的にUI・UXデザインはUIデザイナーが、ビジュアル部分はWebデザイナーが担当すべき作業です。作り込み過ぎたワイヤーフレームは、下記のようなリスクに繋がり兼ねません。
つまり、ワイヤーフレームの見た目を作り込む必要はなく、むしろ単色カラースケールでシンプルな図形に仕上げた方が正確な意図が伝わりやすいのです。
ただし、クライアントによっては綺麗に作った方が喜ばれるケースもあります。そんな時は、「デザインが完成したらもっと良くなりそう」と期待してもらえるようなワイヤーフレームを心掛けましょう。プロジェクトのモチベーションも上がって一石二鳥です。
ワイヤーフレームの制作で煮詰まった時は、下記のポイントを見直してみましょう。
ワイヤーフレームはデザインの下書きでもなければ、完成図でもありません。あくまで情報設計を表現するために作っているのです。
受付時間：平日10:00~19:00(土・日・祝日を除く)
