今回は、現在のデジタルデザインのトレンドを解剖します。 調査結果の詳細は、書籍「NOW」でご確認ください。 546>

グラデーションはここしばらく流行しており、当初は背景や画像で従来の方法で復活しました。 Spotify は、キャンペーンやマイクロサイトでブランドの特徴的な要素として、写真にデュオ トーン グラデーションを適用することにより、再び人気を取り戻しました。 photoshop でデュオ トーン グラデーションを作成する方法については、こちらで少しチュートリアルをご覧ください。

今年も、色彩豊かで鮮やかなグラデーション、ぼかしや歪みの効果がある不定形のグラデーションをいろいろと目にしました。 グラデーションは現在さまざまな方法で使用されていますが、トレンドという点で最も特徴的なのは、その使用がホバー、タイトル、3D要素、アイコンなどのコンポジション内の二次要素に拡張されていることです。

• 

2018年のトレンドのパラダイムはiPhone Xが表しています。 そのランディングページ、広告、およびプロモーションキャンペーンの多くの要素では、タイトル、テキスト、あるいはアイソタイプの上に、さまざまなトーンのグラデーションが使用されています。 しかし、背景や特にiPhone Xのホーム画面上のデザインでは、従来の線形グラデーションや放射状グラデーションのように均一ではなく、不規則なブレンドで多色化されている。

Gradients in 3D? 頂点カラーとカラーマップ スタイル

シーンの照明がオブジェクトの表面に光のグラデーションを生成するので、3D でグラデーションについて語るのは当然のように思えますが、このトレンドの本質は、まさにオブジェクトの質感としてグラデーションを使用し、時には頂点カラーとカラーマップ グラデーション手法を模倣していることです。

Types of Gradients

私たちは複数の方法で色をブレンドできますが、半径、方向、不透明度、カラー ポイントなどの異なるパラメーターを持つ線形または放射状のグラデーションが最も一般的な方法です。 iPhoneX のケースに見られるように、今トレンドなのは、グラデーション メッシュやその他の技術を使用した非一様なブレンドの使用です。 グラデーションメッシュでは、グラデーションの表面を歪めて自由な形状を生成しています。 次の図に示すように、モノトーン、デュオトーン、マルチカラー、グラデーション ランプなど、多くの種類のグラデーションがあります。

CSS グラデーションの便利なツール

CSS でこれらの効果を再現するには、ここに示すように、CSS コードをコピーして貼り付けるだけで、視覚エディタを使用して作成できるツールが多数用意されています。 Webgradients、Khroma AI、Color Space、UI Gradients、Grabient、Coolhue、Easing Gradients in CSS などです。

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool（色合い Hue

  

• イージンググラデーション

  

• UI グラデーション

  

グラデーションソースファイルダウンロード中!

グラデーションのソース ファイルをベクター形式の .ai または pdf で無料でダウンロードし、ポスターのグラデーションを使って独自のデザイン実験を行ってください。

ダウンロードはこちら

Awwwards Gradients Collection

いつものように、SOTD やノミネートの中から、これらの効果が使われているところを見ることができるよう、セレクションしました。 Awwwards Collectionsや、今年の主なウェブデザイントレンドを論じた書籍『NOW. A Contemporary Landscape for Digital Thinkers』から、インスピレーションを得ることができれば幸いです。

• 
• WebGL 3Dモデル In WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage In Parallax