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