SEO・プロモ 構築 お役立ち情報

簡単にできるSEO対策 フォントカラーを変え「見やすいサイト化」を

レンタルサーバー フォントサイズとカラーを変えて見やすくするとサイト作成者は考えます。

ホームページの記事を一生懸命作成し公開すれば、サイトをご覧になる方は記事の内容をじっくり読んでいただける・・・・

記事を作るその前に、ホームページの文字・テキストを少し変えるだけで、とっても見やすいページになる方法があるのをご存知ですか?
意外と当たり前すぎて盲点になりがちですので、このページで解説します。

フォントの色について

WordPressのテンプレートでページを作成するとき、テキストの基本設定は「黒字」(カラーコードでは#000000)になっているケースも多いので、白地の背景(#ffffff)に真っ黒な文字を並べて書いていませんか?

文字が少ない場合はまだ問題はあまりないのですが、数百字~数千字の長文ですとコントラストが強すぎて目が疲れ、その結果、途中で読まれなくなる、最悪の場合サイトから離脱してしまいます。

大手サイトのフォントカラーの設定は?

長文を配信している大手サイトのフォントカラーを調べてみますと、「黒字」(カラーコードでは#000000)を使っているケースは少なく、下記のようになっています。

ブラウザ「Chrome」拡張機能 ColorPick Eyedropperをインストールすれば、マウスを乗せるだけでサイトで利用されている色を確認できますよ
これで解決
文字色
(カラーコード)
採用サイト名
#222222 Wikipedia
#333333 Yahoo!ニュース
日本経済新聞
Amazon
Apple
#545454 Google

#000000 サンプルテキスト

括弧に囲われた文章が、カラーコード #000000 の文章例です。いわゆる「真っ黒」な文字で、大手サイトではあまり使われていません。

この設定から、少しずつ薄く目に優しくなりますので、確認しましょう。

#222222 サンプルテキスト

レンタルサーバー フォントカラー#222222の配色分布例

Wikipediaなどで利用されているテキストカラーです。#000000よりはやや薄いのですが、目に見えてはっきり分かる薄さではありませんね。

今まで#000000に設定していて、少しだけ薄くしたい場合には最適です。

#333333 サンプルテキスト

レンタルサーバー フォントカラー#333333の配色分布例

Yahoo!ニュースや日経新聞、Amazonなど大手メディアやサービスで主に利用されているフォントカラーです。

見慣れているユーザーも多く、違和感なく受け入れられる色ですので、サイト滞在率を高めたいサイトにはお勧めです。

*当サイトの設定も#333333です。

#545454 サンプルテキスト

レンタルサーバー フォントカラー#545454の配色分布例

グーグルなどで利用されているフォントカラーで、今回の例の中では最も薄い色です。

目にはとても優しく、テキスト分量の多いサイトなど文字が中心のサイト、また洗練されて見えますので、高級感のあるサイトなどには適しています。

 

ココがポイント

大手サイトは、極めて大きいアクセス数や閲覧者の反応を見て文字色を決定していますので、現在の設定がもし#000000でしたら、大手サイトの設定を参考に変更されますことをお勧めします。

まとめ

日々サイトを運用する管理者、記事を作成する担当者は技術的なことやコンテンツの情報収集に集中して、足元のフォントについて意外と見落としていることがあります。

小さな変更ですが、ちょっとでも見やすいページにすることで記事やコンテンツに集中していただける環境を作ることができます。間接的に、サイトの売り上げやコンバージョンの向上に結び付く可能性もあります。

テンプレートによっては、フォントカラーを一瞬で設定変更できる箇所がありますので、自社の記事やコンテンツに合うフォントカラー設定にされることをお勧めします。

Copyright© 【2019年・令和最新】レンタルサーバーとネットショップ作成・ドメインサービス比較・評価・検討・紹介サイト by STREN , 2019 All Rights Reserved.