WebGallery

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

*

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

   

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

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

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

 

デザミス株式会社

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

 

成安造形大学

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

 

Melanie.F

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

 

 KIZUKU (キズク)

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

 

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

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

 

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

 - 色で表現

  関連記事

色んな大きさの写真を配置することで、シンプルだけどボリュームのあるデザイン

岡山県観光土産品協会が運営する「観射亭」のホームページです。 緑を基調としたとて …

緑色のイメージを効果的に使った製造会社

石川県で焼成炉や乾燥炉などの設計・製造を行っている「株式会社アクトリー」のホーム …

青と黄色のみでデザイン

  東京都にある矯正歯科医院のサイトです。スウェーデンの国旗のカラーの …

重要な情報は配色を逆にして目立たせているレストラン

大阪市にあるフレンチレストラン「convivialite」のホームページです。 …

コンテンツいっぱいに写真を配置する

「放課後等デイサービス」というハッピーテラス株式会社が運営するサービスです。ロゴ …

雪を降らせたり、文字やイラストを白で統一して冬を演出する

2016年の11月10日から、2017年の2月19日まで開催している「東京ドーム …

背景は繊細な雰囲気だけどメニューやフレーズは力強い筆文字にすることで【どん兵衛×ラッセン】の異色のコラボを表現!

どん兵衛とクリスチャン・ラッセンがデビュー40周年を記念したコラボ企画「【どん兵 …

就活生に語りかけるキャッチコピーがインパクト大!兼松株式会社の新卒採用サイト

「兼松株式会社」の2019年度新卒採用サイトです。 ファーストビューの動画がとて …

会場ごとに色を分けて、情報を見やすく分類したライブハウスがシンプルだけどカッコいい!

渋谷・名古屋・梅田・広島にスタジオをかまえる「CLUB QUATTRO(クラブク …

ロゴのスラッシュを使ったデザインがカッコいい「万建設興業」

栃木県那須塩原市にある住宅建築・分譲地販売をしている「株式会社万建設興業 YES …