ページを分けても情報がつながる仕組み

長い内容を一つのWebページに詰め込むと、目的の情報を探しにくくなります。そこで、内容を話題ごとのページに分け、関係する箇所をハイパーリンクで結びます。概要から詳しい説明へ、商品一覧から個別の商品へ、記事から根拠となる資料へ、といった移動を必要な場所に用意できます。情報を分割して読みやすくすることと、分割した情報を結び直すことを両立させる仕組みです。

リンクには、移動先を示すURLと、画面上で利用者が選ぶ文字や画像があります。文字に設定されたリンクでは、その文字をアンカーテキストと呼びます。「こちら」だけでは移動先を予想しにくいため、「申込方法を確認する」のように、選んだ後に何が表示されるか分かる表現が適しています。リンクらしい色や下線など、選択できることを見た目で伝える工夫はシグニファイアの一例です。

木の枝のような階層と網の目のようなリンク

Webサイトの階層構造は、ページを大きなまとまりから小さなまとまりへ分類したものです。たとえば、トップページの下に「製品」「サポート」というカテゴリがあり、「製品」の下に各製品のページが置かれます。この関係は、幹から枝が分かれる木にたとえられます。URLの経路、メニュー、パンくずリストなどに階層を反映すると、サイト全体の中で現在地を把握しやすくなります。

一方、ハイパーリンクは階層どおりにしか張れないわけではありません。製品ページから、別の階層にあるよくある質問へ直接移動させることもできます。つまり、階層は情報を分類するための骨組みで、リンクは必要なページ同士を結ぶ経路です。Webサイトは木のように整理されながら、実際の移動経路は網の目のように広がります。

分類を細かくしすぎると、目的のページまで何段階も選ぶ必要があります。反対に、トップページへすべてのリンクを並べると選択肢が多くなり、違いを判断しにくくなります。内容のまとまりを考えて分類し、よく使う移動には階層を越えるリンクを用意することが大切です。これは情報を見つけやすい形に組み立てる情報デザインの考え方です。

URLとリンク文字列から移動先を読み解く

リンク先は、同じサイト内にも別のサイトにも設定できます。同じサイトの別ページへ導くものは内部リンク、別のサイトへ導くものは外部リンクと呼ばれます。内部リンクは、関連ページを見つける経路や、上位のカテゴリへ戻る経路になります。外部リンクは、一次資料や他の組織が公開する説明を参照するときなどに使われます。

ブラウザはリンクに設定されたURLを手がかりに移動先へ接続します。URLに含まれるドメイン名は、どのサイトへ向かうのかを見分ける重要な部分です。見た目の文字と実際の移動先が一致するとは限らないため、重要な操作では、リンク先のURLやドメイン名とDNSの関係にも注意が必要です。

ページを移動したりファイル名を変えたりしたのにリンクを更新しないと、移動先が見つからないリンク切れが起きます。また、どのページからもリンクされていないページは、公開されていても通常の閲覧経路から見つけにくくなります。構造を変更するときは、メニューだけでなく、本文中のリンクやパンくずリストなども確認します。

「今どこか」と「次に何があるか」を迷わせない

使いやすいサイトでは、主なカテゴリへ移動する共通メニューが各ページで同じように配置されています。現在のページ名、上位ページへ戻れるパンくずリスト、関連内容へ進むリンクも、現在地と選択肢を理解する助けになります。ブラウザの「戻る」操作だけに頼らなくても、サイト内の経路を選び直せる状態が望まれます。

リンクは、マウス操作だけを前提にせず、キーボードでも選べることが重要です。文字と背景の違いが分かり、リンク部分に意味のある文言があれば、さまざまな利用環境で内容をたどりやすくなります。こうした設計はユーザビリティとアクセシビリティに関わります。階層が論理的でも、メニューの位置やリンクの見せ方がページごとに変われば、操作は分かりにくくなります。そのため、構造の設計とユーザーインタフェースの設計は切り離せません。

リンク先は別ページだけとは限らない

ハイパーリンクは、別のページへ移るためだけのものではありません。長いページでは、目次の項目から同じページ内の見出しへ移動できます。URLの末尾に「#」と見出しなどを識別する文字列を付けると、ページ内の特定位置を示せます。この仕組みを使えば、資料全体ではなく、読んでほしい箇所を直接案内できます。

画像やボタンをリンクにすることもできますが、見た目だけでは目的が伝わらない場合があります。画像なら代替テキスト、アイコンだけのボタンなら役割が分かる名前を用意し、リンクの意味が文字情報としても伝わるようにします。ページを結ぶ技術そのものは単純でも、どこへ進めるのか、移動後に何が起こるのかを予測できる表現が、サイト全体の分かりやすさを左右します。