AFFINGER

【AFFINGER5】おすすめの文字サイズと色について解説【記事の見やすさUP】

困ってる人
●AFFINGER5を使ってるけどおすすめの文字サイズを教えてほしい。

●フォントのサイズは決まったけど、文字色って何色がいいんだろう?

 

今回はこのようなお悩みにお答えします。

 

こんな方におすすめ

  • AFFINGER5を使用している方
  • AFFINGER5の文字サイズを迷ってる方
  • ブログ記事の見やすさにこだわりたい方

 

本記事の信頼性

本サイトもAFFINGER5を使用しています。ブログ運営で培ったフォント、カラーの知識を共有できます。

 

WordPressブログの有料テーマであるAFFINGER5(アフィンガー)は多機能でカスタマイズ豊富です。

 

せっかくブログを始めたからには記事を読んでもらうためにまずは見やすさにこだわる必要があります。

 

今回はAFFINGER5おすすめの文字サイズと色について解説していきます。

 

かっこいいデザインよりも記事が読みやすいというのはユーザー目線でも重要です。本記事を参考に見やすさを向上していきましょう。

 

それでは早速始めていきます。

 

 

ブログのフォントサイズが重要な理由

ブログのフォントサイズが重要な理由

ブログのメインは記事を書くことです。どんなにおしゃれなサイトをデザインしても結局記事を読んでもらえないと意味がないですよね。

 

重要な理由として、フォントサイズはユーザーの目に止まって記事を読んでもらえるか最初のポイントになる一つだからです。

 

例えば、下記例文にて見比べてみます。

 

小さい文字の場合

当たり前ですが、気分とモチベーションは違います。モチベーションは動機や結果に対する意欲、と訳されています。モチベーションが高ければ自然とゴールを達成するために動くことができるでしょう。しかしモチベーションが高くても行動が伴わないことがあります。なぜなら人の行動力は、モチベーションが支配しているのではなく行動力は気分で決まるからです。

 

大きい文字の場合

当たり前ですが、気分とモチベーションは違います。モチベーションは動機や結果に対する意欲、と訳されています。モチベーションが高ければ自然とゴールを達成するために動くことができるでしょう。しかしモチベーションが高くても行動が伴わないことがあります。なぜなら人の行動力は、モチベーションが支配しているのではなく行動力は気分で決まるからです。

 

もちろん改行などをしておらず文章がつながっているので両方読みづらいかもしれませんが、大きい文字の方が読みやすいのではないでしょうか。

 

サイトのカッコよさを意識してスタイリッシュな小さい文字を活用するあまり文字が読みづらくなり、ユーザーに読んでもらえなければ本末転倒ですよね。

 

逆にこれ以上大きすぎるフォントサイズだと、読みにくく感じてしまうので、ユーザーを考えたフォントサイズの設定が必要だということです。

 

適切なフォントサイズはテーマによって異なる

適切なフォントサイズはテーマによって異なる

フォントサイズは重要とは言ってもブログテーマやサイトによって適切なフォントサイズは異なってきます。

 

例えば改行を多く使うブログであれば、大きい文字でも良いかもしれませんが文字が小さすぎると余白が多くなり帰って読みにくくなることもあります。

 

またHow to系の記事や雑記等テーマによっても異なってきます。

 

使用してるブログテーマによってもフォントサイズの見え方は変わってくるので、臨機応変に対応していく必要があるということです。

 

なのでブログを始めた最初の内にブログ記事のテーマや使用するテーマをある程度決めておいた方が無難ですね。

 

まだブログテーマを導入しないという方は早めに決めてしまいましょう。

 

テーマに迷ってる方はAFFINGER5以外にも良いテーマはあります。

テーマについての詳細は【2020年】WordPressブログのおすすめ有料テーマ7つを徹底比較を参考にしてみて下さい。

 

AFFINGER5おすすめのフォントサイズ

AFFINGER5おすすめのフォントサイズ

それではAFFINGER5のおすすめフォント(文字)サイズについて紹介します。

 

スマホ・タブレット・PCそれぞれのおすすめフォントは下記です。

 

スマホ閲覧時

 

スマホ閲覧時フォントサイズ

 

タブレット閲覧時

タブレット閲覧時フォントサイズ

 

 

PC閲覧時

PC閲覧時フォントサイズ

 

こんな感じです。

 

本サイトでも使用しているフォントサイズになります。

一般的に多くのサイトの文字サイズは16~18で作られているので、基本サイズはこの間にしておきましょう。

 

これより大きすぎても小さすぎても読みづらく感じてしまう人が出てくると思うので、調整してみて下さい。

 

おすすめのフォントカラー【AFFINGER5で簡単設定】

おすすめのフォントカラー【AFFINGER5で簡単設定】

フォントサイズと同様に重要なのがフォントカラーです。

 

サイトなどを長時間見ていると目が痛くなったりすると思いますが、目に優しい色にした方が良いです。

 

例えば、ブログなどのサイトは基本的に文字色は黒が一般的に使われていますが、黒色でも色々あるので設定を変更するのをおすすめします。

 

ブログテーマでは一般的に初期設定では『#000000』が設定されています。

 

しかしおすすめは『#333333』です。

 

#333333のフォントカラーはYahoo!ニュース、楽天市場、日本経済新聞などで扱われており、大手企業も採用しています。

 

『#000000』は真っ黒なので、背景色とのコントラストが強く目が疲れてしまいます。文章を読んでもらうユーザーを考えればあまり適切でないですね。

 

一方『#333333』はグレー色に近くなります。コントラストが弱くなるので目が疲れにくくユーザーにとっても良いということです。

 

具体的にはこんな感じです。

 

#000000の場合

フォントカラー比較:#000000の場合

 

#333333の場合

フォントカラー比較:#333333の場合

 

こうやって見比べてみると案外違いがわかると思います。

 

ちょっとしたことですが、柔らかいカラーの方がユーザーにもいいので設定してない方はしておきましょう。

 

AFFINGER5でのフォントカラー変更について

AFFINGER5でのフォントカラーの設定は簡単にできます。

 

カスタマイズ⇒各テキストとhタグ⇒テキスト色一括変更で調整可能です。

 

AFFINGER5テキストカラーカスタマイズ画面

 

ここで変更しておきましょう。

 

フォントカラー以外にも他サイトで『この色いいな』と思ったカラーは設定で変更してみるのもおすすめですよ。

 

他サイトのカラーの調べ方は【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で詳しく解説しているので参考にしてみて下さい。

 

 

まとめ:AFFINGER5でフォントサイズ&カラーをカスタマイズして記事を見やすくしよう

まとめ:AFFINGER5でフォントサイズ&カラーをカスタマイズして記事を見やすくしよう

今回はAFFINGER5でのおすすめ文字サイズ・文字色について解説しました。

 

文字フォントやカラーが直接SEOに影響するわけではないですが、細かいところにこだわれば,直帰率や離脱率を防げぐこともできます。

 

『神は細部に宿る』なので細かい部分にこだわっていきましょう。

 

アフィンガーはSEO対策やサイトスピードも良いのでおすすめのテーマです。フォントサイズなど参考にして下さい。

 

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで。

 

 

-AFFINGER

© 2021 Tetsu blog