WhitePaper.blog

Web2.0なグラデーション?

posted by osamu at 20:04:01 on 2007-03-12

Category: デザイン・フォント・アート
ちょっと気になる記事が。
グラデーションを使ったデザインのやり方 - GIGAZINE
はやりのWeb2.0的なグラデーションについて書かれていますが、書かれていることと例があってない?
どうも大元になった9rulesの記事を読み違えているような?読み間違いをまた間違った例を使って、とややこしい状態なので、例違い指摘の前半部分も残しておきます。
日本語訳とされているjmblog.jp - Web2.0っぽいグラデーションのコツも「さて、どれが一番きれいでしょう?」ってことになってるのかぁ。私の勘違いか?
●濁色のグラデーション?
文字通りにとれば、彩度の低い色同士のグラデーション?9rulesに出ている(1)は「彩度を変化させるグラデーション」だと思う。GIGAZINEが例として上げている黄色のグラデーションは下の黄色の彩度が高いので、9rulesの例にあっているけれど、IconBuffetの背景で使われているような濁色系のグラデーションとはちょっと違う。IconBuffetの背景で使われているグラデーションは「彩度の低い緑(上)~彩度が低く明度も上よりは暗い空色(下)」
●清色のグラデーション?
9rulesに出ている(2)は「明度を変化させるグラデーション」かな。GIGAZINEの例は9rulesの例にあっているけれど、清色は使われていない。明らかに訳がおかしい?清色の意味を取り違えてる?
●近似値の色相グラデーション
GIGAZINEの例、わずかに色相が変化した黄色のグラデーションですが、明らかに明度、彩度変化のほうが大きく、色相グラデーションの例としては不適切です。
下の例は、左がGIGAZINEと同じ配色。中四つが近似値の色相グラデーションの例。右は、中心の鮮やかなグラデーションはGIGAZINEで「なめらかに見えない」という例で使われている配色。両隣は明度のみ暗くした同じグラデーション。鮮やかな方は反対色のグラデーションなのでいびつなものになっていますが、両サイドは暗くしてやることで変化が和らぎ落ち着きのあるグラデーションになっています。暗い色にはさまれることで、真ん中のグラデーションもGIGAZINEのページで見たときとは違った印象に見えるようになります。

●レイアウトの中のグラデーション
他でもIconBuffetのようなページが効果的なグラデーションの例として上げられることが多いのですが、グラデーションより何より、まずベースとなる配色ができないと意味がありません。IconBuffetのページ等は、それぞれのグラデーション部分を基本になっている色のべた塗りに置き換えたとしても、配色だけで十分効果的なレイアウトになっています。色に自信のない方はグラデーションを置く前にまず単色を、Web2.0といえどもまず基本配色ということで。
…と、ここまで書いて、どうも元記事の内容を読み違えてるんじゃないかと、英語はまったくだめなのですがじっくりと元記事を見てみました。色関係なら用語らしきものが出てくればそれなりにわかります。ところが、Saturation(彩度)くらいしか用語がない(笑。3Dとかハイライトとかシャドウとかどうも様子が違う。
Webの翻訳などを駆使してみた。ざっくりと、「リアルなグラデーションを作るには」ということだと思う。だから、(2)の説明などは「照明が強すぎてうそっぽい、ストロボでも使ってるのか!?」となる。グラデーションの良し悪しの話題にしているわけではないらしい。
そもそもなんで微妙なグラデーションをわざわざつけるのか?もっと変化のあるグラデーションの方が綺麗じゃないか、とか、もっと派手なグラデーションが良い!という人は多いと思う。そういう人への回答みたいな記事なのかな?Web2.0で多用されている変化の少ない滑らかなグラデーションというのは、単色だと存在感がない面にわずかでも存在感を出すための手法の一つ。日常目にする面というのは光の加減や照明の位置、周囲の反射光などによって均一な色になっていない。だから微妙にグラデーションをかけた面を見ると、そこに何かあると錯覚してしまう。9rulesの記事は、それをうまく表現するための手法などを解説した記事なんじゃないかな。
9rulesの締めくくりはこんな感じ。
最後のレイヤーを…って奴、これ大切です。グラデーションを作るのに、グラデーションツールだけに頼っていてはいけません。ちょっとした例をつけておきます。調整レイヤーを使うとか方法は他にいくらでもあります。

ちなみに、微妙なグラデーションばかりが良いわけではない。たとえば黒と白で分割された面の境目は、色の変化が大きく目立ちすぎる。ここにグラデーションを置くことで変化の度合いを調整することができ、目立たなくすることができます。これも最近良く見るグラデーションのひとつ。

Comments

jimbo wrote:

トラックバックありがとうございます。

GIGAZINEのような有名サイトに取り上げられてちょっと戸惑っていますが、おかげでいろいろな方からのフィードバックをいただけてありがたく思っています。
(日本語訳というつもりはなく、「近似値の色相グラデーション」を手軽に作る方法の紹介がメインだったんですが・・・)

私は英語のほうも色関係のほうも素人ですが、自分なりに9rulesの記事を読んでみて、解説としては、osamuさんのこのエントリが一番優れているかと思います。

最後のレイヤーの話も大変勉強になりました。
グラデーション一つとっても、奥が深いんですね・・・
2007-03-13 00:48:27

web初心者 wrote:

すごい。素人から見るとまるで色のパレットみたいできれいです。目にやさしいのも、プロの技ですね。
2007-06-19 19:49:07

Add Comments

Trackbacks

トラックバック
このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。 もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.