WebGallery

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

*

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

   

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

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

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

 

デザミス株式会社

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

 

成安造形大学

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

 

Melanie.F

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

 

 KIZUKU (キズク)

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

 

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

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

 

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

 - 色で表現

  関連記事

カラフルな色彩でインパクトのある雰囲気に

  沖縄県にある八重瀬町の野菜を紹介するホームページです。とにかく配色 …

「青い池」を連想させる色を使った配色の美瑛町

北海道美瑛町のホームページです。 美瑛町の有名な「青い池」の写真がとても印象的な …

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

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

トップページの写真や映像が幻想的な世界に誇る「水の山」プロジェクト

2014年に南アルプス地域がユネスコエコパークに登録されたのをきっかけに、世界に …

美容品を販売している会社のサイトがオシャレでカッコいい!

「株式会社MEGMALE(メグマーレ)」のホームページです。 ファーストビューの …

暖色系を使い暖かみのある雰囲気に

  愛知県にある歯科医院のホームページです。トップに写真を配置するので …

ロゴマークが特徴的

  豊島区のイベントサイトです。真ん中のロゴとカラフルな背景のインパク …

日本の伝統文様を使い、和風をアピールする

  祗園祭の新しい魅力をアピールしているWebサイトです。ターゲット層 …

青と黄色のみでデザイン

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

女性をメインターゲットにした、可愛らしい「塗装業」のサイト3選!

現在勤めている会社では、塗装業のサイトを新規作成・リニューアルすることが多いです …