ブログ初心者・Web制作の情報サイト
見やすい記事の書き方・初心者向けアドバイス

見やすい記事の書き方・初心者向けアドバイス

記事を書いたけど非常に読みづらい。そんなときの原因と解決法です。

記事を書き始めたばかりの頃は、適切な文章の行間・段落の間隔・画像サイズ等が分からず適当に設定してしまいがちです。

大きなサイズの画像を使っていたり、一段落の文章が多すぎたりしないでしょうか? 特に画像はサイズを統一しにくいので記事の見栄えが崩れやすいです。

このページでは記事を読みやすくするための工夫を紹介します。文章の書き方ではなく、記事全体の見やすさを改善する方法です。

見やすい記事の書き方

見やすく読みやすい記事を書くにはいくつか注意点があります。下記項目を1つずつ実践していけば確実に記事全体の見た目が良くなります。

  • 段落の間隔と行の高さ
  • 大きな画像は使用しない
  • 画像を見やすく配置する(中央揃え + 背景色設定)
  • 統一感を出すこと!

文章の見やすさを改善する

文章の「書き方」ではなく「見やすさ」の改善方法です。

段落の間隔と行の高さ

段落の間隔(margin)と行の高さ(line-height)は文章の読みやすさに大きく影響します。

段落の間隔と行の高さ

行間とline-heightいくらが最適かについて正解はありませんが、個人的に見やすいと思う値は次の通りです。

  • line-height: 1.9 (font-sizeの1.9倍)
  • 段落のmargin: 30px
  • 見出しのmargin: 40px
font-size: 16pxのときの行の高さ

行の高さ(line-height)は詰まっているよりも離している方が読みやすいです。見出しのmarginは上側を高くする場合がありますが、同じ値に設定する方が統一感が出て見た目が良くなります。

これらはあくまで個人的な感想なので参考程度に。サイトに合った値を探してみてください。

文字間隔は変更しない(letter-spacing)

文字間隔はフォントごとに調整されているので下手に変更しない方がいいです。サイトに異なる複数のフォントが使われている場合は調整が大変になります。

文字間隔を調整したいときはフォントそのものを変更することをおすすめします。

例えば、Windows日本語フォントのアルファベットは少し間隔が広くて綺麗ではありません。欧米フォントのアルファベットの方が遥かに書体が綺麗で間隔も調整されており読みやすいです。

Webフォントを使えばフォントの変更は簡単です。

新しくなったGoogle Fontsの使い方
手軽にWebフォントを試してみたい、フォントでサイト独自のイメージを出したい。この記事では下記のような目的の人を対象に Google Font の特徴と使い方にを紹介していきます。

画像を見やすくするための工夫

統一感を保ちながら画像を表示するのは結構大変です。ここでは画像を見やすく表示するコツを紹介します。

大きな画像はPCだと見づらい

大きすぎる画像はPCでは非常に見づらくなります。これはPC画面が横長なのが原因です。スマートフォンではそれほど悪くありません。

画像の高さが高いとコンテンツの大部分を画像が占めてしまいます。これでは文章が読めません。

大きな画像はPCだと見づらい

大きな画像は単純に見栄えが悪いです。縮小して適度な大きさで表示する方が見やすくなります。

画像の幅は400~600pxあたりがおすすめです。

下の画像は上記画像を半分に縮小したものです。より見やすくなっているのが分かると思います。(スマートフォンでは違いが分かりません)

画像は適度な大きさに縮小すると見やすくなる

どうしても大きな画像(特に縦長画像)を使わないといけない場面はあります。多用は避けて適度に使用してください。決して使うなと言っているわけではありません。

画像の中央揃え + 背景色設定

PC表示の場合は大抵画像の横幅がばらばらになります。画像幅がばらばらだと統一感がなく見栄えはあまり良くありません。

アップロード前に編集すれば画像幅をそろえる方法は非常に手間がかかり面倒です。

この問題は画像背景に色を設定し中央揃えすることで簡単に解決できます

具体的には下記画像を見てください。(上と同じくスマートフォンでは違いが分かりません)

そのまま並べた場合
画像の横幅が違うので見栄えが良くありません。中央揃えにするとさらに違和感が増します。

アイルーみたいな猫
不機嫌な猫

中央揃え + 背景色設定
画像に背景色を設定するだけで見栄えが大幅に改善しています。中央揃えも違和感がありません。

アイルーみたいな猫2
不機嫌な猫2

この方法には1つGoogle自動広告の問題があります。

Google自動広告は画像の上下によく広告を表示します。そのため背景色の枠内に広告が挿入されてレイアウトが崩れる場合があります。

デメリットが許容できるなら「画像中央揃え + 背景色設定」を使ってみてください。

画像を説明するときの注意点

画像を説明するとき説明文は上と下に書くことができます。

どちらに書く方がいいと思いますか?

個人的には画像の上に説明を書く方が読みやすい記事になります。

説明文を画像の上方に書くと記事の流れを妨げません。「画像だけ見ても意味が分からない」といったことを防げます。

例えば下に説明を書いているとユーザーは最初に画像を見ることになります。説明が必要な画像の場合は意味を理解できません。

画像の上に説明を書く方が読みやすい

記事の読みやすさを考慮するなら上側に説明を書いておくべきです。これは自分の書いた記事を読み直しているときに気付いた経験則です。

スマートフォンを意識するなら2倍サイズの画像を使う

スマートフォンを意識するなら画像サイズは表示領域の2倍以上にするのがおすすめです。

等倍画像はRetinaディスプレイではぼやけてしまいます。

Retinaディスプレイ対策に2倍サイズの画像を使用する

見やすさ改善には統一感が重要

記事を読みやすくするための工夫を紹介しました。

ここまで色々と書いてきましたが、記事の見た目を良くするには統一感を出すことが大切です。

WordPressテーマの中には多くの記事装飾機能があるかもしれません。しかし複数種類のスタイルを混在させると統一感が低下します

私は初心者の頃このことに気がつかず、様々な装飾を使って自由に記事を書いていました。過去の記事を見直すとあまりの統一感のなさに愕然とします。

複数のスタイルを使っている人は1つか2つに絞ってみてください。

サイトを始めたばかりの初心者にとっては難しいことかもしれませんが、意識して記事を書いていれば少しずつ改善していきます。どうすればよりよく見えるかが分かっていきます。

ぜひこの記事の内容を参考に記事の見た目を改善してください。