テキストリンクに下線は付けるべき？｜有名サイト30から分析

あなたはリンクに下線を引いていますか？

テキストリンクはクリック率が高めで、成果発生にも関わってくる大切な要素です。しかし、「これが正解だ」というものがないため、スパッと決められるものでもありません。

それなら、幾度となく分析を重ねてきた先行者をマネしましょう。

この記事では、有名な30サイトのリンクを比較して、リンクに下線を引くべきかどうか、またどういったデザインにすべきなのかを考えていきます。今一度サイトのリンクを見直してみましょう。

有名サイトのリンクのデザインを調査

リンクに下線を付けるべきかどうか、なんて問題はすでに多くの人たちによって考え尽くされています。歴史ある有名なサイトなら、細かいデザインも幾度となく試行錯誤してきたはずです。

ということで、有名サイトのリンクに下線が付いているか調べてきました。

検索エンジン

まずは検索エンジンの検索結果ページです。

サイト	テキストリンクの下線	マウスホバー時の挙動
Google	なし	下線を表示
Yahoo! JAPAN	あり	色を変える
Bing	なし	下線を表示
Baidu(百度)	あり(メインのみ)	影を表示
DuckDuckGo	なし	下線を表示
Yandex	なし	色を変更
Naver	なし	下線を表示

「検索結果ページではリンクに下線を付けない」というのが一般的みたいです。おそらく、リンクばかりの検索結果ページで下線を付けると、画面が雑然としてしまうからだと考えられます。

ただ気になるのは、日本の”Yahoo! JAPAN”と中国の”Baidu”だけが下線を付けているということ。もしかしたら、漢字と下線の相性が良いということも考えられます。

ニュースサイト

サイト	テキストリンクの下線	マウスホバー時の挙動
Yahoo!ニュース	なし	下線を表示+色を変更
gooニュース	なし(引用リンクはあり)	下線を表示＋色を変更
NHKニュース	なし	下線を表示+色を変更
読売新聞オンライン	なし	下線を表示
産経ニュース	本文内のリンクはあり(薄い下線)	下線を非表示
サンケイスポーツ	本文内のリンクはあり	なし

告知や引用リンクなどの例外はあるものの、下線を付けていないサイトが多いという結果に。リンクの色も黒や紺などの暗色が多く、可読性を特に意識しているのが伺えます。

辞書・百科事典サイト

サイト	テキストリンクの下線	マウスホバー時の挙動
Wikipedia	なし	下線を表示
weblio辞書	あり(本文内のリンクは破線)	色を変更
goo辞書	なし	下線を表示
コトバンク	あり	下線を非表示
ピクシブ百科事典	なし	下線を表示
ニコニコ大百科	なし	下線を表示

辞書・百科事典サイトは下線を付けないサイトがほとんど。下線を引いているサイトでも、weblioは薄い点線、コトバンクは行間やフォントサイズを大きめにとるなど、閲読を妨げないようにする工夫が見られます。

リンクに下線を引くと記事中の単語が下線だらけになってしまうので、これは当然の結果と言えるでしょう。

メディア系サイト(ブログ)

最後は情報発信を行うメディア系サイト(ブログやオウンドメディア)。幅広いジャンルから有名なサイトを選びました。

サイト	テキストリンクの下線	マウスホバー時の挙動
ライフハッカー	なし	下線を表示
ファッションプレス	なし(目次を除く)	なし
北欧、暮らしの道具店	基本あり	なし
VICTORY [ビクトリー]	なし	なし
ゲームウィズ	なし	なし
TechAcademyマガジン	なし	色を変更
ガジェット通信	なし	下線を表示
ノマド的節約術	あり	色を変更
価格.comマガジン	なし	下線を表示
バズ部	なし	なし
はてながーる	あり	下に少しズレる

サイトによって多少ばらつきはあるものの、リンクには下線を付けないというのが多数派でした。

調査結果まとめ

結果をまとめると以下のようになります。

下線を付ける	7サイト(23%)
下線を付けない	21サイト(70%)
本文内のリンクだけ付ける	2サイト(7%)

数だけでどちらが良いか判断するのは危険ですが、リンクに下線を付けないのが主流であるのは確かですね。

これは多くのユーザーに「青文字 ＝ リンク」という認識が根付いたため、下線まで付ける必要が無くなってきたからでしょう。

しかし、下線を付けないサイトでも、その内の71%はマウスホバー時に下線を表示するよう設定していました。このことからも、未だリンクと下線の関係は根強いことが分かります。

---

リンクに下線を付けるべきか

ここからが本題。有名サイトの結果から、リンクに下線を付けるべきかどうかを考えていきます。

結論としては、サイトによって使い分けるのがベストです。どちらが正しいという明確な答えはありません。しかし、ジャンルやユーザビリティなどの観点から深堀りすれば、どちらが合ってるかが見えてきます。

リンクに下線を付けるメリット

目立ちやすい

下線付きのリンクは流し読みを防止してくれます。上から下へと視線を流す時、水平に引かれた線というのは視線を止める効果を持つのです。

誠に遺憾ですが、ブログ記事というのは流し読みされるもの。ユーザーは目立つ要素が見つかるまでスクロールを続けるわけですが、下線リンクなら自然にスクロールを止めることができます。

結果的にリンク自体のクリック率向上にもつながるので、決して無視できないメリットだと思います。

リンクであることが強調される

「青色の文字+下線＝リンク」というのは昔からの共通認識なので、誰でも一目でリンクだと理解できます。

ただし、最近は下線の付いていないリンクが増えたため、文字が青いというだけでリンクだと認識する人が多いはずです。

アクセシビリティが向上する

下線を付けることで、色盲や色弱の人もリンクだと認識しやすくなります。

青は色弱の人でも比較的見やすい色ですが、下線などの装飾があった方が親切だとは思います。

リンクに下線を付けるデメリット

リンクの文字が読みにくくなる

下線を付けると文章が読みにくくなります。特に、下線が長いほどその影響は顕著に現れます。

たとえば以下の二つはどちらが見やすいですか？(リンクではありません)

・下線を付けた長いテキストは読みにくく感じませんか？
・下線を付けた長いテキストは読みにくく感じませんか？

おそらく下の方が読みやすいと感じる人は少ないと思います。

実際に、ドイツのハンブルグ大学のリンクの視覚的効果を調べた実験では、リンクに付けた下線が文章の理解を妨げるという結果が出ています。そのうえ、文字を覆った半透明なマーカーよりも可読性を悪化させるとまで言われています。

文章全体の可読性を下げる

目立つというのは下線のメリットではありますが、状況次第でそれが裏目に出ることもあります。

たとえば、百科事典サイトのリンクに下線を付けたとしたら、こんな感じになってしまいます。

インターネット初期はデザインの手段が少なく、限られた色とフォントで表現する必要がありました。それでもなんとかリンクを強調しようとして生まれたのが、下線(アンダーライン)を付けるという手段でした。

単語レベルで下線が引かれていて視線が右往左往してしまったはずです。このように、下線付きのリンクが文章全体の可読性を低下させることもあります。

ディセンダーと重なる

ディセンダーとは、下に突き出る文字の一部です。たとえば、アルファベットの”p”やラテン文字”y“の尾の部分ですね。

下線を引く際はHTMLの<u>タグか、CSSで”text-decoration”に”underline”を指定するのが一般的ですが、これらの方法では下線がディセンダーと重なってしまうのです。(iPhoneのsafariは例外)

・Google is paramount company. （uタグ使用時）
・Google is paramount company. （text-decoration:underline; 使用時）

見て分かる通り、この現象がリンクを読みづらくしているのは間違いありません。

ちなみに、”border-bottom”を使うことで回避できますが、正直そこまでするのも面倒ですよね。

サイトのデザインを考慮する

先ほども解説しましたが、下線の付いたリンクは良くも悪くも目立ちます。そのため、シンプルなデザインとは相性が良く、装飾の多いデザインとは相性がよくありません。

たとえば、以下のようなサイトであれば、リンクに下線を付けない方が良いと考えられます。

ボックスやアニメーションを使った記事に下線まで加わると、画面が煩雑になり過ぎてしまいます。自分の記事を見直しながら、リンクに下線を付けるかどうか考えましょう。

ユーザー層から考える

デザインを決める際は、サイトを訪れるユーザー層も考慮しましょう。

インターネットに不慣れな人や高齢者が多い場合は、下線を付けてリンクであることをアピールすることも大事です。反対に、若者やネットリテラシーの高い人であれば、青字というだけでリンクだと理解してもらえます。

サイトのジャンルやアナリティクスの「ユーザー属性」などを参考にしながら、ユーザーに適したリンクにしましょう。

使用言語から考える

使用する言語と下線の相性も考えてみましょう。

英語はディセンダーと重なる、1フレーズあたりの文字数が多いなどの理由から、下線との相性が悪いと言えるでしょう。また、GoogleやBingが使っていないというのも決して無視できません。

逆に言えば、下線と重ならず文字数も少なく済むことから、日本語との相性はそこまで悪くないと言えるでしょう。Yahoo!やBaidu(百度)が下線を採用していることからも、その傾向は見て取れます。

言語の差ついては意見の分かれるところですが、とりあえずアルファベットを多用するサイトは注意した方が良いと思います。

リンクに下線を付けるべきか – まとめ

ここまでをまとめます。リンクに下線を付けるかどうか、以下の要素から判断しましょう。

---

下線の有無でリンクのデザインを考える

リンクに下線を付けるかどうか決めたなら、次はリンクのデザインを考えましょう。

下線を付ける場合は目立ちすぎないように、付けない場合はしっかりと目に留まるように。どちらの場合も、デメリットを緩和することを考えましょう。

下線を付ける時のデザイン

リンクに下線を付ける時は、派手さを抑えて可読性を下げないようなデザインを目指します。どうしても主観は入ってしまいますが、目に優しいリンクを心がければ大丈夫です。

下線を変える

もっとも簡単に読みやすくするには、下線のデザインを変えてしまうのが一番です。

たとえば、産経ニュースは薄めの直線を、weblio辞書は薄い破線を使用しています。どちらも読み物系のサイトですが、目に優しいデザインにすることで下線付きのリンクを実装しています。

・薄い破線なら邪魔にならない（weblio辞書）
・薄めの下線で自然にアピール（産経ニュース）

彩度を低めにする

リンク色の彩度を落として本文と馴染むようにしましょう。

具体的には、標準のリンク色(#0000ee)より彩度低めの色が良いのですが、背景とのコントラストはWCAG2.0推奨の4.5以上を保ちましょう。※WCAG：ウェブアクセシビリティの国際的ガイドライン

例として、コトバンクとノマド的節約術さんのリンク色のコントラストを見てみます。

・色は#0000ee、彩度は100で白背景とのコントラストは9.39（標準）
・色は#135cbb、彩度は89で背景とのコントラストは6.41（ノマド的節約術）
・色は#2F6be6、彩度は79で背景とのコントラストは4.81（コトバンク）

どうですか？ 標準のリンクより下二つの方が読みやすく感じるはずです。それでも、しっかりと背景とのコントラストは4.5を超えていますね。

他にも読み物系のサイトは多くありますが、下線付きリンクの色は彩度が80～80後半が多い印象です。これを参考にしながら、色の相互変換ツールで彩度を測りながら色を決めると良いでしょう。

他のテキストには下線を付けない

リンクに下線を付ける・付けないに関わらず、リンク以外のテキストには下線を付けない方が無難です。今時は「黒字に下線」というリンクも珍しくないため、下線があるだけでリンクだと勘違いされてしまいます。

「クリックしたらリンクじゃなかった」というのはストレスを感じるので、紛らわしい装飾は極力控えましょう。

下線を付けない時のデザイン

リンクに下線を付けない場合は、リンクだと認識されやすいデザインを心がけましょう。また、下線がある場合に比べて地味になってしまうので、少し目を惹くような色合いにするのも良いでしょう。

マウスホバー時に下線を表示する

なんだかんだで「下線がある＝リンク」というのが定着しているので、マウスホバー時には下線を表示すると良いでしょう。これだけでもリンクだと認識されやすくなります。

有名サイトでも「下線なしのリンク＋マウスホバー時に下線表示」の組み合わせが最も多かったので、それなりに信頼のおけるリンク表現と言えるでしょう。

ちなみに、下線表示に加えて色を赤に変えるという表現も多くみられました。色まで変えるのは過剰な気がするので、そこはお好みで。

・マウスホバーで下線を表示
・マウスホバーで赤色に変更して下線表示

彩度を高めにする

少し彩度を高くして本文に埋もれないようにしましょう。下線ありの時とは反対ですね。

参考までに読み物系サイトのリンク色を比較してみます。

・色は#0095DB、彩度は100（北欧、暮らしの道具店）
・色は#0033CC、彩度は100（Yahoo!ニュース）
・色は#036EB8、彩度は98 （NHKニュース）

このように、彩度が90以上あれば下線なしでも目に留まりやすいと思います。

ただし、リンクが多く並ぶ場合は彩度を高くしない方が良いでしょう。Wikipediaのリンク色が彩度高いと、目に悪くて仕方ありませんから。

他の装飾で目立たせる

下線以外の装飾で目を惹くようにするという方法。

文中の普通のリンクはそのままで、重要なリンクを1行で装飾するというのがミソです。これによってクリックしてほしい場所へ確実に目線を向けさせることができます。

それでは、いくつか実例を見てみましょう。

・太字にして目立たせる（バズ部）
・アイコンで外部リンクを強調 （ギブショット）

このように、太字にしたりアイコンを付けるというのが鉄板ですね。

また、内部リンクを貼る場合は、テキストリンクとブログカード両方を使うのもオススメです。クリック率の高いテキストリンクと視覚的な訴求力のあるブログカード、この二つを組み合わせるのが最近のトレンドだったりします。

他にもボタンリンクや画像リンクを使うのもオススメです。どれかひとつに絞らず、状況に合わせて使い分けましょう。

下線の有無によるデザインの差異 – まとめ

それでは、デザインについてまとめます。

リンクの色については背景とのコントラストやクリック率など、影響する要素が多く考えられます。もっとリンクの色について知りたい方は、Naifixさんの記事を参考にしてください。

【2021年最新データ】主要サイトのテキストリンク色比較

まとめ

今時はブログカードやボタンなど色んなリンクの種類がありますが、クリック率の高いテキストリンクを手放すことはないでしょう。

長く頻繁に使うものだからこそ、少しのデザインの差がユーザビリティを大きく変えてくれます。認識されやすく読みやすい、そんなリンクを作っていきましょう。