ライフハッカー［日本版］

野本（以下「ノ」）：「色彩センスのいらない配色講座」をまとめたきっかけを教えてください

やまぐち（以下「ヤ」）：このスライドは、4～5年ほど前に当時の職場のデザイナー向けスキルアップ用に作った資料が元になっています。その後、今年の6月30日に行われたBPStudyという技術者向けの勉強会に合わせて、非デザイナー用にブラッシュアップしました。

ノ：あっという間に、はてブが4000以上付いたことからも言えるように、Web上でかなり高い評判を得ていると思うのですが、この反響についてどう思われましたか？

ヤ：このスライドに書いてあることは美術を習っていた人なら誰でも知っている話なのですが、「デザインや色という、非デザイナーの人にとってすごくふわっとしたものを、理論的に言葉で説明した」というところに価値を見出してもらえたみたいで、とてもうれしいです。

「デザイナー同士では通じる話が、非デザイナーの人にはなかなか伝わらない」という現状があるとよく耳にしますが、それってデザイナーがちゃんと説明していないからなんですよね。非デザイナーの人に伝えるということを、自分も含めてもっとみんなにがんばってもらいたいなと思っています。

ノ：やまぐちさんのお仕事について教えていただけますか？

ヤ：先月、株式会社ビープラウドに転職したばかりなのですが、前職も含め2年ほど自社のサービスサイトのデザイナーをしています。

デザインの流れは「企画を立てる人からの指示でデザインやコーディングをするパターン」と、「すでにあるコンテンツの改善案を私から提案して、A／Bテストをするパターン」の2つに分けられますね。私は、サイトのユーザビリティや使いやすさを重視しているので、そのような観点からアイデアを出すようにしています。

ノ：企画を立てる人から指示を受ける場合、ラフは作成してもらいますか？

ヤ：いえ、むしろラフは作らなくて良いと言っています。「何を載せたいか」「どういう趣旨か」さえ押さえていれば、軸が大きくぶれることはないと思うので。テキストも「何が言いたいか」を聞くレベルで、それを元にデザインに合わせて自分で作成しています。企画の人が作ったラフを元にデザインをするタイプのデザイナーさんの方が、世の中の比率的には多いと思いますが、私の場合は自分のやりたいことをやるタイプですし、物怖じもしないので、自分のスタイルを貫かせてもらっています（笑）。

ノ：やまぐちさんがデザインされるときは、サイトの配色をどのように決めていきますか？

ヤ：一番大切なポイントは、「最初の一色をどう決めるか」なんです。私の場合は、サイト全体のイメージをどんな風にしたいのかというところから決めることが多いかな。簡単に言うと、「にぎやか＝暖色」「堅実＝寒色」といった感じですね。

あとは『カラーリスト -色彩心理ハンドブック-』という本を参考にしながら、ターゲットのペルソナによって配色を考えたりもします。この本では、大学生～40代までの男女820人に「どの配色が好きか？」を聞いたアンケートの結果が紹介されていて、例えば「30代はカジュアルな配色が好き」「この配色は男性に人気だけど、女性にはあまり人気がない」など、性別や年代によって異なる、好まれる配色の傾向がわかります。

ノ：やまぐちさんが、最初に色について学ばれたのはいつ頃ですか？

ヤ：私は多摩美術大学出身で、色彩の基礎の部分は受験のために通っていた予備校時代にみっちり学びました。

ノ：では、スライドの中で紹介されていた「3色を70：25：5のバランスで配色する」という手法も学校で？

ヤ：いえ、あれは偶然インテリアの本で見かけて、「これは！」と思ったんです（笑）。ただ、同じような考え方で「粗密」というものがあって、ひとつの画面の中でも密度の濃淡をつけることなのですが、それを学んだのは予備校ですね。たとえばWebの画面を見たときに、色の密度の低いところ（薄いところ）と、色の密度が高いところ（濃いところ）とを比べると、色密度の低いところの面積比が大きくなることがほとんどだと思います。つまり、粗密を意識すると自然と色の割合は等分ではなくなってくるんです。

ノ：いわゆる「色彩の素人」が陥りがちな点とは、どんなところなんでしょうか？

ヤ：「色」というと、たいていの人は「赤」や「青」など色味がはっきりした原色を思い浮かべると思うのですが、実はそれってトーン表の中でもごく一部でしかないんです。サイトの配色を考えるときにも、いろんな色が混ざり合った何とも言えない複雑な色はあまり選択されないのでは？　本当は色ってもっといっぱいあるんですよ！

ノ：なるほど...。色を見極める目が違うんですね...。見極め力がまだ弱い人でも、色の勉強ができるサイトってありますか？

ヤ：学生時代からよく見ていたのは、「坂本邦夫の基礎からわかるホームページの配色」というサイトです。基礎から丁寧に解説されているので、勉強になりますよ。色を扱うときに気を付けておくと便利なポイントとしては、次の3点があると思います。

■やまぐちさん直伝！　色を扱うときに気をつけたい3つのポイント

1. 明度のコントラストに気をつけよう

前景と背景のコントラストが低いと、文字が読めなくなる。イメージ的に目立ちそうな黄色は特に、色相の中でも一番明度が高いので要注意！　派手な色を使えば必ずしも目立つわけではない。

2.色のイメージを大切に

赤は目立つからという理由で多用されがちだが、「警告」のイメージが強い色。お得な情報を伝えたいときに警告する必要はない。赤から少しずらしてオレンジなどにした方がベターな場合も。

3. ネガティブ表示とポジティブ表示の使い分け

ネガティブ表示（黒地に白文字）は濫用しない方がいい。人間は昼に行動する生き物。ネガティブ表示は、夜に光を見る感覚に近いので、見る人の目に負担が大きいのでは？

ノ：最後に、「色彩センスのいらない配色講座」続編の予定はありますか？

ヤ：ちょっと反響が大きくて、続編への期待のハードルが上がり過ぎてしまって...（笑）。ブログを作ったので、これからも情報発信は続けていくつもりです。「そのうちヒット作が出るといいな」くらいの温かい目で見守っていただけるとうれしいです。

ツイッター：@toyoink1050plus
Facebook：東洋インキ（toyoink）1050＋