こんにちは、デザイナーの小林です。
昨日は私が住んでいる地域で光化学スモッグ注意報が発令されました。
もう10年以上同じ地域に住んでいますが、おそらく初めての経験で、この先の真夏がどうなるか心配です…。
さて、webデザインギャラリーなどで紹介されているwebサイトを見ていて、ふと心惹かれるものがありました。それは美しいグラデーションです。
グラデーションと言っても幅がありすぎるのですが、中でも複数の色（色相）を組み合わせたグラデーションが非常に美しく感じられました。
なかなか説明しづらいので、実際にいくつかご紹介させて頂きます。
美しいグラデーションを使ったwebサイト
メインビジュアルに限って言うと、背景の写真もとても綺麗なのですが、このタイトルとボタンの、水色→紫のグラデーションが美しいです。あたかも背景写真の陽の光が届いているかのような雰囲気を醸し出しているような気がします。
このTOPページ下部にも、エメラルドグリーン→黄緑の美しいグラデーションが使われています。
さらにBlogページのヘッダーも薄いグレー→薄い青みがかったグレーという繊細なグラデーションが使われています。
このサイト自体はフラット＆レスポンシブデザインでとてもシンプルですが、このグラデーションのおかげ（？）で印象深く残っています。
夕焼けを表したようなやや青みがかった赤→オレンジのグラデーションが美しいです…。
他ページも基本同じ暖色ですが、若干色みを変えたグラデーションを使っています。
まさにグラデーションありきのデザインといえるのではないでしょうか。
http://storyline.flasherland.com/
ボケが使われていますが、まるでオーロラ（見たことないけど）を彷彿とさせるようなくすんだシアン→くすんだ群青のグラデーションです。（表現が下手でスイマセン）間にもう1色入っているかも？
ちなみにこのサイトはヘッダーから背景を変更することができます。
http://www.winshape.org/camps/
これまでのサイトと違い、グラデーションが虹のように変わっていきます。まさに「The summer of a lifetime」のタイトルに相応しい、心情に訴えるような効果を生み出しているように思います。
こんな見せ方もあるんですね～。
ページ下部ではマウスオンによって異なるカラーのグラデーションが出てきます。こういったさりげない工夫がよりサイトの完成度をあげています。
http://delabanda.com/index.html#delabanda
これまた動画を背景にして赤→エメラルドグリーンのグラデーションが絶妙な使われ方をしていますね。このグラデーションを活かしたタイトルの見せ方も参考になります。
話は変わりますが、独特な世界観なのでBGMとかあったらより良かったんじゃないかと思いました。
さらに特筆すべきはこのページ下部なのですが、一連の写真が同じカラーでグラデーションがかかっています。これによって全体としてのまとまりがありますね。
青→紫のグラデーションでスクリーン効果を出しています。どちらか一色を使った単色でも大きな問題はなさそうですが、やはりフラットデザインが増えてベタ塗りの海外サイトが多い中、こうした少しの工夫が効くんじゃないかと思います。
http://brightmedia.pl/?lang=en&site=intro
こちらのサイトは、この斜めのシェイプに様々なカラーのグラデーションが使用されています。宇宙の星雲を思い浮かべさせますね。抜群にクールです！
日本のデザインでは見かけない！？
国内のサイトでもあるだろうと思っていたのですが、いざ探してみると、ない…！？
単色系のグラデーションはいくらでもあるのですが、これまで紹介したようなグラデーションを使っているサイトを僕は見つけることができませんでした。
アプリのUIや、デザイン会社やアニメ系のサイトとかにありそうなのですが…。もし素敵な国内サイトがあったら教えて下さい！
サイトではありませんが、バナーを撮ってありました。
だいぶ前のものではありますが、JAYPEGさんのビジュアルに使われていたものです。
控えめなレインボカラーのグラデーションがキレイです！
その他、海外ものではありますが、
このようなネイビー→ピンクといったグラデーションもありました。なんだか映画の1シーンみたいでおしゃれではないでしょうか？
まとめ
このようなグラデーションが使用されているサイトをいくつか見てみると、基本的には白や黒ベースでシンプルなサイトが多いです。なのでデザインのスパイスとして使用するのが良いかと思います。
ただ、キレイだからといって闇雲に使用してはあまり効果は得られないでしょう。ちゃんと、なぜ使用したか説明ができるようにすることが大前提です。
“そもそもデザインにおいてのグラデーションとは…”
この件に関しては↓のブログで詳しく書かれています。
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した（webcre8より）
また色の選択が難しいと思うのですが、空などの自然の色を参考にしてみると良いかもしれません。
↓こちらのサイトではいろんな空模様を詳しく色別しています。すごいですね。
http://kanayalights.com/
その他参考になるサイトをキャプチャーしてカラーピックするなども大変有効でしょう。
（おそらく）まだあまり国内サイトでは見かけないテクニックなので今後増えるかもしれませんね。
