ブロブに最適なフォントは游ゴシック？それともメイリオ？明朝体はどうして使われないの？
こんにちは！ アキオ（@hiroakio97）です。
突然ですが、皆さんはブログのフォントどうしてますか？
前回『『教科書体』ってどんなフォント？ UDデジタル教科書体を使ってみた』という記事を書き、このブログのWindows向けのフォントをUDデジタル教科書体に変更しました。
すると、Twitterで懇意にさせていただいているカステラ女王様（@Rainha_Castella）さんから「老眼には教科書体が辛い」と貴重なフィードバックをいただきました。
この記事、興味深く読んだけど、何か読みにくいなあ。。。と、思ったら、
老眼には教科書体が辛いことがわかりました。めそめそ。
面白かったから、老眼鏡取り出して読んだけど、他の内容だったら、そこまでしては、読まなかったと思う。— カステラ女王様 (@Rainha_Castella) 2017年12月5日
女王様の感想が彼女個人のものなのか、それとも何百、何千人の未来の読者の声を代表したものなのか、、
とても気になる！！
ってことで、フォントについて少し勉強してみました！
他所のブログのフォントも参考に調べたので、一覧にしてます。
なお、先に結果だけ言うと、このブログのフォントは游ゴシックに戻しました。
ついでにフォントサイズを16pxから17pxに、少し大きくしています。
見やすくなったかな？？
フォントの選び方
例えば仕事のプレゼンなら、大きな声でハッキリと話すのは話し手としての当然の配慮ですよね？
これってブログで言えばフォントの種類や大きさに当たるんじゃないか、と思ったわけです。
一般的なフォント選びのセオリー
ということで、ブログに最適なフォントを探すうちに以下のサイトに行き当たりました。
http://tsutawarudesign.web.fc2.com/yomiyasuku1.html
このサイトでは”デザインにはルールがある”として、書体の種類や大きさ、行間を決定する際のヒントをまとめてくれています。
研究発表をテーマとしているため論文やプレゼン資料の例が多いですが、基本はブログやウェブサイトにも通ずるものでした。
以下、ざっと要約してみます。
フォント選びのルール
- 本文のような長い文章には可読性の高い細めのフォントを
- タイトルや見出しのような短い文章には視認性の高い太めのフォントを
[ルール１. 長い文章には可読性の高い細めのフォント]
以下は同じ文章をフォントの種類と太さのみ変えて並べたものです。
同じ文章でもフォントによって受ける印象はずいぶん違いますね。
右上のように、太いゴシック体はゴチャっとした黒い塊のようで重い印象。
パッと見のインパクトはありますが、長い文章を読むには向きません。疲れてしまいます。
一方、左側の細いゴシック体・明朝体は共にスッキリしていて読みやすいですね。
明朝体は線にメリハリがある為、よりスッキリして読みやすいと思います。
小説や新聞など出版物の多くが明朝体で印刷されていることからも、明朝体の可読性の高さが伺えます。
このように、ある程度まとまった量の文章には細めの明朝体がオススメです！
同様に、行間も適度にスペースを設けるべきでしょう。
具体的にはフォントサイズの70％前後、0.7文字ぶんくらいの間隔をあけるのが適当とされています。
[ルール２. 見出しには視認性の高い太めのフォント]
ご存知の通り、タイトルや見出しは本文の要約です。読者の理解を助けます。
加えて、文章の区切りを明確にする役割もあります。
図右側のように、見出し部分を視認性の高いゴシック体にすると区切り位置が明確で読みやすいです。
先ほど、本文には向かないとわかった太めのゴシック体ですが、見出しの場合はその押しの強さがプラスに働いています。
ゴシック体は新聞の見出しや道路標識などに広く採用されています。
ハッキリしたフォントはパッと見ただけで内容が頭にすっと入ってきますね。
ウェブ特有の事情
以上、伝わるデザインの要約でした。
先に挙げた通り、一般的に本文は明朝体、見出しなど強調したいポイントはゴシック体が基本ということですね。
ただし、これはあくまで書籍やポスターなど従来の印刷物でのセオリーです。
ブログをはじめとしたウェブには、ウェブ特有の事情があります。
ウェブの事情
- 原則的にユーザーが持ってるフォントしか使えない
- いろんな端末やOS、バージョンがある
- 文字はディスプレイに表示される
[事情１. ユーザーが持ってるフォントしか使えない]
印刷物とかパワポのスライドの場合、作者が好きなフォントを自由に使えば良いんです。
買ったフォントでも作ったフォントでも、それはもう好きにやれます。
ユーザーはすでにプリントされた完成品を受け取るだけです。
でもウェブの場合そうはいきません。
通常、ユーザーがサーバーからダウンロードするのはコンテンツの中身だけです。
受け取ったコンテンツにフォントを当てたり、Webページとしての体裁を整え表示するのはユーザーの使っているパソコンの仕事。
つまり、ユーザーのパソコンにインストールされたフォントしか使えないということです。
普通のユーザーは高価なフォントをわざわざ買い集めたりしません。
当然、ウェブサイトで使用できるフォントの選択肢は通常の印刷物と比べてグッと減ります。
[事情２. 端末やOS、バージョンによる違い]
さらに、ユーザーが使用しているパソコンのOSとバージョンによって、あらかじめインストールされているフォントは異なります。
例えば、WindowsにはMSゴシックが入ってるけどMacには入ってない、みたいな。
Windows10には游ゴシック入ってるけどWindows7には入ってない、みたいな。
なのでサイト管理者がフォントを指定する場合、あらかじめ主要なOSに標準でインストールされているフォントにあたりをつけ、その中から自分が使いたいフォントを選ぶことになります。
ちなみに、Androidのケータイなんかも考慮しだすともうカオスです。
Androidは端末メーカーが独自にフォントを入れたり消したりしているので、全てのモデルで望むフォントが表示されるよう調整することは不可能でしょう。
[事情３. ディスプレイでの表示]
一昔前の話になりますが、よく「Windowsはフォントが汚い」と言われていました。
（今でも言われることがありますが、以前よりだいぶマシになりました）
主な原因はMacに比べWindowsの日本語フォントの描画が稚拙だったこと。
漢字の細かい部分が潰れたり、斜めの線がギザギザになったり、、これらは特に明朝体で顕著でした。
明朝体はゴシック体に比べてトメやハライを意識した線の強弱があり複雑な為、処理が難しかったんです。
あとは当時のディスプレイの解像度が低かったことも明朝体が綺麗に見えなかった要因の一つです。
そんなわけで、長らくウェブの世界では明朝体は敬遠されてきました。
その伝統は今でも根強く、いまだに明朝体を主にしたサイトを見ることはほとんどありません。
そんな状況ですから、教科書体なんてもってのほかですね。
結果、ブログのフォントは可読性と視認性両方を兼ね揃えた細めのゴシック体が無難となっています。
具体的に、世間の有名ブログたちはどんなフォントの設定になってるの？
私が好きなブログの中から比較的有名そうなものいくつかチョイス、各サイトのフォントについてちょっと調べてみました。
結果は見事に二つに割れてます。
確認した15サイト中、７サイトがメイリオ or ヒラギノ角ゴシック（Windowsでメイリオ、Macでヒラギノ）、6サイトがWin・Mac共に游ゴシックでした。
（#3の『Chikirinの日記』はfont-familyが指定されていませんでした。OSやブラウザのデフォルト設定に任せるってことですね。男前！）
游ゴシックがWindowsとMac双方に標準搭載されるようになったのは2013年10月のこと。
それ以前はWindowsとMacに共通する標準フォントはありませんでした。
その他、フォントサイズ（font-size）や行間の幅（line-height）、フォントの色（color）など詳細については以下の表を見てみてください。
何か参考になるかも。
*MacのChromeで確認しています。
| # | サイト名 | font-family | 和文フォント（Windows） | 和文フォント（Mac） | フォントサイズ | 行間の幅 | フォントの色 |
|
1 |
まだ仮想通貨持ってないの？ | “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Osaka, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS P Gothic”, Verdana, “Helvetica Neue”, Helvetica, Arial, sans-serif; | メイリオ | ヒラギノ角ゴシック | 18px |
2 |
#080000 |
|
2 |
今日はヒトデ祭りだぞ！ | Avenir Next’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, ‘Hiragino Kaku Gothic Pro’, ‘Meiryo’, ‘MS PGothic’, sans-serif; | メイリオ | ヒラギノ角ゴシック | 17px |
1.9 |
#554200 |
|
3 |
Chikirinの日記 |
1.5 |
#333 | ||||
|
4 |
はあちゅう オフィシャルブログ | Hiragino Kaku Gothic Pro’,Meiryo,Helvetica,Verdana,sans-serif | メイリオ | ヒラギノ角ゴシック | 14px |
1.6 |
#666 |
|
5 |
monograph | “Helvetica Neue”,Helvetica,Arial, YuGothic, ‘Yu Gothic’, 游ゴシック体, ‘游ゴシック’, “ヒラギノ角ゴ ProN W3″,”Hiragino Kaku Gothic ProN”,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”, Meiryo,”MS ゴシック”,”MS Gothic”,sans-serif; | 游ゴシック | 游ゴシック | 13px |
1.7 |
|
|
6 |
まじまじぱーてぃー | Arial,Helvetica,”游ゴシック”,YuGothic,”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif; | 游ゴシック | 游ゴシック | 16.48px |
1.75 |
#3E3E3E |
|
7 |
Outward Matrix | Arial, Helvetica, 游ゴシック, YuGothic, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif; | 游ゴシック | 游ゴシック | 16.48px |
1.75 |
#3E3E3E |
|
8 |
RYUKEN OFFICIAL BLOG | “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”,”メイリオ”, “ＭＳ Ｐゴシック”, “MS PGothic”, Sans-Serif; | メイリオ | ヒラギノ角ゴシック | 15px |
1.7 |
#333 |
|
9 |
サルワカ | -apple-system, system-ui, “Helvetica Neue”, YuGothic, “Yu Gothic”, Verdana, Meiryo, sans-serif | 游ゴシック | 游ゴシック | 17px |
1.9 |
#333 |
|
10 |
クロネのブログ講座 | “Helvetica”, “Arial”, YuGothic,”Yu Gothic”,”Hiragino Sans”,”ヒラギノ角ゴシック”,”メイリオ”, Meiryo,”ＭＳ Ｐゴシック”,”MS PGothic”,sans-serif; | 游ゴシック | 游ゴシック | 17.12px |
1.75 |
#252525 |
|
11 |
blancoo house | YuGothic, Meiryo, sans-serif; | 游ゴシック | 游ゴシック | 17px |
1.8 |
#444444 |
|
12 |
あずさんち | Verdana,”ヒラギノ角ゴ ProN W3″,”Hiragino Kaku Gothic ProN”,”メイリオ”,Meiryo,sans-serif; | メイリオ | ヒラギノ角ゴシック | 14px |
2 |
#555 |
|
13 |
HARULOG | Lato, “ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, メイリオ, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif; | メイリオ | ヒラギノ角ゴシック | 15.36px |
1.7 |
#5c6b80 |
|
14 |
REPOLOG | -apple-system, BlinkMacSystemFont, ‘Helvetica Neue’, ‘Hiragino Sans’, ‘Hiragino Kaku Gothic ProN’, ‘游ゴシック Medium’, meiryo, sans-serif; | 游ゴシック | ヒラギノ角ゴシック | 15px |
1.7 |
#454545 |
|
15 |
Knower Mag | Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif; | メイリオ | ヒラギノ角ゴシック | 14px |
2 |
#333 |
ちなみに、ブログ以外のサイトもいくつかみてみました。
こちらはどれも歴史あるサイトで、いずれも安定のメイリオ＆ヒラギノ角ゴシックでした。
| # | サイト名 | font-family | 和文フォント（Windows） | 和文フォント（Mac） | フォントサイズ | 行間の幅 | フォントの色 |
|
1 |
Google
（検索結果本文） |
arial,sans-serif | 13px |
1.4 |
#545454 | ||
|
2 |
Yahoo
（Yahooニュース本文） |
メイリオ, “Hiragino Kaku Gothic Pro”, Meiryo, “ヒラギノ角ゴ Pro W3”, “MS PGothic”, “MS UI Gothic”, Helvetica, Arial, sans-serif; | メイリオ | ヒラギノ角ゴシック | 16px |
1.8 |
#515151 |
|
3 |
Twitter
（ツイート本文） |
Arial, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Osaka, メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif; | メイリオ | ヒラギノ角ゴシック | 14px |
1.7 |
#14171a |
|
4 |
Facebook
（フィード本文） |
“SF Optimized”, system-ui, -apple-system, system-ui, “.SFNSText-Regular”, “hiragino kaku gothic pro”, meiryo, “ms pgothic”, sans-serif | メイリオ | ヒラギノ角ゴシック | 14px |
1.38 |
#1d2129 |
|
5 |
Amazon
（商品説明本文） |
Hiragino Kaku Gothic Pro W3′,’Hiragino Kaku Gothic ProN’,Meiryo,sans-serif; | メイリオ | ヒラギノ角ゴシック | 13px | #333 |
まとめ 結果、ブログに最適なフォントは游ゴシックで決まり！
というわけで、本ブログ『いくら図書館のきまりでもね』的ブログ用ベストフォントは游ゴシックできまりです！
游ゴシックはゴシック体ながら細身のフォントで、長文にも適しています。
また、少し多めに余白が取られている為、ゆったり柔らかい印象を受けます。
ヒラギノ角ゴシックやメイリオほどかしこまった印象もなく、親しみやすフォントだと思います。
さらに、WindowとMac両方で同じフォントを使えるメリットもあります。
逆に、運営するサイトでカッチリした雰囲気を出したい場合、従来通りのメイリオ or ヒラギノ角ゴシックがよく合うでしょう。
サイトの内容や読者層をイメージして適当なフォントを選択できるといいですね。
ちなみに、「もっとフォントにこだわりたい！」ってサイト運営者にはウェブフォントと言う選択肢もあります。
ここでは深く触れませんが、ウェブフォントとは写真や動画のようにサーバからダウンロードして使うフォントのこと。
WindowsやMac、Androidなど全ての端末で同一のお気に入りのフォントを使えるというメリットとダウンロードに時間がかかるというデメリットがあります。
特に日本語の場合、常用漢字だけで2,000文字ほどあり、大文字小文字合わせても50文字程度の英語とはフォントのファイルサイズが桁違いに多い点に気をつけなくてはなりません。
通常であれば2,500円/月ほどかかるモリサワのウェブフォントですが、GMO社の運営するサーバーホスティングサービスお名前.com レンタルサーバーとZ.comならば無料で利用できます。
ウェブフォントに興味のある方はぜひ検討してみてください。
新ゴは読みやすいいいフォントです！
以上、ブログに使うオススメフォントの紹介でした。
『いくら図書館のきまりでもね』では、当初物珍しさからUDデジタル教科書体を使ってみました。
が、少し勉強してやはり皆に選ばれるフォント or 選ばれないフォントというのはそれなりの理由があるってことがわかりました。
特別なこだわりがない限り、定番のゴシック体がオススメです！
（先週の自分に言ってやりたい。。）
なお、「フォントって面白いな」「フォントについてもっと知りたい！」と思われた方には、こちらの書籍がオススメです。
デザインの中でフォントが果たす役割や効果について詳しく解説されています。
デザインの参考書としてはもちろん、単に読み物としても面白いです。
ではでは。