皆さんは、Webデザインを考えるときにどんな工夫をするでしょうか？

Webページ全体の配色バランスに気をつかってみたり、いろいろなWeb素材を制作・配置してみたりと工夫を凝らしていると思います。

試行錯誤を繰り返すうちに、デザインや装飾がごちゃごちゃしだして「何が何だか分からない」「デザインの正解が分からない」「もともと作りたかった・イメージしていたデザインが分からなくなった」という状態の方もいらっしゃるのではないでしょうか？

デザインの情報や装飾が多くなりすぎると、本当にユーザーに見てほしい情報が目立たなくなってしまいます。

シンプルなWebデザインを意識して無駄な部分を削ぎ落としたほうが、より分かりやすく美しいデザインに仕上がることもあるのです。

余白とデザインの引き算から、シンプルで美しいWebデザインを作る方法を学んでみましょう。

余白バランスは最初から意識することが大事

シンプルなWebデザインを作る上で、「いらない装飾やコンテンツをなくして、余白がたくさんあるとスッキリとした綺麗なデザインになる」という考え方は、必ずしも正解とはかぎりません。

大切なことは、Webデザイン全体のバランスを意識して余白も考えることです。

1つのWebページだけを客観的に見てみるだけでも、文字であったり画像であったり余白であったりと、さまざまな要素のバランスによってWebページ全体のデザインが成立していると気づきます。

例えば、「左右のカラムの幅が○pxだから、メインコンテンツとの間の余白はそれぞれ○pxだな！」というように、全体の幅のバランスから引き算で逆算してデザインに生かすこともあります。

この辺りの方法は、Webデザインの基本ともいえるかもしれません。

Webデザインの余白の取りかた

先ほどは、Webページ全体のバランスから余白を引き算で逆算して配置する方法を確認しました。

Webページで余白が生まれるポイントは、おおまかに分けて「文章の段落間で生まれる余白」「配置する画像やWeb素材まわりの余白」「フッター・ヘッダー・左右カラムなどコンテンツの配置で生まれる余白」などです。

制作するWebページの内容によって、全体をより美しく魅せるための余白の値が変わってきます。

ニュースサイトやまとめサイトのように情報がメインのコンテンツになる場合は、余白を少なめにして文章がより強調されるデザインを意識してみましょう。

逆に、Webページ内の写真をより目立たせたいときは、全体の余白を多くとってユーザーの視線と意識が写真にうつりやすいデザインを意識します。

余白の値や取りかたによって、Webページの目的と見え方にも大きく違いがでます。ここが、Webデザイナーとしての腕のみせどころです。

配色バランスからもWebデザインを意識する

写真や文字の配置、余白のバランスで、シンプルで見やすいWebを意識できるようになったでしょうか？

さらに、配色のバランスも考えることで彩りのある美しいWebデザインに仕上げていきます。

シンプルなWebデザインを作るときの色は、無彩色である白・黒・グレーが使われることが多いです。

理由としては、はっきりとしたコントラストがつけやすいため色の種類や要素が少なくても、シンプルで（メインの情報を強調した）分かりやすい内容に仕上げられることが挙げられます。

配色のコツは、背景色と目立たせたい要素の色のバランスを意識して、情報を閲覧するユーザーが見やすいデザインを心掛けることです。

まとめ

Webデザインを作るときは、Webサイトを閲覧するユーザーにとって見やすい・分かりやすいデザインになることを意識しましょう。なんらかの情報を伝えることが、Webサイト制作の最大の目的です。ここの概念が抜けていると、どれだけ優れたデザインを作ってもユーザーからの反響を得ることができません。

Tweet