このデザインのあしらい、どっちが正解？装飾のセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
こんにちは！デザイナーのやんこです。
今回、私は「デザインのあしらい（装飾）」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「あしらい」がよいと感じますか？
1問目「文字のあしらい」（難易度★）
明け方の写真の雰囲気には、以下のどちらのテキストの雰囲気が合うでしょうか？
2問目「背景のあしらい」（難易度★★）
抽選会のバナーには、以下のどちらの背景が合うでしょうか？
3問目「ナビゲーションバーとメインビジュアルの境界のあしらい」（難易度★★★）
白いナビゲーションバーと海のメインビジュアルとの境界、どちらが美しいでしょうか？
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：B
以上が私なりの解答です。
3問目はかなり難しかったかもしれません。
ではここからは、各クイズの問題について解説していきます。
それぞれの作例のAと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問目の作例では、コントラストが十分に確保されているため、ドロップシャドウを足す必要はありません。
むしろ、ドロップシャドウを無理に足してしまうと、文字のエッジがぼやけ、読みやすさを損ねてしまいます。
また、どことなく品のないデザインにもなってしまいます。
ドロップシャドウを使いがちな方は、元々の文字のコントラスト比を見ながら、判断してください。
色の抽出方法とコントラスト比の出し方
1．色の抽出方法
コントラスト比を測るためには隣接する色を抽出しなくてはいけません。
テキストの色は、塗りの色を確認すればわかりますが、背景が画像の場合、色を抽出して確認する必要があります。
ここでは私が普段使っている、シンプルな確認法をご紹介します。
- まず、長方形ツールで四角を描きます
（四角でなくても、オブジェクトであればどんな形でもOKです） - 「ツール」のパネルから「スポイトツール」を起動し「Shift」キーをクリックしながら抽出して色を拾います
- 「1」でつくった四角のオブジェクト内に色が反映されるため、文字とのコントラスト比を目視で確認しやすくなります。
2．視認性の確認方法
デザインの視認性チェックは「コントラスト比」で確認したり、デザインそのものを「グレースケール表示」することでも確認できます。
「方法1」「Adobe Color」のコントラストチェッカーで確認する
Web上で無料で使える「Adobe Color」というツールを使えば、コントラスト比を確認できます。
- カラーパレットジェネレーターを開き「1．アクセシビリティツール」を選択
- デザインで使っている「2．テキストカラー（文字色）」と「3．背景色」をカラーコードで入力
- コントラスト比が数値として表示
「方法2」「Illustrator」の作業画面を「グレースケール表示」にして確認する
また Illustratorを使っている場合、作業画面を一次的に「グレースケール表示」にすることで、コントラスト比を確認できます。
- Illustratorのメニューバーの「1．表示」をクリック
- 「2．校正設定」を選択し、「3．カスタム」をクリック
「校正設定パネル」が開いたら「シミュレートするデバイス」から「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を使って簡単に背景画像を作ることができます。
ただし、生成された背景画像を使う際にはいくつか注意点があります。
まず、生成された背景画像が元のオブジェクトサイズと一致しない場合があることです。
その場合、あらかじめ背景オブジェクトを複製し、前面に配置した背景オブジェクトを選択した状態で生成しましょう。
また、生成後には色味を調整することで、より違和感のないデザインに仕上げられます。
詳しくは以下の動画をご覧ください。
3．境界のドロップシャドウは、黒をそのまま使わない
さて、最後の3問目についてです。
3問目はかなり難しかったのではないでしょうか。
AとBとで、境界のあしらいが微妙に異なっていたのですが、私が選んだのは「B」です。
この2つの違いは、Webサイトのナビゲーションバーとメインビジュアルとの境界に置いたドロップシャドウのかけ方でした。
実はAとBとでは、ドロップシャドウの「色」が異なります。
Webデザインに自然な立体感を付与するドロップシャドウ
この作例のように、Webデザインでは、ナビゲーションバーとメインビジュアルとの境界にドロップシャドウをかけるケースはよくあります。
シャドウを加えることで、ナビゲーションバーがメインビジュアルより手前に浮いて見え、ユーザーがナビゲーションに目を向けやすくなります。
また、写真をそのまま配置するとパキッとしたデザインになってしまいますが、シャドウを加えることで、自然な境界となり、奥行き感も演出できます。
実はプロがつくるWebサイトのデザインでは、こういった工夫が細やかに施されているのです。
ただし、シャドウはただ加えればよいというものではありません。
作例の「B」では、細かな設定が加えられています。
メインビジュアルに使われている環境色を使って、ドロップシャドウをつくる
今回の作例では、メインビジュアルに使われている環境色を用いて、ドロップシャドウを施しました。
ドロップシャドウを施そうとすると、初期設定では「#000000」という純粋な黒色になっています。
そのまま使うと、以下のAの作例のように、白い帯の縁に灰色の縁取りが出てしまいます。
そこで、以下のBの作例のように、メインビジュアルの中に存在している環境色を使います。
今回はまず、ドロップシャドウに使いやすそうな海の色が濃い箇所（岩場の下部）にスポイトツールを当て「#3b7389」という色を抽出しました。
その後、抽出した色の彩度と明度を少し落とし、不透明度を調整したうえでドロップシャドウをつくっています。
（今回の作例では、不透明度を20％と高めに設定していますが、普段は10〜15%程度に設定しています）
また、ドロップシャドウを割り当てたあとは、表示サイズを拡大・縮小などして、不自然に色が浮いていないかを確認しましょう。
Webサイトのナビゲーションバーとメインビジュアルの境界でドロップシャドウを使う場合は、メインビジュアルと色相を馴染ませることを意識してください。
影の色は「黒」だけではない
Illustratorでかけられるドロップシャドウは、初期設定では濃い目の黒色となっています。
しかし現実の影は、下のグラスの写真のように、光源の色・背景・素材の透過や反射が混ざり合い、さまざまな色を帯びています。
影の色は「黒」だけではないことを知っておきましょう。
「豆知識」印刷時のドロップシャドウの設定には気をつける
先ほどドロップシャドウについて解説した流れで、Illustratorで作ったデータを印刷する際に知っておきたいドロップシャドウの設定について解説しておきます。
画面で見ていると問題ないのに、印刷するとドロップシャドウがガビガビになってしまった……それは「ドキュメントのラスタライズ効果設定」ができていないことが原因です。
Illustratorのデータを印刷する際、ドキュメントのラスタライズ効果が設定できていないと、ドロップシャドウをはじめとする特殊効果が「ピクセル化」してしまい、粗く表示・印刷されてしまいます。
そのため、印刷を想定する作業の際は、あらかじめ以下のように設定しておきましょう。
- Illustratorのメニューバーの「効果」＞「ドキュメントのラスタライズ効果設定」を選択
- ドロップシャドウが粗い時には「解像度」が「スクリーン設定（72ppi）」となっているはずなので「高解像度（300ppi）」に変更
設定を変更できたら、ドロップシャドウの密度が高くなり、印刷しても以下のように美しいシャドウを表現できます。
ひとつのドキュメントに対して一度この設定をすれば、その後追加するドロップシャドウのたびに設定する必要はありません。
まとめ：あしらい（装飾）のセンスを上げるポイント
今回はデザインのあしらいに関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．コントラスト比が十分な文字には、ドロップシャドウは使わない
- 文字と背景とのコントラスト比が十分なら、ドロップシャドウは不要
- ドロップシャドウを無理に足してしまうと、文字のエッジがぼやけ、読みやすさを損ねてしまうほか、品のないデザインにもなってしまう
2. 背景のあしらいは、伝えたい情報の文脈に合わせる
- 背景はあくまでも、主役となる情報を引き立てる脇役
- 背景の存在感を弱めるために、彩度・濃度・コントラストを調整する
3．境界のドロップシャドウは、黒をそのまま使わない
- Webデザインにおけるドロップシャドウはメインビジュアルに存在している環境色をベースに設定する
- Illustratorを用いて印刷用データをつくる際は、ドロップシャドウの設定に気を付ける
デザインのあしらい（装飾）は、ただ派手にすればよいというものではなく、情報の文脈や可読性を考慮した繊細な判断が求められます。
ぜひ今回のノウハウを参考に、「必要なあしらい」とは何かについて考えてみてください。
お相手はデザイナーのやんこでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。クイズの答えはひとつの参考としてください。
執筆：やんこ
フリーランスのWeb・DTPデザイナー兼、講師。
遅咲き業界挑戦者や転職者、さらに「母」という立場の方々を支援するため、ひろしまクリエイターズギルドの運営にも携わっている。2024年からはAdobe Community Expertとしても活動。