【読みやすいブログを目指す】記事デザイン・構成のルールを考える
はてなでブログを書きはじめておよそ一ヶ月になりました。
ふと自分が書いた記事を読み返すと、どの記事も、なんか読みづらい...
文章力が足りないのはすぐには改善できませんが、ひとまず記事の構成やCSSの工夫でなんとかできないのか、試行錯誤してみましたので列挙します。
前提：必要なことだけさっさと知りたい
全てのユーザーはこう考えていると想定します。
- テキストを長々読むつもりはない
- 必要なことだけを端的に知りたい
- かといって、ロジックが不要なわけではない
この前提でユーザー目線に立ち、これらをクリアするのを目指して、いろいろ工夫していきます。
文字を少なく＋画像を多く
まずはテキストを少なくする観点。
書くのが楽しいので、どうしても一文・一パラグラフが長くなってしまいがちです。
ただそうなると、ユーザーに読む労力を要求しすぎてしまいます。
なので、テキストを減らす＋一文・一パラグラフを短くするは基本ルールです。
テキストは減らしつつも内容が薄くなってはいけませんので、自然と画像を多く配置する必要があります。
一見出し（h2）ごとに画像、というのがよくある構成ですが、いっそ1パラグラフ（p）ごとに画像を置いてあげても、内容が入ってきやすくていいかもしれません。
見出しはh2しか使わない
テキストを減らす工夫として、見出しをシンプルにします。
文章構造上正しくない書き方だとは思いますし、どうしても癖でH2の下にH3を並べて...とやりたくなります。
ただ、いまどき見出しがSEOに影響があるとは思えないので、読みやすさ重視でh3を使わないはアリだと思います。
noteのスタイルはh2より下の見出しがなく、なんとななく読みやすい気がします。
文字サイズと行間
テキストが小さくて詰まりすぎると、そもそも読めません。
ので、今後も調整しつつですが、ひとまず文字サイズは以下のように設定しておきました。
font-size:17px;
line-height:1.7重要な点は強調する
文章が短調にならないよう、一見出しに一つ以上、太字の文章を設定しておきます。
当然のことではありますが、サボらず強調するようにしておきます。
わかりやすいまとめ
せっかく開いたページです。
ユーザー視点で、開いたきっかけとなった要点・タイトルの内容についてだけでもサクッと知りたいですよね。
なので、まとめに関してはこうします。
- まとめを端的に明示する
- まとめを目立たせるcssを用意する
却下したもの
一つは会話形式のブログ。
www.chankome.comキャラを守れなくなりそうで運用が難しいのと、人形遊び感があってうーんでした。
もう一つは表。
スマホで見ていただく想定なので、表形式で情報を整理するのは、デザイン的にあまり適切ではないと思います。
Scrollhintとかのソリューションもありますが、発信の内容やターゲット設定から言って、そこまでするほどのものかなではないのかなと...
www.appleple.com表を使うと文字数も増えてしまうので、気軽に読むブログには情報量が多すぎて不適切な気がします。
まとめ
今回考えた、読みやすいブログの構成・デザインのまとめです。
- 文字を少なくする
- 太字いっぱい使う
- 1〜2パラグラフごとに画像を置く
- 見出しはh2だけにして、h3より下は使わない
- 文字サイズを大きくして、かつ行間をキープする
- 読みやすいまとめのスタイルを設定する
- 会話は使わない
- 表は使わない
参考にさせていただいた記事
最後に、この内容を考えるにあたり、以下2名の記事を参考にさせていただきましたので紹介します。
一つはけんすぅさんのnote。
ユーザー視点で読みやすい文章だけでなく、ブログ戦略に使えそうなことまで解説されています。
https://kensuu.com/n/n4034c3387195/kensuu.com
もう一つは最近ホットエントリーになっていた、さぶろぐさま。
気軽に読めるガジェットブログで、記事の構成がまさに僕の理想でした。
以上です。
ここまでご覧いただきありがとうございました！
