Tumblr配色の技法や解説は多く見られるのですが、そこに至るまでの流れをあまり見ないので自分のやり方を書いてみます。共有することで自分もそこから新たに学べればと考えてます。配色を决めるフロー図この流れは書籍や勉強会で得た知識と現場での試行錯誤を繰り返して構築してきた流れです。人によってやり方は異なると思いますし、「私はこうしてる」「こうしたら良いのではないか」などコメントやtwitterなどでも発言して頂けると、僕もそこから新しく学べるので助かります。1.ヒアリングサイトの目的やコンセプト、期待する効果やターゲット、また、伝えたいイメージや単純に使いたい色も聞きます。来店数が増える・売上が上がる、などターゲット女性・20代・雑貨好き、など伝えたいイメージナチュラル・柔らかい・落ち着く、などここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。「○○のような高級感」と具体的に伝えてもらうと良いです。競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。商圏内で競合となる他社のみを比較対象とします。店舗であれば外観・内装の雰囲気なども調べてそれらと統一感のある配色を心掛けるようにします。lemongraphic3.キーカラーの選択そのサイトの主(キー)となるカラーを決めます。僕はキーカラーと言ってますが、正確な定義はないので言い方は何でも良いと思います。サイトをぱっと見た時に印象に残る色です。これが成功するとそのサイトを思い浮かべた時に「○色が印象的なサイト」と記憶してもらえます。3.2.キーカラーを决めるヒアリングや調査で得た情報を元にキーカラーを決めます。色が増えるほど扱うのは難しくなります。多色にするのは、主に「賑やか」「楽しい」を演出する時です。下記のサイトではイメージから色を選ぶことができるので参考になります。色相にはそれぞれイメージがありますので、ヒアリングで得たイメージから色相を選択します。色とイメージの関連は多数のサイトで説明されてるのでそちらを参照して下さい。明度は色の重量感を決めます。明度の低い色は重く・固く感じられ、明度の高い色は軽く・柔らかく感じられます。彩度は色の派手・地味感を決めます。彩度の低い色は地味で落ち着いて感じられ、彩度の高い色は派手で激しく感じられます。検討してキーカラーを決めていきます。キーカラーは16進数またはRGBでしっかり確認しておきます。サンプルとして見せれるサイトやアプリを知っておくと便利です。色彩のスパイスWeb配色に便利な無料iPhoneアプリ6つまた、何故その色を選択したかを文章で説明できるとより説得力がつきます。固有色名で伝えるとより良いです。青は誠実な印象を与え彩度を下げることで落ち着いた雰囲気も伝えられます○○のようなをシルバーグレイを使うと高級感が伝わります競合のサイトが青・緑を使ってるのでそれは避けましょう賑やかな雰囲気を出すために多色にしつつ、ターゲットが大人の女性なので明度は高くしましょうなど。3.2.キーカラーが決まってるまたは、キーカラーになり得るものが既にある。以下のようなケースではそこからキーカラーを決めます。クライアントがハッキリとしたイメージを持っているロゴの色を使うコーポレートアイデンティティがある例LAWSONのサイトです。ロゴの青をキーカラーとしてます。CIマニュアルで決められてると思います。Evernoteのサイトです。ロゴの緑をキーカラーとしてます。Webサービスやアプリはロゴの色をキーカラーとするケースが多く見られます。色相と同様に、トーン(明度と彩度の組み合わせ)やトーン配色にも伝わるイメージがあります。ヒアリングで得たイメージから配色技法を選択していきます。アクセントカラー5%を基本とします。上記で決定したキーカラーはこの配色に含めます。ベースカラーとするか、サブカラー、アクセントカラーとするかは全体のバランスを見て決めます。異なる色を使うと動きが感じられます。少なくとも2つの数値を他2色と変えると差がでます。配色のイメージが崩れないようにします。この辺りの技法に関しては「Web配色デザインのセオリー」を参考にしてます。これらを複合的に考えて配色を検討していきます。情報を多く集めて選択肢を狭めていくことでスムーズに配色が決められます。5、配色の確認だいたいの配色が固まったら、サイトイメージに実際にその色を配置してシミュレーションします。色の面積を考えることも重要です。面積が異なると与える印象も変わってくるからです。この部分はクライアントも確認できる状態で進めて行くと良いです。以下のような方法があります。色のついたワイヤーフレームのようなものを用意しておきます。作りこむ必要はないです。レイヤーを操作して配色をシミュレーションしていきます。CSSを変更HTML+CSSで簡易なサイトを作っておいてWebデベロッパーズツールなどを用いて、CSSの色を変更して反映させて確認します。SassやLESSでカラーを変数にして簡単に変更できるようなページを用意しておく方法もあります。sampleWebサービスを利用オンラインで配色をシミュレーションできるツールを利用します。Sample色見本ページで配色シミューレションができます。これらの方法で確認してもらいながら、配色を調整して確定するのが理想です。作業で使いやすい状態にしておきます。この配色をベースに各ページを制作していきます。色には視線誘導や強調の効果も持たせることができますので全体を見ながら色を配置していきます。「この配色で進める」と言うのを確約しておきます。ここを曖昧にして進めてしまうと制作途中で「この配色変えたいのだけど」と言われかねません。その時は対応はしますが、問題はその時しっかり作業料を貰えるかなので、そこで揉めないためにしっかり承認は取っておきます。正直なところこの通りにできてることは多くはないです。配色のパターンもサンプルを作ってメールで送って確認というやり取りもまだあります。費用も時間も掛けれるような案件でないとここまで丁寧にやるのは難しいのではと思います。そこは現場にいる自分たちが改善して、サイト制作はこれだけの手間と時間がかかるものだと理解してもらっていかなければなと思っています。新しく立ち上げる商店やサービスで多少の色の違いが目的に及ぼす影響はどれ程のものなのかと思います。下記の用に異なる配色であっても来店数に与える影響ってほぼ変わらないのではないかと思います。お客さんが注目するのは美容師や料金、サービス、設備などもっと違うところです。その色に決定する時は少なからずクライアントの好みが入ります。その好みと、目的を達成するために考えられた配色に差がある時に、どちらをどの程度譲歩するか?そのラインの調整に毎度苦労してます...ここは今後の課題ですね。考になりそうな記事・サイトをいくつかご紹介しておきます。PMbenri僕のサイトbenri.jpの開発で参考になりました。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。