0リンクの色は基本的に青色がおすすめとは言われていますが、青色とひと言で言っても微妙に違うので、大手のサイトでも試行錯誤を続けています。そんな「青色のリンク」を、Googleなど検索エンジンの色を例に比較して一覧表にしてみました。ブログで使うリンク色はどんな色が最適なのか、下線やマウスオーバーをどうするのかなど、実際にデザインを変えながら見比べられるようにまとめています。どんな色がリンク色として良いんでしょうか。これは人によって最適な色が変わってくると思うので、ここから先の内容を読んで考えてみてください。訪問済みやマウスオーバーも含めたリンク色変化ブログのリンク色に最適な色は?検索エンジンのリンク色比較Googleのリンク色Yahoo!のリンク色Bingのリンク色ブログのリンク色は青色を強くしたほうが良いかもリンクは色よりも下線のほうが重要スマホにはマウスオーバーがないので注意まとめ検索エンジンのテキストリンク色変化まず、この記事を書くよりも昔のリンク色については参考記事があるのでこちらをどうぞ。ウェブ力学Bingではリンク色を2010年6月(0033cc)から2013年1月(0044cc)に変えることによって売上高が増加したという記事がありました。Japanそれらの過去データを参考にさせてもらい、自分でそれ以降の色を追記して一覧にすると以下のようになります。前同どういう理由で色の変化があったのかわかりませんが、昔は結構頻繁に変わってたみたいですね。Google・Yahoo!・Bingどれもですが、青色を弱くする傾向のようです。検索結果のリンク色では、通常の色以外にも「訪問済み」「マウスオーバーした時」のリンク色が用意されているので、時系列で表にしました。↓2014年12月時点。変化無し↓2016年4月。Yahoo!とBingが変化。↓2018年8月時点。Yahoo!とBingが変化。下線変化こうしてみると各検索エンジンごとのリンク色については微妙な違いですけど、下線の有無やマウスオーバー時のスタイルなど、細かい点では結構違いますね。個人的には普段Googleを使っていて慣れているというのもあって、Yahoo!の下線とマウスオーバー時の色変化がうるさく感じて使いにくいと感じました。逆に普段からYahoo!を使っている人にとっては、Googleが使いにくいのかもしれません。ブログのリンク色に最適な色は?テキストリンクに使われる色はサイトによって違いますが、ブログにはどんなリンク色が適しているんでしょうか。一般的な感覚だとこんな感じでしょうか。色覚異常の影響を受けにくい色(赤と緑は影響を受けやすい)そして昔から「青色に下線=リンク」というのが標準となっていて、インターネットが始まった時からの習慣のようになっています。検索エンジンの検索結果は「サイトへ飛ぶ」ということがあらかじめ分かっているため、そんなに目立たないリンク色でも問題無いかもしれません。ブログの場合は読んでいる文章の途中に突然テキストリンクが出てくるので、通常のテキストとリンクの見分けが付きにくいと見逃してしまう可能性があります。逆に目立ちすぎると文章を読んでいる途中で目が奪われすぎてしまい、文章の流れをぶった切ってしまうことにもなります。最終的には自分のブログでバランスを確かめないといけません。試しに2016年4月のリンク色でテキストリンクを貼るとどんな見た目になるのか書いてみます。色を付けるだけでリンクは貼っていないので、クリックしても何も起きません。Googleのリンク色Googleのリンク色1A0DABだと本文中にテキストリンクとして貼ってみるとあまり目立ちません。通常は下線がついてなくてマウスオーバーした時に下線がつくので、ブログのテキストリンクとしては使いにくそうです。Yahoo!のリンク色Yahoo!のリンク色0E1BBBだと下線があるのでリンクだとわかります。色の違いよりも下線の有り無しのほうがリンクの見分けやすさに違いが出そうです。Bingのリンク色Bingのリンク色001BA0は青がA0と弱めなため少し暗く見えます。前回の1020D0のほうが青色が強かったので見やすいとは思いますが、何か根拠があっての変更か検証中なんでしょうか。ブログのリンク色は青色を強くしたほうが良いかも上記のように、検索エンジンに使われている青色はちょっと青が弱めなので、ブログでテキストの中に使うリンク色の場合は青色をもうちょっと強くしたほうが良いんじゃないかなと思いました。いうのも、検索エンジンの検索結果は「そこにリンクがある」ということが最初からわかっているので、どんな色でも大丈夫っちゃ大丈夫ですが、ブログの場合はどこにリンクがあるのか読むまでわからないので、リンクだということがわかる色じゃないといけません。それを踏まえた上でどんな色が良いのか考えてみると、完全に青色0000FFにすると太字にした時に青が強すぎるので、0000D0とかちょっと青を弱くしたり昔のBingのように1020D0で青以外の色も少し入れて柔らかくするとか。ほんのちょっとの違いだし、読者側の液晶モニタ環境にもよって発色が違うので、青系統で下線付きという基本さえ守っていれば、間違いなくそれがリンクだということは認識してもらえます。基本的には下線を付ければどんな色にしてもリンクだということが分かってもらいやすいので、ブログの中で使われるリンク色が統一されていれば青以外の色を使っても問題はありません。色覚異常がある場合は、WordPressでよく見かける緑色のリンクが見にくい可能性があるので、下線があるだけでだいぶ見分けやすさが変わってくるだろうと思われます。下線を付けない場合はたとえ青色でもリンクだと気づいてもらえないこともありそうなので、よく確かめてから色を決める必要があります。下線を付けずに青系でリンクだと分かってもらうとしたら、薄めで明るい色にしたり太字にすればわかりやすくなりますね。※また、下線を付けない場合は必ず、マウスオーバーで下線を表示するようにしましょう。青を強くすれば見分けは付くようになりますが、まぶしくなったり通常色とケンカしないように気をつけないといけません。フォントの線が細いと難しいです。スマホにはマウスオーバーがないので注意スマホはマウスオーバーという概念がありません。指を乗せた時にマウスオーバーの変化は現れますが、パソコンのマウスと同じような機能としては役に立ちません。いうことはマウスオーバーで下線を付ける設定にしていても、画面を触らないとリンクかどうか判断できないため、マウスオーバーを頼りにしているとユーザビリティを損なう可能性があるので注意が必要です。スマホの閲覧がさらに増える現状だと、ブログ(特に本文中)のリンクは最初から下線付きにしておいたほうが無難と言えそうです。まとめここまで細かいことをいろいろ書きましたが、個人ブログだったらそこまでこだわらなくても、とりあえずリンクだと認識してもらえれば何でも良いと思います。アクセス数の大きいサイトやターゲット層がインターネットに不慣れな場合は、ABテストなどしてみたら改善できる部分が見つかるんじゃないでしょうか。関連:Screenpressoの使い方(スクリーンショット加工ソフト)スポンサーリンクこのページのシェア・保存はこちらスポンサーリンクスポンサーリンクAmazonでの買い物について当ブログではAmazonの商品をよく紹介しています。いつもコンビニ払いしている人は、Amazonギフト券をチャージするとポイントが余分にもらえるので、今まで知らなかったという人は読んでみてください。Amazonギフト券チャージタイプの詳細はこちらチャージする金額によって0.5~2.0%ポイント付与され、プライム会員ならさらに0.5%上乗せされます。ーーープライム会員の特典は「お急ぎ便無料」「プライムビデオで多数の映画やアニメ見放題」が特にお得。それ以外にも音楽・読書の使い放題サービスあり。一部でもよく利用する人なら非常におすすめです。記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。コメント(本文のみでOK。コメントをキャンセルメールアドレスが公開されることはありません。