リンクの下線は必要？ボタンが押されないホームページの見直し方

リンク視認性とは？

リンク視認性とは、ホームページの中で押せる場所（リンクやボタン）が、見た目で押せると分かる状態になっているかどうかのことです。本文の中のリンクが色や下線で周りの文字と見分けられるか、問い合わせのボタンがボタンだと分かる形をしているか、といった点で決まります。

押せる場所が見た目で分かれば、見ている人は迷わず次のページへ進めます。反対に、押せる場所が周りに溶け込んでいると、案内のリンクや問い合わせのボタンを用意していても、気づかれずに通り過ぎられてしまいます。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-11 リンク視認性」にあたり、77's Check!! の「No.41 リンク視認性」と同じ項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

リンク視認性で確かめる4つの観点

リンク視認性は「リンクに色が付いているか」だけで決まるものではありません。次の4つの観点がそろって、はじめて押せる場所が伝わります。

1つ目の「本文のリンク」は、W3C のアクセシビリティの指針 WCAG 2.2 の達成基準 1.4.1「色の使用」にも関わります。情報を伝える、動作を示す、反応を促すときに、色だけを手がかりにしないことが求められており、色だけでリンクを示していると、色を見分けにくい人には押せる場所が伝わりません。

押せる場所が分からないと、何が起きるか

押せる場所が見た目で分からないと、用意した案内のリンクや問い合わせのボタンが使われず、見ている人は次のページへ進まないまま離れてしまいます。とくに、本文の中で関連するサービスや料金のページへ案内しているリンクが見分けられないと、記事やサービスの説明を読んだ人を、その先へつなげられません。

反対の困りごともあります。見出しや強調したい言葉に、リンクと同じ色や下線を付けていると、押せないのに押せそうに見え、押しても何も起きずに戸惑わせてしまうのです。押せる場所と押せない場所の見た目が混ざっていると、見ている人はどこが押せるのかを毎回試すことになります。

見え方には個人差もあります。色の見え方は人によって違い、スマホの画面を屋外で見ると、薄い色の差はさらに分かりにくくなるのが実情です。W3C の WCAG 2.2 の解説書では、リンクを周りの文字と同じ見た目にすることは、それだけでは基準を満たさないことにはならないものの、使いやすさを損なうおそれがあるとしています。

この項目は、作った人ほど気づきにくいのが特徴です。作った人や社内の人は、どこにリンクがあるかを知っているので、見た目が分かりにくくても困りません。初めて見る人の目で確かめることが、出発点になります。

自社のホームページで確かめる方法

リンク視認性は、スマホで自社のページを開き、押せる場所が見て分かるかを確かめることで、まず確かめられます。作った人ではない人に見てもらうと、より確かです。

1. スマホで、本文の中のリンクを探す
   記事やサービスの説明のページをスマホで開き、本文の中のリンクが、色と下線で周りの文字と見分けられるかを見ます。明るい場所や、画面を少し暗くした状態でも見分けられるかを確かめてください。
2. 社内の人に「押せるところを指さして」と頼む
   ホームページの制作や更新に関わっていない人にページを見せ、押せると思うところを指さしてもらいます。指さされなかったリンクや、押せないのに指さされた文字があれば、見た目を見直す候補です。
3. 問い合わせなどのボタンを見る
   問い合わせ、資料請求、電話などのボタンが、色の面で塗られ、周りに余白があり、ボタンだと分かる形になっているかを見ます。文字だけのボタンや、背景と同じ色のボタンがないかを確かめます。
4. リンクの文言を読む
   「こちら」「詳しくはこちら」「クリック」のように、文言だけでは行き先が分からないリンクがないかを見ます。Google も、アンカー テキスト（リンクの文言）は、行き先が分かる説明的なものにするよう案内しています。
5. リンクの色と本文の色の差を調べる
   パソコンの Chrome でリンクを右クリックし、「検証」から開く開発者ツールで文字の色を選ぶと、背景とのコントラスト比が表示されます。WCAG 2.2 の達成基準 1.4.3 で求められる、本文の文字と背景のコントラスト比は少なくとも 4.5:1 です。リンクを色だけで示すなら、周りの文字との差も 3:1 以上あるかを、制作会社に確かめてもらいます。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。リンク視認性のほかに、グローバルナビやスマホ対応など、ホームページの基本となる項目をあわせて確かめられます。

リンクやボタンが押されない、よくある原因

リンクやボタンが押されない原因は、大きく分けて4つあります。多くは、見た目をすっきりさせたい、ブランドの色に合わせたい、という意図から生まれたもので、デザインの良し悪しというより、押せる場所の見え方を確かめる手順がなかったことから起きます。

見た目を整えるために、リンクの下線を消している

ページをすっきり見せるために、サイト全体でリンクの下線を消し、色だけで示している例は少なくありません。そのうえで、リンクの色が本文の色に近いと、周りの文字と見分けにくくなります。W3C の達成方法 G183 では、リンクと周りの文字の色の差を 3:1 以上にすれば色だけでもリンクを示せるとしたうえで、下線などの示し方を加えることも検討するよう添えています。

強調や見出しに、リンクと同じ見た目を使っている

強調したい言葉に色を付けたり、下線を引いたりしていると、リンクと区別がつかなくなります。押せない文字が押せそうに見え、本当のリンクが目立たなくなります。強調はリンクと違う方法で示す、という決まりがないことが原因です。

ボタンが文字だけ、または周りに埋もれている

問い合わせのボタンが、色の面のない文字だけのリンクになっている、背景の写真や色と同じような色で塗られている、周りに余白がなくほかの要素と詰まって並んでいる、といった作りだと、ボタンとして目に入りにくくなります。スマホでは、ボタンが小さいことも押されにくさの原因になります。WCAG 2.2 の達成基準 2.5.8 では、押す場所の大きさを少なくとも 24×24 CSS ピクセルとしています（文中のリンクなどは例外）。

リンクの文言が「こちら」だけになっている

「詳しくはこちら」「こちらをクリック」のように、リンクの文言だけでは行き先が分からないと、本文を読み返さないと押してよいか判断できません。読み上げ機能でリンクだけを順に聞く人にも、行き先が伝わりません。Google は、「こちら」のような汎用的な表現を避け、リンク先の内容が分かる文言にするよう案内しています。

リンク視認性の直し方（対策は3つ）

リンク視認性は、押せる場所の見た目の決まりをつくり、サイト全体の見た目の設定（CSS）に反映し、記事やページを足すときに確かめる手順を持つことで改善できます。ページを1枚ずつ作り直さなくても、見た目の設定を直すだけで全体に反映できる場合が少なくありません。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：押せる場所の見た目の決まりを、表にまとめる

最初にすることは、押せる場所をどう見せるかを決めることです。表の形は「種類／見た目／使う場面／使わない場面」がおすすめです。たとえば、「本文の中のリンク＝リンクの色と下線」「行動を促すボタン＝色の面と余白」「強調＝太字（色や下線は使わない）」のように決めます。

あわせて、確かめ方の手順1〜4で見つけた分かりにくい場所と、「こちら」だけのリンクを一覧にしておくと、制作会社に一度で伝わります。リンクの文言は、記事を書く人や更新する人が直せる部分なので、行き先が分かる言葉に自社で書き換えていきます。

目安として、決まりづくりと一覧づくりは、担当者1人で1〜2時間ほどです。自社で行えば費用はかかりません。

対策2：見た目の設定（CSS）で、サイト全体に反映してもらう

見た目の設定を直すのは、制作会社に頼みます。対策1の表と一覧を渡せば、どこをどう見せたいかが一度で伝わります。

頼むことは主に4つあります。1つ目は、本文の中のリンクに下線を付け、本文の色と見分けやすい色にしてもらうことです。ブランドの色を保ちたい場合は、その色の濃さを調整して、背景や周りの文字との差を確保する方法もあります。2つ目に、問い合わせなどのボタンを、色の面と余白でボタンだと分かる形にしてもらいます。3つ目は、強調や見出しに付いているリンクと同じ見た目を外してもらうことです。4つ目に、スマホでボタンが指で押しやすい大きさと間隔になっているかを確かめてもらいます。

費用と手間は、ホームページの作りによって変わります。見た目の設定がサイト全体で共通になっていれば、設定を直すだけで全ページに反映できることが少なくありません。ページごとに色や下線を指定している場合は、主なページから順に直すかどうかを含めて、作業の範囲と費用を相談するのが確実です。

対策3：記事やページを足すときに、押せる場所を確かめる

一度直しても、記事やページを足すたびに、「こちら」だけのリンクや、色を付けた強調が増えることがあります。分かりにくさを防ぐポイントは3つです。

1つ目は、記事やページを公開する前に、スマホで開いて押せる場所が見分けられるかを確かめることを、社内の手順に入れることです。2つ目に、リンクの文言は「〇〇の料金を見る」のように行き先が分かる言葉にする、という決まりを、記事を書く人に共有します。3つ目は、半年に1回など決まった時期に、社内の人に「押せるところを指さして」と頼み、見え方を確かめ直すことです。

制作会社に頼むときの伝え方

制作会社に頼むときは、対策1の見た目の決まりと、分かりにくい場所の一覧、スマホの画面の写しを添えて、「どのページの、どのリンクやボタンが、どう見えているか」を伝えると、確認が一度で済みます。リンクの見え方は、すっきり見せたいという意図から生まれやすいだけなので、デザインの雰囲気を保ったまま直せる部分です。誰が悪いかではなく、押せる場所の見せ方の決まりを一緒に決めることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• 本文のリンクの色・下線が、サイト全体の共通の設定で決まっているか
• リンクの色と本文の色、背景の色のコントラスト比
• 強調や見出しに、リンクと同じ見た目が使われている場所
• 問い合わせなどのボタンの色・大きさ・余白と、スマホでの押しやすさ
• 直した後に、スマホで押せる場所が見分けられることを確かめた結果

リンク視認性とあわせて確かめたい項目

リンク視認性は、見ている人を問い合わせまで迷わず案内するための項目（サイト顧客誘導力）の1つです。案内のしやすさに関わる、次の項目もあわせて確かめておくと、改善の効果を確かめやすくなります。

• グローバルナビ常設：どのページにも、主要なページへのメニューが同じ順序で置かれているか。
• スマホ対応：スマホで開いたときに、ボタンやリンクが押しやすい大きさになっているか。
• 文字が小さすぎない：スマホでも拡大せずに読める文字の大きさになっているか。
• CTA（申込ボタン）：問い合わせや資料請求のボタンが、目に入る場所と形で置かれているか。
• スマホで押せない・重なる要素：スマホでボタンが押せない、要素が重なって隠れている、といったことがないか。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• リンク視認性とは、押せる場所が見た目で押せると分かる状態になっているかどうかのことです。
• WCAG 2.2 では、色だけで情報や動作を伝えないことが基準の1つになっています。
• スマホで本文のリンクを探し、社内の人に押せるところを指さしてもらうことで確かめられます。
• 本文のリンクは色と下線、ボタンは色の面と余白、リンクの文言は行き先が分かる言葉にします。
• 見た目の決まりは自社で表にまとめ、全体の見た目の設定は制作会社に直してもらい、公開前に確かめます。

リンク視認性は、作った人や社内の人ほど気づきにくい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、リンクの見え方を含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。