Generatorなど便利なツールがありますので、WEBデザインにグラデーション簡単に取り入れられるようになりました。今回はグラデーションを使用したオシャレなサイトをピックアップしてみました。イグニション・ポイント株式会社オレンジがキーカラーとなっていて、コンタクトボタンやSERVICE情報など強調させたい部分にグラデーションが使用されています。MOREWORKSファーストビューの動画を半透明グラデーションのカバーがオーバーレイしています。この様に動画やイメージに半透明グラデーションをオーバーレイさせる見せ方も最近よく見る様になりました。FORHオープニングでピンクのグラデーションが画面に広がり、その後、アニメーションしながら移動していきます。イメージやタイトルのアニメーションにもグラデーションのボックスが使用されています。Sansan「資料ダウンロード」ボタン回りのユーザーに印象的に見せたい部分にグラデーションを使用していて、自然とそこに目がいくようになってます。2017ロゴマークやキャッチコピーにグラデーションが使用されていますが、背景で3Dに回転するパーティクルもグラデーションがかかっています。andMadeスクロールしていくと「andMadeとは」の背景がグラデーションになっています。「PICKUP」のサムネイルにマウスオーバーすると半透明のグラデーションがオーバーレイします。SEKAIまず目に入る「NEW」のボタン。スクロールしていくと、数種類の異なったグラデーションのボックスがパララックスで上に移動していきます。こちらも記事のサムネイルにマウスオーバーで半透明のグラデーションがオーバーレイします。システムサービスを提供する株式会社レゴリスのコーポレートサイト。こちらでは主にボタンにグラデーションが使用されています。採用情報グラーデーションがかかったタイトル文字がサイトで使用されていますが、よく見ていると文字のグラデーションがだんだん変わってくアニメーションになっています。Stitch.Co.,Ltdファーストビューにたくさんのグラデーションがかかった半円が回っています。ものすごいインパクト。全体的に「円」をモチーフにしたデザインとなっていてアイデアが面白いです。CARDピンクからブルーのグラデーションがサイトのタイトルやボタンに使用されていて、とてもスタイリッシュなデザインです。スクロールしていくと、背景イメージにデュオトーンでグラデーションのカバーが重なっているのですが、こちらも前田製作所のサイトのようにグラデーションが変化するアニメーションをしています。デザイン】おしゃれなデザインのサイトまとめ!のまとめ2018.07.04まとめボタンや画像のオーバーレイなどに使用すると印象が変わり、ユーザーの目を引くことができるので、サイトのデザイントーンと合うのであればグラデーションを使ってみるのもいいかと思います。CARD」のグラデーションをアニメーションで変化させているのが印象的でした。今度、実装編の記事を書いて見たいと思います。Day.GALLERYINSPIRATIONCONTACTTGIC。