WEBサイトの色やトンマナを決めるときのコツ

皆さんがWebサイトを作るとき、デザインの配色やトンマナはどのように決めていますか？

・なんとなく同業界でよく使われている色を選んでいる。
・業種的にこんな雰囲気というイメージがあるのでそのトンマナで作っている。
・自分たちの会社のロゴに入っているカラーを使っている。
・自分の好みで決めている。

実は、どれも最適な方法とは言えません。
今回はWebサイトを作る際にどのようにして色やトンマナを決めるべきなのかご説明します。

目次

1. 同業種や競合を参考にするのはナンセンス
2. 誰がターゲットなのかを考える
3. 設定したペルソナの好きなものを洗い出す
4. ユーザーの嗜好から最適な色とトンマナをあぶり出す
5. まとめ

同業種や競合を参考にするのはナンセンス

よくお客様のWEBサイトを作る際に、
「うちの業界は全体的に暖色系なイメージなのでそんな感じでお願いします」
「競合がクール系な雰囲気で推しているので、うちは逆に情熱的な雰囲気で」
などのご要望をいただくことがあります。

いずれも業界イメージや競合を意識されてのことかと思いますが、実はそこにあまりこだわる必要はありません。
確かに、業界の傾向や競合の訴求の方向性を知っておくことは重要ですが、それはあくまで副次的な情報であり、配色やトンマナを決める際の根拠にすべきものではありません。

誰がターゲットなのかを考える

Webサイト制作や広告など全ての基本と言っても過言ではありませんが、立ち返るべきはやはりユーザーなのです。
配色やトンマナを決める時も例外ではありません。
まずは、そのサイトを誰に見てほしいのかを考えて下さい。
「30～40代女性」のようなざっくりしたものでは不十分です。より詳細にユーザー像を掘り下げましょう。
そのようにユーザーの細かい情報を設定していくことを「ペルソナ設定」と言います。
ペルソナ設定の詳細な説明は別記事に書いていますのでそちらを参照してみてください。

するとしないでは大違い！ペルソナ設定の重要性と方法

ペルソナ設定ができた後にやっと配色やトンマナについての検討が始まります。

設定したペルソナの好きなものを洗い出す

先ほど「30～40代女性」というざっくりしたユーザー設定ではダメだと言いました。
なぜかというと、30～40代女性の中でも好みは様々だからです。
女性だからと言ってみんなピンクや赤などの暖色系が好きとは限りません。
独身女性なのか、既婚女性なのか、既婚女性であれば子供がいるのかいないのかでも傾向は変わってきます。
普段はどのような服を好んで着ているか、定期的に読んでいる雑誌やフォローしているSNSアカウントはどんな傾向があるか、などなど、設定したペルソナが好みそうなものを細かく洗い出していくのです。
そうすることで、ユーザー像がさらに明確になるだけでなく、そのユーザーの好みまでだんだんと見えてきます。

ユーザーの嗜好から最適な色とトンマナをあぶり出す

ターゲットユーザーの嗜好を洗い出した上で、配色やトンマナを決めます。

例えば、働く女性のための料理サイトを作るとした場合でお話します。
当初の「30～40代の女性」だけをターゲットにしてしまうと、クックパッドやみんなのきょうの料理のように暖色系の差し色で柔らかい雰囲気でという方向性になるかもしれません。
しかし、先ほどのペルソナ設定の中で見えてきたユーザー像がバリバリと働くキャリアウーマンで、そこから洗い出された嗜好が以下のようなものであった場合、本当に”暖色系の差し色で柔らかい雰囲気”で作って刺さるのでしょうか？

・愛読雑誌はVERY
・日経DUALやキナリノというWEBメディアの記事を読む
・スターバックス・コーヒーの愛飲者
etc

もしかすると「モノトーンで余白を多めにとり、差し色はオーガニック系を連想させるようなベージュ」にする方が、洗練されている料理サイトとしてよりターゲットに刺さるという可能性もあります。
この配色やトンマナはペルソナ設定とその嗜好の掘り下げによってしか得られません。
業界や競合の分析だけしていたら辿り着かなかいのです。

まとめ

どんな時にも立ち返るべきはターゲットユーザーです。
同業他社から参考サイトを探すのはやめて、もっとユーザーについての理解を深める時間を取りましょう。
そうすれば、自ずと最適な配色やトンマナが見えてくるはずです。