情報設計（IA）とワイヤーフレーム

情報設計とワイヤーフレーム——IA設計からプロトタイプへの道筋

優れたUIデザインは、見た目の美しさより先に「情報の構造」が決まります。ユーザーがどの情報をどんな順序で必要とするのかを設計する情報アーキテクチャ（IA）と、それを可視化するワイヤーフレームは、プロダクト開発において最も重要な初期工程です。このレッスンでは、IA設計の考え方と具体的な手法、サイトマップの作り方、Lo-fi/Hi-fiワイヤーフレームの違いと使い分け、そして主要なワイヤーフレームツールまで体系的に学びます。

---

IA設計フロー全体図

IA設計フロー — ユーザー調査→サイトマップ→ワイヤーフレーム

IA設計は「ユーザー調査 → サイトマップ → Lo-fiワイヤーフレーム → Hi-fiワイヤーフレーム」という4段階で進みます。各フェーズで得られるアウトプットが次のフェーズのインプットになるため、順序を飛ばすと手戻りが発生しやすくなります。

---

情報アーキテクチャ（IA）とは

情報アーキテクチャ（Information Architecture）とは、ユーザーが必要な情報に迷わずたどり着けるよう、コンテンツの構造・分類・ナビゲーションを設計する学問・実践領域です。1998年にピーター・モービルとルイス・ローゼンフェルドが体系化し、現代のUXデザインの根幹をなしています。

IAの4つの構成要素

組織システム（Organization System） コンテンツをどのように分類・グループ化するかを決定します。階層型（ツリー構造）・データベース型（属性検索）・ネットワーク型（関連リンク）の3種類の整理方法があり、サービスの性質に合わせて選択します。

ラベリングシステム（Labeling System） メニュー項目やカテゴリ名など、コンテンツに付けるラベル（言葉）を設計します。ユーザーが日常的に使う言葉を使い、専門用語や社内用語を避けることが基本です。ラベリングの善し悪しがナビゲーションの使いやすさを大きく左右します。

ナビゲーションシステム（Navigation System） ユーザーがサイト内を移動するための仕組みです。グローバルナビ・ローカルナビ・パンくずリスト・フッターナビ・サイト内検索など複数のナビゲーション手段を組み合わせ、どこからでも目的地に到達できる設計を目指します。

検索システム（Search System） ユーザーがキーワードで情報を探せる機能です。オートコンプリート・検索フィルター・検索結果の表示形式まで含めて設計します。コンテンツ量が多いサービスでは検索システムの設計がUXの核心になります。

💡 IAはユーザーの頭の中の地図と一致させる: ユーザーはサービスを使いながら「このサービスの構造はこうなっているはず」という心理的なモデル（メンタルモデル）を形成します。IAがこのメンタルモデルと一致するほど、ユーザーは迷わず使いこなせます。

---

カードソーティングによるIA検証

カードソーティングは、ユーザーにコンテンツ名が書かれたカードを渡し、自分なりのグループに分類してもらうことでメンタルモデルを把握する調査手法です。

オープン型とクローズ型

カードソーティングは5〜15名程度の参加者で実施し、OptimalSort・Miro・実際の付箋などのツールを使います。結果を集計して最も多くの参加者が同じグループにまとめたカードをナビゲーション構造の基礎とします。

⚠️ カードソーティングの落とし穴: 参加者のサンプルが偏ると結果が歪みます。対象ユーザーを代表するセグメントから均等にリクルートし、少なくとも8名以上のデータを収集することを推奨します。

---

サイトマップの作り方

サイトマップはウェブサイトやアプリのページ構造を階層図として可視化したドキュメントです。開発チーム全体が共通認識を持つための「設計図」として機能します。

サイトマップの記法

ページノード 四角形のボックスでページを表現します。ボックス内にページ名とID（例：1.0、1.1、1.1.1）を記載し、階層関係を示します。

接続線 親子関係のページをソリッドライン（実線）で繋ぎます。条件分岐による遷移はダッシュライン（点線）で表現することが多いです。

特殊ノード モーダル・外部リンク・システムページ（ログイン・エラーページなど）は通常のページと区別するため形状や色を変えて表現します。

実際のサイトマップ例（ECサイト）

サイトマップ作成後は、ユーザーの主要タスクフロー（例：商品を見つけて購入する）をサイトマップ上でトレースし、導線に無理や迷いが生じないか検証します。

---

Lo-fiワイヤーフレームの作り方

Lo-fi（ローファイ）ワイヤーフレームは、ページのレイアウトと情報の優先順位を素早く確認するための低精度モックアップです。色・フォント・画像は使わず、グレースケールのボックスとダミーテキストだけで構成します。

Lo-fiで確認すること

1. ◆コンテンツの優先順位: 画面上部（ファーストビュー）に何を置くか
2. ◆情報の配置と流れ: 左から右、上から下へのF字・Z字の視線の流れ
3. ◆ナビゲーション構造: ヘッダー・フッター・サイドバーの有無と配置
4. ◆CTAの位置: 主要アクションボタンがどこに配置されるか
5. ◆レスポンシブ対応: モバイルとデスクトップでレイアウトがどう変わるか

💡 Lo-fiは手描きで始めることが多い: 紙とペンで5〜10分でスケッチすることで、議論と修正が素早くできます。Figmaに移行する前に手描きで複数案を出し比較することを習慣化すると、設計の質が大幅に向上します。

---

Hi-fiワイヤーフレームとプロトタイプ

Hi-fi（ハイファイ）ワイヤーフレームは、実際の視覚デザインに近い精度で作成したモックアップです。実際のフォント・カラー・実データに近いコンテンツを使用し、インタラクション（クリック・スワイプなど）をプロトタイプとして再現します。

Lo-fi と Hi-fi の使い分け

ワイヤーフレームツール比較

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆カードソーティング: 身近なウェブサービス（飲食店サイトなど）のナビゲーション項目を10枚のカードに書き出し、友人や家族3名に分類してもらい、結果を比較して傾向を記録する
2. ◆サイトマップ作成: 飲食店のウェブサイトを想定し、トップ・メニュー・アクセス・予約・お知らせの5ページを基本にしたサイトマップをMiroまたは紙で作成する
3. ◆Lo-fi WF制作: サイトマップで設計したトップページのLo-fiワイヤーフレームを紙またはWhimsicalで作成し、ファーストビューに配置する要素と優先順位を決定する
4. ◆Hi-fi WF制作: 作成したLo-fiをFigmaでHi-fiワイヤーフレームに昇格させ、プロトタイプ機能で「トップ → メニューページ」の遷移を実装して共有リンクを発行する

📝まとめ

情報設計は「ユーザーの頭の中の地図」を理解することから始まります。カードソーティングでメンタルモデルを把握し、サイトマップで構造を可視化し、Lo-fi→Hi-fiと段階的に精度を上げることで、手戻りの少ない効率的な設計が可能になります。ワイヤーフレームは設計の証拠であり、チーム全員が同じゴールを向くための共通言語です。ツールよりも「なぜその配置にするのか」という設計の根拠を持てるようになることが、IAデザイナーとしての成長の核心です。