みなさんは普段、Webサイトを見ていて「ごちゃごちゃしたサイトだな」とか「情報を詰め込みすぎて見にくいな」と感じることはないでしょうか?
特に最近はスマホなど小さな画面で見る人が増え、「見にくい」サイトは企業イメージを大きく損ないかねません。
そうならないために、今回は御社のWebサイトの印象をガラリと変えるカンタンな方法を、最近のデザイントレンドとともにデザイナーの私・稲垣がご紹介したいと思います。
まずはこちらをご覧ください↓
そうですね。ダメですよね。
大きな原因としては、日本語はひらがな・カタカナ・漢字の3種類で構成されており、特に漢字は「文字自体の表示を複雑に見せてしまう」という特徴があるからです。
ためしに英語と比べてみましょう。
日本語の複雑さは際立っていますよね。↓
これを解決するとっておきの方法が、【文字の周りに十分なホワイトスペース(余白)を使用する】 ことです。
文字の周りにホワイトスペース(余白)を使用する事で得られる効果は、主に2つが挙げられます。
・文字の可読性を高めることができる
・文字の複雑さを干渉できる
では論より証拠、具体的な事例を見ながらご紹介していきましょう。
タイル上のデザインなど、コンテンツごとの余白の取り方で情報整理を行ったページでは、それぞれのコンテンツが明確に仕切られ、すっきりとしたレイアウトが実現されます。
■トヨタ自動車株式会社 公式企業サイト(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」