これからホームページを作り始める方に向けて最低限押さえておくポイントをご紹介します。

文字の余白

サイトの重要な要素の一つ「余白」
どんなに美しいフォントや写真、イラストを選んでも、読みやすさや見やすさがいまひとつ… そんな経験はありませんか？
その原因はもしかすると“文字の余白”“コンテンツごとの余白”かもしれません。

何を伝えたいのかが的確に伝わるように大きさや配置などがとても重要です。

一つのセクションに複数の文を配置する際の例、コンテンツごとの余白例をあげて見ていきましょう。

①タイトル＋本文の間の余白

BEFOREのようにコンテンツのタイトルと文章の間に「余白」がない場合は、重要な部分や文章との区切りが分かりにくいです。

AFTERのようにタイトルと文章の間に「余白」を入れることでコンテンツのまとまりを持ったまま本文とタイトルの区別を作ることができます。

②本文の行間の余白

BEFOREのようにコンテンツの文章の行間の「余白」がバラバラの場合、同じコンテンツ内の文章だと分かりにくく読みにくいです。

AFTERのようにタイトルと文章の位置を規則的に揃えることで一つのまとまりだと分かり読みやすくなります。

③画面幅と文字との余白

BEFOREのようにコンテンツの文字が画面幅いっぱいに書かれている場合は、文字が詰まってしまっている印象があり、文章が非常に読みにくいです。
そこで行間やタイトルと文章間の余白以外に注意したいのが画面幅との余白です。

AFTERのようにコンテンツの周りにも余白を設けることで見えない区切りができ、さらにまとまった印象が出てくるのでコンテンツ周りの余白も重要になります。

以上３つの余白の取り方を意識した文章のデザイン

セクションごとに余白を設けて用途ごと（タイトル・本文など）に文字の大きさなどでメリハリを作り、
同じデザインを反復することで全体に統一感が出ます。

余白を使うことで情報ごとにグループ化されていることが余計な線を引いたり、囲ったりという
装飾をつけることもせずに分かるようになります。

また、文のまとまりを作るときは

・関連性の高いものは近づけて置く
・関連性の低いもの同士は余白を十分に取る

ということを意識してデザインするだけでもWEBサイト全体の印象は大きく変わります。

文字の余白を意識するところからデザインを作る

今回は文字の余白にフォーカスして話しましたが、デザイナーとして初めてデザインを始める際になかなか上手くデザインがまとまらず苦労した部分が文字の余白の作り方でした。

この記事がデザインの参考になれば嬉しいです。
最後までお読みいただきありがとうございました。