初心者の方でWebデザインやバナーデザインを行なうときに「なんか違う…」「バランスが悪い？」「違和感がある」などと感じることはありませんか？
おそらく大半の人はそういった感じで「難しい」と思うことがあるのではないでしょうか。
ここでは、未経験・初心者向けにデザイナーとして押さえるべく簡単なポイントをまとめています。
ちょっと気をつけるだけで大分バランスが良くなると思いますよ♪
なお、私は以下の本を参考にデザインの基礎を身につけました。
Webデザインやバナーに限らず、パンフレットや名刺などレイアウトするもの全てに共通するデザイン力をつけることができます。
この本の内容と私の考えを合わせた上で、実務を通じてこれは確かに大事！と感じた4つの原則をご紹介をさせていただきます。
※デザインには答えがないと言われるように、ここでご紹介するデザイン例が必ずしも最適であるとは限りませんので、あくまで参考程度にご覧いただければと思います。
おすすめ関連記事: 未経験からWebデザイナーに転職するまで＆してからやったこと
関係のあるテキスト・画像同士は”近接”させよう
いくつかの要素において、関係のあるモノ同士は近づけ、関係のないモノは離すことを意識してみましょう。
以下のWebサイトの例を見てみます。
近接を意識していない例 
近接を意識した例
(テキストの内容は適当なので気にしないで下さい…笑)
左ページが”近接”を意識していないパターン、右ページが”近接”を意識したパターンです。
パッと見た時、どちらが見やすく頭に入りやすいでしょうか？
そう、右側の近接を意識した例の方ですよね。
左ページはなんだか”Wordで作った文書”感がありますよね…
この「近接」は、同じグループの要素とそうでない要素にて適切な空間を作りだすことによって、読み手側が把握しやすくなるといったポイントです。
大見出しとその本文について
見出しである「第二の人生 生きがいを増やそう」と本文の箇所。
近接を意識していない場合
見出しと本文が写真に挟まれており、まるで別項目のように感じます。
近接を意識した場合
写真を挟まずに見出しと本文をそのまま近づけても良いのですが、写真内にテキストを挿入することによって、写真を大きくみせつつ”近接”させることに成功しています。
小見出しとその本文について
ページ下部の「私達のねがい」箇所について。
近接を意識していない場合
タイトル・サブタイトル・本文同士が近すぎます。
それだけでなく、「生きがいを作りたい」のサブタイトルが上のテキストと下のテキストとで同じ距離にあるので、一瞬サブタイトルに対する本文との関連性が分からなくなります。
近接を意識した場合
それが、近接を意識することによって明確に項目を左右に分けると、一瞬で「あ、２つの項目があるんだな」と認識することができるので、読み手側にとって内容を理解しやすくなります。
近接することは読み手側にレイアウトの関連性を意識させる
このように、関連するモノ同士はひとまとめにし、そうで無いものは適切な空間を作ることによって自然と人間はグループ分けするよう解釈します。
よく、項目ごとに罫線枠で囲ったりする場合もありますが、適切に使わないとかえって煩雑化してしまい、読む気が失せるほど窮屈で暑苦しくなります。
物理的にどうしても空白を作りづらい場合は、文章量や画像面積をすこし減らすか、枠の代わりに薄い背景色でエリアを作ると良いでしょう。
レイアウトは常に”整列”させることに意識する
要素をそれぞれ近接させ、これで項目ごとの関係性はわかるのですが、同時に気をつけなければいけない点があります。
それが”整列”させるということです。
整列を意識していない 
整列を意識している
左が整列を意識していないパターン、右が整列を意識したパターンです。
見やすさは明らかに右の整列を意識したレイアウトが見やすく、すっきり快適に読むことができますね。
「整列」は、目に見えないラインに沿ってオブジェクトを揃えることにより、ライン及びレイアウトに力強さを表しページの一体化を果たすことができます。
大見出しの中央揃えについて
整列を意識していない写真内の見出しとその内容は中央揃えになっている部分に注目して下さい。
整列を意識していない場合
中央揃えは、実はデザインに詳しくない初心者が楽にレイアウトするための甘えとも言えます。
デザインとしての観点では、中央揃えは実はハイレベルです。
うまく使えばフォーマルな雰囲気を醸し出せますが、明確な意図がなければいかにも退屈でお役所的な、ありがちなレイアウトに感じてしまいます。
整列を意識した場合
まず、「タイトル的な要素だから」「困ったらとりあえず」という理由でなんでも中央揃えにせず、左揃えもしくは右揃えに統一してみて下さい。
それだけで堅実・信頼感が表れ、洗練された雰囲気にガラっと変わります。
え？左揃えだとなんだか何も手を加えていない感が出てしまう？いいえ、とりあえず感のある中央揃えの方が安っぽく見えることが多いです。
それでも中央揃えの方が良い気がするのなら、左揃えにしたテキストを中央に置くといったことを試してみて下さい。
小見出しとその本文の整列について
パッと見てわかるように、縦にも横にも揃っていない落ち着きのないレイアウトです。
意図的にバラバラにするならわかりますが、特に意識せずに、もしくは中途半端な意識だと何もわかっていないと思われても仕方がありません。
特に同じフォーマットを並べる時は縦と横のラインを意識して下さい。
また、本文のテキストについては、左は揃っていても右端が揃っていないことがあります。
これはIllustratorなどのパブリッシャーソフトにおいて両端揃えもしくは均等配置という機能で右端をも揃えることができます。
より美しく一貫性を。”反復”させる意識。
近接も整列もしっかり意識できれば、次に一貫性をもたせて見る側にテンポ良くリーディング体験をしてもらいましょう。
要素の特徴を繰り返し”反復”させましょう。
1ページ目。この書式・レイアウトをベースとします 
2ページ目。1ページ目をベースに反復させた例
1ページ目の書式とレイアウトをベースとして、2ページ目でも同様のフォーマットを繰り返し使っています。
見出しやレイアウトなど、特徴的な部分を別の箇所でも繰り返して「反復」を行なうと、たとえ別々のページを見せられたとしても「同じWebサイトのページだ」と自然と認識することができます。
ヘッダーとフッターを反復する
1ページ目も2ページ目も、同じデザイン・配置のヘッダーとフッター(最上部と最下部)を使用しています。
これは別のページに遷移しても、同じサイト内であるという認識を植え付けるために特に重要な箇所です。
ただし、同じサイト内でもジャンルが異なる場合など、レイアウトはそのままにカラーだけを変更するという方法もあります。
こうすることによって、読み手側に「あ、違うジャンルだ」と認識してもらうことができますね。
小見出しと本文を反復する
1ページ目の「私達のねがい」という中見出しや「健康に長生きしたい」という小見出しのフォントとサイズ、位置は、2ページ目でも同じ書式を使っています。
また、アイコンや本文の位置関係もすべて統一しています。
このように形式を反復することによって、ページの内容に継続性があることを読み手側に無意識かつ正確に伝えることができます。
仕上げに”コントラスト”を大胆に与えてみよう
以上の3項目をせっかく意識しても、読み手から目を引く看板的なものがなければ目につかないか、読み流されるでしょう。
そうならないために、遠目に見ても目に留まる「大胆な何か」を１つ以上置く必要があります。
コントラストの意識が弱い 
コントラストの意識が強い
この２つは、おそらくパッとみただけで「力強さ」が感じられるかどうかが変わっているはずです。
特に「私達の願いを強く表したい」ということにフォーカスを当てているのですが、「コントラスト」のある右ページの方が目を引く上に、サイト側からの強い気持ちが伝わってくるでしょう。
大見出しのコントラスト
サイトは全体的に淡く細々とした印象だったのが、あえて大見出し部分にベタ塗りの四角形を背景に置き、大見出しの一部を太くしたことによって、このサイトに訪れた人がより真っ先に目を向けやすい要素となりました。
このように、時には大胆にタイトル要素を目立たせることによって「お、なんだなんだ？」と詳細に目を向ける意識をつけることができます。
中見出し・小見出しのコントラスト
中見出し「私達のねがい」と小見出し「健康に長生きしたい」のフォントをボールド化することによって、繊細さから力強さへ変化したことに気づくでしょう。
また、中見出しについてはその背景に英単語を薄く表示させ、よりスタイリッシュで目を引く印象に変わりました。
こういったコントラストを含めることによってレイアウトの流れにドラマチックな印象を与え、読み手側を内容に集中させる効果があります。
まとめ・４つの原則を意識すれば根拠の無いデザインでは無くなる！
以上、4つのデザインの原則「近接」「整列」「反復」「コントラスト」について、私なりの解釈における例を挙げました。
私自身もこれらを意識できているようでそうでない部分も多いのですが、デザインに対する考え方に軸ができたように感じています。
Robin Williams著「ノンデザイナーズ・デザインブック」では４つの原則についてより詳細な説明があり、わかりやすくNG例・OK例を表示しているので、デザイン関係のお仕事をされる方(特に初心者)にとても有用な書籍です。
Webページはもちろん、名刺やパンフレット等を作成される方にももちろんオススメです。
ぜひ気になった方は検討してみてはいかがでしょうか。
なお、他記事では素材サイトの紹介なども行っています。こちらも是非どうぞ。
おすすめ関連記事: 未経験からWebデザイナーに転職するまで＆してからやったこと
