文字数・行間


文字数

1行の文字数が多くなると、次に読む行を見失いやすくなりますし、文章を追うだけで目が疲れてしまいます。文字サイズやレイアウトを工夫して、1行の文字数を少なくすると可読性が上がり読みやすくなります。

sample_101

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

1行の文字が長すぎて可読性が低下している。

sample_102

◆文字サイズを変更して、1行の文字を少なくする。

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

1行の文字が少なくなり、読みやすいなる。

Webサイトでは、1行の文字が40文字を超えると読みにくいといわれています(この数字は諸説ありますが、多すぎるのと読みにくくなるのは確か)。したがって、1行の文字数があまり多くならないような配慮が必要になってきます。

ただ、フリーブログやテンプレートなどでは予めコンテンツの幅が決まっていて、1行の文字数が大幅に多くなっているケースは少ないです。このサイトも元々文字数は最適化してあるため、レイアウトではなくCSSで文字サイズを変更することでサンプルも作っています。

しかし、オリジナルでデザインするときや文字サイズを変更するときなどには意識しておいたほうがよい要素だと思います。

行間

行間というのは、行と行の間隔のこと(正確には行の最下部から次の行の最上部までの距離)をいいます。この間隔が狭すぎても広すぎても文章は読みにくくなってしまいます

sample_201

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

1行の文字少ないが、行間が詰まっていて読みにくい。

sample_202

行間を文字サイズの50%(1.5倍)にする。

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

行間を広く取ることで、可読性が向上している。

sample_203

行間は広すぎても読みにくくなる。行間を文字サイズの200%(3倍)にした場合。

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

行間を広すぎると、間延びした感じになってしまう。

解説

適切な行間については様々な考え方がありますが、使用しているフォントサイズの1.3~1.7倍ぐらいにしているところが多いようです。

CSSでの設定方法
CSSで行間を設定するときには「line-height」プロパティを使用します。また、行間の設定には%指定、em指定、px指定などの多様な方法があるので、場面によって使い分けるのがいいと思います。

著者の場合は、単位を指定しない方法(例:line-height:1.5;)を好んで使っています。

文字数・行間 への1件のフィードバック

  1. 飯沼祐志 のコメント:

    有益な情報ありがとうございました。

    私はまだ、サイトを作り始めている、初心者ですが

    行間を少し開けすぎかなと思っていました。

    参考になりました。

    ちょくちょく寄らせていただきます。

    ありがとうございました。

    m(__)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>