【実践テクニック＃6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点

デザイン2022.4.22

最終更新日：2022.4.23 Update!!

今回の実践テクニックですが、グラデーションマスクや光彩の効果といった、淡くぼやけた見た目を表現するデザイン手法を扱うときに注意すべきポイントをまとめてみました。個人的にはスマホがまだ普及していない一昔前のPC用のサイトがメインだった時代に見かけることも多く、私自身もよく作成していたような記憶がありますが、モバイルサイトが重要視されるようになってからはどちらかというとフラットで視認性がクリアなデザインが増えてきている印象があります。デザイン手法自体も取り扱う際には少し注意が必要になると思いますので、一度ポイントになる箇所を押さえていきます。今すぐ使える実践テクニックの過去記事についてはこちらもぜひご覧ください。（過去記事）【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる【実践テクニック＃4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する【実践テクニック＃5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる

グラデーションマスクや光彩の効果がデザインテーマにマッチしているか？

グラデーションマスクや光彩効果は写真とテキストを合わせる際にテキストの視認性を確保するため、文字の境界に入れたり、背面部分に敷いたりされます。ただし使い方によっては視認性が下がったりすることもあるので、モバイルデザインとの相性は気をつけないといけません。まだスマートフォンが普及する以前のPC用のサイトがメインの頃には、サイトデザインやバナー制作においてこういった手法をよく使っていたような記憶もあり、個人的にはあまり多用すると一昔前のデザインっぽくなる印象を受けますね。グラデーションマスクや光彩効果はその見た目の印象から、「淡い」「ソフトな」「柔らかな」「神秘的な」といったイメージや、影や光でぼやかしたような雰囲気を与えるのに効果的ですが、そもそも作成するデザインのテーマがこういったものに反する場合にはデザインのアプローチとして採用すべきではないと言えます。ただし、上記のイメージを与えたいときにはとても便利で、例えば光をイメージした明るい色味であれば「エステ・美容系」「スピリチュアル・ヒーリング系」といった業種や「女性らしさ」の表現だったり、逆に影のように暗い色味であれば「高級感」や「重厚感」「男性らしさ」のイメージにマッチします。

上記のサンプルのようにグラデーションマスクや光彩効果を使う際には、書体や配色なども全体のデザインテーマに合わせたものでまとめておきたいですね。近年のサイトデザインはどちらかというとメリハリがある傾向があるため、一般的な企業イメージなどに合わせようとすると、ちょっと違和感を感じやすくなってしまいますので、フラットな感じでくっきりとした主張のあるデザインに合わせた方が良さそうですね。（グラデーションマスクと光彩効果をデザインに使った例）

（ベタ塗りの矩形を背景にしたものと境界線とソリッドシャドウを使った例）

グラデーションマスクの境界幅は大きくとって自然に見せる

グラデーションマスクは、徐々に透明になっていくような変化ですが、狭い領域で急激な変化をつけてしまうと、中途半端に途切れたよう見た目になってしまいます。そのため自然に変化が感じられるように緩やか且つ広めの領域で変化させていくことが綺麗に見せるポイントになります。（狭い領域で急激なグラデーションの変化があることで違和感を感じる）

（広い領域を使ってグラデーションをつけることにより自然に見える）

光彩の効果は強くかけすぎないようにする

経験が浅い頃にやってしまいがちなのですが、光彩効果に限らず不必要に強すぎるエフェクトは不自然さが目立ってしまいます。意図的にはっきりと見えるようにする場合もありますが、できるだけ微小な効果で留めておくことがポイントです。イメージでいうとぼんやりと輝く発光体のような感じで、淡く弱い光が伸びているような程度で適用させるようにしておきます。（光彩効果を強くかけすぎてしまった例）

（光彩効果は視認性などを意識せずに自然に見えるくらいに控えておくことがポイント）

色の強さもそうですが、グラデーションのサイズや長さもできるだけ大きく長くなるよう、しっかりとぼかしておきましょう。全体的にぼんやりとした柔らかさを表現するようなイメージですね。ただしこちらのリンク先（Photoshopでテキストやパスをネオンサイン風にデザインする）のように光彩効果自体をデザイン表現のメインに持ってきたい場合にはしっかりと認識できるくらい入れておきます。

光彩の色味は白や黒などの無彩色ではなく背景に合わせた色で明度を調整したものにする

光彩効果はその名の通り、光が輝くような効果やシャドウを連想させるため、ついつい白色や黒色などの無彩色を入れてしまいそうになりますが、そうした場合に、何らかの背景がある場合にどうしても違和感が生まれてしまいます。背景とのミスマッチが起こることで不自然に見えますよね。（無彩色のシャドウを光彩効果に適用した例）

（背景にも使われているピンクを光彩効果の色味に使うことで自然に見える）

そこで、光彩効果に使う色味は、背景色から抽出したものを採用し、状況に合わせて明度をコントロールして出来るだけ背景に馴染むようにすると自然に見せることができます。下記では、背景と異なる色味と背景から抽出した色味をベースにしたものの比較です。自然に見せたいときにはこちらの方が良いアプローチになりますね。

光彩の効果をスクリーンもしくは覆い焼きカラーの描画モードで馴染ませる

さらに効果を目立たせたくない場合には光彩効果自体の描画モードを調整することで、より背景に馴染ませていきます。通常の描画モードであればどうしても背景から浮いて見えてしまいますので、明るい色味には「スクリーン」や「オーバーレイ」で、暗い色味では「乗算」や「焼き込み」で背景と馴染ませるようにしていきます。下記のサンプルは先ほどの光彩の色味を背景色に合わせたものの描画モードをそれぞれ変えているものになります。（描画モードをスクリーンにして明るく馴染ませる）