【保存版】デザインの基本まとめ｜「4原則＋2」で、センスを磨く

こんな声をよく耳にします。

センスは、才能ではなく、知識と経験で磨いていくものです。「なぜ見やすいのか」「なぜ読みにくいのか」には、ちゃんと理由があります。

この記事では、デザインを始めるときに知っておきたい基本をまとめました。

0. デザインは「伝える」ための手段

本題に入る前に、ひとつだけ大切なことをお伝えします。

前提として「デザインは、伝えるための手段」です。どれだけおしゃれに装飾しても、伝えたいことが伝わらなければ意味がありません。一番大切なことは、情報が正確に伝わるということです。

では、どうすれば伝わるのか。まずは、情報の受け手のことを考え、5W1Hを意識しましょう。

5W1Hを使ったデザインの準備方法は、別の記事で詳しく紹介します。

1. デザインの基本6原則（4原則＋2）

デザインの教本では、よく「近接・整列・強弱（対比）・反復」の4原則が紹介されています。この4つを守るだけでもデザインは見違えます。

ただ、実際に作ってみると、ごちゃごちゃしてまとまらないことがあります。その原因は、情報の詰め込みすぎと全体のバラバラ感です。

このブログでは、デザインの4原則に、簡単と統一の2つを加えた、6原則をご紹介します。

1-1. 近接：関係あるものを近づける

近接とは、関係のある情報どうしを近づけ、関係のない情報どうしを離すことです。人は、近くにあるものを「ひとまとまり」だと感じます。

デザインのポイント

 近接なしは、日時・場所のラベルと内容が離れて段もずれている、出店の説明が隣や下のお店のほうに寄っている、問い合わせ先の名前とTELの間に雨天中止が割り込んでいる。
 近接ありは、関係ある情報を近づけ、グループの間をあけている。

1-2. 整列：見えない線にそろえる

整列とは、要素の端や中心を、見えない線にそろえることです。文字や写真をなんとなく置くと、少しずつズレが生まれます。ひとつひとつのズレは小さくても、積み重なると全体が雑に見えます。

 整列なしは、品名・英名・値段が行ごとにずれて値段を目で追いにくい、写真の端が列とそろわない、右列の見出しが左列より下がっている、月のマーク・店名・サブタイトルの中心がばらばら、フッターが左寄せと右寄せで混在。
 整列ありは、品名の左端・値段の右端・写真の端が列の線にそろい、TEA & OTHERSとSWEETSの見出しも同じ高さ。

そろえ方と印象

• 左そろえ：基本のカタチ。迷ったらこれ！長い文章に向いています。
• 中央そろえ：格式や落ち着きが出ます。短いタイトルや招待状向き。長文には不向き。
• 右そろえ：個性が出るが、読みにくくなりやすい。日付や補足など短い要素に使用。

デザインのポイント

編集ソフトの「整列」機能やガイド線を使いましょう。要素同士だけでなく、紙や画面の端からの余白も見てください。作業中は、画面にオレンジの点線（見えない線）が引かれているところをイメージして、すべての要素をその線に沿わせていきましょう。6原則の中で「整列の徹底」が最も大事だと思っています。

1-3. 強弱：差をはっきりつける

強弱とは、大事なものを目立たせ、そうでないものを控えめにして、情報に優先順位（差）をつけることです。デザイン本によっては「対比」とも呼ばれています。

 強弱なしは、店名・見出し・「最大50%OFF」・期間・説明がすべて同じくらいの大きさ・太さ・色で、主役の円もうすい色。どれが一番伝えたいことか分からない。
 強弱ありは「最大50%OFF」→「AUTUMN SALE」→期間→店名・説明の順に、大きさ・太さ・色・余白で優先順位がはっきりついている。

デザインのポイント

差は、はっきりとつけることが大切です。中途半端だと、単なるズレのように見えてしまいます。受け手に最も伝えたいことを選び、差をつけましょう。

主な差の付け方

中でも大きさの比率をジャンプ率と言います。ジャンプ率が高いと元気で目立つ印象に、低いと落ち着いた上品な印象になります。

1-4. 反復：同じルールを繰り返す

反復とは、同じ役割の要素に、同じデザインを繰り返し使うことです。

 反復なしは、同じ役割のパーツがカードごとに違う見た目になっている（タグの色と形、写真の角の丸み、カードの背景と枠線、タイトルの書体と色、料金の色と書体、区切り線の有無、「詳しく見る」がリンク・ボタン・下線付きリンクとばらばら）。「POINT」の見出しだけ書体と下線の色が違い、番号も「01」「2」「POINT.3」と書き方がそろっていない。
 反復ありは、セクション見出し（英字の小見出し＋日本語見出し＋短い下線）、3つのコースカード（写真・タグ・タイトル・説明・料金・リンク）、こだわりの番号（01〜03）がそれぞれ同じ形で繰り返されている。

デザインのポイント

反復があると、読み手は、この形は見出しだな！と認識でき、あとは迷わずに読めます。ページ全体にリズムが生まれ、まとまって見えます。

1-5. 簡単：引き算して無駄を省く

ここからは、デザインの4原則に加えた原則です。簡単とは、必要のない情報を、できる限り削ることです。シンプルにすると、本当に伝えたいことがまっすぐ届きます。

 簡単なしは、星形やバッジ、桜の飾りが四方から主張し、写真の上にも見出しが重なっている。持ち物や注意書きまで詰め込まれ、肝心の日時や集合場所に目が届かない。
 簡単ありは、情報を日時・集合・コース・参加費に絞り、写真と余白で春の気持ちよさを伝えている。

デザインのポイント

デザインがごちゃごちゃする一番の理由は、足し算のしすぎです。空いているところを埋めたくなって、飾りや情報を足していくと、一番大事なことが埋もれてしまいます。余白は、何もない場所ではありません。大事なものを目立たせ、読み手に息つぎをさせる、立派なデザインの要素です。

情報を削るときの問いかけ

箇条書きのススメ

5W1Hを伝える際は、箇条書きがおすすめです。項目名と内容が1行ずつに分かれ、知りたいことに一瞬でたどり着くことができます。

1-6. 統一：全体の雰囲気をそろえる

統一とは、色・書体・形・写真の雰囲気など、全体のトーンをそろえることです。

 統一なしは、投稿ごとに書体・色・写真の雰囲気がばらばらで、同じお店のものに見えない。
 統一ありは、色・書体・レイアウトがそろい、ひと目で「あのお店だ」と分かる。

デザインのポイント

統一は、作品全体の空気感をそろえる「全体のルール」です。例えば、見出しの形はそろっていても、手書き風のイラストと無機質な写真、ポップな書体と高級感のある明朝体が混ざっていたら、全体としてはちぐはぐに見えます。

統一の目安

2章以降で紹介する「色・文字・レイアウト」などにも共通してくる要素です。

6原則まとめ（金星人と共犯の関東人）

近接（きんせつ）、整列（せいれつ）、強弱（きょうじゃく）、反復（はんぷく）、簡単（かんたん）、統一（とういつ）の読みの最初の2文字を取って、

金星人と共犯の関東人

と覚えましょう！

---

2. 色の基本

色は、見た人の印象を一番最初に決める要素です。配色で迷わないための、最低限の知識をまとめます。

2-1. 画面の色と印刷の色は違う（RGBとCMYK）

パソコンの画面ではあざやかだった色が、印刷するとくすんで見えることがあります。これは、画面の色と印刷の色とで、色の作り方が違うからです。まずは、2つの色の作り方を知っておきましょう。

RGB（光の三原色）とCMYK（色の三原色＋黒）の比較図

2-2. 色の三属性

色は、次の3つの要素で説明できます。

色相環（色相を順番に並べて輪にしたもの）

明度と彩度の図とトーンの例

明度と彩度を組み合わせた色の調子を、トーンと言います。パステル調・くすみカラー・ビビッドなどは、トーンの呼び名です。

2-3. 配色の黄金比「70：25：5」

色の使い方で迷ったら、この比率を目安にしてみてください。

アクセントカラーは、少ないからこそ目立ちます。使いすぎると、全部が目立って何も目立たなくなります。

2-4. 覚えておきたい配色パターン

2-5. だれにでも見やすい色づかい

色の見え方は、人によって違います。日本では、男性の約20人に1人、女性の約500人に1人が、色の見え方に特性があると言われています。また、年齢を重ねると、薄い色の文字は読みにくくなっていきます。

だれにでも伝わるデザインにするために、次の3つを心がけましょう。

コントラストが低いほうは、うすいベージュのタイトル、明るいグレーの本文、パステルの帯に白い文字と、どれも背景に溶けこんでいる。おしゃれな雰囲気はあっても、日時や場所を読むのにひと苦労する。
コントラストが高いほうは、レイアウトも書体も同じまま、文字と帯の色を濃くしただけ。それだけで、遠くからでも、スマホの小さな画面でも、すっと読める。

Webの世界では、文字と背景のコントラスト比を「4.5：1以上（大きな文字は3：1以上）」にすることが目安とされています（WCAGという、Webの見やすさの国際的なガイドライン）。無料の「コントラストチェッカー」に色を入れると、数値で確認できます。

---

3. 文字の基本

デザインで扱う情報の多くは文字です。文字の扱いが上手になると、デザイン全体が一気に垢抜けます。

ただし、無料のフォントでも「商用利用はNG」「ロゴへの使用はNG」など、条件がある場合があります。使う前に、必ず利用規約を確認しましょう。

3-1. 書体の種類

書体を増やすほど、まとまりはなくなります。見出し用に1種類、本文用に1種類が目安です。強弱をつけたいときは、書体を変えるより「太さ」を変えるほうが、上品にまとまります。

3-2. 読みやすさを決める3つの要素

3-4. 文字組みの基本

行間の設定

 せまいほうは、行と行がくっつき、どこまで読んだか目で追いにくい。
◯ちょうどいいほうは、行間を文字の約1.8倍にしただけで、同じ文章がすっと読める。

字間の設定

 調整していないほうは、「コーヒー」や日付などにすき間ができ、間のびしている。
◯調整したほうは、文字の形に合わせて字間を詰め、ひとかたまりの言葉として目に入る。

---

4. レイアウトの基本

レイアウトとは、文字・写真・図形などを、決められたスペースにどう配置するかを決めることです。6原則を一番使う場面でもあります。

4-1. グリッドを使う

グリッドとは、紙面や画面を見えないマス目で区切ることです。マス目に沿って配置すると、自然と整列と統一ができあがります。

4-2. 余白で印象をコントロールする

余白をたっぷりとると、上品で高級感のある印象に。余白を少なくすると、にぎやかでお得な印象になります。紙の端から文字までの余白（マージン）が狭すぎると、窮屈で安っぽく見えるので注意しましょう。

余白なしは、同じ写真・同じ文字を大きく詰めこみ、値段がどんと目に入る。ランチの安さと元気さが伝わる。
余白多いは、写真も文字も小さく、まわりの空間が「ゆっくり味わう一皿」の空気をつくっている。

4-3. 視線の流れを意識する

4-4. 美しく見える比率