デザイン

デザイン

PR

鮮やかな色使いでWebサイトをより印象的に!グラデーションの人気復活を裏付けるウェブサイト20選

Designmodo

Designmodo publishes web design articles, tutorials and has a great shop with the best WordPress and Bootstrap themes, plugins, UI Kits and more.

本記事は、20 Websites that Prove Gradients are Making a Comeback
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

3,901 views

読了時間 : 約4分23秒

フラットデザインの時代は、急速にとはいかないものの、徐々に終わりに向かいつつあります。その証拠に、新たに、グラデーションの人気が高まりつつあります。こうしたグラデーションは、ウェブ2.0時代以降見慣れてきたものよりも微妙なものになっています。

 

正直に言いましょう。グラデーションの時代が、再びやってきたのです!

 

ここではいろいろなグラデーションを使ったサイトの例を集めました。とても微妙なものもあれば、はっきりしたものもあります。とにかく、グラデーションはデザインにスパイスを与える新しくて面白い手段です。

 

VO2 Group

 

VO2の新しいウェブサイトは、型破りのデザインで出迎えてくれます。たくさんの要素が重なり合ったデザインです。ウェブサイトデザインの盲点を突いたデザインです!興味深く、他とは違ったデザインです。背景にある三角形の1つに、グラデーションがかかっています。シンプルな三角形を見た目的に面白くしています。

 

Melanie F – Look Book

 

MelanieのLOOK BOOKはファッションサイトなどで流行りつつある不揃いのテキストを画像の上に配置するレイアウトになっています。このサイトでは、四角形の上の最初のテキストがサイトのヘッダーになっています。四角形は緑から紫へのグラデーションがかかっており、間違いなく目に留まります。

 

Adoratorio

 

このデザイン会社は文字にグラデーションをかけるという変わった手法を使っています。とてもユニークでおしゃれな見た目です。テキストを飾るクリエイティブな手法で、うまくデザインができています。

 

Qards

 

DesignmodoのQardのランディングページにもグラデーションが使われています。ページの部分ごとに違う背景色が使われています。スクリーンショットのページは赤からのオレンジですが、ほかのページには青の濃淡や緑のグラデーションが使われています。背景の模様に対してグラデーションがサイトのデザインにユニークな感じを与えています。

 

Symodd

 

Symoddのメインであるイントロダクション部分にはオレンジからピンクのフルグラデーションの背景が使われています。2色が近い色であるためグラデーションも柔らかく、目にやさしいです。

 

Inc

 

Incもメインの部分にグラデーションを使っています。しかし先ほどの例とは違って、青から紫のグラデーションが写真にかかっています。青と紫も近い色なのでグラデーションははっきりしておらず、写真の上にかけるのに効果的です。

 

Pho

 

また別の青から紫のグラデーションです。この例は今回紹介する中でも控えめな方ですが、2色のセレクトはとてもゴージャスで、彩度は低いですがコントラストがよく、見た目がいいです!

 

Impossible Bureau

 

Impossible Bureauのページにはとてもコントラストのはっきりしたグラデーションが使われています!このページが素敵なのはページが読み込まれるとほかの要素がグラデーションの上に乗っかり、より落ち着いた見た目になることです。

 

Customeed

 

Customeedは珍しい緑のグラデーションを使っています。なぜか知りませんが、青、紫、ピンクのグラデーションはやたらと人気です。ですが、このCustomeedのウェブサイトを見る限りでは緑も全く問題なくきれいに見えます。

 

Webflow

 

Webflowは今回のリストの中では、グラデーションを目立たせていない方です。ホームページ全体にピンク、紫、青のグラデーションの小さなまだら模様が使われています。このわくわくするようなグラデーションのまだら模様があちこちにあるだけでよい雰囲気が出ています。

 

Product to Profit

 

このランディングページのグラデーションはとても明るく、軽く色あせたようにも見えます。とにかく、目に激しく飛び込んでくることのない、よいデザインです。明るい紫から明るい青へのグラデーションが写真の上にうまくかかっています。サイトにフレンドリーな雰囲気も与えています。

 

Table Hero

 

Table Heroのホームページには小さなグラデーションがちりばめられています。小さなグラデーションとは、サイトのあちこちにある小さなまだら模様のことです。小さなグラデーションは、1pxの縁取りのボタンや非常に細いフォントの見出しにも顔をのぞかせています。極端なグラデーションに走ることなくデザインに深みを与える、興味深い手法です。

 

GoGoRo

 

Gogoroのメインページはミニマルながら、目を引くデザインです。ページにあるのは大きな「GO」の文字と、スクーターの写真と、小さなテキストだけです。フォントは非常に細いですが、文字が大きいため厚みが出ています。このサイトのデザイナーは青と緑のグラデーションを文字に使っています。

 

Segment

 

Segmentのデザインは暗いトーンで、全体的に暗いグレーがよくつかわれています。しかし、デザインにスパイス、あるいは明るさを加えるために、ネオン調の明るい緑が使われています。部分部分にある緑のグラデーションが目を引き、デザインに雰囲気を与えています。

 

Mapbox

 

Mapboxのサイトに入った時のヒーローヘッダーは見事です。スライドの中には微妙にグラデーションがかかっているものもあり、デザインに深みとユニークさを与えています。

 

Pitney Bowes

 

こちらはまたはっきりとしたグラデーションの一例です。このサイトのデザインはシックで、ほぼ紫のグラデーションの上にある白いテキストがすっきりして見えます。テキストの見栄えが非常に良いです。実際のグラデーションは直線的にかかっているのですが、丸い線のおかげで円状にグラデーションがかかっているように錯覚してしまいます。なかなかおしゃれなデザインではないでしょうか。

 

Stripe

 

Stripeは最近サイトを更新して、グラデーションのあるサイトになりました!ヒーローヘッダーのスライドの中にはスクリーンショットにあるような見栄えの良いグラデーションがかかっているものがいくつかあります。暗い紺から緑へのグラデーションは色彩豊かで暗いトーンの背景として効果を発揮しています。

 

One John St

 

これはブルックリンのDUMBOの団地のランディングページです。このサイトの素晴らしいところは、グラデーションの色の深さが時間帯によって変わることです。面白くて愉快なwebサイトデザインです。

 

Wake

 

最後の例には最近流行りの青と紫のグラデーションが使われています。グラデーションはWakeのサイトのいたるところにみられ、アプリのブランドの一部になっています。

 

まとめ

 

御覧の通りグラデーションはデザインに役立ちます。グラデーションを使うとわくわくするような愉快なデザインが実現できます。要するに、いつだってグラデーションは悪いデザインではないのです。ただ、あまりに極端なものに見飽きてしまっただけなのです。極端なものもあれば、控えめなものもあります。このリストが皆さんの次のデザインに役立つことを願っております。

おすすめ新着記事

おすすめタグ