このあしらい、どっちが正解？バナーのあしらいのセンスを磨いておこう

3問目の答え：A

以上がわたしなりの解答です。

あなたがよいと感じた「バナーのあしらい」は、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

1．モノトーンでまとめるデザインは色相を増やさない

まずは1問目の振り返りです。

作例のAとBの違いは、「背景のあしらいの配色」でした。

この作例では、人物の写真をモノクロに加工し、全体をクールで落ち着いたトーンで統一することを目指しました。

Aの背景のあしらいは、青系を基本にまとめられていて統一感のある印象です。

一方でBは、「紫っぽい青」や「水色っぽい青」など、青の中にも系統の違いがあり、まとまりがなくなっています。

似たような色を選んだつもりでも、Bのように系統の違う色が混ざってしまうと、視線が分散して雑然とした印象になってしまうことがあります。

そのため、今回はAを正解としました。

デザインを始めたばかりの頃は、「複数の色をセンスよく組み合わせるのが難しい」と感じることも多いと思います。

しかし、実は今回Aの背景のあしらいは「たった1色だけ」しか使っていません。

2．影を付けるときは「不自然さ」を取り除く工夫をする

続いて、2問目の振り返りです。

作例のAとBの違いは、「影の付け方」でした。

Aは、ジュースボトルの影が背景から浮いてしまい、合成したような違和感があります。

一方でBは、テーブルや壁に対してジュースボトルの影が自然と馴染んでいて、Aよりも安定感があります。

そのため、今回はBを正解としました。

今回の作例は「自然派の果汁100％ジュース」をテーマに、切り抜いた商品写真を使ってバナーデザインを作る、というシチュエーションを想定しています。

そして、「自然派」の雰囲気を出すために、木のテーブルの上に商品を置いたレイアウトを計画しました。

机に物を置けば当然「影」ができますが、AとBは影を付ける方法に違いがあります。

Aは「ドロップシャドウ」で、Bは「グラデーション」で影を作成しています。

「ドロップシャドウ」はフラットな平面にできる影

Aの影に感じる違和感の正体は「ドロップシャドウ」という機能の特性にあります。

ドロップシャドウはデザインでよく用いられるあしらいですが、そもそもどのような影なのかを解説します。

ドロップシャドウとは、オブジェクトの背後に影を付け、浮遊感や奥行きを演出するものです。

例えば、カードのような平面のデザインが浮いている演出や、文字をくっきりとさせるときには使い勝手のよいあしらいです。

平面の図にドロップシャドウを付けると、以下の左の図のようになります。

そして、斜めから見ると右の図のような状態になり、平らな板のような影であることがわかります。

このように、凹凸のないフラットな平面の場合、ドロップシャドウを使っても違和感なく影を付けられます。

しかし、今回のジュースのボトルは円柱の形です。

斜めから見ると以下の右の図のような形をしていて、平面ではありません。

この立体的なボトルに、フラットな平面用の影である「ドロップシャドウ」を付けてしまうと、違和感を生んでしまうのです。

ドロップシャドウについてのデザインクイズチャレンジもあるので、ぜひ挑戦してみてください。

＞このドロップシャドウ、どっちが正解？ドロップシャドウのセンスを磨いておこう

3．テクスチャは「可読性を落とさない」程度にさりげなくプラスする

最後に、3問目の振り返りです。

作例のAとBの違いは、「テクスチャの細部の処理」でした。

今回のデザインでは「からだにやさしい」「天然素材の家」などのキーワードから、クラフト感のあるテクスチャを取り入れました。

大きなタイトルには、かすれたような加工を施しています。

しかしBの作例では、この掠れ感が強すぎてしまい、文字が読みにくくなっています。

バナーデザインにおいて、雰囲気作りと同じくらい大切なのが「可読性」です。

そのため、今回はAを正解としました。

【手順4】マスクの位置を調整する

「透明パネル」で「マスクサムネイル」を選択すると、「マスクの編集モード」に入ります。

画面上のテクスチャを移動させたり、大きさを変えたりして、文字が読みづらくなりすぎない「ちょうどよい掠れ具合」に調整します。

調整が終わったら、透明パネルの左側にある「オブジェクトサムネイル」をクリックして編集モードを終了すれば完成です。

今回は「白いところを表示、黒いところを非表示」というマスクを作成しましたが、「マスクを反転」のチェックボックスをオンにすると、「黒いところを表示、白いところを非表示」のマスクに変更することもできます。

【工夫2】テクスチャは「見えない」くらいがちょうどよい

もう一つのポイントは、背景に敷いた壁紙のようなテクスチャの密度です。

A：テクスチャを縮小し、凹凸が目立ちにくくさりげなく影を感じる程度に抑えている

B：テクスチャの凹凸がはっきりわかるほど大きく、影も濃い

背景はあくまで主役（文字や商品）を引き立てる脇役なので、目立ちすぎるとノイズになってしまいます。

「見えているかいないか」くらいでも、脳はちゃんと「フラットではない」ということを認識できます。

テクスチャを使う際は、主役を際立たせることを意識して、さりげなさを目指しましょう。

まとめ：バナーのあしらいのセンスを磨くポイント

今回はバナーのあしらいに関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1．モノトーンでまとめるデザインは色相を増やさない

クールで統一感のあるデザインにするコツは、色の系統を増やさないことです。

ベースの1色に「描画モード」を掛け合わせるだけで、色の系統を崩さず、まとまり感のある配色に仕上げられます。

2．影を付けるときは「不自然さ」を取り除く工夫をする

立体的なものに、平面用の「ドロップシャドウ」をそのまま使うと、違和感の原因になります。

影を作るときは、「物の形」と「光の向き」をよく観察しましょう。