ファッションと同様にデザインの世界にもトレンドがあり、それもなんとなく繰り返していることをご存じですか？
Webにおいては、インターネット技術の進化が目に見えるようになってきたのはこの十数年なので、あまり感じることはないかもしれませんが、紙や印刷がデザインのメインツールだったころから、様々な様式が生まれ発展しています。
近年流行した「フラットデザイン」と呼ばれた形も、基になっていると思われるデザイン様式があり、それをAppleやMicrosoftなど大きな会社が採用したことによって、Webの世界でもメジャーになりました。その背景には、デバイスの進化によりレスポンシブという技術を用いることが可能になり、これまでのドロップシャドウやディテールをデザインしたパーツより、シンプルでフラットなデザインのほうが使いやすくなったという背景もあります。
Webの世界も技術の発達とともに、デザインの流行りも変化します。
ご自分のサイトを「センスがいい」とか「他と違って目を引く」と思ってもらえるようにブラッシュアップするため、デザインの大きな要素である色づかいについて考えてみませんか？
今回はファッション雑誌を見るような感覚で、「色」についてのイメージと、ここ数年のトレンドの「グラデーション」に一緒に注目してみましょう。
2018年のカラー・オブ・ザ・イヤーは何色？
デザインの世界でも毎年トレンドカラーの発表があります。パントン（PANTONE社）発表の2018年のカラー・オブ・ザ・イヤーはウルトラバイオレット。こういう部分は少しファッション業界と似ていますね。
色の効果と表現方法
デザインにおいて、「色」は見ている人に多くの効果を与えます。「心理的に暖色系が食欲をそそるといった効果があるので、食べ物を美味しく見せる色使いは暖色を使うとよい」などありますよね。色選びに迷ったら、ベースとしてのカラーはそういった「心理的な要素」と「与えたいイメージ」によってセレクトすると間違いはないと思います。
みなさんもよくご存知のフラットデザインは、カラーは単色づかいが多かったように思います。サイトの構成はシンプルに作られているため、コンテンツが見やすく使いやすい。デザインはかつてのように画像を多用しなくてもCSS等で表現できるので、サイトの読み込みもスムーズでデバイスの対応も柔軟です。
ただ、単色では、バナーやリンクとしての情報がわかりにくいと言われた経験もあります。欧文フォントと違って、そもそも日本語フォントのタイポグラフィデザインはバランスがとりにくいので、単色ではそこが顕著です。デザインする側としては、かなり悩みました。古くないデザインはフラットデザインなんでしょ？と思いつつも、作る時には悩むのです。シャドウとか装飾があったほうが区別化しやすいこともありますよね。
そういう中で、色だけでも多くの表現ができるグラデーションがまた注目されているのではないでしょうか？デザインにおいて、写真やタイポグラフィとの相性がとてもいいのも魅力です。
グラデーションを使うメリット
最近の高解像度のディスプレイでは特に、単色だとベタッとした印象を与えがちで、少し重く感じます。また、ブランディングにおいては、他社と区別するオリジナル表現を作りにくい。そこへグラデーションを使用すると、ライトで透明感や立体感のあるものに変えることが可能です。
写真素材も、オンラインで購入できるようになり使いやすくなりましたが、写真のセレクトが難しい場合は参考サイトのように思い切って色だけで表現する方法もあります。
▼美しいグラデーションを表現しているサイト
https://paperplanes.world/
そもそもグラデーションとは？
グラデーションは、２色以上の色をリズミカルにだんだんと変化させていく表現です。単色と違って様々なパターンがあるので、オリジナリティも出しやすい。
ミドルカラーとハイライトカラーを使って、明るい部分と暗い部分を作るので、自ずと光と影となり自然な立体感も生まれます。人間の目にはやはり、こうした自然に近いものがよりリアリティを持って映ります。身の回りにあるもの全て、単色だけというものはありませんよね。
グラデーションを用いることでリズムや動きのあるデザインになり、よりナチュラルに感じさせることができます。タイポグラフィと合わせてうまく取り入れれば、ブランディング効果の期待できるセンスのあるサイトへ変化します。
グラデーションのパターン例
■デュオトーン
２つ（duo)の色(tone)を合わせたもの
同じ色調で合わせるので、簡単に立体感を作ることができます。
■ランドスケープ
地平線のような風景をイメージした直線的な組み合わせ
いくつかの色を使うのですが、下部で濃い色を、上部にいくにつれて明るい色を使うと深みがでます。
■マルチカラー
いくつかの色をバランスよく使用
オリジナリティを表現するには最高ですが、色のセレクトとバランスが難易度高め。
こちらのサイトでは、上記の例の他にもグラデーションのパターンが紹介されています。
（via Trendy Gradients in Web Design / awwwards.）
グラデーション使用例
実際にグラデーションを使用した有名サイトをご紹介します。普段何気なく使っているサイトやアプリでも、「言われてみるとこれグラデーションだったんだな」と改めて気がついてもらえると思います。ご自身がどういうイメージを感じるか考えて、今後のデザイン参考にしてみてはいかがでしょう。
■sporify（http://spotify.me/ja）
注目の音楽ストリーミングサイトのSpotify。全体的にグラデーションを使って人物像となじませることで、シンプルなのにダイナミック。カラーも元気の出るピンクからオレンジに向かってグラデーションをかけて、サービス同様に若者にも好まれる先進的なイメージ。さらに文字の読みやすさも大きな効果。
■Instagram（https://www.instagram.com/)
デザインが刷新された時には少し違和感を感じたマルチカラーのグラデーションでしたが、このデザインに変えたことによって、今となっては最先端でセンスのある代表的ツールとしてのアイコンでもあるインスタグラム。
■iPhone X（https://www.apple.com/jp/iphone-x/）
シンプルで機能的でデザイン的なAppleのiPhoneXのサイト。「ミニマルで機能的」にグラデーションで立体感と動きを加えるというこの手法が今のトレンドのメインかもしれない。
取り入れやすい、女性が好きなグラデーション
ポップなデザインが注目されがちなグラデーションですが、もっと身近にある風景やソフトな色使いを考えたグラデーションを用いることで、優しく幻想的なイメージを作ることもできます。
商材にもよりますが、女性をメインターゲットにしたサイトでは、色とイメージの使い方が大きな要素であり、グラデーションもこうした色味にこだわったほうが効果を発揮すると私は考えています。
自然の中のグラデーション
元々自然の中にあるグラデーションのバランスを調整するだけ。少し色味の調整をしたり、フィルターを使ったりして表現します。とても幻想的で見ていて引き込まれそう。
ソフトな色を使ったグラデーション
グラデーションのフィルターを作って写真とブレンドしたり、背景として使用できるグラデーションを色だけで作るのも、センスアップの技。
女性をターゲットにした商材のサイト
多くの女性が好む色のセレクトと柔らかいグラデーション。ソフトな印象と商材とのイメージをデザインとアニメーションで表現している。
こうして見ていくと、グラデーションデザインは使う色のセレクトが重要なんだと感じますね。若さや新しさには少しポップな色を使ったもの、女性向けには優しくソフトなものがよさそうです。
グラデーションはちょっと間違えると、逆に古い雰囲気にもなるので気をつけて。失敗しないポイントとしては、補色ではなく同系色、近似色を使うこと。また大きく目を引くので、多用しないことです。
今回は、色の大切さとグラデーションの持つ効果について見てみました。次回は実際に、Webのどういうところでグラデーションデザインが使われているのか具体的にご紹介します。
POINT
- 単色のフラットデザインと違い、グラデーションは立体感ある多彩な表現が可能
- グラデーションは色の選び方で印象が大きく変わる
- グラデーションは多用しない、同系色や近似色を使うと失敗が少ない