WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

参考にしたい!グラデーションを使ったwebサイト5選!

   

最近はグラデーションを使ったデザインのwebサイトをよく目にします。色鮮やかなグラデーションを使ったサイトは、見ているだけでとても綺麗ですし、写真に重ねたり大きい文字にグラデーションをかけたりと様々な要素で使われています。

現在、私が手がけているサイトのデザインもグラデーションを使ってデザインしているのですが、グラデーションを使うだけで、デザインも今どきな感じに見えたりする気がします。…が、使いどころが難しくてグラデーションだらけになってしまったり。
実際に自分でデザインしてみると、とてもむずかしいです。

そこで!今回はグラデーションを使った参考にしたい!カッコいいサイトを5つご紹介したいと思います。
(※画像をクリックすると、各ホームページに飛びます)

 

デザミス株式会社

青と水色のグラデーションがとても綺麗なサイトです。
写真に重なるように配置したり写真の上にオーバーレイでグラデーションがかかるようにしたり…
牛や地面が写った写真をたくさん使っているのですが、そこに爽やかなグラデーションとアニメーションを使って「次世代へ導く」というデザミス株式会社の意思を表現しているデザインだと感じました!

 

成安造形大学

ファーストビューではグラデーションが使われていないように見えるのですが、スクロールしていくとアニメーションが始まり上からグラデーションの背景が降りてくる仕組みになっています。
「未来を塗り替えていく」というキャッチコピーに合わせて写真が塗り替えられていくアニメーションはとてもインパクトがあります。

 

Melanie.F

こちらもグラデーションとアニメーションを使ってデザインされています。
それぞれの靴の色に合わせてグラデーションの色と、上から降ってくる幾何学模様の色も変わっています。
スクロールした時にちょっとした浮遊感があったり、タイポグラフィのアニメーションも1つ1つがカッコいいです!

 

 KIZUKU (キズク)

こちらはグラデーションを大胆に使わず、ボタンや見出しなどに青系のグラデーションを使用しています。
「建築仕様」の要素のみ、背景にグラデーション・文字色を白にして印象を強くさせています。全体に使うのではなく目立たせたい要素のみ背景にグラデーションを使用するデザインで、とても参考になります!

 

ESCRIT プリンセス・ブライダルキャンペーン

ピンクから青に変わるグラデーションを、文字やボタンなど様々なところに使用しているのですが、くどすぎない絶妙なバランスを保っています。
余白を大きく取っている要素やちょっとした文章に使っていてアクセントになっていてとても綺麗です!

 

以上、参考にしたいグラデーションを使ったサイト5選でした。

 - 色で表現

  関連記事

500色の色鉛筆

  500色という文字よりもズラーッと背景に並んだ色とりどりの色鉛筆た …

「安心感」・「ブランディング」の意識を強く感じる病院

愛知県海部郡蟹江町にある内科・脳神経内科・糖尿病内科・内分泌内科・小児科・アレル …

犬との絆がもっと深まりそうな犬用ウェアラブルデバイス

犬用ウェアラブルデバイス「INUPATHY(イヌパシー)」のランディングページで …

短冊を連想するデザインの七夕祭りのサイト3選!

あっという間に6月も終わりですねー。 今年は特に雨も降らず、ひたすら寒かった印象 …

観光スポットの動画を最初に配置することで、イメージが伝わりやすい

AB-ROADが運営する「思い立ったら、旅日」の特設サイトです。現地の見どころや …

ボタンを目立つ色にするのではなく、背景色を少し薄くして文字色を濃くする

商品「フェイスマスク ルルルン」のホームページです。 フェイスマスクということで …

足跡がついたり模様を雲に見立てて動かしたりと、動きをつけて楽しい雰囲気の「雪丸散歩」

奈良県王寺町公式サイトの「雪丸散歩」のホームページです。 聖徳太子のペット「雪丸 …

茶系の色で高級感を出し、オレンジで暖かみを出す「小谷流の里 ドギーズアイランド」

千葉県八街市にある「小谷流(こやる)の里 ドギーズアイランド」のホームページです …

札幌市にある一級建築士事務所のサイトが、ロゴカラーを使ったデザインでおしゃれ!

北海道札幌市にある一級建築士事務所「GRA:株式会社グリーンライト アソシエイツ …

企業サイトのデザインが、赤と黒の配色でカッコいい!

愛知県名古屋市にある「Y.W.C株式会社」のホームページです。 ファーストビュー …