KNOWLEDGE
KNOWLEDGE

サイトストラクチャを決定する上で考えるポイント

サイトやアプリケーションの使いやすさやビジネスゴールを実現する要素として、まずコンテンツ(何の情報を伝えるか)がありますが、同じくらい重要な要素としてサイトストラクチャ・ナビゲーション(どのように情報を整理し伝えるか)があります。今回は、適切なサイトストラクチャを決定するための観点について、いくつかご紹介します。

サイトストラクチャとは

概要

サイトストラクチャとは、サイトの情報構造のことで、サイトに掲載するコンテンツ(ユーザーに伝えるテキストや写真・動画等の情報)をグルーピングして、適切なラベリングを行い、ユーザーにとって使いやすいように構造化する事です。

ユーザーがサイトに訪れてから、まず何の情報を見たいか、常に見せておきたい情報は何か考えながら、サイトストラクチャを設計します。

パターン

サイトストラクチャの代表的なパターンとして、階層型、直線型、ハブ&スポーク型、ウェブ型、ファセット分類型があります。それぞれご紹介します。

階層型

階層構造で見せる情報構造のパターンです。同種のコンテンツを全体から詳細へ親子関係の構造とすることで、感覚的に理解しやすくしますが、コンテンツの数が多く階層が深い場合は目的の情報に辿り着くまでに手間がかかります。Eコマースなど幅広いサイトでよく利用される構造です。

直線型

あるページを経過しないと次のページに進むことができない直線的な構造です。

ユーザーは迷うことなく目的の情報を探したりアクションを実行できたりしますが、他の操作や情報閲覧をするために始点となるページに戻る必要があります。ATMの振込手続きや、検索サイトなどでキーワードを入力して結果を表示する場合が当てはまります。

ハブ&スポーク型

同じ始点を持つ直線型構造の集まりで、始点のページから個々のページを閲覧した後に、また始点のページに戻るような構造です。ダイジェスト的に常に見せたい情報がある場合に有効ですが、直線型と同じく始点のページに常に戻らないといけない手間があります。SNSやニュースポータルなど、最新情報など常に見せたい情報の一覧から詳細情報を深掘って情報探索する場合が当てはまります。

ウェブ型

相互参照やリンクでつながり、開始や終点が明確に定められていない構造です。情報同士のつながりから、どこからでも参照できますが、コンテンツの全体像を掴むのが難しくなります。採用されているサイトにはWikipediaなどがあります。

ファセット分類型

特徴や属性などのカテゴリで情報を分類し、複数の経路から情報にアクセスできるような構造です。ユーザーの探しやすさは向上しますが、一方で無目的にブラウジングしたい場合には不向きです。ECサイトや企業サイトの製品群などを目的別に探すような場合に利用されます。

サイトストラクチャを決めるために考えるポイント

ストラクチャのパターンをいくつか紹介しましたが、サイトを制作する上では、これらのいずれか1つを採用するというわけではなく、以降で紹介する観点を考慮した上で、複数を組み合わせてストラクチャを設計します。

ユーザーの目的

ユーザーがそのサイトやアプリケーションで実現したい事から、常に表示させる情報や情報の優先度は変わります。例えば、中古車販売サイトの場合、ユーザーの主な目的は安く自動車を手に入れることです。
その場合、価格や性能などの情報の優先度は高くなりますが、一方で高級車専門の販売サイトでは、価格よりもブランドや製品紹介のほうが優先度が高いでしょう。

ユーザーの行動特性

次に、ユーザーの行動特性です。これは、ユーザーがどのように情報を探すか・閲覧するかという事です。
例えば、初心者向けとプロ向けの情報サイトでは、ユーザーの持つ事前知識に大きな違いがあるので、当然掲載する情報やその見せ方にも違いが生まれます。
例えば、初心者向けにはまずトップページなどで基礎知識をイラストなどでわかりやすく表示し、プロ向けには専門的・先端的な情報をすぐに検索できるようにするといった違いです。
行動特性は、ユーザーの持つ知識以外にも様々あります。使用デバイスや物理的な環境、利用頻度などサイトやアプリケーションの内容に応じて事前に行動に影響のある変数を洗い出しておきましょう。

特にユーザーの情報の探し方はストラクチャの設計に直結します。ユーザーの探索行動については、以下のパターンがあり、これらを想定して設計を進めることが重要です。

  • 既知情報探索モード:すでに知っている情報を探す
  • 調査探索モード:特定の知識を収集しながら情報を探す
  • 認識不足モード:自分が何を知りたいか分からない状態で情報を探す
  • 再探索モード:一度見つけた情報を再度探す

ビジネスゴール

次に、ビジネスゴールです。
これは、ビジネス上実現したい目的と定量的な成果です。例えば、ECサイトにおいて商品Aの売上を1ヶ月で120%向上させるといった目的がある場合、サイトトップなど最もユーザーが訪れるページに商品Aに関する特集を掲載するなどサイトの見せ方に影響があります。

終わりに

以上の観点を考慮して、適切なパターンを組み合わせることで、優れたストラクチャを作成できます。
ぜひ実践してみてください。

次回はナビゲーションについてご紹介します。

参考文献

  • IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
  • アンビエント・ファインダビリティ ―ウェブ、検索、そしてコミュニケーションをめぐる旅

UXUIデザイン支援資料

セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。

新卒でITメガベンチャー企業に入社し、POとして複数の新規事業立ち上げ・運用に従事。その後、デザイナーにジョブチェンジし、デザインコンサルティング会社、起業を経て、セブンデックスにUIデザイナーとして参画。