WebGallery

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

*

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

   

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

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

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

 

デザミス株式会社

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

 

成安造形大学

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

 

Melanie.F

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

 

 KIZUKU (キズク)

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

 

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

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

 

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

 - 色で表現

  関連記事

最新のがん治療を使って、患者と一緒に治していく診療所

東京都港区にある診療所「アカサカフロイデクリニック」のホームページです。 シンプ …

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

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

黒を使った重厚感のあるデザインで、明治から続いている歴史ある酒蔵を表現した「明治蔵」

鹿児島県枕崎市にある「薩摩酒造花渡川蒸溜所 明治蔵」のホームページです。 背景の …

GWに行きたい!関東で開催しているフラワーイベント3選

もうすぐゴールデンウィークが始まりますね! 今年はどこに行こうとか、そろそろ予定 …

500色の色鉛筆

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

サイトの様々なところに「動き」をつけて会場の楽しそうな雰囲気を伝える

岐阜県各務原市にあるレジャースポット「オアシスパーク BBQ CANVAS」のホ …

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

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

気軽に相談しやすい水道屋さん

千葉県市川市にある水まわりの修理などを行っている「有限会社 報徳サービス工業」の …

たくさんの家が集合したような病院の外観をモチーフにした「ゆい動物病院」

和歌山県和歌山市にある動物病院「ゆい動物病院」のホームページです。 たくさんの家 …

黒い背景にインパクトのあるキャッチコピーと卵の写真で、重厚感のあるサイトがカッコいい!

鹿児島県曽於市にある卵・マヨネーズ等を販売している「サテライツ株式会社」のホーム …