デザイナー のWebサイトアーキテクチャの理解が重要な理由
サイトの構造によって、ユーザーがどれだけ簡単に探している情報を見つけることができるかが決まります。この記事では、サイト構造がデザイナーにとって重要である理由とデザイナーが効果的なサイト構造を作成する方法について説明します。
Webサイトの構造とは?
サイトの構造とは、サイト内のさまざまなページが内部リンクを使ってどのように繋がっているのか、またその階層構造のことです。つまりアルゴリズムが文脈を読み取ることができるようにサイト上の情報をどのように整理し表示するかということです。優れたサイト構造は、ユーザーとクローラーの両方にとって容易なナビゲーションを可能にし、検索エンジンにおけるSEOランキングを向上させます。
なぜWebサイトの構造はデザイナーにとって重要なのか
デザイナーの役割は、アクセシビリティに配慮したUXの優れた使いやすいWebサイトを作ることです。優れたWebサイトの構造は、ユーザーが探しているものを見つけやすくすることで、Webサイトの使い勝手を向上させます。Webサイトの構造を作成するには、サイト内のコンテンツ（ホームページ、カテゴリー、個別ページ、ブログ記事）をどのように配置するかをマップ化する必要があります。
このようにWebサイトの構造化は、Webデザインプロジェクトの最初のステップであるべきなのです。
ベストな構造にする方法
優れたWebサイト構築の基本は、情報 アーキテクチャ （IA）です。IAによって、コンテンツが効果的かつ一貫して整理、構造化、ラベル付けされていることが保証されます。Webサイトに最適な情報アーキテクチャを作成するためには、以下の要素を考慮する必要があります。
- ユーザージャーニー（閲覧）: Webサイトはユーザーにサービスを提供するために作られているので、Webサイトを通じてどのような体験・交流をするのか考えなければなりません。Webサイトがどのように機能するかについて、ユーザーの行動を予測することが重要である。IA次第でユーザーの閲覧行動が変わるのです。
- コンテンツ（内容）: Webサイトの構造は、サイトのコンテンツの種類と量によって大きく左右されます。
例：eコマースサイトと学術サイトでは構造が異なるように。 - コンテキスト（文脈）: ウェブサイトの文脈は、そのビジネスターゲット、文化的背景、利用可能なリソースによって決定されます。
優れたWebサイト構造の要素（ビジュアル例を含む）
一般的なWebサイトの構造は、1つの親ページ（メインページ）とそこから流れる子ページ（カテゴリーやサブカテゴリー）を基本とした階層構造になっています。
それでは、それぞれの要素について、デザインプロセスでどのように最適化できるかを見ていきましょう。
ホームページ
ホームページは、Webサイトの階層構造の最上位に位置し、ユーザーがWebサイト内を移動する際の中心的な場所となります。このページから重要なページがリンクされていることを確認します。トップページと主要なカテゴリページの関係は、Webサイトのメニューまたはメインナビゲーションで表されます。
ここでは、Webサイトに便利なナビゲーション/メニューを設計する方法を説明します。
ナビゲーション/メニュー
サイト訪問者は、ナビゲーションを使って、Webサイト上の情報構造を理解し、探している情報を見つけることができます。メニューやメインナビゲーションには、主要なカテゴリーページが全て表示されていることを確認してください。また、ナビゲーションを作成する際には、下記ルールを使用すると良いでしょう。
- 各要素には短いフレーズ、または1つの単語を使用する。
- ユーザーが理解できる簡単な言葉で表現する。
- ナビゲーションで溢れさせない。（多ければ良いわけでもない。）
Appleのメインナビゲーションはこれらルールに沿うことで、シンプルながらとても使いやすいメニューに仕上がっています。
もし、サイトにアカウント情報などユーザーにとって便利なサブカテゴリがある場合、Asosのようなセカンドバーティカルメニューを作成することができます。
その他、ユーティリティページ（プライバシーポリシー、免責事項、法的情報）などの有用なカテゴリは、Webサイトのフッターに配置することができます。
カテゴリーとサブカテゴリー
類似したコンテンツを持つWebサイトのページをカテゴリーで分類することで、ユーザーがコンテンツにアクセスしやすくなります。ブログ記事は「マーケティング」などのカテゴリーにグループ化し、さらに「ランディングページ」や「メールマーケティング」などのサブカテゴリーに細分化することができます。
eコマースサイトをデザインする場合、「メンズ」「レディース」などのカテゴリーに商品を分類することができます。カテゴリーが多すぎる場合は、さらにサブカテゴリーに細分化することができます。
例）女性用ファッションの分類（サブカテゴライズ）
☆レディース
・洋服
・靴
・ハンドバッグ など
単一ページ/投稿
個々のWebサイトのページやブログの記事は、
・ユーザーが探しているものを見つけやすく、
・類似したコンテンツを見つけやすく、
・自分がWebサイト上のどこにいるのかを理解しやすいように構造化することが重要です。
パンくず’リスト、タグ、コンテクストリンクは、単一ページの情報を構造化するために使用されます。
パンくずリスト
ページや投稿に、パンくずリストという形でナビゲーションを追加することができます。
パンくずリストは、クリック可能なリンクで構成され、ユーザーがサイト内のどこにいるのか、さらにサイト構造を正確に示すことができます。Mailchimpが採用しているようなパンくずリストは、ユーザビリティとユーザーエクスペリエンスを向上させます。
タグ
タグは、特定のページで類似したコンテンツをグループ化するもう一つの便利な方法です。
タグとカテゴリの違いは、カテゴリには階層があり、さらにサブカテゴリに細分化できるのに対し、タグには階層がないことです。タグは、単に類似したコンテンツをグループ化するだけです。
例えば、Grammarlyのブログでは、「how to」「product」「inspiration」などのタグを使ってブログのコンテンツをグループ化しています。
ECサイトでは、ブランドごとに商品をグループ化し、類似の商品に誘導するためにタグを利用することができます。
下記がタグを作成する際のベストプラクティスです。
- タグの数を増やしすぎたり、記事ごとに新しいタグを作らない。
- タグは、サイドバーやブログ記事・製品ページの最後など、サイト訪問者が目にしやすい場所に設置する。
コンテキストリンク
コンテキストリンクとは、Webページやブログ記事から、他のWebページの関連コンテンツを指すリンクのことです。つまり、関連性のあるコンテンツをユーザーに示すのに有効なリンクです。
ブログ記事のコンテキストでは、コンテクストリンクは、類似したコンテンツを持つ他のブログ記事をユーザーに示すために使用することができます。Grammarlyは、以下のようにブログ記事でこれを実現しています。
また、eコマースのページでは、関連する商品、他の人が買った商品、よく一緒に買われる商品などのページにリンクさせるコンテクストリンクが利用できます。
まとめ
Webサイトの構造とは、Webサイト上で情報をどのように整理し、相互に関連付けていくかということです。
効果的なサイト構造は、ユーザビリティとユーザーエクスペリエンスを向上させるためデザインプロセスにおいて重要なステップとなります。
UXPinでは、他のチームメンバーやデザイナーとコラボレーションしながら、Webサイトのデザイン、プロトタイプ作成、構造化を簡単に行うことができます。
興味にある方・気になっている方は、ぜひ14日間無料体験をお試し下さい。
