用途は様々、Webのグラデーションデザインまとめ

前回、サイトをブラッシュアップするための色の効果や表現方法、トレンドのグラデーションについてをご紹介しました。今回は実際にグラデーションが使われているWebサイトを見ていくことで、実践として取り入れるためのグラデーションパターンに迫ってみたいと思います。

▶これまでの記事：再燃！グラデーションの魅力に迫る～Webトレンドの傾向とカラー

Webでグラデーションを使用するシーン

Webでグラデーションを使用する場合、どんなパターンがあるでしょうか？ご参考までにグラデーションの難易度別に★5段階評価にしてみました。

• 写真に重ねる（オーバーレイ）
  写真のセレクトが大切ですが、イメージ画像として使うと簡単に大きくデザインが変わります。難易度★
• ボタンやバナーといったパーツに使う
  ポイントとして同じものを使用すると一貫性のあるデザインになります。難易度★★
• タイポグラフィーと使う
  グラデーションとタイポグラフィーを合わせてデザインするので、バランス感が重要。難易度★★★
• 背景に使う
  サイトのデザインに大きく影響します。その分オリジナリティやアイデンティティの表現に向いています。難易度★★★★

基本、グラデーションはどこにでも活用できますが、やみくもに使うのではなく、サイトの狙いやどこをフィーチャーさせたいかなどを逆算して効果的に使ってみてください。それがうまくいけば、かなり今のトレンドを意識したセンスのあるサイトへ変わると思います。

少し残念なグラデーション

グラデーションを使ってセンスアップするなら全部に！というのはちょっと待って。グラデーションはかなり個性がでますので、多用するのは控えたほうが無難です。ちょっとしたバランスで、センスよくもなれば、残念なことになる場合も。それと、今トレンドであるグラデーションですが、以前もよく使われていた時期がありました。少しだけその頃のグラデーションを振り返ってみようと思います。
画像でバナーを作る場合、単色はあまり好まれませんでした。その頃のデザインをちょっと作ってみます。

ちょっと古い感じ、わかりますか？久しぶりに作って懐かしさでいっぱいです。グレーやブルーなど1つの色と、ホワイトを組み合わせることが多か
ったように思います。グラデーションのカラーにホワイトを使うと、当然ホワイトの文字は読みにくくなります。なので、視認性を上げるポイントとしてテキストにはシャドウを入れることですね。グレーのシャドウがベーシックです。（最近は、使用している1色を使って入れていることが分からない程度にシャドウをかけることはよくやります。）そんなに昔のことではないのですが、本当に最近この手の画像は作らなくなりました。

グラデーションのバリエーション

それでは、先にご紹介したグラデーションを使うシーンを実際のサイトで見てみましょう。

写真に重ねる

（https://jaszczuk.com/）
写真全体にオーバーレイすることで、クラシックな写真の雰囲気を残しながら少しポップさと懐かしさを出している。
ブラウザ全体に大きく表示し、上に文字やロゴを乗せ、表紙のようなイメージで使うと効果的。

ボタンやパーツに使用

（https://www.areatresworkplace.com/home）
こちらのサイトでは、ロゴやボタン、装飾パーツに同じグラデーションを使用。
気が付きにくいですが、メニュー右上のボタン文字やピクトグラムなど各小さなパーツにも同様のグラデーションをに使うだけでも、デザインアクセントやオリジナリティが出せます。

（https://www.raoul-gaillard.com/work）
こちらも、パーツにグラデーションを使用しています。各ページごとにカラーを変えてアイテムとバランスを取っています。
基本はとてもシンプルなデザインですが、このパーツが大きなポイントになっています。

ページの背景に使う

ページの背景に使う場合は、サイトのイメージをかなり左右します。タイポグラフィと合わせたデザインとバランスがとにかく美しい、グラデーションを背景に使ったサイトを2つ見て欲しいです。日本語で作る場合は、かなりのバランス感が必要ですね。

（http://impossibleisinevitable.com/en/#）

（http://adova-group.com/fr）
こちらの2サイトは、デュオカラーのグラデーションなので、実際に作って取り入れることができそうなカラーです。

(http://2017.makemepulse.com/)

（https://simplychocolate.dk/）

グラデーションの色のセレクト

グラデーションは色の選び方が大きなポイントです。何と何の色を合わせたらいいのかわからないという声もありますが、ある程度のポイントを守れば、よほどのことがない限りはおかしいカラーにはならないと思うのです。簡単にそのポイントを説明します。

配色図を見たことがありますか？虹色をリング状にした図のことです。デザインや美術、色のお勉強をされた方は1度は見たことがあるのではないでしょうか？色のトーンによって変わりますが、基本はその図の色を下記のようにチョイスすれば綺麗にグラデーションができます。

• 横の色
• 一つ飛ばした色
• 同系色

これが、混ぜても違和感のない色選びのポイントです。ここで色が決まったら、グラデーションツールで、上下、左右、斜めなどにリズミカルに色を変更していきます。
自分で色を考えるのが難しいなと思った場合は、グラデーションの配色を提案してくれるサイトuiGradients も便利です。

グラデーションを実際に作ってみよう

それでは、上記のuiGradientsで配色を決めたグラデーションを、新しいSiGNで作ってみたいと思います。

【設定】　左側の色は#e96443／右側の色は#904e95

1.SiGNを立ち上げてテンプレートを決定

2.左のレイヤーからグラデーションがかかっているシェイプを選び、右の基本設定の「塗り」をクリック

3.上のカラーを#e96443に変更する

4.続いて、下のカラーを#904e95に変更する

5.グラデーションの方向を右方向に変更する

6.完成したグラデーション。SiGNではスライダーの調整だけでグラデーション画像が簡単にできちゃいます。

7.作ったグラデーションで、試しに写真をオーバレイしてタイポグラフィを配置してみました。今回はわかりやすいビビッドなグラデーションカラーを使いましたが、失敗なくいい感じにするには、近似色のデュオトーンがおすすめです。

いかがでしたか？今回は、Webサイトの色々なシーンで使えるグラデーションのパターンを見てきました。そして、新しいSiGNではびっくりするほど簡単にグラデーションを作ることができるようになりました。トレンドのグラデーションを使って、既存サイトを今時のサイトにブラッシュアップできそうです。

次回は、サイトで使えるグラデーションを使ったデザインを実際に作って解説していきます。

グラデーション機能でセンスアップ！SiGNのバナー制作ノウハウ

画像編集ツールSiGNを詳しく見る