海外サイト BuninUX で公開された How to Design Sexy Gradients より許可をもらい、翻訳転載しています。
グラデーションは、もはやレトロ系の90年代トレンドというわけでなく、あらゆるウェブのUIデザインで人気となっています。
背景デザインやボタン、トグル、カード、さらには影シャドウなどあらゆる要素に採用されており、多くのウェブサイトやDribbble、Behanceなどでもよく見かけます。
グラデーションとは、ナチュラルで調和のとれた美しいなめらかな色の変化のことで、さまざまな使い方があります。
繊細で控えめな色の組み合わせから、ダイナミックでポップな色使いまで、多様性があるため、デザインやブランドの雰囲気を伝えるのにも、グラデーションは使用できます。
この記事では、現役デザイナーが実践しているグラデーションをより魅力的にするヒントと秘訣をご紹介します。
適切なインスピレーションを見つけよう
まず、グラデーションの参考となるインスピレーションを探してみましょう。
グラデーションの最高のインスピレーションは、自然です。時間かけて観察することからはじめてみます。風景や環境、植物などの写真から、デザインプロジェクトに合ったものを探しましょう。
カラーパレットを作成しよう
カラーピッカーをつかい、雰囲気になった色を探します。参考としたい写真や絵などから、2〜3色の色合いを抽出して、カラーパレットを作ります。
最初は、少ない色数から始めるのがよいでしょう。RGBカラーは、赤と緑、青の3色で構成されているため、混ぜ方によってどんな色のグラデーションでも作ることができます。
RGBの値は、0〜255までの数値からなっており、やわらかい印象のグラデーションを作成するには、50〜150の値の範囲でパレットを作成するのがオススメです。
カラーパレットの色をブレンドしよう
選択したカラーパレットの上に、CSSのfilter
プロパティを活用し、ぼかしを加え、スムーズな色の移行を表現しましょう。
次に、新規レイヤーを作成し、ぼたかしたパスをつかってグラデーションを再現します。
放射状グラデーションで奥行き感を与えよう
放射状グラデーションは、直線的ではない光を表現でき、光源の方向も設定することで、さらにグラデーションの見栄えをよくできます。
目的のあるグラデーションの向きを考えよう
グラデーションの向きを考えることで、たとえば光源を発行させることで特定の要素を強調、濃い色の部分に配置することで文字テキストを読みやすくしたり、なめらかなグラデーションによって、ユーザーを目的のUIデザインまで自然と誘導できます。
ノイズを加えて印象的に
さらにグラデーションの上にザラザラとしたノイズを追加することで、レトロでヴィンテージな見た目を演出できます。CSSをつかったノイズの追加方法はこちらより。(※ ノイズ画像の透明度は、通常0.1〜0.5%程度で十分です。)
抽象的な図形と組み合わせよう
グラデーションをより魅力的にするには、半透明で抽象的な図形シェイプを組み合わせてみましょう。Figmaなどのデザインツールであれば、「マスク」機能を活用して、グラデーションレイヤーに重ねるように、ぼんやりとした図形や波型シェイプなどを追加すると良いでしょう。
グラデーションの基本ルールや、Illustratorでの実践デザインテクニックも一緒にいかがしょう。グラデーションについてより詳しく理解できますよ。
美しいCSSグラデーションを作成できるツールはこちらから。
‘
そのまま利用できるグラデーションテクスチャも、無料ダウンロードできますよ。