ブログ・ウェブサイトのリンクの文字色

更新:

ウェブサイト・ブログで使用されるHTMLのリンク(<a>タグ)の文字は、昔から青色が定番だった。 HTMLまたはCSSで色を指定しない場合、ウェブブラウザのデフォルト値(青系)が適用される。

現在では文章・本文と同じ黒色を使用しているサイトも多く見かけるようになった。

黒色の場合、パソコンだとマウスカーソルを重ねればリンクだと気づくが、スマホだと気づきにくいため、リンクだと分かりやすいようにデザインなどが工夫されていることが多い。 また、スマホを意識してタップしやすいボタン型のリンクも散見される。

しかしながら検索エンジンの検索結果やWikipediaなど、青色のリンクは今も使われている。

ただ、いろいろなサイトを見てみると、暗いものから明るいものまで様々な青色が使用されていることに気づく。 しかも面白いのは、同じサイトでもパソコンとスマホで異なる青色を使用している場合もある。

以下は、Google、Yahoo! Japan、Bing、Wikipediaなどのリンクの文字色である。

未読リンク
■ #1a0dab; Google検索(PC版)、Bing(PC&モバイル版)
■ #1558d6; Google検索(モバイル版)
■ #0645ad; Wikipedia(PC版)
■ #3366cc; Wikipedia(モバイル版)
■ #000d99; Yahoo! Japan検索(PC版)
■ #0b62e5; Yahoo! Japan検索(モバイル版)
■ #1d3994; Yahoo! Japanトップ(PC版)
■ #1a75ff; Yahoo! Japanトップ(モバイル版)
■ #0033cc; Yahoo!ニュース(PC版)
■ #006ccc; Yahoo!ニュース(モバイル版)
■ #333333; Yahoo!ニュース(モバイル版・黒色見出し)
■ #00458b; developer.mozilla.org(PC&モバイル版)

既読リンク
■ #660099; Google検索(PC版)
■ #4b11a8; Google検索(モバイル版)
■ #0b0080; Wikipedia(PC版)
■ #6b4ba1; Wikipedia(モバイル版)
■ #4c2472; Yahoo! Japan検索(PC版)
■ #6246b8; Yahoo! Japan検索(モバイル版)
■ #663399; Yahoo!ニュース(PC版)
■ #949494; Yahoo!ニュース(モバイル版・黒色見出し)


傾向としては、パソコンは暗い青、モバイル(スマホ)は明るい青が多い。 実際にスマホで確認してみると、スマホでは明るい青の方が視認性が高いことが分かる。 暗い青だとリンクだと気づきにくい。

これらは多くの人が見ているサイトなので、自サイトを作る際、参考にしてみるのもよいだろう。

また、上記以外のサイトのリンクの色を参考にしたい場合は、ウェブブラウザの開発ツールを使うと良い。 Chromeは対象の要素を右クリックして「検証」、Firefoxは右クリックして「要素を調査」などで確認できる。

ただそれよりも、Chromeで[F12]キーなどで開発ツールを開いた後、メニューバー左端にある要素選択ボタン(□と↖が合わさったアイコン)を選択し、ページ上の要素にマウスカーソルを合わせるとcolorが表示されるので簡単に確認できる。


このエントリーをはてなブックマークに追加