企業担当者が知っておきたいWebデザイン講座～ホワイトスペース（余白）で差をつける！

ズバリ原因は、文字の複雑さにある

まずはこちらをご覧ください↓

そうですね。ダメですよね。

大きな原因としては、日本語はひらがな・カタカナ・漢字の3種類で構成されており、特に漢字は「文字自体の表示を複雑に見せてしまう」という特徴があるからです。

ためしに英語と比べてみましょう。
日本語の複雑さは際立っていますよね。↓



これを解決するとっておきの方法が、【文字の周りに十分なホワイトスペース（余白）を使用する】 ことです。

文字の周りにホワイトスペース（余白）を使用する事で得られる効果は、主に2つが挙げられます。
・文字の可読性を高めることができる
・文字の複雑さを干渉できる

では論より証拠、具体的な事例を見ながらご紹介していきましょう。

ホワイトスペース（余白）を設ける際の5つのポイント

１）区切り線・背景を使用する

タイル上のデザインなど、コンテンツごとの余白の取り方で情報整理を行ったページでは、それぞれのコンテンツが明確に仕切られ、すっきりとしたレイアウトが実現されます。

■トヨタ自動車株式会社 公式企業サイト

■三菱商事

２）写真を使用する

写真を大きく使ったメインイメージでは、画像に対して十分に余白をとってキャッチコピーをレイアウトすることで、キャッチコピーをより印象的に見せることが可能です。

■ヤンマー株式会社

■株式会社グッドライフカンパニー

３）アイコンを使用する

アイキャッチとして使用されているアイコンも、余白を効果的に使用することで、より強調された見え方になります。

■クリプトン・フューチャー・メディア株式会社

■CHRYSLER

４）見出しを使用する

見出しの周りに十分な余白をとったデザインでは、文字がより目立ち、視認性が高まります。

■株式会社ネクソン 採用情報

■淡路交通株式会社

５）縦書きを使用する

余白を利用し、縦書きの文字を印象的に見せたデザイン。日本人の余白に対する美意識が生かされています。

■旅館 山河

■道路工業株式会社

マーケティングを意識したサイトリニューアルができるような事前チェックリストをお作りしました。