uga.dev - A Front-end Engineer's shed

現在のテーマは「ライトモード」です。

下線を持つUIはすべてリンクなのか?

公開日:

  • #UI
  • #アクセシビリティ
  • #ユーザビリティ
  • #ビジュアルデザイン
  • #CSS

筆者は、そうあってほしい。


Webを構成する基本的な要素は、文書とリンクです。Web誕生当時、そのリンクを識別するために考えられた方法が「下線」でした[1]。現在もCSSで無効化しない限り、多くのWebブラウザでリンクには下線が表示されます。

かつて、Googleの検索結果のリンクから下線が外れたとき、ちょっとした混乱が起きたのを覚えています[2]。当時はそれくらい、下線がリンクを見分ける重要な手がかりとして受け止められていたのでしょう。

逆にリンク以外についてはどうでしょう。古い記事ですが、Adobe Blogの「ユーザー体験を向上させるテキストの下線の使い方」では、次のように紹介されています。

リンク以外のテキストに下線を付けない

リンク以外のテキストに下線を付けるべきではありません。たとえリンクに下線を付けないデザインだとしてもです。下線は、クリック可能という認識を強く与えるため、その期待に合わないとユーザーの混乱や不満の元になります。単語や語句を強調したければ、太字等を使用する方がずっと安全です。

出典:Adobe Blog ユーザー体験を向上させるテキストの下線の使い方

まさしく筆者の考え方がそのまま書かれているわけですが、この認識は2026年現在でも一般的なのでしょうか。

リンク以外で下線が引かれているUIを探してみる

「リンク以外で下線が引かれているUIを探してみる」へのパーマリンク

リンクにおける下線の有無に揺れはありますが、WebコンテンツであれOSであれ、リンクではないUIに下線がついているものは、探した限りだと見つけられませんでした[3]。

例としていくつかの行政のWebサイトなどを見てみると、下線がついているのは一貫してテキストリンクです。

Google検索では前述の通り下線が使われていませんが、下線が採用されているUI自体がなさそうです。

ただし、ページネーションはマウスホバーすることで下線が出る模様。

ソフトウェアはどうかということで、手始めにブラウザのUIを見てみます。たとえば、Google Chromeの設定画面はどうなっているでしょうか。

説明文の末尾にある「詳細」には下線がついており、クリックするとGoogle Chrome Helpが開くリンクになっています。他の画面も同様に、下線がリンクかどうかの手がかりになっているように見えます。

環境設定を覗いてみると、こちらもリンクにのみ下線が付いています。

「ニュートラルカラーモードの詳細」へのリンクは下線を持っていますが、それ以外のUIは下線を持っていません。

OSレベルになるとどうでしょうか。WindowsのUIをいくつか確認してみます。

古くからあるコントロールパネルではホバーで下線がつきますが、比較的新しい設定アプリの中のリンクは、マウスホバーをしても下線がつきません。Windows内部ではすべてのリンクに下線がついていると思っていたのですが、どうやらそうはなっていないようです。

とはいえ「リンクではないのに下線を持っているUI」は見当たりません。

macOSも場所によって揺れていて、一貫した整理にはなっていないようですが、少なくとも下線がついているものはリンクでした。

「一般」→「情報」の最下部にあるリンクには下線があります。一方、Spotlightのリンクにはなく、ユーザガイドのリンクはマウスホバー時に下線がつくようです。

下線を付けるべき、付けないべきシチュエーション

「下線を付けるべき、付けないべきシチュエーション」へのパーマリンク

リンクではないUIは下線を持たない。今回確認した範囲では、現在でもこの原則はある程度守られていました。

余談ですが、下線がない文中のテキストリンクもよく見かけます。それについては下線を付けたほうが良いでしょう。

グローバルナビゲーションや検索結果一覧では、リンクが並んでいることが、UIの見た目や文脈から判断しやすいです。一方、文中のテキストだとそうとは限りません。

WCAG 2.2の1.4.1 Use of Colorでは、情報の区別が色だけに頼った見た目であってはならないとされており[4]、下線がないリンクはこの達成基準を満たすことが難しくなっています。

長々と書きましたが、本記事における筆者の主張は1つです。

「リンクではないUIに下線を付けるべきではない」

非リンクUIへ下線を求められて悩んでいる方にとって、本記事が議論の根拠として助けになれば幸いです。

  • [^1]:Why are hyperlinks blue? - Mozillaによると、Tim Berners-Leeが作った最初のブラウザ「WorldWideWeb」は白黒表示で、リンクには下線がついていた。なお、同記事は1987年としているが、このブラウザが書かれたのはTim Berners-Lee本人の説明では1990年。
  • [^2]:2014年3月にGoogleが検索結果のリンクから下線を外した際、反応は分かれた(参考記事:End of an era: Google no longer underlining hyperlinks in search - Los Angeles Times、I Don’t Care What Google Did, Just Keep Underlining Links)。MozillaZine日本語版のフォーラムには同月5日、Firefoxだけで下線が消えたとの相談がある。また、同時期の議論にはOn Link Underlinesなどもある。
  • [^3]:abbr要素による点線下線などは例外。基本的にはtext-decoration: underline;に注目しています。
  • [^4]:リンクの文字色と周囲の本文の文字色とのコントラスト比が3:1以上あれば、色相だけでなく明度差でもリンクを識別できるため、1.4.1を満たす方法として十分である(G183)。ただし、下線などの手がかりがホバー時やフォーカス時にしか現れない場合は、1.4.1を満たさない(F73)。筆者は、色の組み合わせごとに3:1を確認するより、常に下線を付ける方がデザインシステムの運用コストを抑えやすいと考える。