· 

    「読みやすい文章」を作るポイントは?

    「読みやすい文章」を作るポイントは?

    あなたが読みやすいと思うのはどのような文章ですか? 気付いたら自然と次も読んでしまうような読み手を惹きつける文章や、簡潔で理解がしやすい文章でしょうか? 

     

    一般的に「読みやすい文章」は、正確に文章を理解することができ、さらに長時間読んでいても疲れさせない文章のことを指します。そのため、「読みやすい文章」は、どのくらい長くホームページに滞在してもらえるかにも関係してきます。

     

    あなたが伝えたいことをホームページ閲覧者に上手く伝えるためには、どのような文章を作ると良いのでしょうか? 「読みやすい文章」を作るポイントを5つご紹介します。

    1.一行の文字数を見直そう

    一行あたりの文字数は、長すぎず短すぎないくらいがベストです。一行が長すぎると、端から端まで視線を動かさなければならないため、次の行を見失ってしまったり、反対に短すぎると、適切な文章の切れ方でないため、内容が理解しづらくなります。

     

    使っているフォントの大きさにもよりますが、基本的に一行あたり 30〜40 字の間が読みやすい文字数だと言えます。 

     

    Jimdo には、コンテンツエリアが広いレイアウトがありますが、横幅いっぱいに文章を入れるのはできるだけ控えてください。カラムや画像を使って行を短くすることを心がけましょう。

    1行が長すぎると読みづらい
    1行が長すぎると読みづらい
    カラムと空白を使って行を短く読みやすく
    カラムと空白を使って行を短く読みやすく

    2. 背景と文字色にコントラストを

    冒頭でも述べた「読みやすさ」に当たりますが、背景と文字色のコントラストを上げると文章は読みやすくなります。デザイン性を優先しすぎて、「読みやすさ」を忘れていませんか? 本や教科書が白紙に黒文字で印刷されていることには意味があるのです。

    白黒で物足りないなと思った際は、「濃色」と「薄色」で色を組み合わせてみるのもいいですし、補色を活用するのもおすすめです。「補色」とは向かい合う色のことで、互いの色を目立たせる組み合わせです。色の組み合わせで悩んだら、とりあえず補色を使ってみるのも一つの方法です。下の画像を見てみてください。補色の組み合わせだと、より文字の縁がよりくっきりと見えるはずです。

    補色と濃色、薄色をうまく活用している
    補色と濃色、薄色をうまく活用している
    補色ではない組み合わせのため見えづらい
    補色ではない組み合わせのため見えづらい

    3. 文字周りにゆとりを持たせよう

    文章を書くことに一生懸命になりすぎて、一面文字でぎっしりと埋め尽くされていませんか? 長時間読んでいても疲れさせない文章は、文字の周りにもゆとりがあります。以下の2つのポイントをチェックしてみましょう。ゆとりを持たせる方法として、「改行」「行間幅」などがあります。

    適切な場所で改行しましょう

    長い文章を改行せずにいると、文章全体が一つの塊のように見え、自分の読んでいる位置がわかりにくくなります。反対に句読点のたびに改行してしまう人もいますが、改行が多すぎるとスマートフォンから閲覧した際に予期せぬ場所で改行されてしまうことがあるため、不必要に改行が多いのも適切ではありません。そのため、段落や各部ごとに改行を入れて、適度に区切ることで文章はより読みやすくなります。

    行間幅を調整してみよう

    行間幅は、一行の文字数や全体の行数、文字サイズ、書体によって変わるため一概には言えませんが、文章が詰まっていて読みづらいなと思った場合は、行間幅を調節してみましょう。狭すぎたり広すぎると、下の例のように見にくくなることがあるので気をつけましょう。フォントサイズ 16 px の場合だと、行間幅は 1.75 がちょうど良いです。

    行間幅が狭すぎる(行間幅:1)
    行間幅が狭すぎる(行間幅:1)
    行間幅が広すぎる(行間幅:2)
    行間幅が広すぎる(行間幅:2)

    4. 読みやすい文章の配置を選ぼう

    文章の配置には、左寄せ、右寄せ、中央寄せがあります。文字の配置がバラバラになっていると目の動きが一定ではなくなるため、読み手を疲れさせてしまう原因になってしまいます。それは読みやすい文章とは言えませんね。そのため、馴染みがある左寄せをメインとして使い、見出しなどを中央に配置すると良いでしょう。

    左寄せ

    左寄せは基本中の基本で、場所を選ばず一番読みやすい整列と言えます。使用することで、段落をきちんと調和したものにできます。しかし、文字によっては単語が伸びたりと、不自然に見えてしまうこともあります。 

    各文字の整列の

    特徴を踏まえて、

    さっそく使いこなそう!


    右寄せ

    右寄せは、文章の装飾目的で使われることが多いです。人は、文字を読むときに左から右へ目を動かすため、左が揃っていないのは読みづらく感じてしまう人が多いです。

    各文字の整列の

    特徴を踏まえて、

    さっそく使いこなそう!


    デザイン的に均衡を保ち、美しく見せることができるため、見出しやデザインとして使うことが良いでしょう。文章で使う場合は各行の文字数をなるべく揃えると読みやすくなります。

    各文字の整列の

    特徴を踏まえて、

    さっそく使いこなそう!


    5.疲労を感じさせない文字のスタイル

    フォントサイズ

    フォントによって、大きさや見え方に多少変化がありますが、一般的にホームページでの本文のフォントサイズは 16 px が良いとされています。文章量が多くなってしまった場合、文字を小さくしてコンパクトに見せようとするのは控えましょう。文字の大きさを見直すことは、適切な文章の量を見直すことにも繋がります。

     

    また、本文の文字の大きさと見出しに変化があると、視覚的にもその文章が何について書いているのかが伝わりやすくなります。

     

    Jimdo には「見出し」コンテンツがあり、サイズも大中小で選ぶことができます。見出しをつけることは、文章が読みやすくなるだけではなく、検索エンジンにページの構造を伝えることができるので SEO にも効果的です。

    フォント

    「掴み」の部分で見出しは重要なため、視覚的に興味を引くフォントを選びましょう。「明朝体」や「ゴシック体」でも十分ですが、見出しに関しては装飾の効いた「日本語Webフォント」でも良いでしょう。全体のデザインに合う見出しフォントを選んでみるとさらに良いです。 

    竹 B(装飾体)
    竹 B(装飾体)
    勘亭流(手書き)
    勘亭流(手書き)
    すずむし(装飾体)
    すずむし(装飾体)

    日本語Webフォントだとインパクトを出せる
    日本語Webフォントだとインパクトを出せる

    ナビゲーションは、「何が」「どこに」あるのかを示す役割をしていて、本文は画面上で読んでもらうことを目的としているので、スムーズに読むことができるシンプルなフォントが好ましいです。日本語フォントでは可読性のある「明朝体」や、親しみやすい印象を与える「ゴシック体」がおすすめです。

    新丸ゴ R(ゴシック)
    新丸ゴ R(ゴシック)
    見出ミンMA31(明朝体)
    見出ミンMA31(明朝体)
    ナウ-MM(明朝体)
    ナウ-MM(明朝体)

    ※Pro版・Business版ユーザーが利用できる日本語Webフォント(モリサワフォント)は、プロのデザイナーや制作者にも支持されている美しい書体です。

    まとめ

    • カラムや画像を活用して、一行あたり 30〜40 字を意識する。
    • 背景色と文字色のコントラストを上げるためには、「濃色・薄色」や「補色」を使うのがおすすめ。
    • 文字間のゆとりは「改行」や「行間幅」で調整。
    • 人の目の動きを考えて、左寄せが読んでいて疲れにくい。
    • 一般的に本文のフォントサイズは 16 px を推奨。  
    • 本文は「明朝体」や「ゴシック体」で読みやすく。
    • 見出しは「日本語Webフォント」でインパクトを出す。

    いかがでしたか? 「読みやすい文章」と言うのは、内容はもちろん大事ですが、「見せ方」も非常に重要です。どれも簡単にできることなので、忘れてしまう前にさっそく編集してみましょう。そうすれば、ホームページの質もグッと上がるはずです。読みやすいページを作ることであなたのホームページの常連さんが増えるかもしれませんよ。