Webサイトのナビゲーションやカードを整理するとき、「人が一度に覚えられるのは7個前後だから、項目も7個までにするべき」と説明されることがあります。しかし、Webサイトの項目数を一律に7個までにすれば、使いやすくなるわけではありません。
ユーザーが情報を覚える場面なのか、画面を見ながら比較できる場面なのかによって、認知的な負担は異なります。画面サイズ、情報の複雑さ、ユーザーの知識、目的の明確さも考慮する必要があります。
この記事では、マジカルナンバーを固定的なデザインルールとして使うのではなく、WebデザインやUI/UX設計において「減らす・グループ化する・段階表示する」をどう判断するか、制作現場の具体例とともに解説します。
目次
Webサイトの項目は本当に7個までなのか
マジカルナンバー7±2は、人間が短期的に保持し、扱える情報量について示した心理学上の考え方です。1956年に心理学者ジョージ・A・ミラーが発表した論文をきっかけに広く知られるようになりました。
ただし、7±2は、すべての人、情報、状況に共通する厳密な上限値ではありません。まして、ナビゲーションやカードなど、Webページ上の要素を必ず5〜9個に制限するためのルールでもありません。
マジカルナンバーの成り立ちや、情報を意味のあるまとまりに分ける「チャンク化」については、既存記事のミラーの法則とWebデザインの関係で解説しています。本記事では理論の詳しい説明ではなく、実際のWeb制作で情報量をどう判断するかに焦点を当てます。
Webページでは、ユーザーは画面上に表示された項目を見ながら比較できます。すべてを頭の中に記憶してから操作するとは限らないため、7という数字を絶対的な基準にするよりも、ユーザーが何を覚え、何を比較し、どこで判断するのかを確認することが重要です。
- 記憶が必要な場面：前の画面で見た内容を覚えたまま、次の画面で判断する
- 見比べられる場面：選択肢が同じ画面に並び、視線を移動しながら比較できる
- 探す場面：明確な名称やカテゴリーを手がかりに目的の項目を見つける
- 理解する場面：専門用語や条件の違いを読み解き、意味を整理する
同じ数の項目でも、求められる行動によって難しさは変わります。個数だけを調整しても、分類やラベル、優先順位が曖昧であれば、使いやすいUIにはなりません。
情報量を個数だけで決められない理由
ユーザーの知識や目的が異なる
業務で毎日使う管理画面と、初めて訪れるサービスサイトでは、ユーザーが持つ知識が異なります。経験者にとって識別しやすい項目でも、初めてのユーザーには違いが分からないことがあります。
また、目的が明確なユーザーは多くの項目からでも対象を探せますが、情報収集段階のユーザーは、何を基準に選ぶべきか分かりません。後者には、項目数を減らすだけでなく、推奨される導線や分類の手がかりが必要です。
画面サイズによって一覧性が変わる
デスクトップでは一画面に収まるカードも、スマートフォンでは長い縦スクロールになります。表示数が同じでも、同時に視界へ入る範囲が狭くなれば、比較のために記憶する負担が増えます。
レスポンシブデザインでは、PC版をそのまま縮小するのではなく、スマートフォンで優先度の低い要素を折りたたむ、順序を入れ替える、絞り込みを用意するなどの再設計が必要です。
情報の複雑さは個数だけでは測れない
短い名称のメニューが並ぶ場合と、価格、対象者、機能、注意事項を含む料金プランが並ぶ場合では、一項目あたりの情報量が違います。
少数の選択肢でも条件が複雑であれば判断は難しく、多数の選択肢でも分類が明確なら探しやすいことがあります。確認すべきなのは要素の総数ではなく、ユーザーが一度に比較・理解しなければならない差分です。
Web制作で使える3つの情報整理方法
情報量が多いときは、単純に削除するだけが解決策ではありません。制作現場では、次の三つを使い分けます。
1．減らす
ユーザーの判断や行動に影響しない情報を除外します。似た内容のリンク、重複した訴求、優先度の低いボタンなどが対象です。
ただし、関係者の要望だけを理由に残している情報でも、法的な表示や検討に必要な条件であれば削除できません。「なくても目的を達成できるか」「別の場所で確認できるか」を基準に判断します。
2．グループ化する
削除できない項目は、ユーザーが理解できる単位にまとめます。カテゴリー名を付けるだけでなく、ユーザーがその分類を予測できるかが重要です。
社内の部署構成や管理上の区分が、そのままユーザーにとって分かりやすい分類になるとは限りません。アクセス解析、検索語、問い合わせ内容なども参考にしながら、ユーザーの目的に沿ったまとまりをつくります。
3．段階表示する
最初からすべてを見せず、ユーザーの選択に応じて必要な情報を表示します。アコーディオン、モーダル、ステップフォーム、詳細ページへの遷移などが代表例です。
段階表示には初期画面を簡潔にできる利点がありますが、隠しすぎると情報の存在に気づけません。料金や制約など、意思決定に不可欠な情報まで深い階層へ移さないよう注意が必要です。
UI別に見る情報整理の実践方法
グローバルナビゲーション
グローバルナビゲーションでは、7個以内に収めることより、主要な訪問目的をカバーできているかを優先します。
項目が多い場合は、サービスを対象者別または目的別にまとめる、関連性の低いリンクをユーティリティナビゲーションやフッターへ移す、メガメニュー内で見出しを付けて分類するといった方法があります。
ただし、無理に項目を減らして「その他」に集約すると、目的のページを予測しにくくなることがあります。少ないこと自体ではなく、選択前に遷移先を想像できることが大切です。
カードUI
事例、サービス、記事などをカードで並べる場合は、表示数よりもカード間の差が読み取れるかを確認します。画像、見出し、カテゴリー、説明文、ボタンをすべて同じ強さで配置すると、視線の起点が曖昧になります。
件数が多い場合は、カテゴリーによる絞り込み、代表項目の先出し、一覧ページへの分離が有効です。同じ種類のカードでも、トップページと一覧ページでは役割が違うため、適切な表示数も変わります。
料金プラン
料金プランでは、プラン数を減らすだけでなく、比較軸を整理する必要があります。価格、機能、利用上限、サポート範囲などが一度に並ぶと、少数のプランでも判断は難しくなります。
代表的な利用目的を示す、主要な差分を先に見せる、詳細機能は比較表で確認できるようにするなど、概要と詳細を分ける設計が有効です。特定プランを強調する場合も、事業者側の都合だけではなく、推奨する根拠が伝わる構成にします。
フォームの選択肢
問い合わせ種別や業種などの選択肢が多い場合、長いプルダウンへすべて格納すると探しにくくなります。選択肢が少なく相互に排他的ならラジオボタン、候補が多く名称を検索できるなら入力補助、条件に応じて候補が変わるなら段階式の選択が適しています。
また、企業側の集計に必要な項目を増やしすぎると、ユーザーの入力負担が高まります。初回問い合わせに必要な情報と、商談後に確認できる情報を分けることも重要です。
スマートフォン画面
スマートフォンでは表示領域が限られるため、ファーストビューにすべてを収めようとしないことがポイントです。主要な見出し、判断に必要な要点、次の行動を優先し、補足情報はスクロールや開閉によって確認できるようにします。
ただし、重要なCTAを複数箇所に配置することと、異なるCTAを大量に並べることは別です。画面内で競合する行動を整理し、主目的と副目的の強弱を明確にします。操作対象の大きさや距離については、フィッツの法則をWebデザインに活かす考え方もあわせて確認すると、情報量と操作性を分けて検討できます。
LPの情報構成
LPは情報量が多くなりやすいものですが、ページ全体を7セクション以内にする必要はありません。重要なのは、各セクションがユーザーの疑問に対応し、次の情報へ自然につながっていることです。
たとえば、課題提起、解決方法、特徴、根拠、利用方法、料金、よくある質問といった大きなまとまりをつくり、その中で情報の優先順位を整理します。訴求を減らせない場合は、同じ内容の繰り返しをなくし、セクションごとの役割を明確にします。
構成を具体化する手順は、LPワイヤーフレームの作り方でも詳しく解説しています。マジカルナンバーはセクション数を決める規則ではなく、ワイヤーフレーム上でユーザーへ同時に提示する情報を見直す視点として活用できます。
情報量を決めるための実務的な判断基準
デザインレビューで「項目が多い」「もっとシンプルにしたい」という意見が出たときは、感覚的に削るのではなく、次の順序で確認すると判断しやすくなります。
- ユーザーの目的：この画面で探す、比較する、理解する、入力するのどれを行うか
- 記憶の必要性：別画面の内容を覚えたまま判断する必要があるか
- 情報の複雑さ：各項目の違いを短時間で理解できるか
- 優先順位：主要な選択肢と補助的な選択肢が区別されているか
- 分類の自然さ：ユーザーが迷わず予測できるグループになっているか
- 表示環境：スマートフォンでも全体像や現在位置を把握できるか
- エラーの影響：間違った選択をしても簡単に戻り、修正できるか
項目数が多くても、目的の情報をすぐ見つけられ、選択をやり直せるなら、大きな問題にならない場合があります。逆に、選択肢が少なくても違いが分からず、誤操作を修正しにくい場合は改善が必要です。
クライアントへの説明に使えるチェックリスト
制作会社や広告代理店の担当者が情報整理の意図を説明するときは、「マジカルナンバーだから減らしました」ではなく、ユーザーの行動と判断負荷を根拠にすることが大切です。ワイヤーフレームやデザインの確認時には、次の項目を利用できます。
- この画面でユーザーに最も取ってほしい行動が一つに定まっているか
- すべての情報が同時に表示される必要があるか
- 削除するとユーザーの判断や事業上の要件に影響するか
- 似た項目をユーザー視点のカテゴリーでまとめられるか
- 主要情報と補足情報を視覚的に区別できているか
- 比較すべき差分が同じ場所、同じ形式で提示されているか
- 専門知識のないユーザーでも項目名から内容を予測できるか
- スマートフォンでスクロールした際に前の情報を覚える負担が大きくないか
- 段階表示によって重要な条件や料金を隠していないか
- アクセス解析やユーザーテストで仮説を検証できるか
説明の際は、「7個を超えているから問題」ではなく、「同時に比較する情報が多く、違いも複雑なため、代表項目と詳細を分ける」と伝えると、設計意図を共有しやすくなります。
まとめ
マジカルナンバーは、「Webページの項目を必ず7個前後にする」というデザインルールではありません。Web制作では、数字そのものよりも、ユーザーが同時に覚え、比較し、理解しなければならない情報を整理する視点が重要です。
WebデザインやUX設計では、固定された数値に合わせるのではなく、ユーザーの目的、知識、画面サイズ、情報の複雑さ、比較や記憶の必要性を確認します。そのうえで、不要な情報を減らす、関連項目をグループ化する、必要に応じて段階表示する方法を選びます。
情報整理は見た目をシンプルにする作業ではなく、ユーザーと事業者の双方に必要な情報を、理解しやすい順序と構造で提示する設計です。AUN Design Worksでは、こうした情報設計を踏まえたWebサイトやLPの制作に取り組んでいます。制作事例は実績ページからご確認いただけます。UI改善やLP制作の進め方について相談したい場合は、CONTACTページをご利用ください。