デザインがダサくなるのには理由がある!基本の4つのポイントを徹底解説 | 【大阪Webスクール】Webデザイナー・副業フリーランスを目指す|Creators Factory

Blog
CFブログ

デザイン基礎

デザインがダサくなるのには理由がある!基本の4つのポイントを徹底解説

谷町くん

独学でデザインの勉強をしているけど、どの参考書も難しいなぁ。
初心者の僕でもわかりやすく基本が学べる方法はないかな?先生。

トリペン先生

いっきにデザイン基礎を学ぶよりも、まずは基本のポイントを覚えて土台を作ってみよう。

これからデザインを独学で学びたいデザインの基礎を知りたい
という方に向けて、大切な部分を中心にまとめています。
この記事では、デザイン学習の基本中の基本である「レイアウト」について紹介しています。

この記事で学べること

  • 「4つのレイアウト」からデザインの考え方・作り方がわかる!
  • もっとも多用する「整列」の基本がわかる!
  • 「近接」「対比」「反復」で、レイアウトの広げ方がわかる!

レイアウトを学ぼう!デザインは「要素」が集まってできている

レイアウトを学ぶことは、これからデザインを勉強していくうえで、
土台となる考え方と、目を養っていく大切な練習です。

デザインでは、画面やキャンパスに、イラストや画像、
テキストなどのさまざまな「要素・モチーフ」を配置していきます。

どの要素を目立たせるようにするのか、
どうやってバランスよく見えるようにするのか考えていきます。
そのときに最初に学ぶのは、レイアウトを考えるために要素を「揃える」ことです。

揃えることで、画面に基準をつくる

レイアウトを考える際には、指定された画面のなかにどのように要素を配置するのか、
画面の中に自分で「基準」をつくることが大切です。

この基準は、真っ白な画面の中では自分で決める必要があります。
基準とは要素を並べて配置していくことで、

そんなときに、これから整列などの揃えるレイアウトを学ぶ上で便利なのが「グリッド」です。

○グリッド
画面を格子状に区切ったもの。
規則的なレイアウトや、始めのうちに自分で画面の基準を作りにくいときに使用します。
定規とセットで使うことが多いです。

「整列」要素をそろえる基本のレイアウト

レイアウトの基本として最初に、要素を揃える「整列」の考え方を見ていきます。
要素の揃え方は主に「3つのパターン」でできているので、とても簡単です。

レイアウトの基本

  • 中央そろえ
  • 右揃え
  • 左揃え

要素を揃えるポイントは、「見えないライン」に気がつくことがポイントです。
参考に3つのモチーフを並べてみましょう。

右端にうっすらとラインがあるような気がしませんか?
王道の3つのパターンに慣れると、この見えないラインがどんな揃え方でも見えるようになってきます。
これがずれていると、「なんだか違和感」にという感覚が生まれやすいのです。

「整列」のポイントは、要素の「特徴的な部分」を見つけること

先ほどの画像では、すべてのモチーフを同じように揃えましたが、実際のデザインを考えるときはそういきません。
たくさんの要素を画面に配置する必要があるときは、自分で決めた基準から関係性が広げられる部分を探す必要があります。

■補助線を使って揃えるポイントを見つけよう。

ここで補助線を使って、王道の3パターン以外にどんな揃え方ができるのか考えてみましょう。
まずは、基本の3ヶ所に補助線を引いてみます。

レイアウトの基本

その補助線の延長線上に、他の要素をおいてみましょう。
さらにそれを元に補助線を引いていくことで、
基準にしたモチーフとの関係性を保ちながら、新しい基準で要素を整列・並べることができます。

レイアウトの基本

レイアウトの基本
最初のうちはわかりにくいかもしれませんが、
このように特徴的な部分同士を、関係性を保ちながら配置することで自然とまとまったデザインのレイアウトを考えられるようになります。

「近接」要素をまとめて、関係性やグループ化するレイアウト

「近接」は、関係性や意味が近いものは近づけて揃えようという方法です。
グループ化する、というイメージがわかりやすいでしょう。

近いところにあるもの同士は、関係性が生まれて意味が繋がりやすくなります。
深い関係性を表現したい、意味が離れて困る場合には近づけて要素をレイアウトしましょう。

○近接を感じられるレイアウト
商品画像と紹介文、関連性のある画像をグループ化して並べることで、
情報が整理されたわかりやすい画面を構成している。

近接のレイアウト
出典:https://magazineworld.jp/hanako/hanako-1142/

「対比」要素や画面を比べる・比較してわかりやすくするレイアウト

対比のレイアウト

「対比」は、何かと何かを比べる、分割するして比較させることで、印象的でわかりやすいレイアウトを作るときによく使われるレイアウトです。
「コントラスト」とも呼ばれるので、色の対比をイメージするとわかりやすいでしょう。

また大きく画面を分割することで、画面全体で印象的に見せることもできます。
文字の大きさや色で差をつけて、「強弱」をつけるという考えかたもあることを覚えておきましょう。

対比を効果的に使うには、配色の力を使うとよりわかりやすくなる

対比は「何かを比べる」ときに、とても良く使われるレイアウト方法です。
画面・キャンパス自体を大きく「分割」して比べることで、とても効果的な演出ができています。

○2つのものを比べるレイアウトに最適
補色の赤と緑の組み合わせで画面を分割、商品を対比することで全体をより印象的に見せている。

対比のレイアウト
出典:https://www.maruchan.co.jp/aka-midori/

「反復」要素やパターンを繰り返して、法則性や馴染ませるレイアウト

「反復」は、同じような調子でレイアウトを繰り返すことで、法則性やリズムを生み出す揃え方です。

要素と要素の感覚を同じように並べるのも、反復・繰り返していると考えましょう!
同じような調子で並べることで、統一感や整理された印象を与えることができます。

○反復を活かした統一感のあるレイアウト
ブログやメディアサイト、パンフレットなどはレイアウトや見せ方を統一して、情報がすっきり伝わるようにレイアウトされている。

出典:https://www.tera-buddha.net

反復と合わせて「強調」を意識してみよう

同じように要素を配置すれば、均一的で整理されたレイアウトが出来上がります。
それとは逆に、合わせて「強調」することも同時に考えてみましょう。

規則的に繰り返すということは、途中で大きさや色を変えてみるとそこに注目が集まりやすくなります。
注目させたい部分や、意識的に見てほしい部分は、全体の調子から一部分だけを崩すことで「強調」して表現することができます。

意識的に目立たせたい要素は、このように反復と強調のバランス上手に使って、メリハリのあるレイアウトを考えてみましょう!

まとめ:レイアウトを学べば今後のデザインのトレーニングがより学びになる。

では最後に、デザインの4大原則と言われる4つのレイアウトをおさらいしましょう。
この4つのレイアウトのパターンを意識して、日頃のデザイン制作やトレースを繰り返すことで、
世の中のデザインがどんな事を考えて作られているのか、分析しやすくなります。

  • 整列:揃えることで画面の中に基準や法則を作る
  • 近接:意味や関係性がある要素は近くにまとめる
  • 対比:何かと何かを比べる、印象に残りやすいレイアウト
  • 反復:繰り返すことで規則性を作るレイアウト

【あと4名】11月スタート14期生募集中

クリエイターズ・ファクトリーでは毎週、個別の説明会・相談会を開催しております。
受講生の9割が全くの未経験からWeb業界へ進んでいますので、不安を感じている方でも安心して受講いただけます。
詳しく聞きたい方は、説明会にご参加下さい。

まずは説明・体験会にご参加ください

説明会では、ヒアリングをしてスクールの説明をします。
お悩みの事や質問などは、お気軽にお聞きください。

活動レポート・ブログ

日々の活動やスクールの情報をまとめています