03. 情報設計の基本

この章では、情報設計の基本を学びます。

情報設計とは、ページを見る人に対して、何をどの順番で伝えるかを整理することです。

見た目を作る前に情報を整理すると、ページ全体の流れがわかりやすくなります。

情報設計とは

情報設計は、Webページの設計図を作る作業です。

具体的には、次のようなことを考えます。

  • 誰に向けたページか
  • 何を伝えたいか
  • どの情報が一番重要か
  • どの順番で読んでもらうか
  • どこで次の行動へ進んでもらうか
  • どの情報を省くか

情報設計ができていないと、あとから見た目を整えても、何を伝えたいページなのかわかりにくくなります。

誰に向けるかを決める

まず、ページを見る人を考えます。

誰に向けるかによって、使う言葉、見せる順番、強調する情報が変わります。

たとえば、同じ美容室サイトでも、ターゲットによって見せ方は変わります。

ターゲット強調したい情報
初めて来店する人店舗の雰囲気、メニュー、料金、場所
既存のお客様予約導線、営業時間、キャンペーン
採用候補者働く環境、スタッフ、募集要項

ターゲットを決めると、ページに必要な情報が見えてきます。

目的を決める

次に、ページの目的を決めます。

目的が曖昧だと、何を強調すればよいかわかりません。

Webページの目的には、次のようなものがあります。

  • 問い合わせしてもらう
  • 予約してもらう
  • サービス内容を理解してもらう
  • 採用応募してもらう
  • 料金を確認してもらう
  • 店舗に来てもらう
  • 信頼感を持ってもらう

1つのページに複数の目的があることもあります。

その場合は、優先順位を決めます。

情報を洗い出す

目的が決まったら、必要な情報を洗い出します。

最初は順番を気にせず、必要そうな情報を書き出します。

たとえば、店舗サイトなら次のような情報があります。

  • 店舗名
  • キャッチコピー
  • 店舗の特徴
  • メニュー
  • 料金
  • 写真
  • 予約方法
  • 営業時間
  • アクセス
  • よくある質問
  • お知らせ
  • お問い合わせ

この段階では、全部をページに入れると決める必要はありません。

まず候補を出します。

優先順位を決める

情報を洗い出したら、優先順位を決めます。

ページの上部には、重要度の高い情報を置きます。

ただし、重要な情報をすべて上に詰め込むと、かえって読みにくくなります。

次のように考えると整理しやすくなります。

  1. 最初に何のページか伝える
  2. 誰に向けた内容か伝える
  3. 興味を持つ理由を伝える
  4. 詳細情報を見せる
  5. 不安を減らす情報を置く
  6. 行動につながる導線を置く

情報は、読む人の理解の流れに合わせて並べます。

セクションに分ける

情報は、セクションに分けると読みやすくなります。

セクションとは、ページ内の大きなまとまりです。

たとえば、サービスサイトなら次のように分けられます。

  • ファーストビュー
  • 課題提起
  • サービスの特徴
  • できること
  • 実績
  • 料金
  • 導入の流れ
  • よくある質問
  • お問い合わせ

セクションごとに役割を決めると、ページの流れが作りやすくなります。

導線を考える

情報設計では、導線も考えます。

導線とは、ページを見た人が次に進むための道筋です。

たとえば、予約してほしいページなら、予約ボタンをどこに置くかを考えます。

ただし、いきなり予約ボタンだけを置いても、相手がまだ判断できない場合があります。

その場合は、次のような流れを作ります。

  1. 何のサービスか理解する
  2. 自分に合うか確認する
  3. 料金や流れを見る
  4. 不安を解消する
  5. 予約や問い合わせへ進む

導線は、読む人の気持ちの流れに合わせて置きます。

いらない情報を減らす

情報設計では、載せない情報を決めることも大切です。

すべてを載せようとすると、ページが長くなりすぎたり、重要な情報が埋もれたりします。

次のような情報は、必要性を確認します。

  • 目的と関係が薄い情報
  • 古い情報
  • 重複している説明
  • 読む人が知りたい順番から外れている情報
  • 別ページに分けた方がよい情報

情報を減らすことは、内容を薄くすることではありません。

重要な情報を伝わりやすくするための整理です。

この章のまとめ

  • 情報設計は、誰に何をどの順番で伝えるかを整理する作業
  • 見た目を作る前に、ターゲットと目的を決める
  • 情報を洗い出し、優先順位を決めてセクションに分ける
  • 導線は、読む人の理解や気持ちの流れに合わせて置く
  • いらない情報を減らすことで、重要な情報が伝わりやすくなる