「ここをクリック」のようなリンクテキストを使ってはいけない (2001)

 (w3.org)
1 ポイント 投稿者 GN⁺ 2025-07-03 | 1件のコメント | WhatsAppで共有
  • 「ここをクリック」 のような一般的なリンクテキスト使用の問題点を強調
  • アクセシビリティ 向上の観点から、リンクテキストは コンテンツの意味 を明確に伝える必要がある
  • 検索エンジンおよび スクリーンリーダー利用者の体験 に悪影響を及ぼす
  • 明確で 文脈を反映したリンク文言 は、ユーザーにも技術にも利点をもたらす
  • 2001年から Web標準とUX原則 の観点で、適切なリンクテキストを推奨する動きが進められてきた

はじめに

  • 「ここをクリック」または「click here」のような 一般的なリンクテキスト の使用は、古くからWeb開発者の間で一般的な慣行として定着してきた
  • しかし、このような方法には アクセシビリティ、ユーザビリティ、SEO の面で重要な欠点がある

リンクテキストの意味と問題点

  • リンクテキストは、ユーザーが クリックする前にそのリンクがどこへ移動するのか を予測できるよう、情報を提供する役割を担うべきである
  • 単に「ここをクリック」と書かれているだけでは、文脈なしにリンクが存在することになり、ユーザーの混乱 と アクセシビリティ低下 を招く

アクセシビリティとユーザー体験への影響

  • スクリーンリーダー利用者は、ページ内のリンク一覧をたどる際に、どれも「ここをクリック」という同じ内容として読み上げられるため、情報の把握が困難 になる
  • リンクが 意味を含む具体的な文言 で書かれていると、視覚障害者を含むさまざまな状況のユーザーにとって 体験の効率性 が高まる

検索エンジン最適化（SEO）の考慮事項

  • 検索エンジン もリンクテキストを分析し、コンテンツの関連性や品質を判断する
  • 重要なキーワードや文脈を含むリンクテキストは、検索順位や露出度 の向上に好影響を与える

適切なリンクテキストの書き方の推奨

  • 文脈を明確に反映したリンクテキストの使用を推奨
    • 例: 「最新のアクセシビリティガイドラインを確認」 など
  • こうした原則は、2001年以降 Web標準の登場とUX強化 の流れの中で継続的に強調されてきた

結論

  • 「ここをクリック」ではなく 意味のあるテキスト をリンクとして使うことが、現在のWebでも将来のWebでも不可欠な基準である

関連記事

1件のコメント

 
GN⁺ 2025-07-03
Hacker Newsの意見

  • アクセシビリティの観点では、視覚障害のあるユーザー向けのスクリーンリーダーはページを線形に読み上げる方式であることを強調したい。この線形構造から離れるために、ユーザーは見出しやリンク一覧を別途たどることもできるが、すべてのリンクが「ここをクリック」のように表示されていると、実質的に非線形のアクセスが妨げられるという問題が生じる

    • すべてのリンクが単に「Amaya」のように、動詞なしの名詞だけで表示される場合も、それぞれの意味を把握しにくいという指摘。だから「get Amaya」や「go to the Amaya website」のような表現でも十分よいと思う。また、ダウンロードボタンが github.io にあっても、実際には sourceforge のようなマルウェアの危険があるサイトから実行ファイルを取得させるのはよくない例として wxMaxima に言及
    • 皮肉なことに、実際にはアクセシビリティ支援ツールを必要としない人たちが、それらの動作を簡単に可視化して理解できるような何かが必要だという提案。ツール自体を変えようという話ではなく、より多くの人がスクリーンリーダー環境を直接体験できる方法を考える必要性を認識
    • この問題にはすでにいくつかの解決策がある。例として WCAG 2.2 HTML H33ガイド、WCAG 2.2 CSS C7ガイド へのリンクを参考資料として提示。ただし、最初の方法が実際のスクリーンリーダーでどの程度うまくサポートされているかははっきりしない
    • 良い主張だと思う。それでもリンクテキストは「Amaya」より「Get Amaya」のように、より明確な行動を含めたほうがよいという立場
    • スクリーンリーダーはページ内で複数のナビゲーション方法を提供する。線形移動だけが最も非効率な方法だ。利用者はランドマークや見出し、あるいはアウトラインナビゲーションモードを通じて、すばやく目的の位置へジャンプできる。重要なのは、スクリーンリーダーのナビゲーション方式とキーボードナビゲーションは異なるという点

  • 「自分」は、文中で提示されている「問題のある」例である

    W3Cのエディタ/ブラウザ Amaya をダウンロードするには、ここをクリック。
    これは本当に直感的だと思う。リンクをクリックすれば、すぐファイルのダウンロードが始まるか、ダウンロードページに移動すると予想できる。
    一方で、
    Amaya を入手！
    こういう文句はウェブサイトのメインページへ移動しそうな感じがするので、実際のダウンロード用リンクとして使うと効果が薄い。
    そして、
    Amaya についてもっと知る
    これはダウンロードとはまったく関係なく、動詞「もっと知る」はリンクになっていないので、こういう場合「Amaya」リンクがランディングページに行くのか、情報ページに行くのか混乱する。
    Webでの慣習は従来の例のように
    W3Cのエディタ/ブラウザ Amaya をダウンロードするには ここをクリック
    Amaya のダウンロード、W3Cのエディタ/ブラウザ
    という形だ。
    リンクテキストに動詞を使うべきでないという主張には同意できない。むしろ、行為（ダウンロード、情報確認など）が必要なリンクなら、明確に動詞が入るべきだという立場だ。
    とくに「ここをクリック」は単なる参照リンクではなく、アクション性のあるリンクだと示すので非常に直感的だ。
    Amaya を入手！
    こういう文句は、実際に Amaya をどう入手するかを案内するリンクではなく、ただの参照リンクのように感じられる点を強調

    • スクリーンリーダーで実際に使ってみると、すべてのリンクが「ここをクリック」だけ繰り返されることが分かる。これはまったく役に立たない。検索エンジンの観点でも「ここをクリック」は何の情報も提供しない。動詞自体は問題ないが、「ここをクリック」のようにリンクが同じように聞こえるのは避けるべきだ。「Click Here to download Amaya」のように対象まで明確に含めた文言はよいが、単に「ここをクリック」だけでは多くの状況で区別できない
    • 「ここをクリック」リンクは本当に嫌いだ。自分が欲しいリンクを探すには、ページ内の全リンクテキストだけを目でざっと見ることが多いが、「Amaya のダウンロード」や「Amaya」なら参照ページとしては許容できても、「ここをクリック」はまったく役に立たないと思う
    • 実際の例では、すべてのリンクが Amaya のホームページに移動する。ダウンロードページではなく、メッセージの伝達力をむしろ弱めている。「ここをクリック」というアクセシビリティ上の問題と、リンクテキストがリンク先の目的をどれだけ正確に反映しているかを混同して議論しているという批判
    • スクリーンリーダーの話以外にも、リンクテキストを明確な名詞にしておくと保守の観点で利点があるかもしれない。たとえば、意図と違ってコピペされたリンクや、切れたリンクがあった場合、テキスト自体が手がかりになるので追跡や修正がしやすい。少し些細ではあるが
    • 初期のWebにはこうした「ここをクリック」リンクが多かった。徐々に動作が明確なボタン形式に置き換えられ、「この購入をキャンセルするには [ここをクリック]」「この購入を完了するには [ここをクリック]」のようなパターンはだんだん消えていった

  • 英国 Government Digital Services でも似たアクセシビリティガイドラインが推奨されていることを紹介。公式資料は こちら で確認可能

    • このガイドラインを参考資料として、最高レベルのアクセシビリティコンポーネントやWebデザインを実装する際によく参照している。無骨に見えるかもしれないが（太い黒/黄の枠線など）、デザインよりアクセシビリティを優先することが重要だと思う
    • Home Office が推奨する方式は W3C と少し異なる。たとえば
      W3C:
      Get Amaya
      Read more about Amaya
      Home Office:
      Get Amaya
      Read more about Amaya
      Home Office 方式のほうが合理的だが、文脈によっては別の問題が生じることもある。どちらも実際には、文章中のハイパーリンク活用よりアウトオブラインのボタン式で解決したほうが自然だ（例: [Download], [Documentation]）。自分の経験では、テキストを自然に組み替えた
      「PiPedal は Raspberry Pi で動くギターエフェクトです。PiPedal のダウンロードは [ダウンロードページ]、文書を読むには [Documentation]。」
      こういう形式のほうがよいと思い、実際の文書でもそう書いた
      「ここをクリック」を名詞化するのは思ったより難しいと気づいた。場合によっては、インライン文の中で十分な文脈が提供されているため、「ここをクリック」の使用が実際にはアクセシビリティ問題を引き起こさない例もある
      とくにボタンがすぐ上に配置されている場合（"Download", "Documentation"）は、わざわざ修正が必要かどうか確信が持てない 究極的には、人々がダウンロードページを実際にどれだけ訪れるかがパフォーマンス指標

  • 個人的には、記事で避けるべきとされた2番目の例（「Amaya をダウンロードするには Amaya website に移動して必要なソフトウェアを入手する」）のほうがよいと感じる。
    単に「Amaya」だけをリンクにすると、内部リンクなのか外部リンクなのか、そして直接ファイルに行くのかダウンロードページに行くのかが明確でない

    • 行き先が外部か、ファイルリンクか分かるようにアイコンを追加する方法が好み。ファイルなら拡張子を表示してもよいというアイデアを共有
    • 内部リンク・外部リンクの区別の問題は Wikipedia などで小さなアイコンによりすでにうまく解決されている

  • 年齢のせいかもしれないが、直感的にはリンクは名詞（場所/対象）を指すためのものだと考えてしまう。
    なので「私のウェブサイト」へのリンクなどはよいが、「私のウェブサイトへ移動」のように動詞が入った文句には抵抗がある
    とくに命令形が嫌いなので、「go to my website」「follow this link」のような形式は使わない

    • この意見には共感する。ダウンロードのようにアクションがある場合は混乱することもあるが、「ダウンロード」自体は名詞なので問題なさそうだ
    • チュートリアルや How-to ページでは命令形の文句も適切だと思う

  • オンラインで「ここ」だけをリンクにするのは、ハイパーテキスト文書の書き方そのものをまったく理解していないという根本的な失敗だと感じる立場。「ここをクリック」はまるで台本のト書きのようだ。多くの著者がハイパーテキストの文脈で文章を書いていないことから生じる問題だと思う

  • 「I forgot my password」のような文句をリンクにするとき、「ここをクリック」のように変えてみようと思ったが、直感的に何か違うと感じた。
    UI の標準が崩れることで、ユーザーがページ上のどこをクリックすべきか、どのテキストが自分の意図を表しているのか混乱することが多くなった
    「I forgot my password」がボタンなら、リンクよりずっと効果的だという点には同意する
    また Microsoft がボタンをほとんどなくして曖昧な色のリンクに置き換えたとき、どこを押せばよいのか分かりにくい事例が増えたこともあった
    （参考ポスト: 関連 Mastodon 投稿）

  • Dragan Espenschied の2022年エッセイ リンクテキスト変遷史 を紹介。
    最近、リンクテキストが call-to-action（行動喚起）から、ユーザーの状態（自分がどんな人かという定義、例: 「ログインしてください」）を説明するボタンテキストへと変わる傾向にあると述べている

  • 記事で説明された原則の大半には同意するが、「download」のように動詞や動詞句が明確に出ていたほうがよい場合は、例外的に適切なことがあると思う。この場合は、必ず直接ダウンロードにリンクしているときにだけ使うべきであり、常に文脈に合っているか確認が必要

  • 例のように、すべてのリンクで実際に Amaya のダウンロードが始まるなら、Download Amaya 形式のハイパーリンクが最も好ましい。
    できればダウンロードであることを示すアイコンも一緒に付けてほしい。実際のファイルリンクではなく、広告ボタンがいくつも混ざったダウンロードページへ誘導されるのは避けたい