【ブログ術】読みやすい記事の作り方 – レイアウト・装飾編

ブログで読みやすい記事を書くコツ【レイアウト・装飾編】

ブログ記事の読みやすさは文章の見た目レイアウト・装飾)にも左右されます。

そこで読みやすい記事を書くためのレイアウト・装飾のコツをまとめました。私自身、このブログで使用しているテクニックを中心に紹介していきます。

もし「何か記事が読みにくいな・・」「もっと読みやすい記事が書きたい」と思っている方は是非お試しください。

コツ1.記事内にアイキャッチ画像を挟む

まず1つめのコツは 記事内に適度なアイキャッチ画像を挟む 、というコツ

人間は視覚的なものに注目しやすいので記事を最後まで読んでもらうのに画像を挿入するのは効果的です。

特に文量が長い記事の場合、目を引くものがあるかないかでは大違いですよね。

そして選び方も「お、この記事読んでみたい!」となるインパクト抜群の画像を選ぶのがベストです。

なぜなら記事のアイキャッチは次のような場所でも使われるため

  • Twitterなどでシェアされたときのサムネ
  • Chromeオススメ記事(Google砲)のサムネ
  • グーグル画像検索したときのサムネ

特にTwitterとかはタイムラインの流れが速いので平凡(地味)な画像だとスルーされやすいです。なので目立つ画像の方がクリックされやすくなります。

ただ、その素材探しが時間も手間もかかるし結構大変なんですよね(困)

良い素材を本気で探そうとすると数十分くらい平気でかかるし、気に入るような画像が見つかるとも限りません。

なので、その苦労を減らすなら次の素材サイトを複数併用するのがおススメです。

私自身は 写真ACパクタソ をよく使わせてもらってます。この2つは面白い構図とかインパクトの強い素材が多くて探しやすいです。

そして、この他にもアイキャッチ選びとか最適化のコツは色々あります。

でも全部紹介するとキリがないので詳しく知りたい方は次記事をご覧ください。

ブログ記事を読みやすくするためのアイキャッチ画像最適化のコツ
ブログ記事に使うアイキャッチ画像、適当に選んだり元画像のまま挿入したりしてませんか?ここでは記事を読みやすくするためのアイキャッチ画像最適化のコツを詳しくまとめました。

画像の選び方に加え、表示速度を重くさせない最適化策や画像検索でクリックされやすくする方法をまとめました。

コツ2.リストの点部分を画像に置き換える

2つめは リストの点部分を画像に置き換えて見やすくする 、というコツ

このブログでもよく使っているテクニックで、単なる黒点でリスト表示するよりは文章がかなり読みやすくなります。

例えば標準的な番号なしリストは次の見た目になります。

カスタマイズなしの標準的な番号なしリストの例

デフォルト状態だと上みたいに黒点(・)が各項目の横につきます。別に普通のリストならこれでも問題ありません。

でもチェック項目とか注意事項を並べたいときは印象が薄くなってしまいます。

そこで、ある方法を使えばリストの黒点を別の画像に置き換えることが可能です。

例えばチェック項目だったら次画像みたいにチェックマークを表示したり・・・

黒点をチェックアイコンに置き換えたリスト例

あるいは注意事項なら警告アイコンを代わりに表示してみたり・・・

黒点を警告アイコンに置き換えたリスト例

こういう風にカスタマイズすれば黒点より見やすくなりますよね。

この詳しいカスタマイズ方法を知りたい方は次記事をどうぞ

WordPressでリストの点部分をオリジナル画像に置き換える手順
WordPressでulタグのリストの点(ドット)部分をオリジナル画像に置き換える手順をまとめました。画像素材とほんの少しCSSを追加するだけでカスタマイズできます。オリジナリティのあるリストを作りたい方は是非お試しください。

WordPressでのやり方を説明してますが、CSSさえ追加すればWordPress以外でも設定できます。見やすいリストを作りたい方は是非お試しください。

コツ3.ブログ記事内の行間設定を変更する

3つめは 記事本文の行間設定を読みやすく設定する 、というコツ

例えば次の2つの文章だったらどっちが読みやすいでしょうか?

  • 行・段落の余白が適度に空いていて余裕のある文章
  • 行・段落の余白が全くないキツキツな文章

当然ほとんどの人は1番目を選ぶはずです。行と行の間、あるいは段落と段落の間に余白がある方が読みやすいですよね。

行間っていうのは意外と文章の見た目・読みやすさに影響を与えます。

もし文章の書き方(表現とか言い回し)に問題がないにも関わらず、

  • 全体的になんか文章が読みにくい
  • キツキツで堅苦しい印象を感じる

と感じるなら行間設定が上手くできていないのが問題かもしれません。そういう方は行間設定を見直すことをおススメします。

その詳しい設定方法は次記事で解説したので是非ご覧ください。

WordPressで読みやすい行間設定に変える方法&設定時の注意点
WordPressで記事を書いていて「なんか行間が狭い」「行間を空けてゆとりを持たせない」・・こういう風に思ったことないですか。ここではWordPressブログで行間設定を行う方法&注意点についてまとめました。数分もあれば簡単にできるので是非お試しを

こちらの記事もCSSさえ追加すればWordPress以外でも設定できます。ほんの数分あればできるので是非お試しあれ

コツ4.記事を太字や下線、マーカーで装飾する

最後は 記事文章を太字や下線、マーカーで適度に装飾する 、というコツ

ブログ記事で「どこが重要なのか」とか「どこを念入りに読んでもらいたいのか」は書いているブロガー本人にしか分かりません。

普通の読者はエスパーではないので、何の強調もしていないなら文章のどこが大事かなんて分かるはずないです。

なので重要ポイントを強調するのに文章を装飾するのが効果的という訳です。

そして文章を装飾する方法として有用なのが次の6つ

  • 太字にする ⇒ こんな感じ
  • 下線を引く ⇒ こんな感じ
  • マーカーを引く ⇒ こんな感じ
  • 大きくする ⇒ こんな感じ
  • 小さくする ⇒ こんな感じ
  • 色を変える ⇒ こんな感じ

この6つを強調したい部分で適切に用いればブログ記事がもっと読みやすくなるはずです。

ただし・・・

装飾を過剰にしすぎると逆に文章が読みにくくなるので要注意

文章がゴチャゴチャして何が大事か分からなくなるので適度に使うのがベストですね。

なので装飾するときのルールを決めておくと迷わずに済みます。ちなみに私自身は次のような基準で使い分けるようにしています。

  • 太字にする
    ひらがな・簡単な漢字など複雑な文字を含まない単語・文章を強調するとき
  • 下線にする
    画数の多い漢字など複雑な文字を多く含む単語・文章を強調するとき
  • 文字を大きくする
    特に読者に注目してほしい重要な単語とか文章を強調する時
  • 文字色を変える
    感情的な表現とか文章を強調する時。例えば否定的な文章なら「」、肯定的な文章なら「」に変えるなど

まあこれには絶対的な正解はないと思います。自分のブログの書き方とかスタイルに合わせて色々試してみてください。

ですが、何度も言うように文章は装飾しすぎないように要注意です。あまりに強調箇所が多すぎると読んでいて「???」となってしまうので・・・

まとめ

読みやすいブログ記事を書くための装飾・レイアウトのコツをまとめると次の通り

  • 適度にアイキャッチを挟む
    SNSや画像検索でクリックされやすい印象のある画像だとさらにGood!
  • リストの黒点部分を置き換え
    例えばチェック項目ならチェックアイコン、注意事項なら警告マークにするなど
  • 適切な行間設定に変える
    キツキツで堅苦しい印象を与えないよう、行や段落に適度な余白を設ける
  • 文章を適度に装飾する
    例えば太字・下線、色や大きさなど。ただし過剰に使いすぎるのはNG!

ブログ記事を書くのに慣れてきたら、こういうことも意識するといいかもしれません。自分の記事をもっと集中して読んでもらいやすくなるはずです。

以上、読みやすいブログ記事の書き方(レイアウト・装飾編)でした。

ちなみに文章の書き方編も紹介しているので、是非そちらもご覧ください。
次の記事 : 【ブログ術】読みやすい記事の作り方 – 文章の書き方編

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press