その他運営サイトはコチラ▷link lit

読みやすい「フォントサイズ」は?大手のサイトを徹底検証

こんな人にオススメ
  • ブログのフォントサイズに困っている
  • 適切なフォントのサイズを知りたい
Googleによると

サイトの60%が12px以下の文字サイズだとフラグを立て
SEOに影響してくるようです

サイトを閲覧する際に
文字の大きさ」と「文字のフォント」を
気にしたことがありますか?

サイトによって文字の大きさが
微妙に違っているのです

私たちがよく目にするサイトは
画像」と「文字」のバランスを考慮して、
フォントのサイズを変更している傾向がありました

自分のサイトのフォントサイズを見直すきっかけになってくれれば幸いです

特にcocoonのテーマを利用している方はデフォルトの文字が大きく設定されています

Contents

フォントサイズ

ブログの文字の大きさはテーマによって様々です

  • cocoon→12px~22px 
  • JIN→XSXL
  • SWELL→14px~18px

この範囲で文字のサイズが設定ができます

デフォルトは16pxのサイトが多く思えます

フォントのサイズは様々ですが
最適な文字のサイズはあるのでしょうか?

調べてみた結果
「ニュースサイト」と「検索サイト」で文字の大きさが少し異なっていました

ブログを運用する上での参考になってくれれば幸いです

検索サイト

Google

1日1度は目にするGoogleの検索画面

Googleのサイトの説明文のフォントサイズは「14px」でした

タイトルを見てからサイトの説明文を読む人が多いと思います

注釈のような役割をしているので少し小さめに感じますが意外と違和感なく読めます

見出しは20pxでした

amazon

アマゾンで商品購入をするときの商品説明文

amazonのフォントサイズは「14px」でした

商品説明文が長いので、
フォントが小さめに設定してあるように思えます

wikipedia

wikipedia

インターネットの百科事典のWikipedia

Wikipediaのフォントサイズは「15px」でした

百科事典だけあって画像が少なく文章が多めで、
読みにくい印象がありますが

文字のサイズが適当であり神経を使わずに文章を読むことができます

正確なフォントサイズは「15.108」であり1/1000のサイズまでこだわっています


SNS

SNSは情報収集ツールなってきており
Twitterは速報を得ることができるSNSの一つです

こちらも1日1回は目にするサイトだと思うので
文字の大きさを見ていきたいと思います

instagram

SNSの代表格であるinstagram

投稿時の文章のフォントサイズは「14px」でした

instagramは画像を見てから文章を読みます

画像を際立たせるために文字が小さめに
設定されていると考えられます

twitter

Twitterの文字のサイズは「15px」でした

Twitterは基本的に文章で伝えるSNSであるので

他のSNSとは違って1px大きい「15px
設定されています

pinterest

新たなSNSとして近年注目されているpinterest

フォントのサイズは「14px」でした

こちらはamazonの商品ページやinstagramと似ており
画面を見せてから文字を読むSNSです

画像に干渉しないように文字を小さめに設定してあると考えられます

ニュースサイト

SNSや検索サイトと違って
ニュースサイトは文字の大きさに違いがありました

Yahooニュース

Yahoo!ニュース

Yahoo!ニュースはフォントのサイズが「16px」でした


SNSや検索ツールと比較すると
少し文字が大きめに設定されています

朝日新聞

朝日新聞デジタル

朝日新聞のフォントのサイズも「16px」でした

朝日新聞もYahoo!ニュースと文字の大きさは
同じで
比較的大きめに設定されています

ニュースサイトは文字数が600字程度の記事であるため、
フォントサイズが大きめに設定されていると考えられます

老若男女問わず読めるフォントの大きさということも考えられます

利用されている文字のフォント

それぞれのサイトの文字のフォントについては
以上の通りです

ヒラギノ角ゴ」が一番多く使われていました

ヒラギノ角ゴ

MaciPhoneの標準搭載書体で
Mac OSやiOSの日本語フォントとなっている馴染みのある書体です

ブログのフォントもこだわりのある方は気を使ってみるいいと思います

注意点

ブログのフォントは
デフォルト」がおすすめです

ブログのフォントが「デフォルト」でないと

外部のサイトからフォントを読み込む処理が発生してしまいます

そのため、サイトを開く際の表示速度が遅くなってしまいます

表示速度が遅いとユーザーの満足度を下げてしまうことになります



特にこだわりがなければ、
元々テーマに読み込まれている
「デフォルト」のフォントを使うことをオススメします

まとめ

サイトによって文字の大きさが違うことがわかりました

  • 画像+文字のサイト
    • 14px
  • 文字がメインのサイト
    • 15px
  • ニュースサイト
    • 16px

このような感じでフォントの大きさが分かれていることがわかりました

cocoonを利用している方は
文字の大きさのデフォルトが18px
設定されています


基本的にはブログの文字の大きさは「14px~16px」であれば
馴染みのあるフォントサイズなので、
好みのサイズで設定するといいと思います

画像を使う頻度、文字の多さを考慮しながら
全体的なブログのバランスを見て設定してみてください

「見出しH4」以下を利用する人は、
見出し」と「本文」の区別ができるよう、
フォントサイズを少し小さく設定するといいです

当サイトでは15pxを利用しています

この機会に一度フォントのサイズを色々試してみていただけたら幸いです!

それでは〜!

ブログの文字の色についてはこちら

コメント

コメントする

CAPTCHA


Contents
閉じる