Web

この投稿は4年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2012 年 8 月 30 日 1,729日前)
3,005文字 (読了時間7分)

SPONSORED LINK

前回の記事に続き、僕と同じくデザイン力のない人のためのサバイブハウツーです。Webサイトを作っていると、デザインをしなくてはならないのですが、その際にとても困るのが色の決定です。

色使いというのはとても大事なもので、「ダサいなー」と思われる理由のトップクラスに位置するものです。デザインというのは上手くいっている場合は気づかれず、失敗したときに目立ちます。

みんな大好き愛生会病院
みんな大好き愛生会病院

僕はいままで某大手企業の研修や某デジハリなどで沢山の初心者を見てきましたが、確実に言えることは99%の人に色彩センスはないということです。「好きな色決めてね」というと、99%の人がクソのような色を使ってきます。これは当人がダサいかダサくないかにかかわらず、99%色彩センスがありません。

Webで色彩センスのなさがあらわになる理由

さて、僕は破滅派などで印刷物を発注した経験から感じたのは、「リアルプロダクトにおいては一色でもけっこう表情豊か」ということです。

たとえば洋服とか印刷物がそうなのですが、その物体の色を見る環境は一定ではありません。太陽光が当たっていることもあるし、薄暗い室内で見ることもあります。そうした光の変化とそのプロダクト自体が持っている質感と相まって、とても表情豊かです。

「薄暗いカフェの店内で向かいの人が読んでいる雑誌の表紙、コート紙に乗せたべた塗りのオレンジが妙に目を引くぜ」とか、「夏の日差しの下であの子の白いYシャツから透けるブラ線がやけに水色だぜ」とか、そういうことはリアルプロダクトならではです。

一方、Webではそういうことはあまりなくて、ただただ色使いだけが気になります。そして、色彩センスの良さが際立つ一方、色彩センスのなさも際立ちます。
あなたがデザイナーならがんばって色の引き出しを増やすしかないのですが、専業じゃない場合はそうも言っていられないので、なんとかごまかす方法を教えます。

秘訣1. 自分で色を決めない

たとえばあなたがプログラマーで、Webサービスなどを作っていて、「もうちょっとなんかこうシャレオツにしたいなー」と思ったとします。そうすると、初心者向けのデザインの本を買ってりして、ベースカラーとアクセントカラーとか、紫は高貴で青が実直とか、そういうことを学んでいくのですが、それは遠回り過ぎます。

セオリーを学ぶことは否定しませんが、一番手っ取り早い方法はあらかじめ決められた色を使うということです。

Adobeのkuler
Adobeのkuler

おすすめはAdobeのKulerなどを使い、「これイケテルな」と思う色セット(カラースキーム)を選んだら、それ以外の色を使わないことです。なにがイケテルかわからない場合は、いっそのこと人気順でソートして上位のカラースキームを使うとかどうでしょうか。

心地いい色づかいとデザインのすすめ ナチュラル配色デザインブック

心地いい色づかいとデザインのすすめ ナチュラル配色デザインブック [書籍]

著者GWG

出版社MdN

出版日2010 年 8 月 25 日

商品カテゴリー単行本

ページ数128

ISBN4844361333

Supported by amazon Product Advertising API

他にもMDNあたりが出している色彩関係の本を買うと、「◯◯な雰囲気の色」みたいな感じで4色ぐらいのセットが書いてあったりするので、それを使ってください。

くれぐれも自分で工夫して「B2Bのサイトだから真面目で洗練した雰囲気を出すために青とグレーを基調にして〜」とか考えないでください。それが間違いの元です。「どんなにしょぼくてもプロがいいといっているんだから自分がやるよりはマシだろう」ぐらいの感覚で選んでください。自由が一番苦しいのです。

秘訣2. 色相はいじるな

色には色相、彩度、明度という概念があります。僕がこれまで見てきた初心者達が堕落していく瞬間というのは、色相をいじるときです。これをいじったばかりに、はじめはイケテいた色がドドメ色に変わっていきます。清楚だったあの娘が夏休み明けに金髪クソビッチに変わっているのと同じです。

HSBモードで色相(Hue)はいじらない
HSBモードで色相(Hue)はいじらない

その点、彩度をいじってもモノクロに近づいていくだけなのでそれほどひどいことにはなりません。明度をいじると明るくしすぎて下品なネオンカラーになってしまうことがよくあるのであまりオススメしませんが、色相をいじるよりはマシです。

この原則を守るためにはHSBモード(色相=Hue, 彩度=Saturation, 明度=Blightness)で色を変えることをおすすめします。RGBでいじるからわけのわからない色が生まれてしまうのです。HSBモードにして「絶対にHはいじらない」という原則を守ればなんとかなります。

秘訣3. さりげないか、ほとんどやらない

Webというのはディスプレイで見るため、質感に見劣りします。そのため、デザイン上のテクニックというのはほとんどが「イミテーション」つまり現実の模倣です。立体的に見せるためのドロップシャドウとか、ざらついた感じにするためのノイズとか、遠近感を出すためのブラー効果とか、すべては現実にあるものの模倣であり、「ディスプレイ上で表現する」という制約のために生まれたテクニックです。

こうしたテクニックがたくさん紹介されているため、「へー、じゃあ立体感出すためにドロップシャドウつけよう」と思ったりするのですが、初心者がやると大袈裟になってしまいます。ボタンとして押せることを表現したい=立体感を出したい=ドロップシャドウをかけたいという考え自体はよいのですが、だいたいがやりすぎということなります。

ポイントとしては「これかかってんの?」というぐらい薄い表現を心がけましょう。シャドウなら1pxのぼかし5pxで不透明度40%とか、グラデーションなら色ほとんど変わらないとか、あるんだかないんだかわからないぐらいの装飾にします。最終的にはなにも加工していないように見えるぐらいがベストです。

ドロップシャドウも極力薄くする
ドロップシャドウも極力薄くする

グラデーションの場合は秘訣2に従って、わずかに彩度と明度を下げるとか、そういう方法で乗り切ってください。

結論:無理してデザインしない

デザイン感覚に欠ける人に共通する特徴は観察眼がないという点です。そういえば自然界に純粋な黒はあまりないなとか、色数が多過ぎて集中し辛いからもっと絞ろうとか、一つのページで光源の向きが違うパーツがあるのは変だから直そうとか、そういうことに気づけないのです。

ここで「よく観察して観察眼を養いましょう」というアドバイスもできるのですが、それは時間がない上に身体が弱い人に向かって「毎日筋トレしましょう」というのと同じ類いの無茶ぶり感があるので簡単な秘訣にとどめました。

また、デザインとは設計であって表現ではないので、「自分らしいカラースキームにしたい」という表現欲求は封じ込めておくのが吉です。いつかそれなりの色哲学ができるまで、その思いはそっとしまい込んでおきましょう。

というわけで、今回も小手先の方法を紹介しました。一人でなんでもできるのは理想的ですが、人生の時間は有限なので、ごまかしを多用して切り抜けるのも一つの道です。以上、座右の銘はパンがなければケーキを食べればいいじゃないの高橋がお送りしました。

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2012 年 8 月 30 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

神だって人間を創るとき、新たな創作ができなかったのか敢えてそうしなかったのかは知らぬが、いずれにせよ自分の姿に似せて創った。だからこそ、同時代の作家から一場面をそっくり盗み出していることがあるとアホな批評家に非難されたとき、シェイクスピアはこんな言葉を口にできたのである。「私はうら若い娘さんをお下劣な連中とのつきあいから救い出して上品な社会に入れてやったのです!」同様の批判を受けたとき、これも同じ理由からモリエールはもっと素朴にこう答えている。「俺は見つけたらすぐ自分の財産にする」シェイクスピアもモリエールも正しい。才能あるものは盗まず、奪い取るからである。

— アレクサンドル・デュマ

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。