WEBデザイナー初学者に向けてpart2

前回は初学者に向けて、WEBデザインを学ぶために必要な学ぶための姿勢や考え方について書きましたが今回は、デザインの基本の理論のお話です。

デザインの基本ルールを守ろう

デザインには「デザインの4大原則」というルールがあります。整列・近接・反復・強弱（対比）です。この基本のルールでデザインは構成されているので初学者の方は、きっちり覚えていきましょう。

近接

一つのまとまりとしての意味を持たせる塊としてのデザイン。関連する要素を空間的に近づけることで何らかの意味を持たせ、バラバラだったものを塊にしてまとまったグループにする。余白の間隔でグループ感を持たせることが大切です。例えるなら関連のある近いものを集めてグループ化するという意味では商品の箱詰めでリンゴはリンゴ、みかんはみかんみたいに分けるイメージ。

整列

何か一つの基準で並べることを言います。個としてバラバラだったものを関連する情報を一定のルールで並べ、どこに何の情報があるか見やすくするためのデザイン。例えるなら基準に合わせて並べるという意味では、運動会の体操隊形に並ぶときみたいなものだと思えばイメージしやすいかもしれないですね。

反復

近接・整列のルールに基づいてできた塊が連続して繰り返すことを指す。デザインとしての一貫性を持たせるためのルール。デザインにおいて一貫性がなくなるととても分かりにくく、見にくいものになってしまいます。例えるなら同じ基準で出来上がったもの（近接・整列で構成されたもの）がベルトコンベアーで流れてくる（繰り返される）感じをイメージするとイメージしやすいかもしれないですね。

強弱（対比）

情報に優先順位をつけることを指します。周りの要素と相対的に見て強く見せるたり差別化して違いを示し重要な要素を際立たせるためのルール。大きさや色、基準からわざとズラすことで周りの要素との強弱を調節していくことが大事です。

色数は絞ろう

色数は2色もしくは３色くらいに絞りましょう。色数が多いと統一感のないデザインでごてついたダサいデザインになってしまいます。メインのカラーを決め、ベースカラー、メインカラー、アクセントカラーの３色を設定していきましょう。

色のパターンは、色の明度や彩度によって色の強弱が変化します。慣れないうちは、色選びに迷ってデザインが進まなくなることがあるので色を付けずにあえて白黒で制作してレイアウトやバランスなどを確認して色を後から決めるというテクニックを利用すると便利です。

いろんなデザインを見て配色を学ぶことも大事です。扱う業界によって配色のパターンの定番が決まってたりもするのでそのパターンを掴むことも大事です。例えば士業系のWEBサイトであればネイビーをメインカラーにベースカラーを白、アクセントカラーに濃い黄色みたいな感じになる。色の相性はとても重要です。相性の良い色を見つけるのに便利なサイトもあるのでそういったものも活用してみるのも良いでしょう。

ベースカラー

最も大きい面積を占める基本となる色で背景色となる色

メインカラー

配色のメインとなる色

アクセントカラー

一番目立つ色で、全体を引き締める、ユーザーの目を引く役割のある色

フォントの使い分けを覚えよう

制作をするときはフォントは2~3個に絞りましょう。フォントが多いと統一感がない一貫性のないデザインになってしまいます。フォントは役割に応じてメインフォント・アクセントフォント・ベースフォントに分かれます。

フォントも与えたい印象によってフォントの種類も変わってきます。明朝体は比較的、高級感のあるイメージ、ゴシック体は比較的、カジュアルなイメージでフォントウエイト（文字の太さ）や文字の装飾でも印象は大きく変わります。

フォントには一定のルールが存在します。文章として読ませたい文章には明朝体で英字ならセリフ体（文字の先端に装飾があるフォント）を使います。なぜなら読み手に負担を与えにくい可読性の高い文字だからです。ゴシック体でもフォントウエイト（文字の太さ）を細くして可読性をあげれば問題なく文章で使うことができます。モダンな印象を持たせたいときなど、明朝体なくあえてゴシック体のフォントを用いる時もあります。文章として読ませるのではなく、タイトルや見出しのような見せる要素で使うならゴシック体、英字ならサンセリフ（文字の先端に装飾がないフォント）を選びましょう。なぜなら視認性が高く受け手の印象に残りやすいからです。フォントのルールは押さえておきましょう。

余白は命

余白は最初に説明した「デザインの4大原則」にも関わる重要な要素です。余白の空きによって要素ごとの塊が出来上がり、デザインのレイアウトの基本になっていくので重要です。

関連する情報同士の余白は狭く、関連しない情報同士の余白は広めにとるのが基本となります。目立たせたい要素の周りに余白をとると、その要素が他の要素のなかに埋もれてしまうことを避け、存在を強調できて効果的です。伝えたいものを明確化し、目に留まる箇所を意図的に作る事ができます。余白には「視線誘導」としての役割もあるのです。

余白の大きさによって持たせる印象も変わります。余白をきっちり取ることで情報が整理されて大きく印象が変わります。余白を広めに取ることでシンプルで洗練された感じや高級感のある印象を与えることもできるのでデザインによって余白を調整してみましょう。また、いろんなデザインの余白を研究してデザインのレパートリーを増やしましょう。

文字の間隔も含めた余白もとても重要です。文字の間隔によって読みやすさも格段に変わります。文章の文字の間隔をあえてたっぷり取ることでメッセージ性を持たせることできます。役割に応じて文字の間隔を変えてみましょう。いろんなデザインを見て文字の間隔を研究していくと文字も含めたデザインのレパートリーが増えていくと思います。

視線誘導で読みやすさが変わる

視線誘導の仕方を抑えることはデザインの基本です。可読性の高い文字選びもそうですがレイアウトも読みやすさの大事な要素です。視線誘導の形は大きく３つに分かれます。シチュエーションごとに効果的に使い分けることを覚えましょう。Z型やF型はWEBサイトなどの横書きの記事や紹介ページなど一般的なレイアウト、N型は雑誌など印刷物に多いレイアウトです。これにデザインの４大原則を組みあわせながら余白の使い方を考え、効果的なデザインを目指しましょう。媒体を見る側になったつもりで何度も俯瞰で見て読みやすくて見やすいか立ち止まって注意深くデザインを観察することでデザインが洗練されていくので制作したデザインを観察する癖をつけましょう。

終わりに

---

デザインの基本のルールを守り、デザインの基礎をしっかりと押さえてデザインの幅を広げていくことができればデザインがもっと楽しくなります。基本のルールを学び、いろんなデザインを見て触れることがデザイン習得の最短ルートになります。