WebGallery

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

*

ピンクのグラデーションが綺麗!なサイト3選

   

数年前からWebデザインのトレンドとして様々な所で取り上げられていますが、背景に使用したりボタンや電話番号などアクセントとして使用したり写真の上に重ねたりと、様々な使い方があって見ていてとても楽しいです!

今回は、その中でもピンク系のグラデーションを使ったサイトを3つご紹介したいと思います。

FORH

ヒーローヘッダーの動画の上にグラデーションを重ねたり、メニュー部分の背景やタイトル部分がグラデーションになっていたりと、色んな要素にグラデーションを使用しています。
サイト全体に統一感が生まれ、かといってクドすぎない絶妙なバランスでグラデーションを取り入れていて、とても参考になるデザインのサイトです!

 

andMade

こちらは見える箇所にグラデーションを使うのではなく、ホバーアクションにグラデーションを取り入れています。
サイト全体の配色は白と黒のシンプルなものにして、ホバーしたときに色を出す形になっているので、写真の鮮やかさが際立っていますね!

 

ELI

こちらは青とピンクの淡いグラデーションを使った柔らかい色合いのサイトになっています。
ファーストビューの男性の肌や唇の色に合わせたグラデーションになっていて、配色に統一感が出ています。

 

パキッとしたグラデーションが多い中、ピンク系の淡いグラデーションを使ったサイトが多く、優しく柔らかい印象が伝わってくるサイトが多いですね。

web上で簡単に綺麗なグラデーションを作れる「shade」や「uiGradients」といったジェネレーターもあるので、活用していきたいですね!

 - 色で表現 , ,

  関連記事

ファーストビューがとても斬新なレイアウトの不動産のサイトがカッコいい!

東京都渋谷区にある不動産事業会社「Think Green」のホームページです。 …

文字の色を少し薄めのグレーにすることで全体的に優しい色合いに

沖縄県の春・夏・秋・冬の季節ごとの魅力を紹介するキャンペーン「しゅんおき!旬香周 …

イラストを使った可愛いサイトがいっぱい!歯科関連のwebサイト5選!

インフルエンザが流行っていますね… 私もかかってしまいましたが、インフルエンザに …

写真や配色の白面積を多くして、清潔感を出している木々に囲まれたリハビリテーション病院

千葉県成田市にある「 成田リハビリテーション病院」のホームページです。 ファース …

ヨーロピアン調のパターンやイラスト、余白を大胆に使って贅沢な雰囲気のペットフード屋さん

ドイツ製のオーガニックやドックフード・キャットフードの通販をしている「プレイアー …

固くなりすぎず、落ち着いた色合いを使う

  金沢大学の公式ホームページです。色を暗めにして落ち着いた雰囲気が出 …

色とりどりのコンテンツブロックで鮮やかな印象

KANROの商品「ピュレグミ」の新作特設サイトです。はっきりとした色合いが特徴的 …

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

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

大阪にある不動産のサイトがパステルカラーを使ったデザインで可愛い!

大阪府枚方市にある不動産会社「お部屋探しの専門店 ミチコ・ハウジング」のホームペ …

対象の商品の背景を伝えるストーリーなどがしっかり伝わるようにした「USIO DESIGN PROJECT」

「USIO DESIGN PROJECT」のホームページです。 水色を基調とした …