最近見つけたグラデーションがきれいなwebサイト10

フラットな色遣いに少しグラデーションを加えたような立体感のあるイラスト、UIが最近のトレンドとなっているようで、私もきれいなグラデーションが使われれているものによく目を惹かれます。

今回の記事では、様々な分野からグラデーションがメインに使われているサイトを集めました。


Qards

WordPressプラグインのLP。
メインビジュアルが細かく作り込まれていて、これから使ってみようとする人がわくわくしそうな印象です。
https://designmodo.com/qards/

https://designmodo.com/qards/


Stripe

オンライン決済サービスのWebサイト。
たくさん色が使用されていますが、青の補色系である紫やピンクなどは彩度が低めで青みがかっているため全体として統一感があります。デザインされたシンボルや、動くアイコンもかわいいです。
https://stripe.com/jp

https://stripe.com/jp


Algolia

サイト内検索サービスのLP。
全体的に紫系で統一されていて、深紫色がベージに深みを与えています。検索バーの角丸長方形を発展させた背景やボタンなどのデザイン要素が素敵です。
https://www.algolia.com/

https://www.algolia.com/


Ethworks

ポーランドのブロックチェーンサービス制作チームのポートフォリオサイト。
蛍光ペンのような明るい透明感のある水色が信頼感のあるイメージを作っています。長方形を巧みに使った奥行きのあるデザインも目を惹きます。
http://ethworks.io/

http://ethworks.io/


Supernova Studio

モバイルアプリ制作ツールのLP。
グレーのグラデーションの重なりがプロフェッショナル感を出していて、更に目線の動きを上手く誘導しています。
https://www.supernova.studio/

https://www.supernova.studio/


Investment Calculator

投資に関するtipsを提供しているWebサイト。
濃い青~紫をベースとしたグラデーション背景と明るい色の水面のような曲線の境界線から優雅さを感じます。ふわふわと動く背景のパターンも緩やかな動きでサイトの印象にマッチしています。
https://investmentcalculator.io/

https://investmentcalculator.io/


Angle 2: 500 Devices & Mockups for Sketch

Sketch用デバイスモップアップ素材販売のLP。
インパクトのある青~紫~赤野グラデーションはお得感があり購買意欲をそそります。またポリゴン風の背景イラストがページ全体にリズムを作っています。
https://designcode.io/angle

https://designcode.io/angle


Khroma

好みに合ったカラーパレットを自動生成してくれるツールのLP。
彩度がキツめのビビッドカラーの組み合わせのグラデーションを小さい面積に使用することでアクセントとしています。ボタンとロゴ部分の動くグラデーションがAI感を出していて面白いと思いました。
http://khroma.co/

http://khroma.co/


30 Seconds of CSS

CSS小技集のドキュメントサイト。
全体的に青~紫系でまとめられていて、明度の高い緑味の黄色が紫に映えてPOPな印象を与えるアクセントになっています。また左のサイドメニューの紺色は全体を引き締める役割を果たしています。
https://atomiks.github.io/30-seconds-of-css/#box-sizing-reset

https://atomiks.github.io/30-seconds-of-css/#box-sizing-reset


Caramella

ブログテンプレートサービスのLP。
ボカシの入ったグラデーションの背景が、全面のコンテンツを引き立てつつ、全体的な印象を調和させています。
https://caramel.la/

https://caramel.la/


まとめ

グラデーションを使うと華やかになり目を引きますが、色の数が増えるので統一感を出すのが難しくなります。ですが上記のどのサイトもバランスが取れていてそれぞれのコンテンツが引き立っていると感じました。参考になります。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA