Web制作で知っておくべきFigmaの学習 #Day22「Information Architecture」

Webサイトやアプリを作るとき、必要な情報が揃っていても、ユーザーがその情報を見つけられなければ、使いやすいサービス（サイト）にはなりません。 例えば、会社のWebサイトにサービス紹介、料金、制作実績、お問い合わせの情報がすべて掲載されていたとしても、 どこに何があるのかわからなければ、ユーザーは目的の情報にたどり着けません。 反対に、情報が適切に分類され、ページの関係やナビゲーションが整理されていれば、 ユーザーは自分が知りたい情報を見つけやすくなります。 このように、情報を分類し、関係性を整理し、ユーザーが理解しやすい構造を作ることを Information Architecture（IA：情報設計） と呼びます。 前回の学習では、目的・ユーザー・課題を整理し、何を作るべきかを考えました。 今回は、その結果をもとに、情報をどのような単位に分け、どのページに配置し、どうつなげるかを設計していきます。 会社のWebサイトを題材に、FigJamで情報を整理し、Figma Designで画面設計に進むための土台を作りましょう。

Information Architectureとは何か

Information Architectureは、情報を整理し、ユーザーが理解・発見・利用しやすい構造を設計する考え方です。 Webサイトであれば、次のようなことを考えます。

どのような情報が必要なのか 情報をどのようなカテゴリに分類するのか どの情報を同じページにまとめるのか ページ同士をどのようにつなぐのか ユーザーが目的の情報にどうやってたどり着くのか

多くの場合、会社のWebサイトには、 会社概要、サービス紹介、料金、制作実績、お知らせ、お問い合わせ などの情報があります。 これらを無秩序に並べるのではなく、ユーザーが理解しやすいまとまりに分類し、適切なページ構成を考えます。

IAは見た目のデザインとは異なる

情報設計とビジュアルデザインは、関連していますが、役割が異なります。

項目	主な役割
情報設計（IA）	情報の分類、ページ構成、情報同士の関係を決める
UIデザイン	情報や操作要素を画面上に配置し、使いやすく表現する
ビジュアルデザイン	色、文字、形、余白などを使って視覚的な印象を整える

例えば、「料金をサービス紹介ページに掲載するか、独立した料金ページにするか」は情報設計の判断です。 一方、「料金をどの色や文字サイズで表示するか」は、主にUI・ビジュアルデザインの判断です。 先に情報設計を行うことで、見た目を作った後にページ構成を大きく変更するリスクを減らせます。

情報設計で考える4つの要素

情報設計では、主に次の4つを考えます。

① 情報の分類

情報を意味や目的に応じてグループに分けます。 会社のWebサイトであれば、次のように分類できます。

会社に関する情報：会社概要、代表者、所在地 サービスに関する情報：サービス紹介、料金、導入事例 最新情報：お知らせ、イベント情報 問い合わせに関する情報：お問い合わせ、資料請求

分類することで、情報の全体像がわかりやすくなります。

② ページ構成

分類した情報を、どのページに配置するか決めます。 シンプルな会社のWebサイトであれば、会社概要と所在地は同じページにまとめられるかもしれません。 一方、サービスの種類が多ければ、サービス一覧ページと個別のサービス詳細ページに分ける方法も考えられます。 情報量やユーザーの目的に合わせて、ページを分割するか、まとめるかを判断します。

③ 階層構造

ページ同士の親子関係や階層を整理します。 例えば、次のような構造です。

トップページ │ ├ サービス │ ├ Webサイト制作 │ └ システム開発 │ ├ 制作実績 │ ├ 会社概要 │ └ お問い合わせ

この構造では、「Webサイト制作」は「サービス」の下に位置しています。 ただし、すべてのページを階層構造だけで表現する必要はありません。 重要なページをトップページや共通ナビゲーションから直接開けるようにするなど、ユーザーの利用目的に合わせた構成も必要です。

④ ナビゲーション

ユーザーがページ間を移動するための仕組みを設計します。 主要な仕組みは、

ヘッダーのメニュー パンくずリスト ページ内リンク フッターのリンク

などです。 情報が適切に分類されていても、その分類やページ構造がユーザーに伝わらなければ、目的の情報を見つけにくくなります。 情報の構造と、それをユーザーに伝えるナビゲーションは、セットで考える必要があります。

実習：会社のWebサイトの情報を整理する

ここからは、架空の会社のWebサイトを題材に、情報設計を行います。 前回の学習で設定した目的は、「見込み顧客がサービス内容を理解し、問い合わせできるようにする」でした。 今回は、この目的を達成するために、どのような情報が必要かを整理します。

手順1：必要な情報を洗い出す

まず、FigJamを開き、付箋を使って必要な情報を書き出します。 例えば、次のような情報です。

- 会社の基本情報 - サービスの特徴 - サービスの詳細 - 料金 - 制作実績 - お客様の声 - よくある質問 - お問い合わせ方法 - 最新のお知らせ

この段階では、まだページへの割り当てを決めません。 まずは必要な情報を洗い出し、全体像を把握します。

手順2：似た情報をグループ化する

書き出した付箋を、内容やユーザーの目的に応じて分類します。 今回は、次のようにまとめてみました。

グループ	含める情報
サービス	サービスの特徴、サービス詳細
料金・導入検討	料金、導入条件、よくある質問
信頼性	制作実績、お客様の声、会社情報
最新情報	お知らせ
問い合わせ	問い合わせ方法、問い合わせフォーム

この分類はあくまで一例です。 実際には、サービスの内容やユーザーが知りたい順序に合わせて分類します。 例えば、料金がサービスごとに大きく異なる場合は、料金をそれぞれのサービス詳細ページに掲載する方法もあります。

手順3：分類した情報をページに割り当てる

次に、情報をどのページに配置するか決めます。 今回は、次のようなページ構成が考えられます。

Webサイト │ ├ トップページ │ ├ サービスの概要 │ ├ 主な特徴 │ └ 問い合わせへの導線 │ ├ サービス紹介 │ ├ サービスの詳細 │ └ 提供内容 │ ├ 料金 │ ├ 料金 │ ├ プラン │ └ 導入条件 │ ├ 制作実績 │ ├ 事例 │ └ お客様の声 │ ├ 会社概要 │ ├ 会社情報 │ └ 所在地 │ ├ お知らせ │ └ 最新情報 │ └ お問い合わせ 　 └ 問い合わせフォーム

ここで重要なのは、情報の分類とページの分類は、必ずしも1対1ではない ということです。 1つのページに複数の情報をまとめてもよいですし、情報量が多ければ複数のページに分けても構いません。 小規模な会社のサイトであれば、料金や制作実績をトップページにまとめ、独立したページを作らない構成も考えられます。 ページ数を増やすこと自体が目的にならないようにしましょう。

サイトマップを作る

必要なページが決まったら、サイトマップを作成します。 サイトマップは、Webサイトのページ構成や階層を視覚的に表現したものです。 今回は、FigJamで次のような構造を作ります。 この図は、ページの関係を簡略化したものです。 この段階では、細かなデザインは不要です。 ページ名と関係性が理解できることを優先します。 サイトマップを作ると、必要なページが不足していないか、似たページが重複していないかを確認できます。

ナビゲーションを設計する

サイトマップができたら、次にナビゲーションを考えます。 サイトマップはページの構造を表しますが、ナビゲーションはユーザーがそのページへ移動する方法を表します。 例えば、サイトマップ上では「料金」が「サービス紹介」の下にあるとしても、 実際のヘッダーメニューには「料金」を独立した項目として表示することもできます。

主なナビゲーションの種類

種類	役割
グローバルナビゲーション	サイト全体の主要ページへ移動する
ローカルナビゲーション	特定のセクション内のページを移動する
パンくずリスト	現在のページがどの階層にあるかを示す
フッターナビゲーション	会社情報や関連ページなどへのリンクを提供する
ページ内リンク	同じページ内の特定の見出しなどへ移動する
ページネーション（ページャー）	リスト項目数が多い場合、数個に区切ってページ分割する。

すべてのサイトに、すべての種類が必要なわけではありません。 ページ数が少ないサイトなら、シンプルなヘッダーメニューだけで十分な場合もあります。 階層が深いサイトなら、パンくずリストやローカルナビゲーションが役立つことがあります。

ナビゲーションを考えるときのポイント

ユーザーが何を探しに来るのかを考え、よく使う情報にアクセスしやすくします。 例えば、サービスを検討している人にとって、料金や制作実績が重要であれば、これらの情報へ簡単に移動できるようにします。 また、メニュー名はユーザーが理解しやすい言葉を選びます。 社内だけで通じる専門用語や曖昧な名称は、ユーザーが内容を予測しにくくなる可能性があります。

ユーザーの行動から構造を確認する

情報設計は、ページをきれいに並べれば完成するわけではありません。 実際にユーザーがどのような順番で情報を探し、目的を達成するのかを考える必要があります。 例えば、サービス導入を検討しているユーザーなら、次のような行動が考えられます。

1. トップページでサービスを知る 2. サービス紹介で内容を理解する 3. 料金や導入条件を確認する 4. 制作実績や会社情報を確認する 5. お問い合わせをする

この流れをFigJam上で矢印でつなぐと、ユーザーの行動フローとして整理できます。 ここで確認したいのは、必要な情報が不足していないか、次の行動へ進むためのリンクがあるか、目的のページにたどり着きやすいか、という点です。 ただし、すべてのユーザーが同じ順番で閲覧するとは限りません。検索エンジンから料金ページへ直接アクセスする人もいます。 そのため、トップページから順番に移動する流れだけでなく、個々のページから必要な情報へ移動できるかも確認しましょう。

Figma Designで画面設計につなげる

情報設計ができたら、Figma Designで画面を作る準備が整います。 トップページの設計では、情報設計で決めた内容をもとに、次のような要素を配置できます。

- サービスの概要 - 主なメリット - 制作実績への導線 - 料金情報への導線 - お問い合わせへの導線

この段階で初めて、 情報をどの順番で配置するか、 どの要素を目立たせるか、 どのようなレイアウトにするか を具体化していきます。 ただし、情報設計の結果は固定されたものではありません。 画面を作る中で、情報が多すぎる、分類がわかりにくい、ページを分ける必要がある、といった問題が見つかることもあります。 その場合は、サイトマップや分類に戻って修正します。 情報設計とUIデザインは、完全に切り離された工程ではなく、必要に応じて行き来しながら完成度を高めていくものです。

あとがき

今回の重要なポイントは、

情報の分類 ページ構成 サイトマップ ナビゲーション ユーザー

の行動フローです。 これらを整理してから画面を作ることで、単に見た目が整っただけではなく、ユーザーが必要な情報を見つけやすいWebサイトを設計しやすくなります。 情報設計は、見た目の変化が少ないため、デザイン作業に比べると地味に感じるかもしれません。 しかし、どれだけ美しい画面を作っても、情報の分類がわかりにくかったり、必要なページへ移動できなかったりすれば、ユーザーにとって使いやすいサイトにはなりません。 ページ数を増やすことや、複雑な階層を作ることが情報設計の目的ではありません。ユーザーが知りたい情報に、適切な方法でたどり着ける構造を作ることが目的です。 まずはFigJamで情報を洗い出し、分類し、関係性を可視化する。 そして、その構造をもとにFigma Designで画面へ落とし込む。 この流れを意識して、情報設計を実際の制作に活用してみましょう。