WebGallery

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

*

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

   

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

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

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

 

デザミス株式会社

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

 

成安造形大学

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

 

Melanie.F

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

 

 KIZUKU (キズク)

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

 

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

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

 

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

 - 色で表現

  関連記事

建物の外観を連想させる背景のアニメーション

東京都千代田区にある「有楽町マリオン」のホームページです。 背景のアニメーション …

イラストやアイコンを使って、女性にも親しみやすいデザインの土木建築会社

愛知県半田市にある土木建築会社「株式会社 知多土木」のホームページです。 ファー …

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

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

スマートフォンからでも情報が伝わりやすい

  コガノイベイホテルの公式サイトです。全体的に情報量が多いのですが、 …

「情緒」と「静寂」を演出するために、カラフルな配色でなく白黒の配色にした岐阜のウェディングサイトがキレイ!

岐阜県多治見市にある、「大人のウェディングスタイル」をテーマのウェディング会場「 …

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

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

カラフルだけどまとまり感のあるトランクルームのサイトが可愛い!

大阪にあるトランクルーム「大阪のトランクルーム レナンド」のホームページです。 …

文章量が多くても、楽しみながら見ることができる不動産屋さん

愛知県名古屋市にある不動産会社「名古屋のあおいろ不動産」のホームページです。 「 …

桜のピンクと、水槽の青のコントラストがとても綺麗な「桜といわし」

京都市にある京都水族館で4月1日から6月30日まで開催されているイベント「春を楽 …

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

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