INDEX
目次
学習目標
- デザインのきほん４原則『近接』『整列』『対比』『反復』を知識として定着させ、自らのデザインに活かせるくらい昇華させる。
- ４原則それぞれ図解例を確認しながら、理解する。
- 世の中のデザインから、デザインのきほん４原則を見つける。
- ４原則を意識しながら名刺デザインを制作し、その過程からデザインの基本原則を身につける。
『デザインのきほん４原則』とは？
デザインのきほん４原則は、1994年にRobin Williams (ロビン・ウィリアムズ) の著書『The Non-Designer’s Design Book (ノンデザイナーズ・デザインブック) の中で紹介され、その本がベストセラーとなり、一般的に広がりました。この本は、20年以上もずっと売れ続けているデザインの定番基本書です。
『デザインのきほん４原則』は、CRAP原則とも言われます。CRAPとは４原則の頭文字をとったもので、以下の４つになります。
『デザインのきほん４原則』は、CRAP原則とも言われます。CRAPとは４原則の頭文字をとったもので、以下の４つになります。
『デザインのきほん４原則』を学ぶ必要性
『デザインのきほん４原則』と聞くと、とても難しい原則なのかと感じてしまい、「私はデザインセンスがないからなぁ…」と、心配する方もいらっしゃるかもしれません。
しかし、この４原則は、もともと『デザイナーじゃない人向けのデザイン入門書』の中で紹介されたものです。
人間が誰しも生まれ持って備わっている感覚を４つに分けて原則として定義されていますので、これらを『勉強して覚える』というより、『どのように感じ取れるか？』ということになります。
ですので、それほど身構えなくても、スッと理解できるような内容になりますので、過度に心配しなくて大丈夫です！
逆に、「じゃあなぜ、そんなにとてもシンプルで、誰しも同じように共感できる感覚なら、なぜわざわざ改めて学ばなければならないのか？」と疑問に思う方もいらっしゃるかもしれません。
この『当たり前の感覚』が『当たり前すぎる』からこそ、意識してデザインをしなければ怠ってしまうことがあります。
なぜなら、デザイン初学者は、どうしてもデザイン制作中に、見た目の装飾や色やフォントに意識を集中して、『当たり前の感覚』を見落としてしまいがちになるからです。
「背景は何色にしようか？」「どのフォントにしようか？」「この余白はどうやって埋めようか？」などに気を取られすぎてしまい、本来もっとも気にしなければならない、『このデザインを見た人に、どの情報を、どのような順番で見てもらい、どのように感じ、どのような行動をしてほしいのか？』というところが抜け落ちてしまうことがあります。
また、既に自分の作っているデザインの情報が完全に頭に入っているため、制作者の主観で判断してしまいがちになり、初見でみた人には伝わりづらくなっていることが往々にしてあります。
『初めてそのデザインを見た人が、瞬時に情報を読み解くことができるか？』という客観的な目線が必要です。
そのための基礎の基礎として『デザインのきほん４原則』を改めて意識してデザインする必要があります。
コーディングやプログラミングなどは、書き方は複数あるにしろ、結果の『表示する』や『動かす』など、ゴールは明確です。
しかし、デザインは正解が複数存在しますし、初学者は特にこれがゴールにたどり着いているのか、ゴールに向かっているのか不安になったり、迷子になったりすると思います。
デザインのきほん４原則は、デザインのゴールまでの『コンパス』みたいなものですので、ゴールまでの正しい方向に向かっているか、時々確認しながら制作を進めていくとゴールにたどり着きやすくなります。
これから、一緒にデザインのコンパスを学んでいきましょう！
しかし、この４原則は、もともと『デザイナーじゃない人向けのデザイン入門書』の中で紹介されたものです。
人間が誰しも生まれ持って備わっている感覚を４つに分けて原則として定義されていますので、これらを『勉強して覚える』というより、『どのように感じ取れるか？』ということになります。
ですので、それほど身構えなくても、スッと理解できるような内容になりますので、過度に心配しなくて大丈夫です！
逆に、「じゃあなぜ、そんなにとてもシンプルで、誰しも同じように共感できる感覚なら、なぜわざわざ改めて学ばなければならないのか？」と疑問に思う方もいらっしゃるかもしれません。
この『当たり前の感覚』が『当たり前すぎる』からこそ、意識してデザインをしなければ怠ってしまうことがあります。
なぜなら、デザイン初学者は、どうしてもデザイン制作中に、見た目の装飾や色やフォントに意識を集中して、『当たり前の感覚』を見落としてしまいがちになるからです。
「背景は何色にしようか？」「どのフォントにしようか？」「この余白はどうやって埋めようか？」などに気を取られすぎてしまい、本来もっとも気にしなければならない、『このデザインを見た人に、どの情報を、どのような順番で見てもらい、どのように感じ、どのような行動をしてほしいのか？』というところが抜け落ちてしまうことがあります。
また、既に自分の作っているデザインの情報が完全に頭に入っているため、制作者の主観で判断してしまいがちになり、初見でみた人には伝わりづらくなっていることが往々にしてあります。
『初めてそのデザインを見た人が、瞬時に情報を読み解くことができるか？』という客観的な目線が必要です。
そのための基礎の基礎として『デザインのきほん４原則』を改めて意識してデザインする必要があります。
コーディングやプログラミングなどは、書き方は複数あるにしろ、結果の『表示する』や『動かす』など、ゴールは明確です。
しかし、デザインは正解が複数存在しますし、初学者は特にこれがゴールにたどり着いているのか、ゴールに向かっているのか不安になったり、迷子になったりすると思います。
デザインのきほん４原則は、デザインのゴールまでの『コンパス』みたいなものですので、ゴールまでの正しい方向に向かっているか、時々確認しながら制作を進めていくとゴールにたどり着きやすくなります。
これから、一緒にデザインのコンパスを学んでいきましょう！
あなたのデザインが見違える。 たった４つの基本原則
近接
1つ目は『近接』についてです。まずはじめに、下のイラストを見てください。
女性の間、ちょうど中央あたりに子どもがいます。
この子どもは、前方、または後方のどちらの女性の子どもなのか、明確に判断できますか？
どちらの女性ともほぼ同距離にいるので、このイラストだけでははっきりとはわかりませんよね。
では次に、下の２つのイラストを見てください。
この子どもは、前方、または後方のどちらの女性の子どもなのか、明確に判断できますか？
どちらの女性ともほぼ同距離にいるので、このイラストだけでははっきりとはわかりませんよね。
では次に、下の２つのイラストを見てください。
これらのイラストのように、子供が前方、または後方の女性にはっきりと寄っていれば、明確にまとまりが確認でき、どちらの女性の子供なのか瞬時に判断できます。
このように、文字情報がなくても、「近い」「遠い」の距離感だけで、それぞれの関係性を見ている人に伝えることが可能になります。
これと同じことが、デザインのきほん４原則の１つ、『近接』になります。
このように、文字情報がなくても、「近い」「遠い」の距離感だけで、それぞれの関係性を見ている人に伝えることが可能になります。
これと同じことが、デザインのきほん４原則の１つ、『近接』になります。
✖️【悪い例】：近接が出来ていない 。
👍【良い例】：近接が出来ている。
上の画像では、ピザの商品名が、上下のイラストの中央あたりに配置されています。
このデザインを見た人は、商品名が上のイラストのことなのか、下のイラストのことなのか、商品名を読み、イラストと見比べて判断しなければなりません。ピザに詳しくない人にとっては、瞬時には判断できないかと思います。
下の画像のように、きちんと商品名とイラストが近くにまとまって配置されていれば、一目でどの商品に関しての商品名なのか認識できるため、迷ったり、読んで見比べたりする手間を減らせます。
それぞれの要素が離れていると、その要素の関係性は伝わってきませんが、逆に近づけると、それらの要素が『１つのまとまり』に捉えられて、何かしらの『情報のまとまり（グループ）』なのだろうなと私たちは感じとれます。
このデザインを見た人は、商品名が上のイラストのことなのか、下のイラストのことなのか、商品名を読み、イラストと見比べて判断しなければなりません。ピザに詳しくない人にとっては、瞬時には判断できないかと思います。
下の画像のように、きちんと商品名とイラストが近くにまとまって配置されていれば、一目でどの商品に関しての商品名なのか認識できるため、迷ったり、読んで見比べたりする手間を減らせます。
それぞれの要素が離れていると、その要素の関係性は伝わってきませんが、逆に近づけると、それらの要素が『１つのまとまり』に捉えられて、何かしらの『情報のまとまり（グループ）』なのだろうなと私たちは感じとれます。
近接とは…
近接
- 関連する要素同士を近づけて、情報のまとまりを明確にすること。（グループ化する。）
各要素の情報の意味を考え、関連性が近い要素同士は近づけ、グループとして捉えられるようにレイアウトすることが『近接』になります。
『近い情報』は『近く』に。『遠い情報』は『遠く』に。（余白の重要性）
近接は、『要素同士が近いと、それらが関連があるように感じ取れる。』という事です。逆にいうと『関連がないものでも、近くにある事によって、関連しているものと間違って捉えられてしまう』ということにもなります。
そのため、関連性が遠く、同じグループにみなしたくないものとは、適度な距離を保つ事が重要です。これがデザインで『余白が大事』と言われることの一つの理由です。
デザインを始めたばかりですと、余白があると、そこをなんとか埋めないといけないと思い込んでしまって、要素をギチギチに詰めがちになります。けれどもそれはデザインにとっては逆効果で、余白が十分にないと、まとまりがわかりづらく、近接が上手く機能しなくなります。
例えば、何かを学ぼうと書店で参考書を購入しようと複数の参考書を立ち読みしたとします。その時、余白がなく、単調で、ページいっぱいに文字がぎっちり埋まっている参考書は読む気にならずに、「他のもっとわかりやすい参考書ないかな？」と思う人が多いと思います。
デザインもそれと同様で、余白が十分になく要素が窮屈に埋まっていると、情報過多になり、何をどこから見ていいかわからなくなり、そのデザインを見た人が、「もう見る気にならないな。」と離れてしまったら残念ですよね。せっかくデザインを見てもらうまできていたのに、機会損失になってしまいます。
そのため、関連性が遠く、同じグループにみなしたくないものとは、適度な距離を保つ事が重要です。これがデザインで『余白が大事』と言われることの一つの理由です。
デザインを始めたばかりですと、余白があると、そこをなんとか埋めないといけないと思い込んでしまって、要素をギチギチに詰めがちになります。けれどもそれはデザインにとっては逆効果で、余白が十分にないと、まとまりがわかりづらく、近接が上手く機能しなくなります。
例えば、何かを学ぼうと書店で参考書を購入しようと複数の参考書を立ち読みしたとします。その時、余白がなく、単調で、ページいっぱいに文字がぎっちり埋まっている参考書は読む気にならずに、「他のもっとわかりやすい参考書ないかな？」と思う人が多いと思います。
デザインもそれと同様で、余白が十分になく要素が窮屈に埋まっていると、情報過多になり、何をどこから見ていいかわからなくなり、そのデザインを見た人が、「もう見る気にならないな。」と離れてしまったら残念ですよね。せっかくデザインを見てもらうまできていたのに、機会損失になってしまいます。
離したいけど、余白がない…！ そんなときにできるグルーピングの方法
デザインできる範囲が狭く、余白に余裕がなく、遠くに置けない場合は、セパレータとして「要素の間にボーダーを引く」「背景色を変える」などでグループを分けることができます。
そのほか、長いテキストだったら短くできないか文章を言い換えたり、アイコンなどに置き換えたりなどのやり方もあります。
また、逆に、遠い要素を吹き出しなどで紐づけてグルーピングすることもできます。
以下のデザインテクニックを参考にしてください。
そのほか、長いテキストだったら短くできないか文章を言い換えたり、アイコンなどに置き換えたりなどのやり方もあります。
また、逆に、遠い要素を吹き出しなどで紐づけてグルーピングすることもできます。
以下のデザインテクニックを参考にしてください。
ボーダーはあくまで脇役なので、コンテンツより目立たないように！
飾り罫だけでもOK。テイストを揃える。
枠のあるデザインを囲う場合、また枠線で囲うと窮屈に見えるので、背景色で囲う。
装飾ではなく、背景色を揃えるだけでもOK。
整列
2つ目は、『整列』です。
整列は近接より一般的な言葉ですので、想像がつきやすいと思います。みなさんが想像している通り、『要素と要素をきちんと並べる』こと、そのままの意味になります。
整列は近接より一般的な言葉ですので、想像がつきやすいと思います。みなさんが想像している通り、『要素と要素をきちんと並べる』こと、そのままの意味になります。
✖️【悪い例】： 整列が出来ていない。
👍【良い例】：整列が出来ている。
頭が揃っていないので、読みづらい。
目に見えない『グリッド』に沿うように並べる。日付や金額などは右揃えが見やすい。
整列とは…
整列
- 要素を規則正しく揃えて並べることにより、視認性を高め、情報を理解しやすくさせること。
整列を用いることでデザインの階層や構造を見やすく、わかりやすくすることができます。
きちんと整列することにより、視線の基準となる目に見えない線が生まれます。この目に見えない線（グリッド）が、デザインを見ている人に情報の階層や属性グループを伝えることができます。
きちんと整列することにより、視線の基準となる目に見えない線が生まれます。この目に見えない線（グリッド）が、デザインを見ている人に情報の階層や属性グループを伝えることができます。
最初から崩すのではなく、『整列してから』崩すから、目立つ。
近接と同じく、この『整列』がおざなりになってしまう方がたくさんいます。
デザイン制作の参考にするために、デザインがまとめられているデザインクリップサイトなどで他のデザイナーが制作した広告やサイトなどを参考にすることがあると思います。
そのなかで、ランダムにずらして配置されているように見えるデザインが『かっこいい』、『かわいい』から真似ようと、最初から要素を斜めにしたり、ランダムに配置しすぎてしまうと、結果、要素に規則性がなくなり、まとまりのない・散らかった印象のデザインになってしまいます。
紙媒体でもWEB媒体でも、制作の始め方はシンプルで、まず『近接』で情報をグループごとにまとめて、その後、きちんと『整列』させることからデザインが始まります。
世の中に出ているデザインは、しっかりと『デザインのきほん４原則』に則っているものがほとんどです。
ズレていながら、『かっこいい』、『かわいい』と真似したくなるデザインは、しっかりと他の要素が『整列』されているからこそ、他とずらしている箇所が『相対的に目立つ』ことによって、アクセントとなり、目に留まります。
すべての要素がランダムにズレて配置していては、すべての要素が埋没してしまって目立ちませんし、まとまりも出ません。
正しいデザイン制作は、しっかりと『整列』してから崩されています。
最初から崩すのではありません。
デザイン制作の参考にするために、デザインがまとめられているデザインクリップサイトなどで他のデザイナーが制作した広告やサイトなどを参考にすることがあると思います。
そのなかで、ランダムにずらして配置されているように見えるデザインが『かっこいい』、『かわいい』から真似ようと、最初から要素を斜めにしたり、ランダムに配置しすぎてしまうと、結果、要素に規則性がなくなり、まとまりのない・散らかった印象のデザインになってしまいます。
紙媒体でもWEB媒体でも、制作の始め方はシンプルで、まず『近接』で情報をグループごとにまとめて、その後、きちんと『整列』させることからデザインが始まります。
世の中に出ているデザインは、しっかりと『デザインのきほん４原則』に則っているものがほとんどです。
ズレていながら、『かっこいい』、『かわいい』と真似したくなるデザインは、しっかりと他の要素が『整列』されているからこそ、他とずらしている箇所が『相対的に目立つ』ことによって、アクセントとなり、目に留まります。
すべての要素がランダムにズレて配置していては、すべての要素が埋没してしまって目立ちませんし、まとまりも出ません。
正しいデザイン制作は、しっかりと『整列』してから崩されています。
最初から崩すのではありません。
まっすぐに揃っている要素があることで、デザインを見ている人の水平感覚を保ち、水平な要素により、斜めにした要素が際立ち、目立たせ、視線を誘導できます。（対比による強調。）
整列の種類
『整列』は、垂直方向と水平方向の整列があり、垂直方向の整列には、「左揃え」「中央揃え」「右揃え」に分けられ、水平方向の整列では「上揃え」「中央揃え」「下揃え」に分けられます。
⬅️【左揃え】
長文に向いている。
↔️【左右中央揃え】
インパクトが出る。
➡️ 【右揃え】
名刺などに向いている。
文章の水平方向の整列と、それぞれの特徴
- 左揃え
- 最もよく使われる整列です。
ほとんどの言語で、横書きは左から書かれますので、文章の先頭が揃っていると目線の移動が一定になるため、スムーズに読むことができます。
特に長い文章などには改行しても読みやすいため、左揃えが向いています。
- 最もよく使われる整列です。
- 中央揃え
- 見た目にインパクトが出せる整列ですので、タイトルなどに向いています。
短いメッセージを強く訴えかける場合などに有効ですので、プレゼンでのスライド資料などでしばしば使われます。
逆に、長い文章に使うと文頭が揃っていないため、読む人にストレスを与える可能性がありますので、読ませる文章には不向きです。
- 見た目にインパクトが出せる整列ですので、タイトルなどに向いています。
- 右揃え
- 中央揃えと同じく文頭が揃わないため、読みづらくなってしまいます。従って、長い文章などには向いていません。
逆に、言い切りの短い文章などに使うと完結感を表現できます。その他、名刺の名前や電話番号やメールアドレスなどを右揃えにすると、スッキリした印象を与えます。
また、数字（日付や金額など）が絡む部分は、単位の部分を揃えるように右揃えにするととても見やすくなります。
- 中央揃えと同じく文頭が揃わないため、読みづらくなってしまいます。従って、長い文章などには向いていません。
垂直方向の整列での注意点など
⬆️【上揃え】
WEBなどの上から順番に見ていくデザインでは、上部側が揃っていると整って見える。
↕️【上下中央揃え】
写真に対して、上下中央揃えに配置する。
写真の縦幅よりテキストが多くならないように注意。
写真の縦幅よりテキストが多くならないように注意。
↕️ Illustratorでの【上下中央揃え】での注意点
Illustratorで、『垂直方向：中央揃え』をすると、やや上側にズレてしまいます。
原因は、ベースラインから下にはみ出る領域（ディセンダー：小文字の”g”や”y”などを表示する部分）を含めて揃えるからです。
整列機能を使ったあとに、最終的には、自分の目を信じて、微調整しましょう。
原因は、ベースラインから下にはみ出る領域（ディセンダー：小文字の”g”や”y”などを表示する部分）を含めて揃えるからです。
整列機能を使ったあとに、最終的には、自分の目を信じて、微調整しましょう。
⬇️【上下中央揃え】
テキストは下揃えが一番安定感がでる。
対比
デザインのきほん４原則の、３つ目は、『対比』です。『コントラスト』や『強弱』とも言われることがあります。
『対比』という言葉から想像できるように、『１番目立たせるもの、次に目立たせるもの、その次に…』という風に、『相対的に要素同士に違いをつける』ことになります。
以下のデザイン例をご覧ください。
『対比』という言葉から想像できるように、『１番目立たせるもの、次に目立たせるもの、その次に…』という風に、『相対的に要素同士に違いをつける』ことになります。
以下のデザイン例をご覧ください。
✖️【悪い例】： 対比が出来ていない。
👍【良い例】：対比が出来ている。
上側のデザインより、下側のデザインのほうが、目に要素が飛び込んできませんか？そして、メリハリがあり、より『広告』らしさを感じることができます。
このように『このデザインで、何が一番伝えたいのか？』をはっきりと要素ごとに『違い』を作り、情報の重要度や階層構造を整理することが『対比』になります。
このように『このデザインで、何が一番伝えたいのか？』をはっきりと要素ごとに『違い』を作り、情報の重要度や階層構造を整理することが『対比』になります。
対比とは…
対比
- はっきりと要素ごとに大きさ、太さ、色などの「違い」を作ることによって、階層的に要素の重要度を明確にすること。（伝えたい情報の優先度をコントロールする。）
『対比』は、要素ごとに『違い』をつければ良いので、その方法は、「フォントの大きさ（サイズ）」だけに限られません。『フォントの種類』や『フォントの太さ』、『色（文字色、背景色）』、『装飾（下線やアイコンなど）』でそれぞれの要素の違いを生み出すことも含まれます。
文字色を変えたり、座布団（文字の後ろに背景色）を入れてコントラストをつける。
前置詞をアウトライン文字にして弱める。
（相対的に他の単語を強める。）
（相対的に他の単語を強める。）
下線はデザインに合わせて、破線や波線、手書き風（筆やクレヨン調）にしてもOK。
フォントを変えて、印象に変化をつける。（日本人でも読みやすいフォントの使用を心がける。特に筆記体は読みづらくなるため。）
なぜ『つまらない』デザインになってしまうのか？ メリハリをつける（ジャンプ率とは？）
デザインしたときに、「なんか単調でつまらないデザインなんだよなー。」と思ってしまう場合は、むやみに色や装飾を多く盛り込むのではなく『ジャンプ率』が出ているか確認してみてください。
『ジャンプ率』とは、主に「フォントの大きさ（サイズ）や太さ」などで、強弱をはっきりつけることを言います。「このタイトルの部分、ジャンプ率が低いからもうちょっと上げて」など、よくデザイン業界では使われます。
『対比』に重要なのは、はっきりとした『違い（差）』です。「フォントサイズが2pxしか違わない。」「フォントの太さが100しか違わない。」などのちょっとした違いでは、瞬時に要素の区別がつかないため、コントラストがつきません。
はっきりと違いがわかるように、 ちょっと最初は大げさなぐらいに『違い（差）』をつけてみてください。そうするとグッとメリハリのついた印象のデザインになると思います。
『ジャンプ率』とは、主に「フォントの大きさ（サイズ）や太さ」などで、強弱をはっきりつけることを言います。「このタイトルの部分、ジャンプ率が低いからもうちょっと上げて」など、よくデザイン業界では使われます。
『対比』に重要なのは、はっきりとした『違い（差）』です。「フォントサイズが2pxしか違わない。」「フォントの太さが100しか違わない。」などのちょっとした違いでは、瞬時に要素の区別がつかないため、コントラストがつきません。
はっきりと違いがわかるように、 ちょっと最初は大げさなぐらいに『違い（差）』をつけてみてください。そうするとグッとメリハリのついた印象のデザインになると思います。
目線を操れ！ユーザーの視線を誘導しよう
『対比』を上手くできるようになるとこのデザインを見る人の視線を操ることができるようになります。通常、人は横書きの場合、左上から下に向かった順番に読んで行こうとします。
しかし、デザインするときに伝えたいテキストをただ上から順番に配置することが難しい場合があります。写真やイラストをメインにしたデザインをする場合、特にそれらを中央に置く場合が多いので、重要度の順番でテキストを配置できません。
ですので、この『対比』の効果を活用して、伝えたい優先度別に段階的に目立つようにして、デザインを見る人の視線を誘導するようにできれば、立派なデザイナーと呼べます。
ユーザーの『視線誘導』ができるようになってくるとデザインの整合性が上がり、WEBサイトのようなデザインでは、サイトを訪問したユーザーがどのように動いてほしいかの『導線設計』にも繋がります。
しかし、デザインするときに伝えたいテキストをただ上から順番に配置することが難しい場合があります。写真やイラストをメインにしたデザインをする場合、特にそれらを中央に置く場合が多いので、重要度の順番でテキストを配置できません。
ですので、この『対比』の効果を活用して、伝えたい優先度別に段階的に目立つようにして、デザインを見る人の視線を誘導するようにできれば、立派なデザイナーと呼べます。
ユーザーの『視線誘導』ができるようになってくるとデザインの整合性が上がり、WEBサイトのようなデザインでは、サイトを訪問したユーザーがどのように動いてほしいかの『導線設計』にも繋がります。
✖️【悪い例】： 対比が出来ていないため、
まったく視線誘導できない。
まったく視線誘導できない。
👍【良い例】：対比が出来ているため、
ある程度、視線誘導できる。
ある程度、視線誘導できる。
可読性を高めるためのコントラスト
デザインでは『画像の上に文字を置く』ことが良くあります。本来の背景画像の目的は、文字のメッセージを補完するために挿入します。しかし、初学者のデザインでは、その伝えたい文字そのものを読みづらくしてしまっていることがしばしばあります。それでは本末転倒です。
『読みづらさ』の最大の原因は、背景と文字とのコントラスト（対比）が確保できていないことにより生じています。『文字の読みやすさ』を上げる代表的な手法をいくつか紹介します。
『読みづらさ』の最大の原因は、背景と文字とのコントラスト（対比）が確保できていないことにより生じています。『文字の読みやすさ』を上げる代表的な手法をいくつか紹介します。
文字の後ろにシャドウをつける代表的な手法ですが、注意すべき点がいくつかあります。
細い文字に濃いドロップシャドウをつけてしまうと逆に読みづらくなるので、光彩（外側）で文字全体に自然なシャドウがつくようにしましょう。
また、シャドウ色を黒で入れるのではなく、背景画像内にある色を使用すると、コントラストは担保しつつ、文字と背景が馴染んでデザインの邪魔をしません。
細い文字に濃いドロップシャドウをつけてしまうと逆に読みづらくなるので、光彩（外側）で文字全体に自然なシャドウがつくようにしましょう。
また、シャドウ色を黒で入れるのではなく、背景画像内にある色を使用すると、コントラストは担保しつつ、文字と背景が馴染んでデザインの邪魔をしません。
文字の後ろにある背景画像がごちゃごちゃしたオブジェクトがある場合、文字が読みづらくなるので、背景をぼかして色を均一化し、可読性を上げる手法です。
画像全体をぼかす方法もありますが、ぼかしすぎてなんの画像かわからなくなってしまっては意味がありませんので、ぼかし過ぎに注意してください。
または、この例のように文字の後ろの部分だけぼかす方法を取ることもできます。
画像全体をぼかす方法もありますが、ぼかしすぎてなんの画像かわからなくなってしまっては意味がありませんので、ぼかし過ぎに注意してください。
または、この例のように文字の後ろの部分だけぼかす方法を取ることもできます。
Webのファーストビューに動画などを入れる場合、背景画像と文字の間に半透明の背景色、または背景パターン（ボーダーやドット）などをいれる手法です。
ただこの場合も、背景画像がなんなのかがわからなくなってしまっては意味がないので、間に挟む色やパターンは、文字の邪魔をしないようにシンプルなパターンを選び、濃さも注意して調整しましょう。
全体が暗くなってしまう場合は、白黒反転したり、文字の後ろだけに背景色が入るようにしても良いでしょう。
ただこの場合も、背景画像がなんなのかがわからなくなってしまっては意味がないので、間に挟む色やパターンは、文字の邪魔をしないようにシンプルなパターンを選び、濃さも注意して調整しましょう。
全体が暗くなってしまう場合は、白黒反転したり、文字の後ろだけに背景色が入るようにしても良いでしょう。
動画配信サイトやニュースサイトのサムネイル画像などによく見られる手法です。背景画像には人の顔やニュースの核となる画像が入るため、画像自体をあまり暗くしたくありません。下からグラデーションをつけることにより、背景画像の明るさも担保しつつ、文字の可読性もあげるこの方法がよく用いられます。
場合によっては、文字の後ろにグラデーションではなく、帯（背景色や半透明な背景色）を入れる場合もあります。
場合によっては、文字の後ろにグラデーションではなく、帯（背景色や半透明な背景色）を入れる場合もあります。
反復
最後の原則は、『反復』です。これも言葉から想像できるとおり、『繰り返す』ことそのものです。
デザインの特徴を繰り返すことで、デザインに一貫性が出て、全体として統一感のある、まとまったデザインにすることが可能になります。
デザインの特徴を繰り返すことで、デザインに一貫性が出て、全体として統一感のある、まとまったデザインにすることが可能になります。
✖️【悪い例】： 反復が出来ていない。
挿絵と見出しのデザインテイストに一貫性がないため、統一感がなく、見出しの階層構造もわかりづらい。
👍【良い例】：反復が出来ている。
一貫性のあるデザインテイストで、統一感のある、イラストと見出し。
反復とは…
反復
- 同じ特徴のデザイン要素を「繰り返す」ことにより、情報の階層構造をわかりやすくすること。（デザインに一貫性、統一感も持たせる。）
デザイン初学者は、デザインに面白みをだそうと、いろいろな色やフォント、イラストなどを使いがちになります。そうすると雰囲気もバラバラ、見出しデザインの一貫性がないと、どれが中見出しでどれが小見出しなのかを判断することも難しくなります。明確なルールの存在が、わかりやすさに繋がります。
デザインルールを決めて、繰り返し使用することで、ユーザーの負担を減らす
日常生活でも、新たな学校や職場での新生活をスタートしたばかりのころは、急な環境の変化にとても疲れたご経験はないでしょうか？
その中で、少しずつ新しいことを覚えて、何度も同じことを繰り返すことによって、その環境に『慣れる』ことができるようになると思います。
デザインでも同じことが言えます。
人は無意識のうちにデザインの中からルールを学習して、次回似たデザインで出会ったときのために記憶します。
毎回毎回新しいルールが入ってきたり、一貫性を感じ取れないランダムなものを見続けると、見ている人の脳には、過度に負担がかかり、とても疲れてしまいます。
目新しいデザインルールが出てくるたびに、「これはどのような意味合いのもので、どのような機能を持っているのか？」とそのつど学習しようとします。
逆に、「見出しのデザインはこれ、ボタンのデザインはこれ」とデザインの中で、一貫したルールのもと、デザインが統一されていると、デザイン構造を理解・記憶することが容易になり、その結果わかりやすく、見やすい安定感のあるデザインになります。
Webサイトですと、「このサイトはわかりやすいサイト」との評価になり、またこのサイトを見にいこうとなるのです。
その中で、少しずつ新しいことを覚えて、何度も同じことを繰り返すことによって、その環境に『慣れる』ことができるようになると思います。
デザインでも同じことが言えます。
人は無意識のうちにデザインの中からルールを学習して、次回似たデザインで出会ったときのために記憶します。
毎回毎回新しいルールが入ってきたり、一貫性を感じ取れないランダムなものを見続けると、見ている人の脳には、過度に負担がかかり、とても疲れてしまいます。
目新しいデザインルールが出てくるたびに、「これはどのような意味合いのもので、どのような機能を持っているのか？」とそのつど学習しようとします。
逆に、「見出しのデザインはこれ、ボタンのデザインはこれ」とデザインの中で、一貫したルールのもと、デザインが統一されていると、デザイン構造を理解・記憶することが容易になり、その結果わかりやすく、見やすい安定感のあるデザインになります。
Webサイトですと、「このサイトはわかりやすいサイト」との評価になり、またこのサイトを見にいこうとなるのです。
ユーザーがほしい情報に即アクセス！（不必要な情報をスキップ）
例えば、カレーの商品パッケージの裏に、以下のような『カレーの作り方』のイラストが記載されているとします。
この作り方を見る人は、料理をしながらこのイラストを見るため、たびたび目線が外れます。
そして『火加減』を確認しようと再度このイラストを見た場合、左右どちらのイラストのほうが、早く火加減を確認することができるでしょうか？
この作り方を見る人は、料理をしながらこのイラストを見るため、たびたび目線が外れます。
そして『火加減』を確認しようと再度このイラストを見た場合、左右どちらのイラストのほうが、早く火加減を確認することができるでしょうか？
✖️【悪い例】： 火加減のデザインの、反復が出来ていない。
👍【良い例】：火加減のデザインが、反復が出来ている。
上のイラストでは、火加減がどこに記載されているか、パッと見つからず、各工程の中を探さないといけません。
下のイラストでは、火加減の記載されている場所とデザインが統一されているため、一度、火加減の箇所を見ていれば、再度目をやったときに、前回確認した火加減のデザインを頼りに、他の工程でも、すぐに記載されている箇所に目を送ることができます。
このように、デザインの『反復』を行うことで、不必要な情報はスキップして、ユーザーがほしい情報にすぐにアクセスすることが可能になります。
下のイラストでは、火加減の記載されている場所とデザインが統一されているため、一度、火加減の箇所を見ていれば、再度目をやったときに、前回確認した火加減のデザインを頼りに、他の工程でも、すぐに記載されている箇所に目を送ることができます。
このように、デザインの『反復』を行うことで、不必要な情報はスキップして、ユーザーがほしい情報にすぐにアクセスすることが可能になります。
反復の応用
『反復』のデザインをするときに気をつける必要があります。
それは、商品の種類が違う場合は、同じ色にしてしまわないことです。
同色のデザインにしてしまうと、文字以外では、商品の判別がつきづらくなり、識別性（区別のしやすさの度合い）が下がります。
人間は情報の80パーセント以上を視覚から得ているといわれます。そして、色は形よりも先に認識されるので、ユーザーに同じ商品と誤認させてしまう可能性があります。
一貫性のある統一したデザインにすることは重要ですが、盲目的にただ同じデザイン要素を繰り返し使うのではなく、伝えなければならないことをしっかり考えて、『反復』の応用として、デザインテイスト（形やトーン、位置など）は一緒にしつつ、色や写真に変化をつけて識別性を上げ、ユーザーを惑わせないようにすることも重要になります。
それは、商品の種類が違う場合は、同じ色にしてしまわないことです。
同色のデザインにしてしまうと、文字以外では、商品の判別がつきづらくなり、識別性（区別のしやすさの度合い）が下がります。
人間は情報の80パーセント以上を視覚から得ているといわれます。そして、色は形よりも先に認識されるので、ユーザーに同じ商品と誤認させてしまう可能性があります。
一貫性のある統一したデザインにすることは重要ですが、盲目的にただ同じデザイン要素を繰り返し使うのではなく、伝えなければならないことをしっかり考えて、『反復』の応用として、デザインテイスト（形やトーン、位置など）は一緒にしつつ、色や写真に変化をつけて識別性を上げ、ユーザーを惑わせないようにすることも重要になります。
✖️【悪い例】： 識別性が低い。
（商品の判別がつきづらい。）
（商品の判別がつきづらい。）
👍【良い例】：識別性が高い。
（商品の判別がつきやすい。）
（商品の判別がつきやすい。）
習熟度確認課題
『近接』『整列』『対比』『反復』と『デザインのきほん４原則』を学習してきました。
以下の課題 1・2を行って、知識として知っているレベルから、実際に自分のデザインに活用できるレベルにまで昇華させましょう！
以下の課題 1・2を行って、知識として知っているレベルから、実際に自分のデザインに活用できるレベルにまで昇華させましょう！
課題１：世の中のバナーデザインから『デザインのきほん4原則』を見つけよう！
まずは、手始めに世の中のデザインを分析して、『デザインのきほん４原則』がどのように活用されているか探してみましょう！
Study!
- バナーデザインの参考ギャラリーサイトから『デザインのきほん４原則』の『近接』『整列』『対比』『反復』が見て取れるバナーを見つけ出し、Notionの新規ページに貼り付け、どの部分がそれぞれ『近接』『整列』『対比』『反復』の原則が使われているか書き出してください。
- １つのバナーから4原則すべてを見つけ出す必要はありません。
- 『近接』『整列』『対比』『反復』それぞれバナー3つ以上見つけてください。
- 出来上がったら、講師にNotionページを見せながら、どの部分が『デザインのきほん4原則の○○』なのか説明してください。
課題２：『デザインのきほん４原則』を意識しながら、名刺デザインをしてみよう！
こちらの課題はチャレンジ課題であるため飛ばしても構いません！
Figma・Canva・Photoshop・Illustratorのいずれか使い方を学習し終えた人は挑戦してみましょう！
Figma・Canva・Photoshop・Illustratorのいずれか使い方を学習し終えた人は挑戦してみましょう！
一度身につけた知識の定着、より深い理解の促進を狙う目的として、名刺デザインをしていただきます。手を動かすことで、記憶に定着しやすくなります。
また、できあがった成果物はのちにご自身のポートフォリオの作品にすることもできます。
また、できあがった成果物はのちにご自身のポートフォリオの作品にすることもできます。
Study!
- ご自身の名刺デザインをしていただきます。『デザインのきほん４原則』の『近接』『整列』『対比』『反復』を意識しながら制作してください。
- 「Illustrator」「Photoshop」「Figma」「Canva」のいずれを使用しても問題ございません。
- サイズは日本で一般的に使われている名刺のサイズ「91×55 mm」で作成してください。
- カラーモードは「CMYK」、裁ち落としは「3 mm」で作成してください。
- 縦書きでも横書きでも構いません。「両面」ではなく、「片面（１枚）」に収まるようにデザインしてください。
- 自分や会社のロゴは架空のものでも構いません。ご自身で創作したものでも構いません。
- 出来上がったら、講師に名刺を見せながら、デザインをプレゼンテーションして、デザインフィードバックをもらってください。