読みやすい文章は【視覚的リズム】が圧倒的に良い

こんな疑問にお答えします。

おしゃれなサイトが見やすい理由は、フォント・行間・余白が作り出す　”視覚的リズム”  が良いからです。小説に明朝体が好まれるように、横書きのブログにも読みやすいフォントがあります。

行間や余白の取り方を変えることで、脳にストレスを与えない適切な空間を生み出し、脳に読みやすいと感じさせるからです。

私は脳神経科学を専門とする薬剤師で、プログラミングとブログ、医療について発信しています。bloggerで様々なテンプレートを試し、おしゃれなサイトを模写してきた経験から、読みやすいブログの”見た目”の作り方について解説します。

この記事を読んでわかること

“20歳の自分に受けさせたい文章講義” の著者である古賀文健（こが ふみたけ）氏は自身の著書でこう述べています。

くりかえすが、われわれは文章に向かい合うとき、「読む」より先に「見る」のだ。ほんの一瞬のことかもしれないが、まずはページ全体を見る。そして1行目に眼を移し、読むのである。
だとすれば書き手は、内容だけでなく「見た目」にも気を配らないといけない。（20歳の自分に受けさせたい文章講義. 87ページより引用）

著者のいう視覚的リズムを損なうものとは、”圧迫感”であり、句読点や改行、余白の仕方で圧迫感を取り除く必要があると述べています。

これはブログでも、同じことが言えます。

字がぎっしりと詰まった文章、漢字だらけの文章ではページ全体が真っ黒になって読みにくくて仕方がありません。

視覚的リズムを作る

本来は、句読点の打ち方や改行のタイミング、漢字の比率などで視覚的リズムを作るのですが、その点は古賀氏の書籍を一読することをおすすめします。

ここではブログに特化して、フォントや行間・余白をとって、読みやすい視覚的リズムを作ることにフォーカスしていきます。

フォント・行間・余白を変更する方法

bloggerでは「テーマ」-「HTMLの編集」で行います。

ここでは、bloggerの新テーマである【QooQ】を使って解説します。

変更する場所を検索

「HTML編集」画面で” font-family “を検索します。

検索方法は、HTML編集画面を選択し、「Command + F」または「Control + F」を押して検索窓を表示させて検索します。

フォント

使用するフォントの設定です。ブラウザによっては表示されない文字もあるので、通常、複数設定します。

body {

    font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;

上記のフォントもおすすめですが、 このサイトのテーマであるQooQの初期設定はこちら になっており、デフォルトでも美しいフォントになっています。

font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

" : "と " ; " で囲まれた部分のフォントを変更することでmac, windows、スマホ、タブレットで表示可能なフォントを自動で選択してくれるようになります。

スムージング

文字のより滑らかに表示させる設定です。具体的には、font-familyが書いてあるHTMLのすぐ下に以下のコードを書くことで再現できます。

text-rendering: optimizeLegibility;

background: transparent;

-webkit-font-smoothing: antialiased;

行間

数字が大きいほど行間も大きくなります。これもfont-familyの下に以下のコードを書きます。あるいは、もともと書かれている場合は、その数字を変更します。おすすめは1.6 ~ 2.0の間です。広すぎると改行との区別がつかなくなります。

  line-height: 2;

余白

主に見出し記事の余白やリストに使います。
　

padding: 0.4em 1em;

文字の周りの余白です。上記のコードは上下 0.4em（1emは1字の意味）、左右 1emの設定です。
margin: 2em 0;

見出しの外側の余白です。上下に 2em, 左右に0emの設定です。単に 2emだけ書くと上下左右全てに適応されるので2em 0 と書いています。

文字の太さ

主に見出しを作るときに設定します。bloggerのboldの設定は少し重たいので、font-weightを指定するといい感じに太くなってくれます。

font-weight: 600;

文字間隔（おまけ）

文字と文字の間のスペースです。これを変えるとさらに見やすくなります。

letter-spacing: 0.08;

背景色・文字色（おまけ）

基本は白などの目立たない色を使用すると思います。ブロガーでは「テーマ」のカスタマイズから変更できるので、HTMLで変更しなくてもOKです。こだわりたい方は、: ; の間を変更してください。

background: $(other.back);  ＃背景色

color: $(main.font);              ＃文字色

今回の紹介は以上です。

最初はどの設定がいいかわからないのが普通かと思いますので、まずは、あなたの好きなサイトの設定を真似るところから初めてみるのもいいと思います。

おしゃれなサイトの設定を真似る方法

Google Chromeのデベロッパーツールを利用することで、サイトのcssの設定や色を確認することができます。

デベロッパーツールについてはこちらのサイトがわかりやすいので、興味がある方は見てください。

>>新米ブロガーがこれだけは押さえておきたいデベロッパーツールの使い方

>>初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

まとめ

すでに述べてきましたが、文章は見た目が大事です。ブログをパッと見て、「読もうかな」と思ってもらうためには、読者の脳にストレスを与えない工夫が必要です。

今回はフォントや行間・余白を変更して視覚的リズムを整える紹介をしました。さらに、古賀氏の文章術を用いるともっと読みやすい文章に仕上がってくると思います。

興味のある方は、”20歳の自分に受けさせたい文章講義”を、ぜひ一度手にとってみてください。