![見出し画像](https://assets.st-note.com/production/uploads/images/38951566/rectangle_large_type_2_89ef8c3ed898a3e07a5d047582942c57.png?width=1200)
広告で学ぶ!デザインの基本原則
「デザインをどうやって勉強すべきか?」WEBやグラフィックのデザイナーを目指している人に共通の悩みだと思います。
「デザインの技法」については、結構書籍も出てきています。しかし、デザイン勉強中の人が、技法とデザインと結び付けて考えるのは難しいようです。
そこでTwitterの投稿「#広告からデザインを学ぼう」シリーズで紹介した、レイアウトや配色などの「デザインの基本原則」をnote用にまとめました。
身近な広告を事例に、デザインを学んでいきましょう。
※タイポグラフィーの3原則を追記しました(2020/08/12)
※余白の操作方法を追加しました。(2020/11/17)
最初に:センスはいらない?!6つのデザインの基本原則
自分はデザイナーになってから気がづきましたが、デザインはセンスで何とかなる分野ではないんです。長い歴史で培われた「デザインの原則」を学ぶ必要があります。
でも、逆に言うと技術を学べば、誰でも上達できるものです。
・配色の3原則
・レイアウトの4原則
・文字詰めの3原則
・構図の8原則
・タイポグラフィーの3原則
・余白の操作方法
この記事では、上記の6つのデザインの基本原則を紹介します。
さらに、応用編として原則を活用した上級レベルのテクニックも取り上げます。
原則1:「配色の3原則」をマンション広告から学ぶ
マンションの中吊り広告デザインから「配色」を学びます。
とても印象の強い中吊りですが、その原理が「配色の3原則」をみると分かります。重要なのは、色の3役色を使いことなすことです。
デザイナーでも配色苦手という人が割と多いですが、3役色意識してコントロールすると、簡単にカラーが使いこなせますよ。
![画像5](https://assets.st-note.com/production/uploads/images/23146175/picture_pc_a9ae0dc844413e6b8fb78b013b925a61.png?width=1200)
出典:ソライエグランの中吊り広告
![画像6](https://assets.st-note.com/production/uploads/images/23146196/picture_pc_eeb3dd8a3bded2d227567a2e7ab77cf6.png?width=1200)
![画像7](https://assets.st-note.com/production/uploads/images/23146204/picture_pc_81f0c12584d346e93101debc82457936.png?width=1200)
![画像8](https://assets.st-note.com/production/uploads/images/23146208/picture_pc_8fc8392551451913fc8865909f24b4e7.png?width=1200)
原則2:「レイアウトの4原則」をLet's ENJOY TOKYOで学ぶ
今回はLet's ENJOY TOKYOの中吊り広告から、有名な「レイアウトの4原則」を学びます。以下の4つの原則をコントロールすると、レイアウトを効率よく作ることができますよ。
・整列:要素を揃えることで、デザインをコントロール出来ます
・近接:仲間同士の距離を調整しグルーピングする
・反復:同じ要素を繰り返して、視線を誘導しやすくする
・対比:タイトルや見出しを大きくして、コントラストをつける
![画像9](https://assets.st-note.com/production/uploads/images/23146522/picture_pc_f9f12115342eaed59fec6d2a2d50674c.png?width=1200)
出典:Let's ENJOY TOKYOの中吊り広告より
![画像10](https://assets.st-note.com/production/uploads/images/23146524/picture_pc_7b10132a56077dfcba4f7328a9407510.png?width=1200)
![画像11](https://assets.st-note.com/production/uploads/images/23146527/picture_pc_20850259b031bf4250e73ad699bd771a.png?width=1200)
![画像12](https://assets.st-note.com/production/uploads/images/23146528/picture_pc_1a6de5b3568c01a2f365ccddf53265bb.png?width=1200)
原則3:「文字詰の3原則」をドア横ステッカーで学ぶ
デザインを勉強している人が共通して苦手なのが、「文字詰め」です。
「文字とデザインは関係あるの?」と考える人も多いと思いますが、文字が主体のデザインというのは案外多いです。
そこでは、文字を詰めることでデザインをコントロールすることができます。
以下、集英社のジャンプ+で連載中の漫画「スパイファミリー」のドアステッカーを事例に、「文字字詰めの3原則」を紹介します。
これを学んだ後にステッカーを見ると、とても考えられたデザインなのが分かって面白いですよ。
![画像20](https://assets.st-note.com/production/uploads/images/26536104/picture_pc_3a73005615e3a4d5596d4bdc12437d9a.png?width=1200)
出典:集英社の電車内広告より
![](https://assets.st-note.com/img/1659988581655-U9JurWnFa3.png?width=1200)
![](https://assets.st-note.com/img/1659795314297-0cqTq6V0Mf.png?width=1200)
![](https://assets.st-note.com/img/1659795330102-VA0x2Vmemm.png?width=1200)
原則4:「構図の8原則」を、梅酒の広告で学ぶ
「レイアウトの4原則」は揃えることでコミュニケーションのコントロールします。対して、より意匠に寄っているのが「構図の8原則」です。
各要素を8つのシステムでコントロールすることで、印象的なデザインを作ることが出来ます。
CHOYAの梅酒の広告を事例に、割とよく使われる「放射」と「拡張」を組み合わせた構図を紹介します。
![d10構図](https://assets.st-note.com/production/uploads/images/23148138/picture_pc_6f1003133d09ea0e4d5da9fbfa0705c2.png?width=1200)
![画像14](https://assets.st-note.com/production/uploads/images/23147772/picture_pc_f3fdc93dba6f13cac89842c6aee253a0.png?width=1200)
出典:CHOYA梅酒の中吊り広告
![画像15](https://assets.st-note.com/production/uploads/images/23147773/picture_pc_8b1f4acfbf6925c8c3e3b59ace92a6a1.png?width=1200)
原則5:「タイポグラフィーの3原則」をエステ広告で学ぶ
「タイポグラフィー」は文字だけでデザインが出来る、超お得な技術です。
しかし、プロのデザイナーでも苦手な人が多いですね。それは、教科書的なものが少ないのも原因だと思います。
以下のポイントを美容広告をテーマに解説してみます。
・書体での雰囲気作り
・メリハリで整理
・文字のビジュアル化
目的と用途で、手法を使い分けるのがポイントですね
![画像21](https://assets.st-note.com/production/uploads/images/32384381/picture_pc_39907a324689c3e5ffc8cabd45768ca9.jpeg?width=1200)
![画像28](https://assets.st-note.com/production/uploads/images/42872042/picture_pc_1b05a8014306e9024df51cf0c18eb550.png?width=1200)
![画像23](https://assets.st-note.com/production/uploads/images/32384406/picture_pc_1bd9a5cbb4e9e0e7962667c039894c11.png?width=1200)
![画像24](https://assets.st-note.com/production/uploads/images/32384422/picture_pc_555b64fa102d9de52a81cc7f945f050d.png?width=1200)
原則6:「余白の操作方法」を2つの広告から学ぶ
「余白」は、マージンの取り方と構図の合わせ技ですね。
複合的な技術が必要で、デザイン技法でも苦手な人も多いと思います
今回は「余白」の中でも、以下の2つをテーマにしてみました。
・マージンの取り方で高級感や低価格感を作る
例えば、高級ブランドのWEBサイトやパンフレットなどは、たっぷり余白を取っているものが多いですね。余白が多いと、静かで上質な表現ができます。
スーパーのチラシなど安さを表現する場合は、動的な表現です。余白を極端に少なくしたり、文字の大きさや差をつけたり、色数を増やしたり、元気な紙面にするとエコノミー感を作ることができます。
![画像25](https://assets.st-note.com/production/uploads/images/38951225/picture_pc_268d7e8d4d0dbedea4ebbf65e042d01b.jpeg?width=1200)
![画像26](https://assets.st-note.com/production/uploads/images/38951227/picture_pc_4f261171039d763cbbbfe6cd2b587106.png?width=1200)
・グリッド構図でリズムを作る方法
余白を上手く使うと、レイアウトでリズム感を作ることができます。以下の事例で紹介してるグリッド構図を使ったものは、「余白」の考え方のベースになります。
他の8つの構図でどんな余白が作れるか考えるのも楽しいですね。
![画像27](https://assets.st-note.com/production/uploads/images/38951229/picture_pc_0f10bb90338985305a047b6364e912af.jpg?width=1200)
![画像28](https://assets.st-note.com/production/uploads/images/38951232/picture_pc_ed10bf4038a340c3744e0d7b6720afb7.png?width=1200)
応用編1:みんな苦手な?同系色の配色
「同系色の色使いが難しい」という人が多いみたいです。そこで、「アサヒスーパードライ」の広告を事例に、同系色の使い方を紹介します。
3役色の中でも「強調色」を上手く使うと、様々な印象を作ることができます。
中吊りは、背景色が薄いピンク、主役色がやや濃いピンク、強調色がビール色ですね。
![画像16](https://assets.st-note.com/production/uploads/images/23147942/picture_pc_6d6c711917fa2723198c0d0fcec2c885.png?width=1200)
出典:アサヒスーパドライの中吊り広告
応用編2:高等テクニックの構図を崩す技術
雑誌「CLASSY」の中吊りで、高等テクの「崩す技術」を学びます。「構図」を学ぶと一時的にデザインが硬くなる人って多いんですよね。
それは構図が「固定」されたものだと思い込んでしまうから考えているからです。しかし、対角線のような構図も「崩す」ことでデザインに変化を産むことができます。
![画像17](https://assets.st-note.com/production/uploads/images/23148179/picture_pc_edc2c4bc13e5db832d86027da02dc749.png?width=1200)
出典:光文社 CLASSYの車内広告
![画像18](https://assets.st-note.com/production/uploads/images/23148232/picture_pc_b136f1ec5aa3a1028b874fb87364e2ad.png?width=1200)
![画像19](https://assets.st-note.com/production/uploads/images/23148236/picture_pc_c0ba7a6e724a47c04cb7b44576e03edd.png?width=1200)
![画像20](https://assets.st-note.com/production/uploads/images/23148237/picture_pc_0167cd68e040c31f24dff17735fa8e1d.png?width=1200)
最後に:デザインの原則を学ぶと、広告でデザインが勉強できる
広告は毎日目にする身近なものですが、デザインの勉強の題材としては打ってつけですね。無料で無制限に供給される、レベルの高いグラフィックの宝庫です。
そして、「デザインの基本原則」を学ぶと、紙面の上にあるはずのない構図の線が見えたり、文字の間にブロックが見えたりします。
自分がよくやっているのが、「頭の中でのデザインの組み替え」です。文字の大きさを変えたり写真を差し替えたりして、脳内デザイン修正をしています。
これは、とてもデザインが上達するので、オススメの勉強方法です。
Twitterの「#広告からデザインを学ぼう」では、デザインの技法を中心に継続的に投稿しています。
近々「余白」の使い方や、「文字組」なども紹介したいと思うので、興味のある人は自分のアカウント「@Zenigame89」をフォローください。