文字サイズ・行間設定

「読みやすさ」はどこから来るのか?

ここにいくつかの行間で、文章を表示してみます。
あなたは、行間をいくつにした時に読みやすいと感じますか?

行間設定1.0

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流ながれて来きました。

行間設定1.3

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流ながれて来きました。

行間設定1.5

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流ながれて来きました。

行間設定1.8

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流ながれて来きました。

行間設定2.0

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流ながれて来きました。

『1.0』や『1.3』では本文の文章の行間が近すぎて読みにくい文章になっていると思いませんか?

逆に『2.0』まで行くと、今度は間があきすぎてしまうと感じてしまうかもしれませんね。

どんなに商品やサービスが素晴らしかったとしても、それを説明するテキストを読んでもらわなければ訪問者には伝わりません。見出しの大きさや、文章の文字サイズ、行間を最適な設定をしておくことだけで、文章を目で追いやすくなります!

本文のフォントサイズについて

弊社では、ホームページの最大幅にもよりますが、本文のフォントサイズは16pxを標準としています。

これには理由があり、Googleでは14px以下は使わないように、とガイドラインがあるのです。

もし本文の基準を14pxにしてしまうと、補足などで小さな文字で書きたいときに書けなくなってしまいます。
Jimdoの公式サイトなどはワンカラムで作っているページもあり、横幅も広いことから、標準のPCディスプレイでの閲覧時には18pxを標準で使っているようです。

そういう時代なんですね。

フォントサイズの読みやすさは、文字が表示されている横幅の広さによっても変わります。

フォントサイズ14px

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

フォントサイズ16px

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

フォントサイズ18px

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

フォントサイズ20px

むかし、むかし、あるところに、おじいさんとおばあさんがありました。
まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。

見出しと文字の余白の関係性

Jimdoの場合、海外で生まれたシステムです。使用される言語はアルファベットですから下に突き出す文字( g j y pなど)があるため、それに合わせた余白があらかじめ設定されているのに対し、日本語用には調整されていません。

これを解決するには、日本語用に文字に対しての余白の設定をしなければなりません。

ご自分のサイトの文章が、いまいち読みずらいと感じたら、以下の設定を試してみてください。
おそらく、読みやすくなるはずです。

ヒント

文章に対するフォントサイズを16ピクセルもしくは、18ピクセルに設定する。
行間は1.7にする。

他の解決法

他にも読みやすくする工夫があります。

  • 適当な段落ごとに改行を一つ入れる(2~4行程度でまとめて読みやすくする)
  • 文脈が終わったところで、余白(20~50ピクセル程度)を入れる。
  • 次の文章が始まる前に見出しを入れる。
  • etc...

見出しデザインのカスタマイズについてはこちらをご覧ください。

スマートフォンでの文章の折り返し

スマートフォンで見たときに、変なところで文字が改行されてしまい読みにくい!なんてことはありませんか?

  

PCでは適度な改行を入れても、スマホでは改行がなくなるという方法があります。そのためにはコーディングという作業が必要になります。

下のテキストボックスにマウスをあててみてください。

PCでは適度な改行を入れ、読みやすくする。
スマホでは改行がなくなるという方法です。

 

スマートフォンで見たときに、
変なところで文字が改行されないように、
改行を削除してしまう方法です。

 

ひとつの段落を長文にしないということは、
読みやすい文章を書く上で大切なポイントのひとつですが、
特殊な設定をすることで改行を削除して、
この問題を解決することが出来ます。

 

プロがチェックします!

フォントの選定、文字サイズ、行間、色、などを調整するだけでもサイト全体の読みやすさが格段にアップします。また、画像などと一緒に文章を表示させるだけで、文章に対する興味を抱かせたり、読みやすくさせるという方法もあります。「自分ではどうしたら良いのかわからない・・・・」という方は、一度ご相談ください。プロの目でチェックするだけで、見違えるほど、読みやすくなるカスタマイズをいたします。

ワンポイントレッスン

スマホ時代に入って、文章の書き方にも工夫が必要になってきています。
ディスプレイの解像度が格段にアップしていますので、文字サイズにも細心の注意をしたいところです。
ページを作る上で気を付けたいポイントをいくつか列挙します。

  • フォントサイズは最低14ピクセルを下回らないこと
  • 行間は1.5~1.8程度に設定する。
  • 「。」までは、改行はしないで文章を書くこと
  • 2~4行ごとに、余白(改行二つ分?)を入れる
  • 文脈の終わりには大きめの余白を追加する。
  • 文脈の始まりには見出しを付けてあげる。
  • 要所に画像付き文章などを使用して、読者の興味を引く

※画像の下にある文章は、文章だけの時に比べ1.5倍多く読まれるという統計があるそうです。

 

文章が読みづらいなと思ったら、一度試してみてくださいね。

カスタマイズ料金

お任せフルカスタマイズ

(文章文字サイズ、見出し文字サイズ、見出し余白設定、文章行間設定)

5,000円

見出し(大・中・小)の文字サイズ、余白設定

 

2,000円

行間最適設定

 

1,000円

スマートフォンでの折り返し設定

 

3,000円

すべてのページに反映されてしまうため、お客様が作られたページによっては読みづらくなってしまう可能性がありますので、ご依頼いただく前に、必ずサイトを拝見させていただきます。

弊社が行うのは、あくまでも全体の設定とコーディング作業になりますので、そういった箇所があった場合には、ご自分で修正をしていただく必要が出てきます。

※問題があるとこちらで把握できた場合には、作業前や後にサイト内での作業をお願いする場合がございます。

お客様が通常とは違う方法で文章の設定をしている場合など、ページごとの問題についてはこの料金の範囲では対応できませんのであらかじめご了承ください。

お申込み

ホームページをお持ちの方はホームページアドレスの記載もよろしくお願いします。

コードを入力してください。:

メモ: * は入力必須項目です

設置は当社が行います。

設置にはログインに必要な情報をご提示願います。

*弊社がログインする際、可能であればログインする間だけの仮パスワードを発行してください。ログイン後、そのパスワードは破棄いたします。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422