自分のブログを読み返していると、なんとなく見にくい（でも理由はわからない）と悩んでいる方向けの記事です。
ブログを見やすくする方法を挙げてみると、アンダーライン・装飾・文字の色・フォント・漢字とひらがなの混ざり具合、こんな風にどんどんと浮かぶと思います。
ぼく自身も「何をしたらええんや」と悩みキリがなくなった経験があります。何か違う切り口があるはず、、と考えて気づいたのが「見にくくなる要因」から挙げていく方法。
色々と考えてみた結果、
- ギュウギュウに詰まっていること
- 役割分担が不明瞭なこと
この二つが見にくい要因だという結論になりました。以下、これらを解消するためにできることを理屈っぽく紹介していきます。
適度な余白を設ける
ここでいう余白とは、行間・字間のこと。行間は行と行との間、字間は文字と文字との間の、間隔です。
人は文章を読むとき、自分の認識しやすい単位に区切っています。例えばたったいま読んでもらった文は、以下のように読み進めたはずです。
例１ | 人は／文章を／読むとき、／自分の／認識／しやすい／単位に／区切って／ます。
例２ | 人は文章を読むとき、／自分の認識しやすい／単位に／区切っています。
微妙に異なる方もいるかもしれませんが、だいたいはこのように区切っていったはずです。
もう少し踏み込んでいえば、人はモノゴトを認識するとき、常に区切ることから始めています。
例えば人の顔を見るというとき、目鼻口を別のものとして捉えたうえで「顔」という括りで捉えています。境界を設けているからこそ、異なる名前で呼ぶことができるんですね。
ですから余白を設けることは、情報を認識する手摺りづくりともいえます。そう考えると、”一文字ひと文字を区別でき、文としてはひと塊”と認識できる程度の余白かベストということになります。
具体的な数値は？
『伝わるデザイン』によれば
- 行間の設定→ フォントサイズの70%前後
- 字間 → フォントサイズの5%程度
だいたいこれくらいだそうで、選んでいるフォントによって微妙に変わるようです。弊ブログのCSSを見てみたところ、行間75%でした（字間は該当プロパティが発見できず、、）。
テンプレそのままなんですが、理に適ってますね。
因みに同サイトでは、見やすさを
- 可読性 → 文章が読みやすいか（読んでいて疲れにくい）
- 視認性 → パッと見た瞬間の認識しやすさ（目的の情報を発見しやすい）
- 判読性 → 誤読の少なさ
といった３つの要素に分解しています。これに当てはめるならば、余白の調整は可読性・視認性の双方を向上させる施策ですね。
役割を明確にする
役割とはタイトルや見出しなど、文章内の各パーツの使い方のことです。
他の項目との差異を明確にすることで、意図を込められるようになります。つまりどう見せるべきかを考えられるようになります。
情報の本質は他との差異であり、各要素の違いを意識することが見やすさの向上につながります。ポイントは【違いを際立たせること】で、ただ単に目立たせることではありません。
具体的な方法としては、
- 改行の具合
- フォントサイズ
- 文字の太さ（や文字色）
このような要素を変化させることが挙げられます。
役割分担｜ブログ記事の場合
ブログにおける具体例を示します。以下に、当ブログにおける記事のパーツと各々の役割をまとめました。
- タイトル｜目を引く（検索結果画面）
- アイキャッチ｜目を引く（特にSNSでの拡散時、またプログ一覧画面）
- リード文｜心を引く（記事内）
- 見出し（大見出し・小見出し）｜その段落や章の概要を大づかみにする
- 囲い込み｜本文では”ない”ことを伝える（主に引用）
- 箇条書き｜要点を伝える
タイトルと見出しは、テンプレートの仕様をそのままに用いています。
差別化に力を入れるポイントは、リード文、本文、本文中の引用（囲い込み）と箇条書き、となります。
リード文では読み手の心を覗き込む意図で書いているか、箇条書きには要点を書いてあるか（また前後の文と対応しているか）、引用文と本文とを違う見せ方をしているか、といった確認をしながら作成しています。
ここまで書いていてアレなんですが、割と肌感覚でやってきた部分もあり、こうやって説明しているほどギチギチな役割分担はしておりませんでした。
特に箇条書きは、要点を書く他に手順を書く場合もあります。ブログ記事として言語化することで、自分自身のなかでも腑に落ちてきました（笑）。
読者がその情報を【目にする場所】を知っておくことも重要ですね。検索結果画面、SNSのタイムライン、記事内など、掲載場所によって工夫できるポイントが変わります。
まとめ
アプローチの起点を見にくくなる要因に切り替えたことが突破口となりました。解消すべき点は
- ギュウギュウに詰まっていること
- 役割分担が不明瞭なこと
の２つ。余白の設定に関しては、ブログ記事ではそこまで意識する必要はないと思います（既存のテンプレートがけっこう綺麗なので）。
役割分担に注意することが見やすくなるポイントです。自分のブログが見にくいなと感じる方は、ブログや記事内の要素を羅列する作業から始めてみてはいかがでしょうか。
でもぶっちゃけると、ブロガーの意見は無視してデザイナーの意見を参考にするのが一番だと思います。ガハハ
