海外デザインブログDesignmodoで公開された「20 Websites that Prove Gradients are Making a Comback」より許可をもらい、日本語抄訳しています。

 

 

フラットデザインの時代が終わりを迎えています。すべて一緒になくなるわけではないですが、すこしずつ始まっているようです。もっとも大きな証拠として、グラデーションを使った新しいデザイントレンドが生まれています。Web2.0時代よりも、ウェブサイトに淡い繊細なグラデーションを採用しています。

 

本音を言うと、またグラデーションが人気だなんて！、という気持ちですが。

 

 

今回は、グラデーションを有効的に利用した、ウェブサイトデザイン20種類をまとめています。とても繊細なグラデーションから、ポップで鮮やかなデザインまで揃い、あなたのデザインプロジェクトを面白く、魅力的に仕上げる新しい方法が揃っています。

 

 

 

詳細は以下から。

 

 

 

美しいグラデーションを使った、参考にしたいWebサイトデザイン20個まとめ

 

Melanie F – Look Book

 

ファッション系サイト人気が沸騰しているレイアウトで、文字テキストを揃えずに、イメージ画像の上に配置しています。ヘッダー部分に配置された長方形は、みどり色とむらさき色のグラデーションで塗りつぶされており、その上に見出しテキストを表示することで、ユーザーの注目を集めます。

 

 

 

Adoratorio

 

文字テキストにグラデーションを活用したウェブサイトで、アニメーション付きのユニークで、素敵なデザインに仕上げています。文字テキストをスタイリングすることで、よりクリエイティブなデザインを実現することができます。

 

 

 

Qards

 

Designmodoが公開している、WordPress用プラグインQardsのランディングページにも、複数のグラデーションが利用されています。セクションごとにオレンジ色や、青色、みどり色のグラデーションを使用しており、背景イメージに活用することで、よりユニークな印象を与えます。

 

 

 

Symodd

 

オレンジ色とピンク色のグラデーションカラーを、ヒーローイメージに採用した参考例。淡いグラデーションカラーは、色相があまり異ならないことで、文字も読みやすく工夫されています。

 

 

 

Inc

 

こちらもヘッダー部分にグラデーションを利用しているウェブサイトで、イメージ写真の上に青色とむらさき色のグラデーションを採用しています。ほぼ同じ色相カラーを利用することで、うまくイメージ写真の上に配置することができています。

 

 

 

Pho

 

青色とむらさき色のグラデーションを利用したもうひとつの参考サイトで、今回のコレクションの中でも控えめな色使いが特長です。彩度の低い色使いですが、うまくコントラストを描くことで、何度も見たくなるデザインを実現しています。

 

 

 

Impossible Bureau

 

こちらのサイトでは、とても鮮やかで、コントラストの強いグラデーションを利用しています。素敵なポイントとして、ページの読み込みが終わると、ふわりと文字テキストやロゴが現れ、フルスクリーン型のナビメニューが表示されます。

 

 

 

Customeed

 

なぜか青やむらさき、ピンク色のグラデーションが人気ですが、あまり使われることのない、みどり色のグラデーションを活用したサイト。魅力的な見た目で、参考サイトともうまくマッチしています。

 

 

 

Webflow

 

今回紹介するリストに比べ、グラデーションをあまりはっきり利用していません。ピンク色からむらさき色に変わり、青色に変化する色使いを、一部のセクションにのみ利用したコンビネーション。

 

 

Product to Profit

 

こちらのランディングページでは、明るいグラデーションカラーが採用されており、洗いざらしの質感（英: Washed Out）を表現しています。イメージ写真に重ねたグラデーションは見事にマッチしており、フレンドリーな雰囲気をサイトに演出しています。

 

 

 

TableHero

 

ウェブサイトのあらゆる場所にグラデーションを採用した具体例。1pxの枠線で描かれたボタンや、細字フォントに組み合わせることで、奥行き感とデザインの多様性を演出することができる、興味深いテクニックのひとつ。派手なグラデーションを使わずに、効果的にデザインを見せたいときにどうぞ。

 

 

 

GoGoRo

 

ミニマルスタイルでまとめられていますが、確実に注目をあつめることができています。余白スペースを十分に、巨大な「GO」というキーワードに、スクーターの写真と、小さな文字テキストがあるだけです。キーワードは細字スタイルですが、青色とみどり色のグラデーションをフォント色に活用しています。

 

 

 

Segment

 

こちらのサイトはダーク系テーマで、通常すべてのセクションが濃灰色が採用されています。しかし、特定のセクションの背景に、みどり色のグラデーションを利用することで、注目を集めやすく、才能あふれるデザインに仕上げています。

 

 

 

Mapbox

 

ヘッダーデザインにイメージスライダーを採用したウェブサイトで、背景にグラデーションカラーを使うことで、奥行き感を演出するだけでなく、ブランドのデザイン性を定義しています。

 

 

 

Gradients, Motherfucker

 

iOS7で採用されていた、すべてのグラデーションカラーを面白く表現した参考サイト。ページをスクロールすることで、ピンクや青、みどり、オレンジ色など虹のようなグラデーションを楽しむことができます。

 

 

 

Pitney Bowes

 

むらさき色を基調としたグラデーションカラーを背景イメージに活用することで、白の文字テキストがくっきりと表示されています。また、円形サークル型パターンを重ねることで、ページをスクロールすることで、目の錯覚のような効果を演出しています。

 

 

 

Stripe

 

最近アップデートされたばかりのサイトで、こちらでもグラデーションが活用されています。他のサイトと異なるポイントとして、濃い紺色とみどり色のグラデーションが、より高級感のある色合いに仕上がり、背景デザインとしてばっちりです。

 

 

 

One John St.

 

ニューヨークにあるアパートメントの案内用ランディングページ。素晴らしいポイントとして、このウェブサイトにアクセスする時間帯によって、グラデーションの色が変更されるという点です。より興味深く、ユーザーを楽しくさせる特長を、ウェブサイトに導入することができます。

 

 

 

Wake

 

そして最後は、いまもっとも人気となっている、青色とむらさき色をつかったグラデーションカラーです。すべてのページにグラデーションが使われ、モバイルアプリのブランディングとしても役立っています。

 

 

 

さいごに、、。

 

いかがでしたでしょうか。グラデーションを利用することで、ユニークなデザインを仕上がることができます。あまり激しい色使いになることだけ避ければ、グラデーションは有効的なデザインツールとなるでしょう。今後のデザインプロジェクトに活用してみてはいかがでしょう。

 

 

ウェブサイトにグラデーションカラーを導入する方法は、以下のサイトで詳しく紹介されています。こちらも合わせてどうぞ。

 

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ – Webcreatorbox

ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル – NxWorld

 

 

参照元リンク : 20 Websites that Prove Gradients are Making a Comeback – Designmodo