はじめに

制作会社と話していると「ワイヤーフレーム」って言葉が出てきたりします。「ん？ワイヤーフレームって何？」と思われた経験のお持ちの方、多いのではないでしょうか。ウェブサイトを作る過程を見たことものない方にとってはご存じない方も多いかもしれません。

そこでこの記事ではウェブサイトのワイヤーフレームについて解説します。さらにワイヤーフレームを作ることで依頼者側と制作会社にどのようなメリットがあるかについても解説します。

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

ワイヤーフレームのワイヤーは「針金・線」などの意味で、フレームは「枠組み」です。つまり、各ページをデザインする前に作成した「線で描いた枠組み」です。

その枠組みにはそれぞれのページのどの位置に何の情報を入れるかを書いた図面です。言ってみればラフなスケッチです。

もう少し詳しく言うと説明します。ワイヤーフレームとは、ホームページ上に作成するページのコンテンツの配置や大きさをおおまかに決めて、完成したらこんな感じのページになると見ただけで分かるように書き出した図面です。

サイトマップは情報の見出しを簡潔に記載するので、ワイヤーフレームではどんなテキストがどこに入るのか、どの画像をどのように配置するのか、実際の導線はどんな風になっているのか、サイトマップでは表現しきれなかった部分を図として落とし込んでいきます。

ワイヤーフレームを作成するべき理由

新規にしてもリニューアルにしてもホームページ制作を検討する背景、目的、目標があります。それらはいずれも抽象度の高いものです。これをワイヤーフレームにより視覚化され、より具体的な施策に落とし込まれます。ワイヤーフレームを作成することで目的、目標と施策にずれがないか発注者（クライアント）と制作会社、あるいは双方の社内メンバー間で認識を共有できます。

ワイヤーフレームを作成することで、Webページのレイアウトや搭載させる機能の種類を可視化できるため、制作者間でWebサイトの完成イメージを共有できます。また、開発途中でもワイヤーフレームをもとに意思疎通を図りやすくなり、見直しや改善なども適切に行えます。

ワイヤーフレームを作成して１回のレビューで関係者から合意を得るというよりも、繰り返しレビューをもらったり、関係者からアイデアを出してもらいながらブラッシュアップしていくと完成度の高い（つまり後工程での修正や手戻りの少ない）ワイヤーフレームを作成できます。

デザイン設計の開始前にこの図を作成しておくことで、後工程であるデザインや制作作業がスムーズに進みます。また、複数のメンバーでデザインを考えるときにも、方向性を一致させるためにワイヤーフレームは重要になります。言葉だけで考えを伝えるのは難しいですが、設計図にして見える化することでより伝わりやすくなり、考え方の不一致を減らすことができます。

ワイヤーフレームの果たす役割

例えば、社内の複数メンバーがホームページ制作に関わる場合、これからどのようなものを作り上げるのか、認識を一致させなければなりません。これは発注側（クライアント様）と制作会社の両方にあてはまります。

ワイヤーフレームを作ることにより、メンバーと認識をこれから進んでいく方向性を共有し、不要な誤解や勘違い、先に進んでからの手戻りを防止できます。

また、クライアントと打ち合わせをする際も、ワイヤーフレームがあれば言葉だけ、あるいは文字だけで伝えるより説明時間が省略でき、便利です。クライアントに仕上がりを視覚的にイメージしてもらい、要望や修正点を聞いて制作に反映させることができます。

発注者（クライアント様）の中にはちょっと面倒に感じる方もいらっしゃるかもしれませんが、結果的にはそれが効率的かつ効果的なホームページ制作につながります。

もしもワイヤーフレームを作らずにデザイン設計を開始すると、その後、「この項目が抜けていた」「このページを見せたいのに移動しづらい」といったことが発生します。そのため、例え「つまらない」と感じたとしても、ホームページ制作の際には必ずワイヤーフレームを作成し、発注者（クライアント様）の了解を得てからデザイン設計に進みましょう。

ワイヤーフレームを作る目的は？

ワイヤーフレームは、ホームページ制作の最初の段階である抽象的なサイトマップからさらに具体化、視覚化した存在で、より具体的で理解しやすい要素を含みます。ワイヤーフレームには以下のような目的があり、いずれも相互に関連しています。

情報要素の過不足確認と配置位置確認

ワイヤーフレームはこの前工程で作成されたサイトマップを元に作成されます。ワイヤーフレームにより各ページに配置する情報要素に過不足がないか確認できます。また、機能の動作、配置位置を把握でき、機能の実装方法を具体的に想定しやすくなります。作っていくうちに目標にそぐわない機能やコンテンツの採用を取りやめることもできます。クリエイティブによる影響を極力取り除き、情報のみにフォーカスすることで、設計者もレビュアーもこのタスクで評価すべき内容にフォーカスできます。

ユーザー視点の操作性確認

ワイヤーフレームを利用することで、リンク名、コンバージョンにつながるパス、使いやすさ、ナビゲーションや機能の配置を客観的に見渡すことができます。加えて、サイトのアーキテクチャや機能の欠陥の特定や、ユーザーの視点からホームページ全体の使用感の確認もできます。

また、クライアント様の業種、業界に特有の習慣や用語など、ホームページ制作会社にとっては知らない内容は多くあります。設計の上流工程でクライアント様からフィードバックを受けることでクライアント様に合ったレイアウトや使用感にすることができます。

拡張性をもった設計ができる

近い将来にサイトのコンテンツ追加の予定がある場合、使いやすさやデザインの影響を最小限に抑えつつコンテンツ増に対応できるよう、ホームページを設計する必要があります。ワイヤーフレームを作成することで、こうしたコンテン拡充の可能性や対応策などを把握することができます。また、このことを発注者様（クライアント）と制作会社で開発の初期段階で共有できます。

レビュー品質の向上できる

ワイヤーフレームを使えば、コンテンツやレイアウト、機能といった情報要素と、デザインやイメージといったクリエイティブ要素をすべて一度に盛り込むのではなく、これらを別々に検討できるようになります。このため、必要とするフィードバックが適切に得られます。汎用的なツールでワイヤーフレームを作成すれば、修正や手戻りにかかる時間も大幅に削減できます。

まとめ

この記事ではワイヤーフレームの役割や作成する目的について解説しました。

この記事の内容を理解し、発注者側でもある程度準備しておくことで制作そのものも、制作会社とのやり取りもスムーズに進行します。特に制作の初期段階での決定事項はその先のスケジュールにも大きく影響するため、非常に重要です。制作会社に任せきりではなく、ワイヤーフレーム作成には発注者様も深く関わることで目標達成に近づくことができます。

合同会社中丸屋ではホームページ制作を行っています。ワイヤーフレームもこだわりをもって作成しています。もちろん、クライアント様のレビュー＆フィードバックを繰り返すことでご満足いただくものをご提供しています。

ホームページ制作やリニューアルの準備を進める中で分からない点や判断に迷う点など出てきましたら気軽にご連絡ください。相談だけでも大歓迎です。