ワイヤーフレームはWebサイトの設計図です。ワイヤーフレームは、Webサイトの「骨格」としてページに配置するコンテンツ要素を表すボックスで構成されます。
ワイヤーフレームの目的は、コンテンツの適切な配置と階層構造を考え、ユーザーの行動を設計することです。しかし、Webサイトは膨大な量のページ、コンテンツで構成されているため、コンテンツの優先順位に迷うかもしれません。そこで、本記事ではワイヤーフレームの作り方で優先すべき3つのポイントについて解説していきます。
目次
サイトコンテンツの構造
ポイント1.サイトコンテンツの構造
まず最初に、ステークホルダーと話し合いWebサイトのコンテンツの優先度を決めましょう。
具体的には、優先度が高いコンテンツ（必須コンテンツ）、優先度が中程度のコンテンツ（あるとうれしい）、優先度が低いコンテンツ（あると良いが、なくてもいい）の3つに分けられます。
優先度を明確に理解した上で、ワイヤーフレームの作成に取り掛かりましょう。
優先度を決める目標は、各ページでコンテンツを効果的に構成することにあります。コンテンツを構成する際は、以下のような自問自答をしてみましょう：
- 作成中の構造によってページの目的が達成されるか
- ユーザーが選べる行動は明確か
- ユーザーがどのような疑問をもつ可能性があるか
例えば、あなたのワイヤーフレームは優先度の高いコンテンツをユーザーに明確に提示していますか。ユーザーは必要なものを見つけることができ、重要なアクションに向け誘導されているでしょうか。
■ 初期段階のワイヤーフレームの見た目は極力シンプルに
コンテンツの優先度を決めて、コンテンツ構造を精緻に作りこむことがワイヤーフレームの最重要目標です。
初期段階では、ワイヤーフレームの見た目は極力シンプルにして、クリエイティブなビジュアルなど見た目のデザイン性は後のプロセスにとっておきましょう。
基本的な図形とモノトーンの濃淡だけを使い、ワイヤーフレームの構造によってコンテンツ階層を表現します。
このとき、実際に使用するテキストを挿入すると、各要素に適切な容量をわり当てられます。実際のテキストが利用できない場合は、コールトゥアクション（CTA）やページヘッダーだけでも暫定のテキストを作成しましょう。ビジュアルはまだ入れない方が余計な混乱を避けることができ、プロジェクトの進行を補助する設計図になります。
明確なナビゲーション
ポイント2.ナビゲーション
Webサイトに訪問したユーザーをコンテンツに適切に誘導するためには、明確でわかりやすいWebサイトの目次である「ナビゲーション」が必須です。
ナビゲーションメニューの位置やメニュー内の構成や階層など、些細なことのように思われがちですが、ナビゲーションはトラフィックやコンバージョンなどに大きく影響します。
ナビゲーションは以下の2つのルールを守って作成しましょう：
- メインナビゲーション内のアイテム数を7未満に制限する
- 最も重要なページを最初と最後に配置する
■ ナビゲーションメニューはわかりやすく
メインのナビゲーションメニューの項目は4つから5つにまとめましょう。
項目が多いと、サイトの構成がわかりづらく、ユーザーを誘導するのが難しくなります。
有名な心理学者ジョージ・ミラーが1956年に発見したように、人間の脳の短期記憶は一度に約7個しか覚えられません。つまり、サイト内のナビゲーション内の項目が多ければ多いほど、ユーザーがその情報を覚えて処理するのが難しくなります。
メインナビゲーションに5つ以上のアイテムが必要な場合は、ドロップダウンメニューやメガメニューを使用してサブページを作りましょう。
■ 優先度を踏まえた順序にする
重要なのはメニュー項目の数だけではありません。その順序も大切です。
メニューの最初と最後にある項目に人は注意を払う傾向にあり、よく覚えています。これを系列位置効果といいます。
重要な項目はナビゲーションの最初か最後に配置すると、ユーザーの印象に残りやすくなります。目立たせたい項目やユーザーが求めている項目は、順序による効果を考え意図的に配置しましょう。
メニュー項目を作成するときは以下のような自問自答をしてください：
- ユーザーがもっとも見たいページはどれか
- ユーザーに見せたいページはどれか
- ナビゲーションにサブページは必要か、もし必要なら何ページか
- コンテンツが消化しやすくなっているか、細分化しすぎていないか
コンテンツの配置とCTA
ポイント3.コンテンツの配置
ページにコンテンツを配置するときは、ユーザーがどのように読むか意識することが大切です。
通常は本を読むのと同じようにコンテンツも上から下、左から右へ読まれます。
ただし、Webサイトの場合は、コンテンツのサイズ、形、色、そして余白などにもユーザーの注目が左右されます。
そのため、ワイヤーフレームの作成に取りかかるときは必須コンテンツをどこに配置するか優先順位を決めましょう。
■ CTAや画像をランドマークとして利用する
CTA、動画、画像などをランドマークとして使い、コンテンツ階層に基づいてそのランドマークの周りに他の要素を配置していきます。
ワイヤーフレームの大枠ができたら、どこに一番目が引き寄せられるか客観的に確認しましょう。
CTAのような重要な要素に目がいきますか？それとも他に引き寄せられてしまう場所がありますか？
優先度の高いコンテンツは、目が引き寄せられた場所に配置しましょう。さらに周囲のコンテンツを使って次に見てもらいたい方へユーザーを誘導します。
コンテンツが適切に配置されていないとユーザーに間違った印象を与え、ページの目的や目標を誤解されます。
あなたの目標はコンバージョン率を上げることや単に最後まで読んでもらうことかもしれません。その目標に応じてコンテンツの配置を工夫して、ユーザーを誘導しましょう。
まとめ
Webサイトコンテンツをワイヤーフレームで適切に配置し、ユーザー体験を高めることができれば、ユーザーは望んだ行動をしてくれるでしょう。
本記事では紹介したWebデザインとコンテンツマーケティングの中心にある原則を、ワイヤーフレームを作るときに念頭に置いておくと、コンテンツの優先順位を間違わないはずです。
Webサイトは、様々な要素が組み合わさってユーザーのコンバージョンにつながっています。本記事がワイヤーフレームを作るときの参考になると幸いです。
▼ワイヤーフレームの作り方に関連する記事はこちら
