みなさんは普段、Webサイトを見ていて「ごちゃごちゃしたサイトだな」とか「情報を詰め込みすぎて見にくいな」と感じることはないでしょうか？

特に最近はスマホなど小さな画面で見る人が増え、「見にくい」サイトは企業イメージを大きく損ないかねません。

そうならないために、今回は御社のWebサイトの印象をガラリと変えるカンタンな方法を、最近のデザイントレンドとともにデザイナーの私・稲垣がご紹介したいと思います。

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

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

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

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

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



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

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

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

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

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

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

■トヨタ自動車株式会社 公式企業サイト（http://www.toyota.co.jp/）

■三菱商事（http://www.mitsubishicorp.com/jp/ja/）

２）写真を使用する

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

■ヤンマー株式会社（https://www.yanmar.com/jp/）

■株式会社グッドライフカンパニー（http://www.goodlife-c.jp/）

３）アイコンを使用する

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

■クリプトン・フューチャー・メディア株式会社（http://www.crypton.co.jp/）

■CHRYSLER（http://www.chrysler.co.jp/）

４）見出しを使用する

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

■株式会社ネクソン 採用情報（http://recruit.nexon.co.jp/）

■淡路交通株式会社（http://www.awaji-kotsu.co.jp/）

５）縦書きを使用する

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

■旅館 山河（http://www.sanga-ryokan.com/）

■道路工業株式会社（http://www.dorokogyo.co.jp/）

Webサイト制作・リニューアルを成功させるためのチェックリスト10をこちらの記事にまとめていますので、合わせてご覧ください。
「Webサイト制作を成功させるためのチェックリスト10」