●フォントのサイズは決まったけど、文字色って何色がいいんだろう？
今回はこのようなお悩みにお答えします。
こんな方におすすめ
- AFFINGER6を使用している方
- AFFINGER6の文字サイズを迷ってる方
- ブログ記事の見やすさにこだわりたい方
本記事の信頼性
WordPressブログの有料テーマであるAFFINGER（アフィンガー）は多機能でカスタマイズ豊富です。
ブログ初心者の方はまず記事の見やすさにこだわるのがベストです。そのためには文字色とサイズは重要な要素になります。
今回はAFFINGER6おすすめの文字サイズと色について解説していきます。
ちなみに当サイトからのAFFINGER6を購入された方にTetsu blog限定特典14個をプレゼントしています。詳細は、AFFINGER6の特典14個付きレビュー！使用感を徹底解説で解説しています。
※当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、6桁収益までグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
それでは早速始めていきます。
目次
ブログのフォントサイズが重要な理由
ブログのフォントサイズが重要な理由
ブログのメインは記事を書くことです。どんなにおしゃれなサイトをデザインしても結局記事を読んでもらえないと意味がないですよね。
重要な理由として、フォントサイズはユーザーの目に止まって記事を読んでもらえるか最初のポイントになる一つだからです。
例えば、下記例文にて見比べてみます。
小さい文字の場合
当たり前ですが、気分とモチベーションは違います。モチベーションは動機や結果に対する意欲、と訳されています。モチベーションが高ければ自然とゴールを達成するために動くことができるでしょう。しかしモチベーションが高くても行動が伴わないことがあります。なぜなら人の行動力は、モチベーションが支配しているのではなく行動力は気分で決まるからです。
大きい文字の場合
当たり前ですが、気分とモチベーションは違います。モチベーションは動機や結果に対する意欲、と訳されています。モチベーションが高ければ自然とゴールを達成するために動くことができるでしょう。しかしモチベーションが高くても行動が伴わないことがあります。なぜなら人の行動力は、モチベーションが支配しているのではなく行動力は気分で決まるからです。
もちろん改行などをしておらず文章がつながっているので両方読みづらいかもしれませんが、大きい文字の方が読みやすいのではないでしょうか。
サイトのカッコよさを意識してスタイリッシュな小さい文字を活用するあまり文字が読みづらくなり、ユーザーに読んでもらえなければ本末転倒ですよね。
逆にこれ以上大きすぎるフォントサイズだと、読みにくく感じてしまうので、ユーザーを考えたフォントサイズの設定が必要だということです。
適切なフォントサイズはテーマによって異なる
適切なフォントサイズはテーマによって異なる
フォントサイズは重要とは言ってもブログテーマやサイトによって適切なフォントサイズは異なってきます。
例えば改行を多く使うブログであれば、大きい文字でも良いかもしれませんが文字が小さすぎると余白が多くなり帰って読みにくくなることもあります。
またHow to系の記事や雑記等テーマによっても異なってきます。
ということなので、
- 記事の内容
- 使用するテーマ
- 記事のジャンル
などの要素でフォントサイズは変わってきます。
そのためフォントサイズを決める前に、
- 使用するブログテーマ
- ブログの方向性（ジャンルなど）
をあらかじめ決めておけば、後から修正する必要もなくなります。
上記についてまだ迷ってる方は、以下でご紹介していますので、合わせてご覧ください。
AFFINGER6おすすめのフォントサイズ
AFFINGER6おすすめのフォントサイズ
それではAFFINGER6のおすすめフォント（文字）サイズについて紹介します。
スマホ・タブレット・PCそれぞれのおすすめフォントは下記です。
スマホ閲覧時
スマホ閲覧時フォントサイズ
タブレット閲覧時
タブレット閲覧時フォントサイズ
PC閲覧時
PC閲覧時フォントサイズ
本サイトでも使用しているフォントサイズになります。一般的に多くのサイトの文字サイズは16～18で作られているので、基本サイズはこの間にしておきましょう。
AFFINGER6 おすすめのフォントカラー
AFFINGER6 おすすめのフォントカラー
フォントサイズと同様に重要なのがフォントカラーになります。
サイトなどを長時間見ていると目が痛くなったりすることもありますので、できるだけ目に優しい色にした方が良いです。
例えば、ブログなどのサイトは基本的に文字色は黒が一般的に使われています。とはいえ黒色でも色々あるので設定を変更するおすすめします。
ブログテーマでは一般的に初期設定では『#000000』が設定されています。
しかしおすすめは『#333333』です。
#333333のフォントカラーはYahoo!ニュース、楽天市場、日本経済新聞などで扱われており、大手企業も採用しています。
『#000000』は真っ黒なので、背景色とのコントラストが強く目が疲れてしまいます。文章を読んでもらうユーザーを考えればあまり適切でないですね。
一方『#333333』はグレー色に近くなります。コントラストが弱くなるので目が疲れにくくユーザーにとっても優しいです。
#000000の場合
フォントカラー比較：#000000の場合
#333333の場合
フォントカラー比較：#333333の場合
どうでしょうか？こうやって見比べてみると案外違いがわかると思います。
ちょっとしたことですが、柔らかいカラーの方がユーザーにもいいので設定してない方はしておきましょう。
AFFINGER6でのフォントカラー変更について
AFFINGER6でのフォントカラーの設定は簡単にできます。
カスタマイズ⇒各テキストとhタグ⇒テキスト色一括変更で調整可能です。
AFFINGER5テキストカラーカスタマイズ画面
ここで変更しておきましょう。
他サイトのカラーの調べ方は【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で詳しく解説しているので参考にどうぞ。
まとめ：AFFINGER6でフォントサイズ＆カラーをカスタマイズして記事を見やすくしよう
まとめ：AFFINGER6でフォントサイズ＆カラーをカスタマイズして記事を見やすくしよう
今回はAFFINGER6でのおすすめ文字サイズ・文字色について解説しました。
文字フォントやカラーが直接SEOに影響するわけではないですが、細かいところにこだわれば，直帰率や離脱率を防げぐこともできます。
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで。
関連記事AFFINGER6（アフィンガー6）の使い方はこれでOK【徹底解説します】