Webサイトの4種類の主要な構造とその特徴 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
本質的にデザイナーは、喜びを感じさせる製品や体験をつくり出すことに関心を持っています。この目標の達成には、いろいろな側面を考慮する必要がありますが、Webサイトをデザインする場合であれば、サイトの構造についての考慮が必要です。情報アーキテクチャと視覚的な階層構造の両方もです。
Webサイトの構造は、直感的なコンテンツへのアクセスを提供する「情報空間」の構造を、視認できる形に投影したものだと定義することができるでしょう。適切なナビゲーションのための体系的なアプローチをデザインする際には、Webサイトの構造が特に重要です。
例えば、本やアルバムを売っている店舗の商品が1カ所にまとめて積み上げられているとします。顧客は、探しているものを見つけるために、本やアルバムをひとつひとつ調べなければなりません。おそらく、顧客は店を出て、二度と戻ってこないでしょう。顧客は、適切に整理された店舗を好むものです。情報を整理するために役立つツールのひとつは適切な構造です。これはサイトの情報整理をする場合も同様です。
分かりやすいナビゲーションやカテゴリーにより適切に設計された構造のサイトでは、ユーザーが容易にページを辿って目的を達成できる 出典： Adobe Stock
Webサイトの構造とは何か？
Webサイトの構造は、理解可能で、発見可能で、予測可能なパターンを形づくるために役立ちます。適切な構造を持つサイトを訪れたユーザーは、一貫性のある方法で情報を容易に見つけられるでしょう。そして、情報を素早く見つけられたユーザーは満足感を覚えます。しっかりとした、入り込みやすい構造はWebサイトのユーザビリティに欠かせません。実際、UXデザインにおける問題の多くは、良いサイト構造の実現により解決できます。
良いサイト構造は、コンテンツのグループ化やカテゴリー化の作業にも必要です。構築しようとしている構造について検討する際、通常、デザイナーはトップダウンかボトムアップのどちらかを、ユーザーのニーズとビジネスゴールに基づいて選択することになります。
- トップダウンアプローチ – トップダウンのアプローチでは、まずコンテンツの大まかなカテゴリーに着目します。デザイナーはコンテンツをカテゴリー分けする作業を通じて、論理的な分類を行うことができます。これは、Webサイトのタクソノミーや階層構造の理解にも役立ちます。
- ボトムアップアプローチ – トップダウンのアプローチではコンテンツのカテゴリー分けに注力しますが、ボトムアップのアプローチでは、まず利用可能なコンテンツを構造化する試みから着手します。要素のグループが最下層のカテゴリーとなり、それらのグループさらにをグループ化することで高位のカテゴリーが形成されます。
理想のサイト構造は存在するか？
ユーザーのニーズおよびビジネスゴール達成のために新しいサイトをデザインするとき、UXデザイナーであれば、最適なサイト構造を見つけようと考えることでしょう。一般に理想のサイト構造と言われているものは、ピラミッドのような形をしています。ホームページと、カテゴリーおよびサブカテゴリー、そして個々の投稿やページにより構成されるサイトです。
理想のサイト構造はピラミッドのようにホームページから始まりとカテゴリーやサブカテゴリーの下に個々の投稿やページがある 出典： Yoast
- ホームページ – ホームページはピラミッドの頂点で、サイト訪問者のためのハブとして機能します。デザイナーは、ユーザーを重要なページに誘導するために、必須の、あるいはよく見られるページへのリンクをホームページに配置します。
- カテゴリー – カテゴリーはサイト構造を可変にするパーツです。カテゴリーは、ユーザーがより素早くより簡単に判断できるように使われるべきです。
- サブカテゴリー – これもサイト構造を定義する主要な要素のひとつです。たとえば、AmazonやeBayといったサイトには数えきれない数のページがあります。ユーザーは与えられた情報の中で容易に迷子になるでしょう。サブカテゴリーは情報閲覧のための構造的な手段を提供し、複雑なデータを持つサイトの情報を意味のあるまとまりにします。
- 個々の投稿やページ – 投稿やページはサイトの基本要素です。デザイナーは、ユーザーがコンテンツを読み解く際にあまり悩まずにすむように、すべてのページに意味のある情報階層を実現するよう考慮すべきです。
Webサイトの主要な構造
Webサイトの構造には4つの主要なモデルがあります。サイト構造の適切な理解は、意味のある情報アーキテクチャの構築を容易にします。それぞれのモデルをひとつずつ確認していきましょう。
階層型モデル
階層型モデルは大量のデータを含むWebアプリケーションで使用される 出典： slickplan
階層型モデルは最も一般的なサイト構造のひとつです。このモデルは、大量のデータを含むWebアプリによく使われます。階層型は木に例えられることが多く、ホームページのような幹から、カテゴリーやページへと枝が分岐します。 CNN.com や BBC.co.uk は階層型モデルの良い例です。
シーケンシャルモデル
シーケンシャルモデルはプロセスの流れを進行させるために使われる 出典： slickplan
シーケンシャルモデルは、最初にアプリを起動したり、アカウントを作成するときなど、ユーザーを一歩ずつ導きたいときによく使われます。プロセスを前進させる流れを実現したいときに使用するモデルです。wikiHow.comの個々のページは、進行するステップを念頭にデザインされたページの説得力のある例です。
マトリックスモデル
マトリックスモデルのWebサイトはユーザーに次にどこに進みたいかを選ばせる 出典： slickplan
マトリックスモデルは、インターネットのもっとも初期から使われているサイト構造のタイプのひとつです。このモデルの振る舞いは独特で、ユーザーに次にどこに行きたいかを選べるオプションを提供します。このタイプのサイトには、検索機能や内部リンクを使ったナビゲーションが適しています。Wikipediaは、マトリックスモデルの優れた例です。
データベースモデル
データベースモデルは、データベースの論理構造を規定する 出典： slickplan
データベースモデルは、サイト構造を動的に決定します。こうした構造のサイトを構築する場合は、デザイナーはボトムアップのアプローチで考えるべきです。ページのメタデータを検討し、しっかりとした情報アーキテクチャーを遵守し、分類のベストプラクティスに従います。Medium.comの個々の投稿やページは、データベースモデルの素晴らしい例です。
おわりに
ユーザーのニーズの検討からデザインを始めれば、デザイナーはユーザーを邪魔することなく、彼らの役に立つサイト構造をつくり出せます。優れた構造はユーザビリティを向上させ、サイトの全体的なユーザー体験を向上させます。つまり、Webサイトの構造は、見つけやすさと直感性を改善することで、喜びを感じさせる体験をつくりたいデザイナーの強力な武器になるのです。
この記事はA Guide to Different Types of Website Structures（著者:Will Fanguy）の抄訳です