Web サイトの URL 構造設計と情報アーキテクチャ | アドビ UX 道場 #UXDojo

ワンクリックで顧客が競合他社サイトに流出する可能性のある現在、魅力的なユーザー体験をつくり出すために時間と労力を投資したいと思うのは当然です。そして、訪問者の関心をつなぎ止めてサイトに留まらせたいのであれば、直感的なナビゲーションは欠かせません。

ナビゲーションの設計は、まずコンテンツの分類から始まります。分類が完了して、サイトに適用したい構造を把握できたら、次は URL の作成に注力する番です。URL 構造はサイト構造の核となる部品の一つであり、ユーザビリティに直接影響します。URL の設計が優れているほど、ユーザー、そして検索エンジンが、サイト内を回遊しやすくなります。

この記事では、よりユーザーフレンドリーな URL 構造を作成するためのいくつかの推奨事項をご紹介します。

IA を決定してから URL 構造を設計する

サイトの情報アーキテクチャを確定する前に URL 構造を作成することは、典型的な間違いの一つです。IA の設計から始めなければ、URL の一貫性を実現することは困難です。これは、しっかりした土台をつくらずに家を建てるようなものです。さらに悪いことに、後から判明した IA が関わる問題に、URL の変更だけで対応するのは、多くの場合に不可能です。

ですから、まずユーザー調査を行い、カードソートやツリーテストのセッションを繰り返し、訪問者に効果的なカテゴリを把握してから URL 構造の設計を始めることが、どのような場合にも推奨されます。

同分野の主要サイトのモデルを参考にする

ヤコブの法則がインターネットのユーザー体験に関して示唆しているのは、ユーザーがほとんどの時間を他のサイトで費やしているということです。そのためユーザーは、設計中のサイトが公開されたときに、既知の他のサイトと同様に機能することを期待します。つまり、ユニークな使い勝手を検討するよりも、業界で標準的に使用されている既存のパターンを利用する方が、一般的には良い考えなのです。そうすれば、ターゲットにしているユーザーは、新しいサイトでも馴染みのある体験を得られます。

このルールは、サイト構造だけでなく、ほとんどのデザインに関する判断に有効です。競合他社サイトの分析・評価を行い、同様の構造の適用を検討しましょう。

URL 構造にカテゴリを反映させる

カテゴリ分けは情報アーキテクチャの基本です。これは、サイトの URL 構造にも反映されているべきです。カテゴリのトップページを設けると、コンテンツを整理するのに効果的です。新しいページを追加するとき、そのページが属する既存のカテゴリ（あるいはサブカテゴリ）を決定し、そのカテゴリのトップページからリンクします。その際に URL 構造はカテゴリ分けのロジックに従うようにします。

https://example.com/category/subcategory/keyword-keyword

Best Buy のウェブサイトで、特定の商品ページにたどり着くまでの時系列的なサイト構造を示すスクリーンショット。

Best Buy の URL 構造には商品カテゴリが含まれている　出典: Best Buy

必要以上にリンクを深くしない

サイト訪問者も検索エンジンも、ページの重要度を判断する手がかりとして、サイト構造を用います。その際に重視される点の一つは、トップページから目的のページに到達するまでのクリック数です。トップページから 1 クリックで到達できるページは、一般的に重要だと考えられます。しかし、5 クリック先にあるページに重要なコンテンツが置かれている可能性は低いでしょう。理想的には、重要なページはトップページから 2 ～ 3 階層の間にあるべきです。4 クリック以上離れると、重要性が低いとみなされがちです。

機能的な URL

ここで機能的な URL と表現しているのは、ユーザーが別のページに移動するために変更できる URL のことです。例えば、 ” /level1/level2/level3” という URL にページを持つサイトが、 ” /level1/level2” も実際のページとして持つことを意味します。このように、ユーザーが URL を変更して有効なページに到達できるように、サイトの構造が柔軟であることを確認しておきましょう。

Amazon のウェブサイトの 404 ページのスクリーンショットには、2 匹の犬が表示され、商品が見つからなかったことを詳しく説明しています。

Amazon.com では URL を修正しようとすると 404 ページになることがある　出典: Amazon

短い URL と長い URL

URL 構造は様々な方法で作成することができます。例えば、靴を販売するコマースサイトの場合、フォルダーのような構造（例: “/shoes/men/oxfords/” ）にすることも、すべてが同一のレベルに集約されるフラットな構造（例: “/shoes-men-oxfords" ）にすることもできます。それぞれの構造に長所と短所がありますが、一般的には URL の長さが構造を判断する最終的な要因になります。

URL 構造を選択するときは、常に短い URL を作成することを意識すべきです。というのは、サイト訪問者にとって、短い URL の方が覚えやすくて入力しやすいからです。しかし、多くのカテゴリやサブカテゴリがあるサイトでは、サイトの階層を反映させた長い URL の方が適切なこともあります。特に、サブフォルダの構造は、機能的な URL を作成しやすくしてくれます。

人が読める URL

見た瞬間に直感的に訪問者が意味を理解できる URL は、サイトの使いやすさを向上させます。言い換えるなら、訪問者は、通常の文章を読むように URL を読むことができるべきです。すなわち、カテゴリ名や個々の商品名などの説明的な単語を、URL に入れるのは理にかなっています。ダッシュ記号で単語をつないだ URL の使用も検討してみましょう。

ハイフンとアンダースコア

URL には、アンダースコア（_）よりもハイフン（-）を使うこが推奨されます。その理由は、ユーザーには、アンダースコアがスペースに見えることがあるためです。誤って読み取ったユーザーは、実際に存在するページではなく、404 ページを訪問することになるかもしれません。

URL に技術的な側面を含めない

URL が example.php や example.asp のようなサーバーサイドスクリプトのファイル名を含んでいると、訪問者に URL が難しそうに見えるだけでなく、使用する技術の変更を決定したときに問題が起きます。例えば、PHP から Python に変更することにしたときには、example.php のような URL も一緒に変更する必要が発生します。

また、セッション ID やユーザー ID を URL に追加することも避けるべきです。多くの CMS が、サイト閲覧中の個々のユーザーを追跡するためにセッション ID を URL に追加します。検索エンジンは、セッション ID 付きの URL を、同じページとしてではなく異なるページとして扱うことがあるため、セッション ID を追加する代わりにクッキーの使用を検討するとよいでしょう。詳しくは Google のガイドラインをご覧ください。

コンテンツごとに URL を固定する

一貫性のないナビゲーションは、最も一般的な IA の課題の一つです。サイトによっては、訪問者のアクセス方法により、同じページが異なる URL を持つことがあります。例えば、トップレベルのナビゲーション経由でページにたどり着いた場合と、テキストリンクを経由して訪れた場合の URL が違う場合です。同一ページの URL が異なるようなケースが一切無いことを確認しましょう。

URL に適切なキーワードを加える

ユーザーはしばしば検索エンジンにキーワードを入力することから閲覧を開始します。こうした検索の上位にコンテンツを表示させるために、URL は重要な要素になります。また、適切なキーワードを URL に含めることは、検索エンジンだけでなく、ユーザーにとっても有益です。URL に含まれるキーワードは、ユーザーがリンクをクリックする前から、そのページで見ることになるものを期待させます。

ただし、使用するキーワードは論理的であることが必要です。検索エンジンのランキングを上げることを目的にキーワードを URL に詰め込むと、ペナルティを受けるリスクがあります。

メンズジャケットとその商品ページの URL 構造を示す Mr. Porter のウェブサイトのスクリーンショット。

Mr. Porter は URL に商品名を追加している　出典: Mr. Porter

URL 構造の一貫性

コンテンツをカテゴリ分けするプロセスは、コンテンツを構成するために利用可能なシナリオの特定に役立つはずです。ナビゲーション構造をつくったら、サイトのナビゲーションが、一貫したパターンに従っていることを確認しましょう。そして、その情報に基づいて URL 構造を作成します。URL のパターンがナビゲーション構造に合わない特殊なケースの存在には、特に注意を払いましょう。

URL の変更とリダイレクト

完璧に整理されサイトでも、コンテンツが移動する可能性は常にあります。URL を変更する際にはリダイレクトを利用して、新しい URL に誘導することができます。リダイレクトには 301 と 302 の 2 種類があります。301 はページが恒久的に新しい場所に移動したことを意味しますが、302 は移動が一時的なものであることを意味します。

また、常にリンク切れが無いことを確認するようにしましょう。そのための便利なツールも利用できます。

URL 構造をテストする

デザインは繰り返し確認と修正が行われるプロセスです。サイト構造の開発も例外ではありません。URL の設計方針について仮説を立てたら、簡単なプロトタイプを構築し、ユーザーとテストしてみましょう。その結果を URL 構造に反映させ、再びテストを繰り返すことが重要でます。

おわりに

URL 構造については、「サイトの URL 構造は可能な限りシンプルであるべき」という短くて強力なアドバイスがあります。KISS の原則（keep it simple, stupid）は、あらゆるデザイン関連の判断に適用できますが、そこには URL 構造も含まれます。サイト構造と URL 構造が構造化されていて、論理的でシンプルであれば、サイト訪問者にも検索エンジンのクローラーにも、より有益なサイトになるでしょう。

この記事は URL Structure & Website Information Architecture（著者: Patrick Faller）の抄訳です