MENU
CLOSE
デザイン Edit : 2023.08.28 Update : 2024.11.07

サイト制作にも活用したい、長い文章を読んでもらうためのテクニック

今回は、サイト制作にも活かせる読みやすい文章を作るテクニックをいくつかご紹介します。
文章を読んでもらうためにもっとも重要になってくるのが、文字回りの装飾や設定になります。
こちらの記事では詳しく説明していきます。

フォントサイズについて

Webサイトで使用するフォントサイズは、Googleでは16pxが推奨されています。そのため一般的には、14〜16pxを最適なフォントサイズとし、子供やお年寄り向けのサイトについては、少し大きめの17〜18pxを採用すると良いでしょう。

以下で弊社で実際に制作したサイトで、16px・17px・18pxで制作したWebサイトをご紹介します。

16pxで制作したサイト

UNIONTEC|UNION TEC CO., LTD

サイト制作にも活用したい、長い文章を読んでもらうためのテクニック サイト制作にも活用したい、長い文章を読んでもらうためのテクニック 参照:https://service.union-tec.jp/office/project/detail/17

データのじかん|WingArc1st Inc.

サイト制作にも活用したい、長い文章を読んでもらうためのテクニック 参照:https://data.wingarc.com/cio-ciso-japan-summit-2023-01-57817

17pxで制作したサイト

TECH BLOG|WingArc1st Inc.

サイト制作にも活用したい、長い文章を読んでもらうためのテクニック 参照:https://navi.wingarc.com/product/drsum/12348

18pxで制作したサイト

WOW!BASE|Recruit Co., Ltd.

サイト制作にも活用したい、長い文章を読んでもらうためのテクニック https://www.wowbase.jp/event/202309hi/

フォントカラーについて

白背景に黒文字(#000000)は、コントラスト比が強く目が疲れやすいページとなるため、フォントカラーは、グレーをオススメします。
弊社のサイトでも濃いめのグレーを文字色に採用することが多いです。 サイト制作にも活用したい、長い文章を読んでもらうためのテクニック

行間・字間・文字数について

一般的にWebサイトで読みやすいとされる行間、字数、文字数は下記となります。
  • 行間:1.5〜2.0
  • 字間:文字サイズの5%~10%
  • 文字数:一文に25〜40文字程度
サイト制作にも活用したい、長い文章を読んでもらうためのテクニック

フォントデザインについて

まず読みやすい文章を作成するにあたって、どのフォントを使用するかということが非常に重要なポイントとなります。日本語フォントは大きく分けて「ゴシック体」と「明朝体」の2種類あり、それぞれの特徴と代表的なフォントを押さえておきましょう。

ゴシック体の特徴

サイト制作にも活用したい、長い文章を読んでもらうためのテクニック
  • 文字にうろこ(三角形の山)が無く、縦と横の線が均一
  • 線の太さが均一なので、視認性が高い
  • 端が角張っているものを「角ゴシック」、端が丸いものを「丸ゴシック」
  • 見出し、プレゼン資料、看板やポスターなどに使用される

代表的なゴシック体フォント

ヒラギノ角ゴシック

macOSおよびiOSに標準搭載されているフォント。明るくつぶれにくく、多彩なウエイトバリエーションで、極小サイズのキャプションから特大サイズの見出しまで、幅広く対応可能。 代表的なゴシック体フォント①ヒラギノ角ゴシック

游ゴシック

Windows8以降のWindowsおよびmacOSに標準搭載されているフォント。長文でも読みやすいスタンダードなゴシック体。7つのウエイトで構成され、キャプション・本文から小見出し・大見出しまで幅広い用途に対応可。 代表的なゴシック体フォント②游ゴシック

Noto Sans

GoogleがAdobeと共同開発した視認性に優れたフォント。無償で使用できるwebフォントの代表格。 代表的なゴシック体フォント③Noto Sans

筑紫ゴシック

上品かつ親しみのあるフォントで、可読性に優れている。8つのウエイトで構成され、キャプション・本文から小見出し・大見出しまで幅広い用途に対応可。 代表的なゴシック体フォント④筑紫ゴシック

明朝体の特徴

明朝体の特徴
  • うろこ(三角形の山)のある書体
  • 縦線に比べ、横線が細い
  • トメ・ハネ・ハライがはっきりとしている
  • 可読性が高いため、長文に向いている


代表的な明朝体フォント

ヒラギノ明朝

macOSおよびiOSに標準搭載されているフォント。豊富なウエイトバリエーションと仮名書体との組み合わせで、様々な表現を可能にするオールマイティな書体。 代表的な明朝体フォント①ヒラギノ明朝

游明朝体

Windows8以降のWindowsおよびmacOSに標準搭載されているフォント。単行本や文庫などで小説を組むことを目的に開発されたフォントのため、可読性に優れている。 代表的な明朝体フォント②游明朝体

Noto Serif

Noto Sansと同様にGoogleがAdobeと共同開発した視認性に優れたフォント。無償で使用できるwebフォントの代表格。 代表的な明朝体フォント③Noto Serif

筑紫明朝

本格的な長文本文用明朝体として開発されたフォント。上品かつ心地よい可読性を兼ね備えている。 代表的な明朝体フォント④筑紫明朝

Webサイトではゴシック体と明朝体のどちらも使用されますが、読みやすさの観点からゴシック体のサイトの方が多いです。(※Androidに明朝体の搭載がないといった点などから)
上記のような可読性と視認性に優れたフォントを採用することで、サイトの中の文章がぐっと読みやすくなってきます。

その他のポイント

  • 一文に詰め込みすぎず、簡潔に述べる
  • 主語と述語は、離しすぎず近い場所に置く
  • 重要な情報は、文章の冒頭に(結論から先に述べる
  • 「この」「あの」「それ」など指示語は多用しない
  • 文章に対して適切な画像と図表などを用いる
  • 見出し+本文のブロック構造に

まとめ

今回ご紹介したポイントを押さえるだけでも、文章は読みやすく改善することができます。
また“文章をメインにレイアウトしたデザイン事例”についても過去記事でまとめています。


こちらの記事も参考にしながら、是非読みやすい文章作りにトライしてみてください✨

tacot

大学卒業後、デジタルマーケティング会社に入社しメディア広告営業やウェブサイトのディレクションを担当。前職の経験を活かしウェブディレクターをしながらWeb制作業界にまつわるコンテンツを執筆中。