ホームページ制作の過程で、制作会社に思ったように意図が伝わらず、困った経験はありませんか？
ホームページ制作は、デザインや導線など、感覚的な要素も多いため、事前にしっかりとコミュニケーションを取らなければ「言った・言わない」の問題になりがちです。
今回の記事では、そんなホームページ制作のトラブルを事前に防ぐ「ワイヤーフレーム」の重要性と基本的な作り方をご紹介します。
「ワイヤーフレーム」とは、ホームページを制作する過程で、発注者、Webディレクター、デザイナー、コーダーなど、ホームページ制作に関わるすべての人が、「どのようなホームページを制作するか」を共有するために作られる、いわばホームページの「設計図」のようなものです。「ワイヤー」「ワイヤーフレーム」など、会社によって呼び方はさまざまですが、制作するホームページに必要な「コンテンツ要素」「機能」「情報」などがわかりやすく配置されています。
ホームページ制作を制作会社に依頼する場合、ワイヤーフレームは、発注者の意図をヒアリングしたうえで、制作会社が作成するのが一般的ですが、発注する側のお客さまも、ホームページ制作の工程や、大まかなホームページの構成のイメージを持つことができれば、コミュニケーションはよりスムーズになります。
下記は、ホームページ制作会社がホームページを制作する工程を大まかにわけたものです。
上記のように、ホームページ制作のフローには、多くの人が関わります。ワイヤーフレームが無ければ、発注元であるお客さまとの間に誤解が生じてしまうのはもちろんのこと、デザイナーやコーダーなどへ制作意図を正しく伝えることができず、ムダな修正が重なる恐れもあります。
また、サイトができあがってから、他の運用担当者に引き継ぐ場合や、リニューアルの際などにも、どのような意図でサイトを制作していたのかを伝える資料があれば、更新を重ねるごとに「構成が崩れてしまう」のような問題も防ぐことができます。
このような理由から、ワイヤーフレームで、お客さまと制作会社が相互に確認しておくことは重要なのです。
では、ホームページのワイヤーフレームには、具体的にどのような要素があればよいのでしょうか。
前項にも書いたように、一般的には、ワイヤーフレームを作成する前に、ツリー型のサイトマップやディレクトリマップで「どのページを、どのような階層で、何ページ作るか」を確認することが一般的です。このサイトマップやディレクトリマップに基づき、1ページのなかの構成要素とそのレイアウト、ページのなかの機能をまとめます。下記は、ワイヤーフレームに必要な要素の一例です。
上記のような要素をワイヤー（線）で表現し、レイアウトを決めていきますが、デザインカンプではないため、ここではコンテンツの詳しい内容や、デザインの要素はまだ必要ではありません。制作会社の方針によってもさまざまですが、ワイヤーフレームでは、あくまでコンテンツのレイアウトや導線、機能を確認する資料として、シンプルに制作されるのが一般的です。また、効率的に作業を進めるため、トップページと下層1ページなど、レイアウトの元になる主要ページに絞ってワイヤーフレームを作成する場合もあります。
ワイヤーフレームの作り方は、手書きから専用ツールを使う方法までさまざまで、どれが正解というわけではありません。
シンプルな1ページもののLPを作る場合や、急いで進行しなければならない場合は「手書き」で、入り組んだ設計が必要な場合や、確認・修正が多い場合は専用ツールを使って資料を作るなど、要件や状況に応じて選択してください。
手書きでワイヤーフレームを作成する場合は、必要な要素にしぼってシンプルにまとめましょう。ツールで作成する前の下書きとして、まずは手書きで構成を考えることも有効です。
Office系ソフトのなかでは、比較的レイアウトがしやすいため、Power Pointでワイヤーフレームを制作することもよくあります。デザイン系の専門ソフトがなくても、一般的なOffice環境でファイルを開いたり、修正したりしやすいのもポイントです。
ワイヤーフレーム専用ツールは、画像やボタンなどホームページに必要な汎用的なアイコンやパーツがあらかじめ用意されており、レイアウトが簡単な点がメリットです。また、チームでファイルを共有し、検討や修正がしやすい機能がついている場合もあります。Webブラウザ上で編集するもの、パソコンにインストールして使うものなど、さまざまなツールのなかから代表的なものをご紹介します。
近年では、WebデザインにUI（ユーザーインターフェース）や、UX（ユーザーエクスペリエンス）が重視される傾向にあり、ホームページの設計やデザイン時点で、ワイヤーフレーム内にリンク先の遷移などの動きまで設定し、「プロトタイプ」としてユーザビリティを試行錯誤ができるツールも増えてきています。
すべてのホームページ制作のケースでこのような高度なワイヤーフレームを作成する必要はありませんが、「ホームページ制作の設計図を関係者で共有する」という基本姿勢は大切です。ワイヤーフレームの基本をおさえて、スムーズなホームページ制作に役立てましょう。
合わせて読みたい
【事例付き】ECサイトのトレンド「VRコマース」とは？
無料で使える！写真加工ソフト5選
Web制作会社に希望の完成イメージを伝えるために「ワイヤーフレーム（構成案）」を作ろう
CMSの概要と種類を１から解説！無料から有料までおすすめCMSをピックアップ。
