このあしらい、どっちが正解？バナーのあしらいのセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
ウェブデザイナーのすぴかあやかです。
今回、わたしは「バナーのあしらい（装飾）」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「バナーのあしらい」がより魅力的だと感じますか？
1問目「モノトーン画像を使ったバナー、背景のあしらいがふさわしいのはどっち？」（難易度★）
2問目「商品写真を切り抜いたデザイン、より自然な影のあしらいはどっち？」（難易度★★）
3問目「質感を活かしたデザイン、素材のよさを引き出せているのはどっち？」（難易度★★★）
いかがでしたか？
わたしが考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：A
以上がわたしなりの解答です。
あなたがよいと感じた「バナーのあしらい」は、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．モノトーンでまとめるデザインは色相を増やさない
まずは1問目の振り返りです。
作例のAとBの違いは、「背景のあしらいの配色」でした。
この作例では、人物の写真をモノクロに加工し、全体をクールで落ち着いたトーンで統一することを目指しました。
Aの背景のあしらいは、青系を基本にまとめられていて統一感のある印象です。
一方でBは、「紫っぽい青」や「水色っぽい青」など、青の中にも系統の違いがあり、まとまりがなくなっています。
似たような色を選んだつもりでも、Bのように系統の違う色が混ざってしまうと、視線が分散して雑然とした印象になってしまうことがあります。
そのため、今回はAを正解としました。
デザインを始めたばかりの頃は、「複数の色をセンスよく組み合わせるのが難しい」と感じることも多いと思います。
しかし、実は今回Aの背景のあしらいは「たった1色だけ」しか使っていません。
1色で深みを出す「描画モード」を取り入れてみよう
1色だけで変化をつけられる理由は、Illustratorの「描画モード」という機能を使っているからです。
描画モードとは、重なったオブジェクトやレイヤーの「色の混ざり方」を設定できる機能です。
描画モードの設定は、「ウィンドウ」メニューの「透明」を選択して表示される「透明パネル」から行います。
通常、長方形ツールなどで作成したオブジェクトは、塗りの色が不透明度100％で、上に重ねたオブジェクトが、背面にあるオブジェクトを完全に隠します。
上に重ねたオブジェクトの描画モードを「乗算」にすると、背面のオブジェクトと色が混ざり、重なった部分に影が当たったように色が濃くなります。
また、上に重ねたオブジェクトの描画モードを「スクリーン」にすると、背面のオブジェクトと色が混ざり、重なった部分に光が当たったように明るくなります。
このほかにも、描画モードにはたくさんの種類があり、それぞれに特徴があります。
よく使うものをざっくり分類すると、以下のようになります。
今回のあしらいでは、#105085の青色を背景色に、同じ色のオブジェクトを「覆い焼きカラー」と「乗算」で複数重ねています。
印象が強すぎる・濃すぎる、と感じるときは、不透明度を下げて調整してみてください。
1色をベースに描画モードで変化を付けるメリットは、色の系統（色相）がほとんど変わらないので、同系統での色選びがとても楽になることです。
描画モードは、重なり合うオブジェクトの色の兼ね合いで、印象がガラリと変わります。
ひとつずつ試してみて、そのときに最適な描画モードを選んでみてくださいね。
2．影を付けるときは「不自然さ」を取り除く工夫をする
続いて、2問目の振り返りです。
作例のAとBの違いは、「影の付け方」でした。
Aは、ジュースボトルの影が背景から浮いてしまい、合成したような違和感があります。
一方でBは、テーブルや壁に対してジュースボトルの影が自然と馴染んでいて、Aよりも安定感があります。
そのため、今回はBを正解としました。
今回の作例は「自然派の果汁100％ジュース」をテーマに、切り抜いた商品写真を使ってバナーデザインを作る、というシチュエーションを想定しています。
そして、「自然派」の雰囲気を出すために、木のテーブルの上に商品を置いたレイアウトを計画しました。
机に物を置けば当然「影」ができますが、AとBは影を付ける方法に違いがあります。
Aは「ドロップシャドウ」で、Bは「グラデーション」で影を作成しています。
「ドロップシャドウ」はフラットな平面にできる影
Aの影に感じる違和感の正体は「ドロップシャドウ」という機能の特性にあります。
ドロップシャドウはデザインでよく用いられるあしらいですが、そもそもどのような影なのかを解説します。
ドロップシャドウとは、オブジェクトの背後に影を付け、浮遊感や奥行きを演出するものです。
例えば、カードのような平面のデザインが浮いている演出や、文字をくっきりとさせるときには使い勝手のよいあしらいです。
平面の図にドロップシャドウを付けると、以下の左の図のようになります。
そして、斜めから見ると右の図のような状態になり、平らな板のような影であることがわかります。
このように、凹凸のないフラットな平面の場合、ドロップシャドウを使っても違和感なく影を付けられます。
しかし、今回のジュースのボトルは円柱の形です。
斜めから見ると以下の右の図のような形をしていて、平面ではありません。
この立体的なボトルに、フラットな平面用の影である「ドロップシャドウ」を付けてしまうと、違和感を生んでしまうのです。
ドロップシャドウについてのデザインクイズチャレンジもあるので、ぜひ挑戦してみてください。
本物「っぽい」影を作ろう
今回のように立体的なものに影をつける場合は、やはり立体的なものにつく影でなくては違和感があります。
わたしたちが普段生活する中で「一方向からだけの光」という状況はほとんどありません。
窓からの光、室内灯の光、壁からの照り返しの光……など、さまざまな光源があり、影を描くのは実はとてもむずかしいものです。
しかし、必ずしも正しい影でなくとも「それっぽい」「あり得そうな」影があることで、脳みそはちゃんと納得してくれます。
影を描くポイントは、次の2つです。
・立体の形を観察すること
・写真から、一番大きな光源をみつけること
今回は、ボトルの光と影から、ボトルから見て右斜め前から光が来ていることがわかります。
ということは、その反対側に地面と接した部分から影ができるはずです。
地面から伸びる影と、壁にできる影の2つです。
テーブルの木の色や、壁の色を考慮して、下のように少し色味を足した影を作成しました。
Illustratorのペンツールで大まかな影の形のオブジェクトを作成し、グラデーションやアピアランスの「ぼかし」を使用して、影のように見せています。
- 「ペンツール」で影のオブジェクトを作成
- 「塗り」を縦方向のグラデーションに設定し、色を調整する
- 「ウィンドウ」メニューの「アピアランス」を開き、「新規効果を追加」から「ぼかし」を追加する
- 「描画モード：乗算」で対象物の背景に設置し、影のように見せる
実際、ボトルのキャップの形などからボトル全体の角度を見てみると、今回のような影にはなりません。
しかしこれくらいの演出でも、影がない状態やドロップシャドウよりは自然に見えます。
切り抜きの写真を使ってデザインをする際に、取り入れるとレイアウトの幅が広がります。
3．テクスチャは「可読性を落とさない」程度にさりげなくプラスする
最後に、3問目の振り返りです。
作例のAとBの違いは、「テクスチャの細部の処理」でした。
今回のデザインでは「からだにやさしい」「天然素材の家」などのキーワードから、クラフト感のあるテクスチャを取り入れました。
大きなタイトルには、かすれたような加工を施しています。
しかしBの作例では、この掠れ感が強すぎてしまい、文字が読みにくくなっています。
バナーデザインにおいて、雰囲気作りと同じくらい大切なのが「可読性」です。
そのため、今回はAを正解としました。
Illustratorの「不透明マスク」機能で質感を出す方法
文字や枠線にテクスチャをかける方法はいくつかありますが、今回は「不透明マスク」という機能をご紹介します。
【手順1】テクスチャの素材を用意する
まずは、ベースとなるテクスチャ用の素材を探しましょう。
「グランジ 素材」といったキーワードで検索すると、使いやすいものが見つかります。
「グランジ」とは「汚れた」という意味ですが、「掠れ・ひび割れなど古さを感じる質感」という意味でもよく使われる言葉です。
今回は、文字に掠れたような加工をしたいので、白黒のコントラストがはっきりとした、ザラザラとした素材を用意しました。
JPEGやPNGなどのラスター画像でも、ベクター素材でもどちらでもOKです。
今回はPNG画像を使用します。
※今回は「白いところが残り、黒いところが透ける（非表示になる）」という設定で進めます。
【手順2】マスクをかけたい文字をグループ化する
次に、マスクをかけたい文字を選択して、グループ化（Ctrl＋G／Cmd＋G）しておきます。
今回は大見出しとコピーの両方に、ひとつのマスクを作成したいので、2つをまとめてグループ化しました。
【手順3】不透明マスクを作成する
「ウィンドウ」メニューの「透明」をクリックし、「透明パネル」を開きます。
用意しておいた素材を移動させ、文字のグループの前面に配置します。
素材と文字のグループをすべて選択し、「透明パネル」の「マスクを作成」をクリックします。
不透明マスクが作成され、テクスチャ素材の黒い部分に沿って文字が掠れています。
【手順4】マスクの位置を調整する
「透明パネル」で「マスクサムネイル」を選択すると、「マスクの編集モード」に入ります。
画面上のテクスチャを移動させたり、大きさを変えたりして、文字が読みづらくなりすぎない「ちょうどよい掠れ具合」に調整します。
調整が終わったら、透明パネルの左側にある「オブジェクトサムネイル」をクリックして編集モードを終了すれば完成です。
今回は「白いところを表示、黒いところを非表示」というマスクを作成しましたが、「マスクを反転」のチェックボックスをオンにすると、「黒いところを表示、白いところを非表示」のマスクに変更することもできます。
デザインの質を左右する「ひと手間」のこだわり
文字は、何も加工していない状態が一番読みやすいものです。
今回のような掠れたような加工は、どうしても可読性を落としてしまうことは避けられません。
そのため、少しでも可読性を失わないように気をつけることが大切です。
可読性をキープするために、今回は2つの工夫をしました。
【工夫1】文字の輪郭をくっきりさせる
文字を認識するときに重要となるのが、「アウトラインの形」です。
今回の作例A・Bの違いは、このアウトラインにありました。
A：テクスチャの加工をしたうえで、文字に縁をつけてアウトラインをくっきりさせている
B：テクスチャの加工のみ
Aでは、文字の可読性を上げるために、アピアランスの「光彩（内側）」を使ってグラデーションの縁をつけました。
ただし、マスクした文字にアピアランスの「光彩（内側）」をつけると、非表示になっている部分は適用されないため、マスクのない文字を複製して「乗算」で重ねています。
このひと手間で、掠れた質感の文字でも、内容がパッと認識できる状態をキープできています。
【工夫2】テクスチャは「見えない」くらいがちょうどよい
もう一つのポイントは、背景に敷いた壁紙のようなテクスチャの密度です。
A：テクスチャを縮小し、凹凸が目立ちにくくさりげなく影を感じる程度に抑えている
B：テクスチャの凹凸がはっきりわかるほど大きく、影も濃い
背景はあくまで主役（文字や商品）を引き立てる脇役なので、目立ちすぎるとノイズになってしまいます。
「見えているかいないか」くらいでも、脳はちゃんと「フラットではない」ということを認識できます。
テクスチャを使う際は、主役を際立たせることを意識して、さりげなさを目指しましょう。
生成AI機能を使ってテクスチャを生成しよう
今回の例では、不透明マスクにロイヤリティフリーの素材を使用しましたが、Illustratorの生成AI機能でテクスチャを生成することもできます。
コンテキストタスクバーで「ベクターを生成」をクリックし、「ベクターを生成ウィンドウ」が開いたら、プロンプトを入力して「生成」します。
「グランジ」「掠れ」「汚れ」などのキーワードを入れて生成すると、例のようなテクスチャを生成できます。
生成したベクターは拡大縮小や色の変更も容易で、デザインのパーツとして活躍してくれます。
まとめ：バナーのあしらいのセンスを磨くポイント
今回はバナーのあしらいに関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．モノトーンでまとめるデザインは色相を増やさない
クールで統一感のあるデザインにするコツは、色の系統を増やさないことです。
ベースの1色に「描画モード」を掛け合わせるだけで、色の系統を崩さず、まとまり感のある配色に仕上げられます。
2．影を付けるときは「不自然さ」を取り除く工夫をする
立体的なものに、平面用の「ドロップシャドウ」をそのまま使うと、違和感の原因になります。
影を作るときは、「物の形」と「光の向き」をよく観察しましょう。
3．テクスチャは「可読性を落とさない」程度にさりげなくプラスする
テクスチャは、あくまで主役を引き立てるためのものです。
掠れ加工をするときは、文字の輪郭（アウトライン）をクッキリ残す工夫をして、読みやすさを最優先しましょう。
お相手はウェブデザイナーのすぴかあやかでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。
執筆：すぴかあやか
株式会社キテレツ デザイナー・イラストレーター
1981年大阪生まれ。ウェブデザイナーとして制作会社でのアルバイトや社員を経て、2006年からフリーランスとして活動、2017年から株式会社キテレツに加入。イラストを取り入れたデザイン・ロゴやLPデザインなどを得意としている。
noteやXなどで、デザインの考えや日々の気づきを発信している。