fbpx

メニュー

色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ

高橋文樹 高橋文樹

この投稿は 11年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

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

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

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

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

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

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

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

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

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

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

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

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

Adobeのkuler
Adobeのkuler

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

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

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

秘訣2. 色相はいじるな

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。