事務局の視点から、SNSやお知らせでは
伝えきれない
スクールの情報や
魅力を発信しています。
2025.12.10
Webサイトの構成要素として、「システム」「ビジュアルデザイン」「情報設計」の３つがあると考えることができます。職種でいうと「システム」はプログラマーやエンジニア、「ビジュアルデザイン」はデザイナーの担当となりますが、それでは「情報設計」は誰が担当しているのでしょうか？
インフォメーションアーキテクトという専門職がありますが、日本の制作会社でこのポジションを設けているのは稀で、多くはディレクターの仕事とされてきました。また最近では、UIデザイナーが情報設計を担当するケースも増えているようです。
どのような肩書きの人が担当するにせよ、情報設計を行うには専門的な知識が欠かせません。Webサイトやアプリの品質に大きく影響する情報設計について、実務での進め方と基本スキルの習得方法についてご紹介します。
目次
情報設計とは、ユーザーが迷わず必要な情報にたどり着けるように、情報の「整理・分類・構造化」を行うことと定義できます。大量の情報をわかりやすく分類して提示することで、サイトやアプリを理解しやすくします。情報設計が適切に行われていないサービスでは、ユーザーは目的の情報を見つけられなかったり、見つけるまでに時間がかかったりして、ユーザビリティを大きく低下させる要因となってしまいます。建築の設計図と同様に、サービス全体の基盤となる構造を詳細に書き記し、その後のビジュアルデザインやシステム開発のベースとなる設計図を作成するのです。
では、情報設計について学びたいと思った時、どこからスタートするのがよいでしょうか？
情報設計をテーマとした書籍といえば、オライリーの“シロクマ本”がその代表として挙げられます。表紙に白熊が描かれているこの本は、日本では1998年に『情報アーキテクチャ入門』というタイトルで第1版が、2003年に『Web情報アーキテクチャ』とタイトルが変わって第2版が発行されています。ここで使われている名称から、Web制作の現場では「情報アーキテクチャ」という言葉が長らく使われてきましたが、単純に文字数が多いからだけでなく、クライアントを含む一般人には内容が伝わりにくいこともあって、より簡潔に「情報設計」と呼ばれることが増えています。
Web制作の現場において、情報設計のプロセスはどのような手順で進められるのでしょうか？中規模～大規模なコーポレートサイトのリニューアルの場合は、概ね次のようなステップで進んでいきます。
まずは既存サイトのコンテンツを洗い出して、目録（インベントリ）を作成します。この時、ページ単位ではなくコンテンツ単位でリスト化することがポイントです。リスト化ができたら、不要なコンテンツは削除し、新規作成するコンテンツを追加します。ユーザーの要求と照らし合わせて、不足しているコンテンツがないかチェックします。何を持っていて、何が足りないかを把握する棚卸の作業といえます。
サイトの大まかな枠組みを決めるプロセスです。バラバラに書き出されたコンテンツをグループ化して、それぞれにラベルを付けることで、サイトの基本構造が見えてきます。あるグループと別のグループをひとまとめにできないか、別の分類基準でグループをつくることはできないかなど、さまざまな視点からベストな構成を検討します。分類ができたら、コンテンツの重要度からメインメニューにするもの、サブメニューにするものを決めます。さらにラベルを整えて上位階層のサイトマップ（ハイレベルサイトマップ）を作成します。
カテゴリごとに詳細化して、サイト全体の階層構造を決定します。しかしながら、最初に作成したサイトマップがそのまま確定するケースはほとんどありません。まずは仮置きぐらいのつもりで作成して、ワイヤーフレームの作成と行ったり来たりしながらチューニングしていきます。また、サイト構造を見渡して、一定のバランスが取れているか、階層が深すぎる部分が発生していないかなどをチェックします。
ページ単位で、どのような要素がどのような扱い（大きさや順序）で配置されるのか、大まかにレイアウトしていきます。ワイヤーフレームは、ビジュアルデザインのベースとなるものなので、色は付けずにモノクロで作成します。テキストは、ダミーの部分があっても構いませんが、ページタイトルと大見出しには内容が伝わるテキストを入れておくことが必要です。ワイヤーフレームはFigmaやAdobe XDで作成するのが一般的ですが、どちらもプロトタイプ機能があるので、ページリンクなどのインタラクションを付けて挙動を確認することができます。
ワイヤーフレームを作成する際、最初に検討すべきことの１つがナビゲーションシステムです。当然のことですが、ページ単位やカテゴリ単位でまちまちなナビゲーションになっていたら、ユーザーは混乱してしまいます。サイト内の全ページに共通のグローバルナビゲーション、カテゴリ内で有効なローカルナビゲーションなどの表示ルールを決めて、ワイヤーフレームのモジュールとして作成します。また、スマートフォン表示の場合にどのようにアレンジするのかも、あわせて検討します。
もう１つ、ワイヤーフレームを作成する初期段階で重要なポイントとなるのが、ラベリングです。サイトマップの段階では曖昧さがあったラベルを、一貫性があって簡潔なものになるよう精査して確定します。特にメインメニューのラベルは、ユーザーが目的の情報を探す際、一番の手掛かりとなるものです。内容を適切に表現しているか、他のラベルと並べた時に明快に区別ができるか、縦軸と横軸の両方から検討することが求められます。
サイトマップとワイヤーフレームが確定した後、情報設計の仕上げとしてページリストを作成します。ページリストは、Excelなどのスプレッドシートを使って、1行を1ページとして一覧にします。列にはページタイトル、URL、メタ情報などを記載します。
ディレクトリ名やファイル名を決めることも、情報設計の一部です。ここでも内容を適切に表すこと、規則性と一貫性があることが重要です。日本語のアルファベット表記は避けて、英語の正しいスペルで命名します。
各ページのtitleとdescriptionを記入します。いずれもユニーク（他と重複しない）であることが必要なので、その点に注意して一定のルールに沿って決めていきます。また、titleとdescriptionは検索エンジンの結果画面に表示されるので、集客に貢献するかというマーケティング視点も重要です。なお、keywordsについてはSEOの効果も期待できないことから、設定しないことが一般的です。
情報設計を学ぶ最初のステップは、「情報を整理するとはどういうことか」を理解することです。専門的なツールや理論にいきなり手を出すのではなく、まずは次の3つを押さえておくとスムーズです。
この3つを押さえるだけで、情報設計の基礎が身につき、その後の実践が格段に楽になります。
UIUXを体系的に学びたい初心者には、Nests Digital Creative Academyの「UIUXデザイナーコース」が最適です。UX理論から情報設計、サービスデザインまで一貫して学べるため、現場で求められる“考えてつくる力”を段階的に習得できます。現役クリエイター講師による個別サポートやFigma・HTML/CSSなど実践的なスキル習得も充実しており、未経験からでも制作現場で通用するデザイン力を効率的に身につけることができます。気になった方は下記ページで詳細をご確認ください。
https://nests.jp/uiux_design_lp/
理論だけでは身に付きにくいため、「仮想プロジェクト」 を設定して練習する方法がおすすめです。
例：「既存の企業サイトを再構築する前提でサイトマップを作る」
手順としては
という流れで進めると、実案件と同じプロセスを体験できます。
情報設計の定番ワークとして、以下の2つがあります。
紙やオンラインツールで、コンテンツを書いたカードを並べ替え、グループを作る方法です。ユーザー参加型で行うと、「利用者がどう分類するか」というリアルな感覚を掴めます。
実際に存在する良いサービスを参考にするのは、情報設計の学習効率を大きく高めます。
分析のポイントは以下の通りです。
ベストプラクティス分析における「メインメニュー」とは、ユーザーがサイト全体の構造を直感的に理解し、目的の情報へ迷わず到達できるようにする主要ナビゲーションのことです。
メインメニューは、サイトの情報構造を最上位で整理したカテゴリの集合であり、ユーザー体験を左右する重要な要素です。分析では、優良サイトのメニュー構成やラベルの付け方、項目数、階層の深さ、モバイル対応などを調査し、なぜその設計が使いやすいのかを検証します。
これにより、自サイトの目的やユーザーの行動に適した最適なメニュー構造を導き出し、認知負荷の軽減や回遊性の向上、コンバージョン向上につなげることができます。
URL構造の規則性とは、サイト全体で一貫した階層・命名ルールに基づいてURLを体系的に設計することです。カテゴリごとの階層を揃え、意味の分かるシンプルな英語表記やハイフン区切りを統一することで、ユーザーはページの位置関係を直感的に理解しやすくなります。同時に、検索エンジンもサイト構造を認識しやすくなるためSEOにも効果的です。
カテゴリ名（ラベル）のわかりやすさとは、ユーザーがそのカテゴリにどんな情報が含まれているかを直感的に理解できる明瞭な命名であることを指します。
専門用語や曖昧な表現を避け、一般的で馴染みのある言葉を使うことで、ユーザーは迷わず目的の情報へ辿りつけます。また、表現の一貫性や簡潔さを保つことでサイト全体の構造が理解しやすくなり、回遊性やSEOにも効果があります。
検索動線やフィルタの構成とは、ユーザーが目的の情報に素早く到達できるよう、検索ボックスから絞り込み条件、結果表示までの流れを最適化する設計を指します。
特に情報量の多いサイトでは、適切なフィルターや並び替え機能を設け、直感的に操作できるUIを整えることが重要です。検索バーの配置、主要な検索条件を選定し、選定した条件の見える化をすることで、ユーザビリティ向上や回遊性・コンバージョンの改善が期待できます。
情報設計とは、ユーザーが迷わず目的の情報に辿り着けるよう、コンテンツを整理・分類し、構造化するプロセスです。サイト全体の基盤をつくる設計図であり、ユーザビリティやUXの質を大きく左右します。
本質的な情報設計を行うためにも、コンテンツの棚卸しから分類・ラベリング、メインメニューやURL構造、検索動線の設計などが必要です。しかし、実務レベルで通用する情報設計力を身につけるには、理論と実践を体系的に学べる環境が不可欠です。
Nests Digital Creative AcademyのUIUXデザイナーコースでは、UX理論・情報設計・サービスデザインを6ヶ月で総合的に習得できます。現役クリエイター講師の個別支援のもと、FigmaやHTML/CSSを使った実践課題に取り組みながら、「考える力」と「つくる力」を同時に伸ばせる点も特徴です。気になった方は下記ページより詳細をご確認ください。
https://nests.jp/uiux_design_lp/
パラグラフ株式会社 代表取締役。インターネット黎明期より、Webサイトの企画、情報設計、ディレクションを多数経験。特にWebユーザビリティの啓発・実践に注力し、大手メーカーサイト等のユーザビリティ改善を手掛ける。その経験から、インフォメーションアーキテクト、UXデザイナーとして活動を広げるとともに、後進の育成にも取り組んでいる。
関連記事
各コースの詳細はもちろん、
特待生制度のことや、業界についての質問等、
個別で対応させて頂きます。
入学をご検討中の方はお気軽にご予約ください。
