こんにちは。デザイナーのベーコンです。
ここまで数回にわたり、デザイン4原則を使って未経験者でもデザイン力をアップする方法をお伝えしてきました。今回はデザイン4原則をまとめて紹介します。
この記事は復習ではありません
最初にお伝えしておくと、この記事は復習ではありません。この回だけを読んでも「デザインの基本を網羅的に理解できる」を目指していますので、デザイン未経験者の方が読んでも教科書的に理解できる内容になっています。もちろんデザイン経験者の方が読んでもおもしろいよう、また新たな気付きにつながる奥行きも用意しておきますね。
デザインの技術は一度覚えると長く役立つ技術です。会社の資料作成、PTAのチラシなど、人生で役立つタイミングがたくさんあるはずです。デザイン4原則を理解して、これからの人生に活用してくださいね。
「デザイン4原則」を深堀りした過去記事一覧
デザイン4原則ってどんな魔法?
デザイン4原則は、デザイン未経験者からすると魔法のように思える技術です。
こんにちはデザイン4原則です。
HELLO!
これからデザイン4原則について話していきたいなあ。
こんな文章も、「デザイン4原則」を使ってデザインを作ってみるとこうなります。



絶景の写真がなくても、最高のキャッチコピーがなくても、デザインっぽいものを作ることができました。(逆に言うと、上記のような写真やコピーがあればもっともっとクリエイティブな広告が作れそうです)
デザイン4原則は、デザインを作るときのいちばんわかりやすい道標であり、レシピであり、説明書です。僕もデザインについて学んでいた学生のころ、4原則を知って感動し、すぐ実践に取り入れたのを覚えています。
デザイン4原則は、覚えた途端にデザイン力がアップする法則です。プロのデザイナーも日々応用しながら使っている奥深い原則ですが、今日デザインを始めた非デザイナーの方にも即効性があるのでぜひ試してみてください。
即効性があるのはこれ! デザイン4原則[1]強弱
まず「強弱」からお伝えします。
個人的にいちばんデザインのクオリティを上げるのに即効性がある原則は「強弱」だと思います。「コントラスト」や「対比」とも呼ばれることがある原則ですが、わかりやすい「強弱」という言葉でお伝えしますね。

上の図のとおり、大きな部分と小さな部分の差を作るのが「強弱」です。この場合は「HELLO!」の文字を大きくすることで、人の目に見てもらいやすいデザインにすることができました。
「強弱」には大きくふたつの役割があります。
ひとつめは「伝えたい大事な箇所を大きくする」こと、ふたつめは「インパクトを出すなど、見た目を良くするために大きくする」ことです。このふたつのバランスを取りながら制作していくこと。これを心がけるのが「強弱」を使う第一歩です。
そしてもうひとつ、初心者を抜け出す「強弱」のポイントがあります。
強弱で大事なポイントはひとつだけ
強弱を使う上での大事なポイントはひとつです。それは思った以上に強弱をつけること。
デザインを作っているとき、強弱を使っているつもりでも、できていないことって多いんですよね。こんな記事を書いている僕でも「あれ?このデザイン強弱が足りない……」と気づいてデザインを作り直すことがよくあります。ついついデザインのバランスを取っているうちに「強」が弱まってしまわないよう、気をつけてみてください。

右の画像は「HELLO!」の文字がものすごく大きいパターンのデザインです。この場合は写真がないため「HELLO!」の文字をロゴやイラストだと思って主役扱いするのがポイントです。強弱を使わないと主役がいなくなります。主役なきステージはおもしろくないですよね。
最後にもう一度お伝えすると、「強弱」は思いっきりやってみるのがポイントです。


やりすぎてももとに戻せますが、やらないとイメージが沸かないことが多いです。経験上、まずは強弱をやりすぎてから元に戻すくらいがちょうどよかったりします。
▼ビフォーアフター」も含めてもっと詳しく強弱(対比)を学ぶにはこちらの記事をどうぞ!
プロっぽくするためのコツ デザイン4原則[2]整列
整列とは何かと一言で言えば、ずばり「揃える」こと。

整列はデザインの基本。整列を使って揃えることが、文字や写真を「デザイン」にするスタートです。整列によりバランスが整えられると、見た目が良くなり、ときに使いやすくなります。「プロっぽくなる」という言いかたもできるかもしれません。
ただ、整列を使って揃えるだけでは、デザインは上手くいきません。整列は状況によって良い・悪いが変わるためです。
整列は状況によって変わる
初心者の方のデザインを見せてもらって感じるのは、状況によって良い・悪いが変わる点が整列の難しさだということです。

上の例のように「整列」を使ってすべてを中央揃えにすると、一見良いデザインに感じますよね。しかし下の例のように、黒い丸の吹き出しだけは左側にはみ出たせたほうが、今回の場合は良いデザインだと判断しました。
すべてを揃えれば良いわけではないのが整列の難しさ。ここはどうしても、経験値やバランス感覚で判断していく部分ですので正解はないのですが、整列はすべて揃えれば最高の結果になるわけではないということを理解すると、デザインの成長も早いように思います。
▼悪い例も含めて、もっと詳しく整列を学ぶにはこちらの記事はどうぞ!
地味だからこそデザイン力が伸びやすい! デザイン4原則[3]近接
つ、ついてこれていますか?
「強弱」「整列」という4原則のツートップのあとに「近接」の話をされても「つまんないなあ」と思う方もいると思います。わかります、近接ってとんでもなく地味です。でもね、「地味」で「誰でも使えそう」ということは、あまりみんな勉強しないんです。
だからこそ、「近接」を上手に使えるとデザイン力がグッと伸びやすいのです。

近接のポイント
「近接」を簡単に説明するとグループに分けて見やすくすることです。もう少し具体的な例を見てみましょう。

実際にゼロからデザインを作っていると「情報をまとめること」「デザインをきれいに作ること」を同時に進行してしまい、左の図のように、情報がバラバラの「近接」されていないデザインを作ってしまうことがよくあります。
そうならないためのポイントは、最初に情報をまとめること、その次にデザインをすること。そして俯瞰して何度も見直してみる。つまり「近接」は情報を分別してまとめてデザインすることなんです。
近接を使わないほうが良いときもある
デザインの正解はいくつもあります。近接を使えばデザインが必ず良くなるというわけではありません。近接は、デザインの手段のひとつに過ぎないことも覚えておくと役に立つかと思います。
たとえば下の名刺は、「近接」されていません。

しかし、この名刺はこれで良いデザインなんです。
「近接」していないことが悪いデザインとは限りません。必要な情報を固めて見やすくするのが「近接」ですが、今回の名刺のように、伝えたい人に伝えたいことを伝えられるならデザインとして問題はありません。もちろんもっと見やすい名刺はありますが、デザイン性を少し優先させた例が上のデザインですね。
▼「悪い例」も含めて、もっと詳しく近接を学ぶにはこちらの記事をどうぞ!
ファンクラブがあったら入りたい! デザイン4原則④「反復」
デザイン4原則の最後は「反復」です。正直この記事を書くまでは「反復」は「繰り返すことでしょ、単純すぎる原則でつまらないからおもしろい画像を作ってなんとか良い記事にしよう……」と思っていました。
でもいざ書いてみると
- 「反復」最高!ファンクラブがあったら入りたい。
- 「反復」のオンラインサロンがあったら入りたい。
- デザイン4原則で誰が推し?って言われたら「反復!」
と言ってしまいそうな気持ちです。反復っておもしろく深みがあります。そんな「反復」を一言で表すと、デザインを繰り返すことで統一感をもたせることです。

下記に「反復」を使ったBeforeとAfterの例を作成しました。

「サムネイル画像やアイコンを同じ形・大きさで統一する」「タイトルやチャンネル名などの文字を左揃えで統一する」といった反復を行うことで見やすく、使いやすいデザインになりました。
上の例もひとつの正解ではあるのですが、状況や目的に応じ、繰り返すデザインから抜け出してみると、次の例のようにすることもできます。

いちばん上の「ワン」の画像がよく目立つようになりました。
反復はデザインを繰り返すことで統一感を持たせたり、デザインをわかりやすくするのが目的ですが、ときに反復をやめて裏切ることで大きなアクセントを生むことができます。
▼悪い例も含めて、もっと詳しく反復を学ぶにはこちらの記事をどうぞ!
まとめ:4原則に頼りすぎない
ここまでデザイン4原則について解説してきましたが、必ずしもデザイン4原則に則ったデザインを作る必要はありません。デザイナーが常にデザイン4原則のことを考えながらデザインを作っているかと言ったらそんなことはありませんしね。
デザイナーは誰しも経験と感性も使ってデザインをつくっています。そしてデザインには試行錯誤が必要で、ときに迷うこともあります。
そんなときにデザイン4原則に立ち返り、デザインの良し悪しを判断する。そうやってデザイン制作をラクに、楽しくするのがデザイン4原則の正しい使いかたです。
誤解を避けるために最後に書いておくと、もちろん「デザイン4原則なんて必要ないよ」という意味ではなく、覚えることをオススメします。ただ、すべてを覚えようと思うと難しいので、まずはさわりで大丈夫。なんとなく4原則ってこんな感じと覚えて実践してみましょうということをお伝えしたいです。
すると、デザイン4原則は使い始めてすぐに効果が出てくるはず。そして、その後デザインが上手くなったときにも深みがわかるのではないでしょうか。本当によくできている原則です。
ぜひ試行錯誤しながらデザイン4原則を使ったデザインを作ってみてくださいね。できれば忘れないうちに今すぐにね!