ワイヤーフレームとは、ホームページの設計書です。たとえば家や建物を建築する場合、図面などの設計書をもとに建築しますよね。ワイヤーフレームも同じ役割だと思ってもらえれば理解が早いと思います。
ワイヤーフレームの作り方は、大まかに次の工程になります。
- 自社情報を整理し情報の設計をする
- トップページの構成・レイアウトを作る
- 下層ページの構成・レイアウトを作る
- 各ページの導線設計をする
- 機能要件を確認する
- 原稿を入れ込む
これらの工程でワイヤーフレームを作っていきます。自社情報の整理や、サイトマップの作成など、ワイヤーフレーム作成の前に必要な作業もあるのでご紹介していきます。
ワイヤーフレームを作る目的とは
家や建物を、設計書がない状態で建築するとしたら。その家や建物は完成までたどり着けるでしょうか。
ホームページ制作において、ワイヤーフレームは同じ役割を果たします。ワイヤーフレームは、次の工程である制作工程をスムーズに進行するために制作するものです。そして、クライアントに対してホームページの完成イメージを伝え・仕様などの合意形成を図るために用います。
設計の段階で仕様上の問題点やクライアントの齟齬がない状態にしておかないと、ホームページ制作は成功しないといって過言ではないでしょう。これは、僕が今までホームページ制作の現場で経験した数々のトラブルから得た教訓でもあります。
ワイヤーフレームがないホームページ制作は危険
ホームページ制作の制作工程は、大きく分けて設計・制作のふたつに分かれます。設計の割合は制作工程全体の7割を占め、ワイヤーフレームの作成は設計の工程で重要な役割を果たします。
ワイヤーフレームは建築でいえば設計書です。基本的には全ページワイヤーフレームを作り、各ページごとにレイアウトや機能、原稿・導線などの詳細を書き込んでいきます。
ワイヤーフレームがなければ制作工程にバトンを渡せないのです。ワイヤーフレームがないまま制作を進めると、思い描いたホームページにならず、必ずといっていいほど制作のやり直しが発生します。時間もお金も失ってしまいます。
ワイヤーフレームとデザインは一緒に制作してはいけない
ワイヤフレームの制作とホームページのデザインは切り分けて考えましょう。ワイヤーフレームとデザインを同時に行うと、設計に修正が入るたびにデザインの修正も必要になります。結果、二度手間になり工数の圧迫をします。
ワイヤーフレームはデザインに近い作業なため、制作工程を短縮するために、ワイヤーフレームとデザインを一緒に制作してまう方もいますが、お勧めしません。
ワイヤーフレームの作成はディレクターの作業であり、デザイナーはデザインを担当するべきです。
ワイヤーフレームの作り方
では、実際にワイヤーフレームの作り方をご紹介します。冒頭で紹介しましたが、以下の工程で進めていきます。
- 自社情報を整理し情報の設計をする
- トップページの構成・レイアウトを作る
- 下層ページの構成・レイアウトを作る
- 各ページの導線設計をする
- 機能要件を確認する
- 原稿を入れ込む
自社情報の整理をしてコンテンツを考える
ホームページに掲載するコンテンツを考えるために、自社分析し情報を整理しましょう。マーケティングのフレームワークを活用すると整理がしやすくなります。
ホームページに必要なページやコンテンツを考えます。ディレクトリマップ（サイトマップ）を作成してリストしていきましょう。
トップページの構成を作る
トップページはホームページ全体の方向性を決める大事なページです。トップページの設計が決まれば、おのずと下層ページの構成も決まっていきます。
大きく分けて以下の内容を設計していきます。
- メインビジュアル
- ヘッダー
- グローバルナビゲーション
- ファーストビュー
- 各下層ページの概要
- オファー（お問い合わせ）
- フッター
ヘッダーやフッター・グローバルナビなどは、ホームページ全体で共通するブロックになります。
メインビジュアル
あなたのホームページの印象が決まります。メインビジュアルは企業を象徴する画像とキャッチコピーで構成されます。
ヘッダー
ヘッダーはロゴ・グローバルナビゲーション、お問い合わせボタンなど、ホームページ全体に共通するパーツで構成されます。
グローバルナビゲーション
ホームページ内の、主要ページや主要カテゴリーのリンクで構成されます。ホームページ内をページ遷移しやすくし、ユーザーの利便性を高める重要なコンテンツです。
ファーストビュー
ユーザーがホームページを訪れた際、最初に目に入る領域をファーストビューといいます。メインビジュアル・キャッチコピー・リードコピー・訴求コンテンツなどで構成され、高さ650px前後に収まるように構成します。
各下層ページの概要
トップページは、下層ページへのハブ（中継地点）の役割を果たします。下層ページの概要を紹介する画像や文章、リンクなどのコンテンツを構成していきます。
オファー（お問い合わせ）
ユーザーの行動を促します。お問い合わせページへのリンクや電話番号・各種連絡先など、直接的な売上やお問い合わせにつながるコンテンツを配置します。
フッター
ホームページ全体のコンテンツを見通せるように、各ページへのリンクを配置します。プライバシーポリシーページやセキュリティポリシーページへのリンク、コピーライトを配置します。フッターはホームページ全体で共通して配置するコンテンツです。
下層ページの構成・レイアウトを作る
トップページのワイヤーフレームを複製して、下層ページの設計をしていきます。ホームページで共通して使われる、ヘッダーやフッター・グローバルナビゲーションなどのコンテンツはそのまま使いましょう。
ページヘッダー
下層ページは、そのページがどんなページであるかページのタイトルになるページヘッダーから始まります。画像とタイトルテキストで構成され、高さ400px前後で構成されます。
パンくずリスト
パンくずリストは、ユーザーがページの現在地を知るために、ページの遷移をたどるためのテキストリンクです。上層にあたるページから順にリスト形式で掲載していきます。
下層ページのコンテンツが多い場合
下層ページが何ページものコンテンツになる場合、下層ページのトップページを作ります。下層トップページは、各下層コンテンツの概要を掲載し、画像・概要テキスト・リンクで構成します。
各ページの導線設計をする
トップページと下層ページの設計が終わった段階で、ホームページの導線を見直しましょう。大切なことは、ユーザーの視点にたって導線を見直すことです。
ユーザーが探している情報にたどりつきやすい設計になっているか、お問い合わせや商品購入などのユーザーアクションはスムーズにできるかなど、ユーザーファーストを心がけましょう。
機能要件を確認する
ユーザーや管理者にとって、ホームページの利便性を上げるための機能要件を書き加えていきます。
設計の段階でホームページの機能を決めておくことで、後の制作工程がスムーズに進行できます。エンジニアは機能に関する実装方法を調べたり事前に検証ができるので、設計のやり直しを防ぎ、修正を繰り返すリスクが防げるのです。
お問い合わせ
どんなお問い合わせ内容が必要か、必須項目はどんな項目かを決めておきましょう。また、確認ページやサンクスページ（お問い合わせ完了ページ）の有無、送信先のメールアドレスなども記載しておくといいでしょう。
使用するシステム（CMS）
ホームページを更新・管理するマネジメントシステムの導入箇所などを記載します。更新の多いページやブログなどは、別途システムの調整が必要になるため、クライアントに確認をとり、事前に決めておきましょう。
システム導入にクライアントとの齟齬があると、大幅な修正を求められるなど、大きなリスクに発展するケースがあります。
画像スライダーの設置
トップページのメインビジュアルに、画像のスライダーを導入するかなど確認をしておきます。
ページトップ
ページの上部まで、戻るためのボタンを設置するか確認をします。
追従ヘッダー
ユーザーの利便性向上のため、ヘッダー部分を固定して表示するか確認をします。
レスポンシブWebデザイン
レスポンシブWebデザインのためにワイヤーフレームを別途制作します。全ページ制作する必要はありませんが、主要ページは作成するようにしましょう。
ユーザーが、パソコン・スマートフォン・タブレットなど、どのデバイスで閲覧したときもホームページが最適化されて表示できるようにします。
原稿を入れ込む
ワイヤーフレーム作成の時点で原稿を入れていきます。クライアントに原稿の作成を依頼するか、ディレクターが原稿の作成を行うことが、制作会社では一般的です。
原稿の作成が後回しになってしまうと、後工程の進行を妨げる場合があります。原稿の文字数によって、レイアウトやデザインの調整が必要になったり、原稿が揃わないためにホームページのリリースができないなど、進行はどんどん遅れていきます。
ワイヤーフレームの段階で、簡単な言い回しの確認や文法チェックも終わらせておきましょう。
ワイヤーフレーム制作ツール
ワイヤーフレームはデザインソフトで制作します。ワイヤーフレームの制作データをベースにして、そのままデザインデータを制作すると効率よく制作できます。
手書きのワイヤーフレーム
小規模なホームページの場合は、手書きでワイヤーフレームを制作する場合があります。また、デザインデータで作り込む前に下書きとして、手書きで作成するものいいでしょう。
ワイヤーフレームを制作する時に使うデザインツール
では、制作会社でよく使われるワイヤーフレーム制作ツールをご紹介します。
Excel・PowerPoint
マイクロソフトの製品は導入企業が多いので、クライアントへの確認作業は、しやすいメリットがあります。しかし、もともとの表計算やプレゼンテーションのソフトのため、細かいレイアウトの調整やコメントなどがしづらく、中規模以上のホームページ制作には向いていません。
Adobe XD・ほかAdobeデザインツール
一般的によく使用されるツールはAdobe XDです。Adobe XDは、Webデザインに特化して作られてたデザインツールで、ワイヤーフレーム制作を手助けする機能が豊富にあることが特徴です。また、同じAdobe製品のIllustratorやPhotoshopとの連携機能があり、データの組み合わせが容易になります。
ただし、クライアントはAdobe製品を使用していない場合が多く、ワイヤーフレームの確認方法などは、あらかじめクライアントに説明しておいたほうがいいでしょう。
Cacoo（カクー）
株式会社ヌーラボが提供している、オンラインのワイヤーフレーム制作ツールです。オンライン上で制作できるので、複数人での共同編集が簡単にできます。確認作業もオンライン上でワイヤーフレームのURLを発行し、共有するだけで簡単です。
Figma・Sketch
Webデザインやアプリデザインに特化した、Figma（フィグマ）・Sketch（スケッチ）なども、制作会社では使われています。ホームページの部品が簡単に制作できたり、リンクの導線設計も行えるなど、豊富な機能を搭載しています。macOS限定なので注意が必要です。
ワイヤーフレームは作り込み過ぎないこと
ワイヤーフレームはモノクロで制作し、簡単なブロックレイアウトにとどめておきましょう。
ワイヤーフレーム作成の段階で、レイアウトや装飾などのデザインをしてしまった方が効率的だと思うかもしれません。しかし、設計に変更が入ったり、コンテンツの削除・追加が入ってしまうと、デザインを根本から見直さなくてはなりません。結果的に修正コストが大きくなります。
ワイヤーフレームの作成とデザインの作成は切り分けて作業し、修正が入る前提で作り込みをしないようにしましょう。
プロトタイプ（試作品）とは
プロトタイプとは、ホームページの完成をイメージするため、簡単な試作品をつくることです。
先ほど紹介したワイヤーフレーム制作ツールの多くは、プロトタイプを実装できる機能が備わっています。各ページごとにリンク先を指定して、ページ遷移の確認をしたり、実機での見え方を再現し、ユーザビリティー（ユーザーの利便性）の検証をすることが目的の機能です。
無料ホームページ制作ツールを使用して、プロトタイプを制作することもあります。
ホームページ制作の成功はワイヤーフレームで決まる
何度も言いますが、ワイヤーフレームは設計書です。設計書がきちんと描けていれば、ホームページ制作が失敗する可能性は少なくなります。
ホームページ制作の作業は、ほとんどが設計や情報整理に費やされます。ワイヤーフレームの段階でできる確認やコンテンツの精査を怠ると、後のデザインやコーディングの作業がうまく運ばないでしょう。
この記事で紹介した、ワイヤーフレームの作り方を参考に、ホームページ制作にお役立てください。
