1-02　ボタンやバナーなどへグラデーションを施す

2008.12.25 THU

chapter 1 modeling［立体感］

02　ボタンやバナーなどへグラデーションを施す
制作・文＝大須賀政裕（oskadesign）

グラデーションがもたらす効果とは

オブジェクトにグラデーションをかけることにより、べた塗りとは違った効果をつくり出せる【1】。一概にグラデーションといっても、使用する色やトーンなどの度合いによって、その効果もさまざまである。立体感や透明感といった奥行きを生み出す効果や、キュートな印象やサイケデリックな雰囲気といったWebサイト全体のイメージを演出する効果、コンテンツ間の境界線をぼかす効果などが期待できる。また、ボタンやメニューをグラデーションによってインパクトをつけることは、ユーザビリティの向上にもつながる。グラデーションの具合によっては、やぼったい印象になり、かえって逆効果になってしまうこともあるので気をつけたい。どれが正しいということはないが、それぞれのパーツの特性やデザインコンセプトに応じた効果的なグラデーションを探そう。

グラデーションの度合いによる印象の違い

グラデーションの度合いによる印象の違いを把握しよう。まずは、色相はそのままでトーンを変えた場合についてだ【2】。グラデーションの片方の明度を上げると光が当たっているように見え、逆に片方の明度を下げると影ができているように見える。こうすることで立体感が生まれ、ボタンやメニューなどに活用できる。グラデーションの度合いが大きいほど、凹凸をより際立たせることができるので、より立体感を増したい場合やシャープな印象にしたい場合に有効である。一方、グラデーションの度合いを少なくすることで、スマートな印象にすることができる。パーツの特性に合わせて最適な度合いを探そう。

次に、トーンはそのままで色相を変えた場合について考察しよう【3】。色相の違うグラデーションにすることで、光のプリズムや化学変化のようなインパクトのあるイメージをつくり出せる。明るめの同系の2色ではキュートな印象、補色同士だとサイケデリックな印象といったように、その度合いによって印象はまったく異なってくる。デザインコンセプトに合わせて色の選択を行おう。

グラデーションをかけるポイント

グラデーションをかける際のポイントについて考えてみよう。まずはじめに注意したいのは、グラデーションを安易につけすぎると、「いかにもな感じ」が出て、やぼったい印象になってしまうことだ。さりげなくグラデーションをかけることがポイントだ。

グラデーションの方向は、静物デッサンと同じようにどの方向から光が当たっているかを想定し、個々のパーツにグラデーションをかけると統一感が出る。【4】では、左上から光が当たっていると想定した場合のものだ。また、色相かトーンのどちらかをそろえておくとスマートな印象になる【5】。ボタンなどには明るめのグラデーション、コンテンツ背景などには暗めのグラデーションというように、パーツごとにグラデーションのかけ方を工夫するとよい。ひとつのグラデーションだけでなく、ふたつ以上のグラデーションを組み合わせることで、表現のバリエーションを広げられる。中央に白のグラデーションを入れれば、ハイライトのような表現も可能だ。グラデーションをかける際に迷ったら、身の回りの自然に存在するものを観察し、その様子を参考にするとよいだろう【6】。