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

2024.03.08

web制作の基本

#新規顧客獲得

以前、CSSを用いた文字のデザインについてしましたが、購買意欲を高めるためには行間やレイアウトの幅などについても考えていかなければなりません。記事の内容が重要なことは言うまでもないことですが、クリックした記事に文字の羅列が表示され、やたらと続くようなものの場合、ユーザーは離脱してしまうでしょう。また、あまりにも行間が狭いものやバランスが悪いものも同様に離脱に繋がってしまうでしょう。そこで今回は、記事を読みやすくするポイントを3つ紹介します。

AI要約

ChatGPT4で要約生成中

記事を読みやすくする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字前後のものが望ましいでしょう。