このデザインのあしらい、どっちが正解？装飾のセンスを磨いておこう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。


こんにちは！デザイナーのやんこです。

今回、私は「デザインのあしらい（装飾）」についてのクイズを出題します。


早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの「あしらい」がよいと感じますか？

1問目「文字のあしらい」（難易度★）

明け方の写真の雰囲気には、以下のどちらのテキストの雰囲気が合うでしょうか？

2問目「背景のあしらい」（難易度★★）

抽選会のバナーには、以下のどちらの背景が合うでしょうか？

3問目「ナビゲーションバーとメインビジュアルの境界のあしらい」（難易度★★★）

白いナビゲーションバーと海のメインビジュアルとの境界、どちらが美しいでしょうか？

いかがでしたか？

私が考える答えは……

1問目の答え：A

2問目の答え：B

1．コントラスト比が十分な文字には、ドロップシャドウは使わない

まず、1問目から振り返っていきましょう。
私が良しとした答えは「A」です。

AとBの違いは、ドロップシャドウ（文字の影）の有無です。

Bではドロップシャドウが使われていましたが、通常、ドロップシャドウは“足りないコントラストを補うための手段”です。

上記の作例では、すでにコントラストは十分確保されており、文字の可読性は問題ありません。
そのため、ドロップシャドウを使わないのが正解です。

コントラスト比の確認方法はあとでお教えしますが、本画像の配色は、背景色が「 #EFF0EC」、文字色が「#052275」であるため、コントラスト比は 12.29：1となっています。

WCAG（Web Content Accessibility Guidelines）というwebアクセシビリティのガイドラインでは、以下のようにコントラスト比の目安が定められています。
今回の12.29：1は、ガイドラインで求められている数値の3倍以上に当たるため、十分なコントラストといえます。


■目安となるwebアクセシビリティ（WCAG基準）

• 通常の本文・・・4.5：1 以上
• 大きな文字（18pt以上、または14pt以上の太字）・・・3：1 以上

1問目の作例では、コントラストが十分に確保されているため、ドロップシャドウを足す必要はありません。
むしろ、ドロップシャドウを無理に足してしまうと、文字のエッジがぼやけ、読みやすさを損ねてしまいます。
また、どことなく品のないデザインにもなってしまいます。

ドロップシャドウを使いがちな方は、元々の文字のコントラスト比を見ながら、判断してください。

「校正設定パネル」が開いたら「シミュレートするデバイス」から「Dot Gain n%」か「Gray Ganma n」を選択
（※n・・・「4」で囲われた範囲内ならどれを選んでいただいても大丈夫です）

続けて、再びメニューバーの「5．表示」をクリックし、「6．色の校正」の設定をONにします。

すると、Illustratorの画面上がグレースケール表示になります。
グレースケールで確認すれば、目立たせたい情報がしっかり目立っているかの確認ができます。
また出しゃばっている装飾にも気付けます。

グレースケール表示を終了したい場合は、もう一度「表示」＞「色の校正」の手順で解除すればOKです。


このグレースケール表示を使えば、自分のデザインを客観的に見返すことができます。
Illustratorをお使いの方は、ぜひ試してみてください。

2．背景のあしらいは、伝えたい情報の文脈に合わせる

次に2問目を振り返ります。
私が良しとした答えは「B」です。

AとBの大きな違いは、背景のあしらいが「花吹雪」なのか「紙吹雪」なのかです。

背景はあくまでも、主役となる情報を引き立てる脇役。
そのため、主役となる情報の文脈に沿って考える必要があります。

AもBもどちらも華やかな背景なのですが、作例の情報をよく見てみると「11月の開催」となっています。

11月の開催ということであれば、花吹雪を用いるのは季節的にミスマッチです。
いっぽう、紙吹雪は1年中使える、祝祭感のある演出です。

もちろん、お花が主役となるイベントであれば、花吹雪をあえて使うのはよいでしょう。
しかし、今回の作例のイベントは「ビッグなプレゼントがもらえる抽選会」であり、あくまでも作例上の情報ですが、お花が主役とは書かれていません。

背景のあしらいを考える際は、なんとなく派手だから、なんとなく良い感じだから、という思考ではなく、伝えたい情報の文脈に合っているかを考え抜くようにしましょう。

とくにイベントのチラシにおける背景デザインは、「イベント名」「日時（季節）」「会場」「出演者」のイメージに合わせることが大切です。

背景の存在感を彩度やコントラストで調整する

また、背景は、彩度・濃度・コントラストを調整することも重要です。
先ほどの「A」の作例は、彩度・濃度・コントラストも強く、背景が出しゃばってしまっていました。
背景の存在感が強くなると、目線がそちらに奪われ、伝えたい情報が伝わりづらくなってしまいます。

そのためBでは、彩度・濃度・コントラストを少し抑え、伝えたいメッセージがしっかりと目立つように配慮しました。

Illustratorの生成AIを使えば、背景画像をカンタンにつくれる

バナーの作成で意外と時間がかかるのが背景画像選び。
実はIllustratorなら、生成AIを使って簡単に背景画像を作ることができます。

ただし、生成された背景画像を使う際にはいくつか注意点があります。
まず、生成された背景画像が元のオブジェクトサイズと一致しない場合があることです。
その場合、あらかじめ背景オブジェクトを複製し、前面に配置した背景オブジェクトを選択した状態で生成しましょう。
また、生成後には色味を調整することで、より違和感のないデザインに仕上げられます。
詳しくは以下の動画をご覧ください。

Illustratorの生成再配色について詳しく見る

3．境界のドロップシャドウは、黒をそのまま使わない

さて、最後の3問目についてです。
3問目はかなり難しかったのではないでしょうか。

AとBとで、境界のあしらいが微妙に異なっていたのですが、私が選んだのは「B」です。

この2つの違いは、Webサイトのナビゲーションバーとメインビジュアルとの境界に置いたドロップシャドウのかけ方でした。

実はAとBとでは、ドロップシャドウの「色」が異なります。