WEBデザインに取り入れたいグラデーションの上手な使い方

ブログ

2016.09.14 WEBデザイン

WEBデザインに取り入れたいグラデーションの上手な使い方

子育て真っ最中のWEBデザイナー「のへ」です。

産休・育休を経て、またWEBデザイナーとして再稼動し始めて早4ヶ月。
仕事と育児と家事に追われて、自分の時間が取れない日々を送っています。
WEBデザインの勉強もしたいのに、なかなか上手く時間がとれません…。
そのため、日々の生活のどの部分を時短するかが目下の課題です。

つい先日も上司から「グラデーションの使い方が下手!参考資料集めなさい!」と注意されたため、参考資料を集めるついでにブログのネタにすることにしました。時短です。効率的です。

 

1.グラデーションとは?

そもそもグラデーションとは何でしょう?

 

「グラデーションは色の明るさ、色彩の変化の事を意味しています。
明るさや色彩の変化を取り入れることで色の変化を楽しめるデザインを作り出すことが可能になります。

また、グラデーションを取り入れることで平面に描かれているデザインも、立体的に描写する事が出来ます。

単なる丸い形のオブジェクトにグラデーションを取り入れることで、質感が生まれ、更に立体的な描写が可能になるのです。
デザインを行う場合などグラデーション効果を取り入れることで、影を作り出す事も出来ますので、仕上がったオブジェクトは平面ではなく、立体的なオブジェクトにすることが可能になります。」
(引用:ウェブデザイナーのためのウェブデザイン ポートフォリオサイト イケサイ

 

なるほど~。立体感を出すにはグラデーションを使うのがいいってことですね!
こんな感じですか!

 

nohe201609_blog_gra002

 

ダサい!目が痛い!初めてWord使って頑張りましたみたいなレベル!
最近流行のかっこいいグラデーションデザインにしたいですね!しましょう!

 

2.最近流行のグラデーションを使ったデザインとは?

国内・海外のサイトでグラデーションが使われているかっこいいデザインを集めてみました。
海外のほうがグラデーション使用率が高いような気がします。

 

nohe201609_blog_sample001

https://sendtoinc.com/
メインビジュアルの写真に青系のグラデーションをオーバーレイさせています。
コーポレートカラーなどを利用すれば、会社らしさがアピールできますね。
デスクで作業している写真に、青色を乗せると誠実さが強調されます。
マージンを大きめにとっていて、ゆったりめのデザインです。
メインビジュアル以外はシンプルで細身、それにフラットなアイコン、ボタンが使用されています。

 

 

nohe201609_blog_sample002

https://47holdings.co.jp/
画面全体に動きがあり、グラデーションの色がどんどん変わっていくのが面白いデザインです。
ゆったりした動きが眠気を誘います…。
薄い色のグラデーションもあると、白い文字が読みづらくなりますが、グラデーションの色がどんどん変化するので、可読性は失われていません。
背景のグラデーション以外は、ボタンやメールフォームなどフラットなデザインです。

 

 

nohe201609_blog_sample003

http://www.interactivesites.com/
部分的にグラデーションを使用しています。
どうしてこの色でグラデーションを作ったんだろう?とファーストビューで気になりましたが、スクロールして分かりました!
多色使いのグラデーションは色のチョイスが難しそうですが、こちらの場合、スクロールすると下に出てくる写真の色からグラデーションを作っているんですね。

 

 

nohe201609_blog_sample004

https://2016.cssconf.com/
こちらも部分的にグラデーションが使用されています。
ファーストビューで、目立つ色のグラデーションがパッと目に入ってきます。
極彩色が鮮烈です。

 

 

nohe201609_blog_sample005

http://codewebbarcelona.com/
背景の青緑系グラデーションに、アクセントで使われているビビッドカラーのピンクが印象的なデザインです。
動画の上にグラデーションカラーが使用されています。空の色っぽく使われていて馴染んでいる感が好きです。
画面をスクロールさせると、フラットデザインも使われています。
ホバーさせるとフラットなアイコンが動くのが可愛いです!

 

 

nohe201609_blog_sample006

http://www.impossible-bureau.com/
ホバーすることでグラデーションが浮かび上がります。
グラデーションではないですが、下層ページの点の集合体が立体的にぐるぐる動くのも面白い!
下層ページの背景はほぼ全て白色で、マージンが大きめにとられています。
テキストは濃い目の灰色なので、グラデーションが使われていると綺麗さが際立って目を引きますね。

 

 

3.グラデーションをWEBデザインに取り入れる際に、抑えておきたい5つのポイント

前述のグラデーションデザインを踏まえて、共通するポイントを整理してみましょう。

 

①フルスクリーンサイズの背景として使用

画面全体にグラデーションを使うことで、より「今っぽさ」が増します。
写真も併用して使用する場合は、写真を高画質のものにするよう注意しましょう。綺麗に表示され、読み込みに時間がかからないサイズのファイルにするのがポイントです。

 

②写真に2色のグラデーションをオーバーレイさせる

「写真のみ」より「写真+グラデーション」にすることでビジュアルに深みが出ます。
多色のグラデーションにしてしまうと、写真が見づらくなるため2色のグラデーションにしましょう。
写真が見えにくくならないよう、色の濃淡に注意しましょう。

 

③グラデーション+フラットデザイン

グラデーションを印象的に使いつつ、その他のアイコンやボタンは単色でフラットに。
フラットデザインとの組み合わせによって、グラデーションがより美しく見えます。
個人的には、グラデーション背景にゴーストボタンを乗せるのが好きです。

 

④テキストの可読性を損なわないように注意する。

背景にグラデーションを使って、テキストを表示させる場合、ちゃんとテキストが読めるかどうか注意しましょう。
折角綺麗なグラデーションがあっても、テキストが読めなかったら意味がありません。

 

nohe201609_blog_gra001
色相や明暗に差がありすぎる色をチョイスすると、テキストが読める部分と読めない部分が出てきたりします。

 

4.まとめ

個人的な感想ですが、日本のWEBサイトにはグラデーションを取り入れたデザインが少ないような気がします。全体的にはフラットデザインがまだまだ主流のように思えます。
これを機に、ぜひグラデーションを取り入れた素敵なデザインを作ってみましょう!
それでは、良いグラデーションライフを!

 

参考記事

「グラデーションとは(説明/解説) – イケサイWeb制作用語辞典」
「刮目しよう、心惹かれるグラデーション in Webデザイン」
「黄金比の基礎知識とウェブデザインに取り入れる5つのポイント – LISKUL」
「フラットデザインとグラデーション-Webデザイン・Webデザイナースクール INTERNETACADEMY 」
「[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した」
「2016年8月のWebデザイントレンドを振り返ろう!3つの最新トレンドの特徴とは?」
「フルスクリーンWebデザイン:押さえておくべき5つの必須ポイント Wixブログ」

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら
c