iOS 7のデザイン変更に伴う議論

先日、iOS 7に採用されたフラットぎみのデザインが発表され話題を呼びました。私の考えとしてはこのiOS 7が採用しているフラットデザインとWindows 8が採用しているフラットはまた似て非なるものだとは思いますが、フラットなデザインが大きな流れとなっているのは間違いないでしょう。

このiOS 7のデザインにおいてアイコンにはかなり大きな角丸が付けられていますが、アイコン自体にグラデーションはかかっていませんし、ついでに言えばドロップシャドウもなさそうです。

先日書いた[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析したという記事では角丸を採用する理由として柔らかさを出す、押せる感を出すと言った要素を挙げました。今回のデザインにおいてもそれらは依然重要だったと考えられます。

今回の記事は先日書いたその角丸についての考察記事のシリーズとして書いてみました。なぜグラデーションを使うのか、どんな効果が得られるのか、そしてなぜ多用するのはダサいのか。そうしたことについて徹底的に考察します。

ビジュアルとしてのグラデーション

2色以上のカラーを入れることで、そのパーツやバックグラウンドは単色よりもにぎやかに、カラフルになります。単純に単色を乗せるだけよりも色選びにバリエーションが出来ますし、テクスチャー・パターンや写真ほどはイメージが具体的でもありません(使い勝手がいいということです)。

もちろんグラデーションしなくても複数の色を乗せることは出来るわけですが、色を分割してしまうと視覚的にはそこに意味が生まれてしまったり、視覚的な分割がされてしまいます。

そうした意味や視覚的な分割を生むことなく複数の色を使ってカラフルなビジュアルを作ることが出来るのがグラデーションの意味の一つです。

カラー・表現としてのグラデーション

デザインにおいて色は、多くの場合それ自体が意味を持ちます。

• サイン(赤は危険、注意等)
• 心理的印象のコントロール(赤は興奮、青は男性的等)
• 象徴(緑は植物、赤は血等)

といったことが色の意味的な役割になります。

しかし、最初に制作者と利用者の間にルールブックや口頭等での説明があった場合を除き、単色の色のみで制作者の意図する意味合いを伝えるのは簡単ではないと考えられます。ロゴにつけられた色を見てデザイナーの意図を即答できる人はそう多くないですし、表現したいことが複雑になってくるとそもそも不可能です。

そうしたとき、色の組み合わせやそのグラデーションの幅によって、象徴としての色の意味を補強することが出来ます。

例えば単純に草色や桜色等の自然の色を使うだけでなく、物体の色として存在する色の組み合わせを模倣して黄色と緑、ピンクと白などのグラデーションを使えば単色よりその印象を強められます。これは文字の色や背景等、そのオブジェクトの形が自由に出来ない場合に特に有効です。

つまり、グラデーションは単色よりも色の象徴としての表現力を豊かにします。

ちなみに、このとき使う色はあくまで象徴なので、実際の色よりもターゲットとしている文化や人にとってイメージしやすい色を使う方が良い場合もあります。過去記事の[デザイン]なぜレタッチするのか。記憶色とか写真とか心象風景の話ではこういう話題にも触れていますのでそちらも参考にしてみてください。例のように、アイコンなんかではもっと過剰な色を使う場合もありますよね。

物質感表現としてのグラデーション

iOS 7やWindows 8のデザインにおいてはフラットデザインが採用されており、今までのスキュアモーフィックな表現は少なくとも流行りのシーンからは減ってきています。新しくリリースされるスマートフォンアプリ等にもそのデザインガイドラインが採用されていくことと思います。

こうした話題についても前述の[webデザイン]スキュアモーフィックデザインとフラットデザイン、リアリズムとミニマリズムの記事で解説しています。

私はそもそもWebサイトの平面的なエレメントにうっすらとグラデーションがかけられるのは物質感を出す為だと考えています。現実の物質は完全に単色という事はなく、周りの光の強さや方向、周りの物に反射する光などで様々に色が変わります。その為、単色のみで塗られた色に人の目は不自然な印象を受けるはずです。

イラストや絵画を描く人はわかると思うんですが、背景の奥行きを出すときに単色ではなく暗い色を乗せて、その部分が奥に向かっていることを表現したりしますよね。

またそうした平面の繊細な表現だけではなく、オブジェクトがせり出したりへこんでいることをベベルやエンボスで表現する事もあります。これの延長として、ボタンの表面に少し強めのグラデーションをかけることでそのパーツの表面が湾曲していることを表したりもします。

こうしたことは大抵そのオブジェクトが押せるボタンであることを表しています。[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析したでも触れた人が押せることを想像させる物質感の表現として、グラデーションが役に立つのです。

これらをまとめると、グラデーションはそのオブジェクトの物質感を出すことでその質感を高めたり、リアリティーを出すことで用途を想像させるのに役に立つということになります。

グラデーションを多用するとダサくなる？

さて、こうしたグラデーションの用途を考えてみるとダサいと言われるグラデーションが何故ダサいのか見えてくるのではないでしょうか。

ダサいグラデーションとはすなわち、

• カラフルである必要のないオブジェクトのグラデーション
• 象徴を見失ったグラデーション
• 物質感を理解していないグラデーション

というものが挙げられます。一つづつ確認してみましょう。

カラフルである必要のないグラデーション

ビジュアルとしてのグラデーションで解説したように、グラデーションは2色以上使う必要性があるからこそ使うものです。グラデーションである必要性なくグラデーションを使うと、無用な失敗を生みます。

特に異なる色相でのグラデーションは地雷です。カラフルであることによるにぎやかさはグラデーションを使わずとも作れますし、それはそもそもカラフルである必要性があるのかどうかを考えてみる必要があります。

象徴を見失ったグラデーション

カラー・表現としてのグラデーションのうち、象徴として使うグラデーションを思い出してください。グラデーションカラーは単色ではイメージしにくい何かの象徴として用いられることがありますが、そうしたグラデーションが違和感なく受け入れられるのはそれが自然に存在する色の組み合わせだからです。

イメージがない状態で色だけの組み合わせ選びをすると、混ぜ合わせると色が汚くなる補色や、コンプレックス配色等の扱いが難しい色の組み合わせが選択肢に入ってきてしまいます。

つまり、色の知識がない人が適当に選んだ色を組み合わせてグラデーションを作ると、こうした失敗しやすい色の組み合わせをしてしまう可能性が高くなると思います。

あ、色については別の記事を書きたいと思います。そうですね…[デザイン]色を使う理由、不自然な配色について徹底的に分析したという記事でも書きましょうかｗ

物質感を理解していないグラデーション

物質感を理解していないグラデーションとは、物質感としてのグラデーションの項で述べた物質感の表現を勘違いしているものです。

リアリティーを出す為のグラデーションは主に、物体の色より形状による陰影を表す為に使われます。その場合、そのグラデーションの方向や強さは光源の位置や物体の形状を表現してくれるわけですが、それがページ内またはレイヤー([webデザイン]ブラウザーの中のセカイ ― デザインや世界観のレイヤーを認識する – WEBCRE8.jpを参照)内で統一されていないと不自然なものになりやすいです。

Webページは通常平面的なので、本来立体的な表現を局所的に使うのは不自然さを生みやすいのですが、それでも現実の道具のシグニファイア(道具が持つ、見た目から用途を推測できる特徴と理解しています)を持ち込み視覚的に使い方を伝える為、Webサイトにはこうした表現が必要だったわけです。

そしてこのような現実の法則やリアリティーを持ちこんだデザインの中で、物理法則に反したビジュアルを持ったオブジェクトがあるとそれが原因でダサく見えてしまうこともあるわけです。

ちなみに物体の形状を表す上でのコントラストのキツいグラデーションは本来、強い光量の照明のもとか、高い反射率のオブジェクトにしか生まれません。

例えば鏡面仕上げの金属、エナメル、光沢のあるプラスチック等ですね。そういう素材のものをイメージしているのでない限り、または極めて光量が強いことをイメージしたデザインでない限り、陰影のコントラストはあまり強くならないのが正しいはずです。

オブジェクトの役割を損ねるグラデーション

上記のグラデーションを使う理由に対応したダサいグラデーションの他にももう一つ、その色にグラデーションをつけたことによってオブジェクト本来の役割を損ねるほどになってしまっているものもダサいグラデーションとして挙げることが出来ます。

例えば文字が読みづらい、オブジェクトの境界がわかりにくいなどの問題を引き起こしているものです。

グラデーションに限りませんが一つの面に複数の色を使うときにあまりコントラストの強い色を使うと、そのオブジェクトに隣り合ったオブジェクトの色にグラデーションのいずれかの色が近づいてしまい、それぞれを判別しづらくなります(縁取りをする等の対抗策はありますけど)。

これは光沢のある素材など、リアリティーのある表現をしたいと考えた場合にはその方が正しいようにも感じます。しかしWebサイトはあくまで使うものですし、文字は読めなければいけません。そのリアリティーがそこにどうしても必要なのか？または本当にそうしたリアリティーを持ったオブジェクトをそこで使う必要があるのか？といったことを考えるといいと思います。

グラデーションカラーというのはそもそも特殊な選択

なかなか使いどころが難しいはずなのに、普通の色を使うときと変わらず当然のように使われるグラデーションですが、身の回りの人工物(建築、衣服、雑貨等)を見てみるとグラデーションカラーのものは意外なほどに少ないことに気付くと思います。

画像を用意しようと思ったのですが、その代わりにちょっと周りを見回してください。自然物以外にグラデーションカラーで塗られた、またはそういう色をしているものがありますか？

比較的機能性よりも装飾性の方が重視されがち(だと思ってますが違ったらすみません)な衣服/服飾ですらグラデーションを使ったデザインは多くなく、そうした衣服は着ていると実際かなり奇抜に見えます。象徴としてのグラデーションカラー(自然)以外のグラデーションカラーというものは、かなり例外的なものなのです。

デザインソフトのインターフェースの問題

それでもグラデーションがデザイン初心者のデザインで不必要に使われる原因として、私はデザインソフトのインターフェースが挙げられると思います。

このインターフェースの印象というものは非常に大事です。色をつける人が「何色にしよう」と考えたときにグラデーションツールが使いやすい場所にあると、選択肢として「グラデーションにしよう」という選択がしやすくなります。仮にグラデーションがフィルタの項目の下の階層にあったとしたら、少なくとも使いなれない人はグラデーションを使わないんじゃないでしょうか。

デザインソフト初心者はインターフェースによって、色で塗りつぶす代わりにグラデーションを使う、という手段を覚えているわけです。…とはいえグラデーションは便利なものなのでそんなに使いにくくても困るわけで、この辺は仕方ないとは思いますｗ

なぜグラデーションは薄くかけるべきだと言われているのか

UIなどにおけるWebデザインのノウハウとして「オブジェクトにうっすらとしたグラデーションをかけるといい」というようなアドバイスをよく見かけますが、なぜそうしたほうがかっこよく見えるのかということにまではあまり触れられていません。

でも、ここまで読んできた方にはその理由がわかるんじゃないでしょうか。

今まで挙げてきたいくつかのことは、全て自然さのためにグラデーションをかけ過ぎないという点で共通していますよね。

特に現実の物体の色は単色ではありえないので、物体の質感を表現するには少しでも色の変化をさせることが必要になります。その為には目に見てわかるかわからないかくらいのグラデーション(そのグラデーションは光と陰によって発生しているので明度のみを調節する)を使うのが効果的だということです。

おそらく人の目と感覚は、その場にそぐわない、不自然なもの、その違和感をダサいと感じやすいのではないでしょうか。現実の物質には完全な単色の物は存在しないので、少しでもグラデーションがかかっていないと違和感を持つというわけです。これは更にテクスチャーと併用するとより、らしさが出ますね。

気づかないほどにうっすらとしたグラデーション、それは色が変化していると意識的には気づけないレベルでも、我々人間の目と意識にとって自然なものと感じさせてくれ、それが質感のある印象を作っているというわけです。

まとめ

まとめます。

グラデーションを使う理由

• セパレートせずに複数の色を使いオブジェクトをカラフルにする
• 単色では表現しきれないイメージの塗りを複数色で表現する
• 平面に物質感を生むテクスチャーの一つとして
• 光源や光量、オブジェクトの形状を表現する

ダサいグラデーションになる理由

• 使用する目的が定まっていない
• 象徴を表現出来ていない
• 光源や光量等の陰影のルールがわかっていない
• グラデーションを使う事で文字やオブジェクトを認識しづらくしてしまっている
• 不自然な色の組み合わせを選んでしまっている

上手なグラデーションの使い方

• 使用する理由を明確にして使う
• 色を先行して選ばず、その色で表現したいものを先にイメージする
• 光源や光量を考慮して使う
• 隣接する色を意識してコントラストを加減する
• そもそも調和していない色を使わない(隣接色を使う、色相を変えない等)
• 質感を出すときは本当に目で見て分からない程度の薄さでよい

こうして見ると実際のところ、グラデーションの失敗とは色自体の組み合わせの間違いであることよりも、単に使う場所が間違っている場合が多いことがわかると思います。

使いどころさえ選べばマッチする場所はあるわけです。色なんて、光の加減でいくらでも変わってしまいますからね。

終わりに

詰まるところ、どんなデザイン要素とも同じように、グラデーションも「使う理由を考えようね」という事になります。

デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素ではデザインの要素一つ一つを簡単に挙げていきましたが、そのうち配色のグラデーション一つをとってもこんなに考えることがあるんですね！

しかも、今回は色自体についての解説は端折っていてさえこんな長文になってしまいました。

ちょっと急いで書いたので文にところどころアラが目立つかもしれませんが、言いたいことは大体書いたと思います。こういうことって、頭でわかっていたとしてもやっちゃったりすることがあるので、分からないでやると更に大変なことになっちゃいますよね…！

「不自然＝ダサい」、と文中で書きはしましたが、実は「不自然＝目立つ」、でもあります。そのアンバランスさを狙って使うことが出来ればそれもまた個性となりますよね。まずは、不要なところに目をいかせてしまうような使い方をしないように心がけましょう。そしてそれから、過剰な演出や違和感を利用して注目させることを考えてみるといいのではないかと思います！

蛇足

「ダサいデザインのブログにデザインのことについて講釈垂れられたくない」というようなご意見があるとすればそれはごもっともですｗ こういう記事はせめてリニューアルして、今納得のいくデザインにしてから書きたかったんですけどね…。リニューアルするする詐欺がまだ続きそうです＞＜