文字のレイアウトを工夫し購買意欲に繋げましょう

記事を読みやすくする3つのポイント

web制作を担当している人であれば基本的なことだとは思いますが、復習がてらに見ていただければと思います。

1. 文章を追いやすいように、行間を考えましょう。
ブラウザのデフォルト設定だと、行間が狭いなどと読みづらいものとなってしまいます。

サイトによっては適切なフォントサイズが異なるため、フォントサイズと行間の比率を考えることが重要です。
フォントサイズと行間を考え、適切なサイズにすることで、読みやすさが格段に上がるのです。

人が読みやすい行間は、フォントサイズ半分から1個分くらいがと言われているそうです。

1. 見やすい行間
各要素において基本となるフォントサイズを1emとし、emを元に行間を算出します。

次の場合どちらが読みやすいでしょうか。
＊左からそれぞれ、Line-height:2.5emの場合、1.75emの場合、1.3emの場合
＊上からそれぞれ、Line-height:2.5emの場合、1.75emの場合、1.3emの場合

ウェブサイトの製作や管理をしている方ならば検索エンジン上に自社のサイトがどれほど登場どのくらいの頻度、どの位置で表示するかの重要性をよく理解していると思います。
SEOが必要な理由は検索エンジンからトラフィック(ユーザー)が入って来るだけでなく、能動的に情報を検索する潜在顧客に接近する確率が高くなるからです。

多少好みはあると思いますが、おそらく殆どの人が“真ん中”と答えるでしょう。フォントサイズに対しての行間が30%のテキスト(右端の例)では行間が詰まりすぎていて読みづらいですよね。

逆にフォントサイズに対しての行間が150%のテキスト(左端の例)では行間が広すぎて視線の移動距離が大きくなってしまいます。このことからも、行間が狭すぎても読みづらいし逆に広すぎても疲れることが分かると思います。

フォントサイズに対しての行間が、75%前後が最も適した行間であり、読みやすいと思います。

2. フォントサイズと行間の関係を考える
また、フォントの種類によっても行間は異なってきます。
＊右からメイリオ、ヒラギノ角ゴシック、MS明朝体で書かれた記事と仮定します。
＊上からメイリオ、ヒラギノ角ゴシック、MS明朝体で書かれた記事と仮定します。

メイリオとヒラギノ角ゴシックに関してはそこまで大きな差はないですが、メイリオのほうがやや文字が大きいため、行間をもう少し増やしたほうが良さそうです。
一方、MS明朝体は同じフォントサイズにも関わらず文字が小さく見えます。
MS明朝体に関しては行間をもう少し縮めたほうが読みやすそうです。
フォントの種類によってサイズを調整するのは色々と大変なので、ここまで考える必要はないかもしれませんが、適切な行間サイズが異なってくることを頭に入れておきましょう。

一行に収める文字は適切な長さに
一行あたりの文字数が多すぎると、次の行を見失いやすくなるでしょう。逆に短すぎると狭すぎて区切りが悪く、読みづらくなってしまいます。

下の3つのケースではどれが一番読みやすいでしょうか。
＊上から一行当たりの文字数が45、25、15字前後となっています。
ウェブサイトの製作や管理をしている方ならば検索エンジン上に自社のサイトがどれほど登場どのくらいの頻度、どの位置で表示するかの重要性をよく理解していると思います。
SEOが必要な理由は検索エンジンからトラフィック(ユーザー)が入って来るだけでなく、能動的に情報を検索する潜在顧客に接近する確率が高くなるからです。

スマホ画面上の方であれば“一番下”と感じる人もいると思いますが、PC画面上であればおそらく殆どの人が“真ん中”と答えるでしょう。一番上に関しては一行当たりの文字数が多く、次の行を見失ってしまうと思います。

上の例からも分かるように、一行当たりの適切な文字数は25字前後と考えるのがいいでしょう。また、デバイスの画面幅によってもそれぞれ感じ方が異なるため、小さな画面上で表示させる場合はおそらく一番下の15字前後のものが望ましいでしょう。

一行に収める文字は適切な長さに

一行あたりの文字数が多すぎると、次の行を見失いやすくなるでしょう。
逆に短すぎると狭すぎて区切りが悪く、読みづらくなってしまいます。

スマホ画面上の方であれば“一番下”と感じる人もいると思いますが、PC画面上であればおそらく殆どの人が“真ん中”と答えるでしょう。一番上に関しては一行当たりの文字数が多く、次の行を見失ってしまうと思います。
上の例からも分かるように、一行当たりの適切な文字数は25字前後と考えるのがいいでしょう。
また、デバイスの画面幅によってもそれぞれ感じ方が異なるため、小さな画面上で表示させる場合はおそらく一番下の15字前後のものが望ましいでしょう。

まとめ

いかがでしたでしょうか。こうやって見ると行間が広さと読みやすさは関係していることが分かったと思います。
行間に関しては比較的重要な要素であるにも関わらず、意外と見落としている人が多いようです。

これらは、完読率・ページ滞在時間などにも関係してくるため、今回紹介した数値を覚えておきつつ、
大体これくらいの値といった具合にケースバイケースで調整していくことが重要です。

この記事が気に入ったら
いいね！しよう

最新情報をお届けします

Twitterでフォローしよう！

記事の著者が提供するサービス

運営会社情報

ウェブクマは「WEBプロモーションを活用して費用対効果を劇的にアップする方法」と題して、ウェブプロモーションをご担当される方にブックマークされいつも参照されるようなサイトを目指しております。
長年培ってきたSEOの実績やリスティング広告の智見、WEB制作の経験をもとに貴社のWebプロモーションの問題を解決する記事を多く掲載しております。
SEOベンダーとして、またWEB広告代理店として第一線で活躍する社員自らの経験を惜しみなく公開しておりますので、お困りの際は是非参考にしてみてください。ウェブクマは株式会社DYMが運営しております。