みなさんこんにちは

GWはいかがお過ごしでしたでしょうか??

中には10連休だったという方もいらっしゃるのでは…

私は前半の３連休でフットサルの試合に出たり、ユニバに行って、

後半の４連休は、高校時代の友達に久しぶりに会ったり、旅行に行ったりして、

充実したお休みを過ごすことができました

頭の中はまだ余韻に浸っていますが、仕事モードに切り替えて頑張りたいとおもいます

今回は…

さて、今回は『グラデーションをどう使う??』というテーマでお話ししたいと思います。

先日クライアントワークでデザインをしている時に、

グラデーションを使ったデザインについて悩むことが多々ありました。

グラデーションはスタイリッシュでおしゃれに見える一方で、

割合が高すぎると騒がしい印象になり、悪目立ちしてしまいます。

SANKOU!に掲載されているWebサイトを見て、

グラデーションの使い方を分析してみたいと思います。

ぜひ最後までご覧ください！

スタイリッシュに使う

グラデーションが使われているスタイリッシュなWebサイトには、

4つの特徴がありました。

• ベタ塗りにしない
• さりげなくグラデーションを使う

べたっとグラデーションの背景を引くのではなく、

円形にグラデーションをかけ、ぼかしを入れることでスタイリッシュな印象になります。

配色についても明度の低い色を使っているので、使用している色の数が多くても悪目立ちしません。

力強く使う

• グラデーションを濃く使う
• サイト全体に占めるグラデーションの割合が高い

さりげなくグラデーションを使うとスタイリッシュに見える一方で、

ベタ塗りにすると力強さを演出することができます。

株式会社ブースターのように、原色に近い色を使う方がより力強く感じられます。

サイト全体で見てもグラデーションを使用している割合が高いのが特徴的です。

多すぎると騒がしくまとまりのない印象を与えてしまうので、

全体のバランスをみて調整する必要がありそうです。

可愛く使う

グラデーションを使って可愛さ・女性らしさを演出しているサイトには、

2つの特徴がありました。

• 色数が多い
• 女性らしさを感じるパステルカラーを使用している

可愛さを演出したい時は、

パステルカラーや淡い色など、女性らしさを感じる優しい色が使われます。

また、一つのグラデーションに使用する色数が多いのも特徴的だと感じました。

女性用のシャンプーのWebサイトでは、グラデーションを使って

ホログラムのような、光が当たった時の反射を再現しているものが多いです。

なんでかな〜と思って考えてみたのですが、

反射して光っているのをみていると

『自分の髪の毛も光にあたって艶やかに見えるようになるかも』と感じさせるためかなと思いました。

タイトルで使う

タイトルでグラデーションを使う場合は2パターンのデザインが考えられます。

Tverの採用サイトのように部分的に使うと、文字にスポットライトが当たっているように見えて、

斬新さ・先進的な印象を受けます。

一方で、Career Paletteや株式会社カミナシのように、文字全体にグラデーションがかかっていると、

グラデーションを使わない場合に比べてデザイン性が高く感じられます。

配色や色数によって、ユーザーに与える印象もさまざまです。

企業のコーポレートサイトでは、

信頼感や誠実さを演出するために青・水色の組み合わせが多い印象です。

ボタンで使う

ボタンをグラデーションにしたい時は以下の2パターンが考えられます。

• 背景ベタ塗り
• 線と文字にグラデーションをかける

実際に株式会社KKIの採用サイトでは両方のデザインが使われています。

このように背景ベタ塗りと線・文字がグラデのボタンを見比べてみると、

圧倒的に背景ベタ塗りのボタンの方が目立つのがわかります。

サイトの構成上、ユーザーにおさせたいボタンに優先順位がある場合に、

使い分けができそうです。

ホバーアニメーションはどうなる??

4パターンのホバーアニメーションを紹介します！

ボタンにグラデーションを使用する場合は、色を変えるよりも文字やアイコン、図形を動かすアニメーションが多くみられました。

文字や図形が動く

株式会社インフォディオで使われているボタンは、

文字が下からスライドインするアニメーションに加えて、

横の円形が拡大し矢印が出現します。

矢印が動く

株式会社スタイルポートでは、矢印が右に消えて、左側から新しい矢印が出てくるアニメーションが実装されています。

シャドウが変わる

おんせんしでは、ボタンの上にカーソルを合わせると

ボタンの右側と上にさりげなくかかっていたbox-shadowが、左側と下に濃く入ります。

合わせて矢印も外側に動きます。

Renxa株式会社の採用サイトでは元々指定されているbox-shadowが、

ホバー時に消えるというアニメーションが設定されていました。

グラデーションが入れ替わる

リンドール・フレーバーコレクションではホバー時に左右の色が入れ替わるアニメーションが実装されています。

こんなアニメーションもあるよっ！

ここからは番外編！

グラデーションをうまく使っていて、素敵なアイデアだなと思ったアニメーションを集めてみました。

Dr.TRAININGでは文字と背景が点滅し、電気が点灯したようなアニメーションが実装されています。

株式会社東京テクノロジーでは、カーソルにぼかしのかかった円形を設定しており、

ボタンの上にカーソルを乗せるとグラデーションに見えます。

GO株式会社の脱炭素サービスGXでは事業内容にちなんで、

ホバーするとコンセントのアイコンが動き、充電が進むアニメーションが実装されています。

背景で使う

ベタ塗り

HEグループの採用サイトでは背景にベタ塗りのグラデーションが使用されています。

後ほど紹介する円形＋ぼかしや、図形で切り取っている背景と比較すると

インパクトのあるデザインになっています。

円形＋ぼかし

株式会社メルンではグラデーションのかかった円形にぼかしをかけて使用しています。

先ほど紹介したベタ塗りと比較すると、

目立ちすぎずスタイリッシュさを演出してくれます。

Harmonies with KUMONでも円形＋ぼかしの背景が使用されています。

ぼかしをかけると、自然と同じ色でグラデーションを作ることができます。

先ほどよりもサイズの小さな円なのでより可愛く感じます。

図形で切り取る

株式会社KKIの採用サイトでは、ウェーブのかかった図形にグラデーションがかかっています。

円・四角形・三角形などの見慣れた図形ではなく、

独自の図形を使用することで唯一無二感があって素敵です。

またこのサイトではグラデーションにノイズがかかっているので立体感があります。

あしらいで使う

株式会社桜商会ではサイト内で使われている円形全てにグラデーションがかかっています。

彩度の低いグラデーションなので、文字やアイコンに使われている黒や青とも喧嘩をせず、

目立ちすぎることもありませんが、

『無いよりもある方が目立って見える』というあしらいとしての役割を完璧に果たしています。

大気社の採用サイトでは右上の円や、アイコンにグラデーションが使用されています。

細い線のアイコンに使用しているので、

『よくみてみたらグラデーションだった！』というぐらいのさりげなさで、

あしらいとして素敵だと思いました。

アイコンがグラデーションになっているとひと工夫加えたように見えます。

最後に

いかがでしたでしょうか??

Webデザイナーとしてはまだまだ未熟なので、デザイン面で悩むことがたくさんありますが、

言い換えれば学ぶチャンスがたくさんあるということだと思って、

これからもこのコンテンツを続けていきたいと思います。

最後までご覧いただきありがとうございました！

また次回のブログでお会いしましょ~！