かおり前回、サイトをブラッシュアップするための色の効果や表現方法、トレンドのグラデーションについてをご紹介しました。今回は実際にグラデーションが使われている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で配色を決めたグラデーションを、新しいSiGNで作ってみたいと思います。左側の色は#e96443/右側の色は#904e951.SiGNを立ち上げてテンプレートを決定2.左のレイヤーからグラデーションがかかっているシェイプを選び、右の基本設定の「塗り」をクリック3.上のカラーを#e96443に変更する4.続いて、下のカラーを#904e95に変更する5.グラデーションの方向を右方向に変更する6.完成したグラデーション。SiGNではスライダーの調整だけでグラデーション画像が簡単にできちゃいます。7.作ったグラデーションで、試しに写真をオーバレイしてタイポグラフィを配置してみました。今回はわかりやすいビビッドなグラデーションカラーを使いましたが、失敗なくいい感じにするには、近似色のデュオトーンがおすすめです。いかがでしたか?今回は、Webサイトの色々なシーンで使えるグラデーションのパターンを見てきました。新しいSiGNではびっくりするほど簡単にグラデーションを作ることができるようになりました。トレンドのグラデーションを使って、既存サイトを今時のサイトにブラッシュアップできそうです。次回は、サイトで使えるグラデーションを使ったデザインを実際に作って解説していきます。CAMPで最も読まれた記事は?コンセプト。