プロダクトカラーを決めるときのヒント

nanammeon
·
公開:2023/11/24

わたしがプロダクトカラーを決めるときは基本的に5つの色を決めてプロダクトを作ることが多いです。以下に参考例を作ってみました。

※命名は今回わかりやすいように全て別の単語にしています。規則性に合わせてPrimary/Secondaryで統一しても良いと思います。

各カラーの説明

  • Primary

    • プロダクトのメインカラーとして使用。

  • Secondary

    • プロダクトのサブカラーとして使用(アクセントとして利用し、多用することを避ける)。

  • Char/Main

    • プロダクトの文字色(本文など)として使用。

  • Char/Sub

    • プロダクトの注釈やサブテキストとして使用。

  • White

    • プロダクトの背景色として使用。

また、背景色は1色で用意しましたが、画面全体の背景色、カードUIの背景色で2色用意すると差別化できます。

カラーパレットを用意する

プライマリーカラーとして設定した色に対してティントを調整したカラーパレットも用意しておくと便利です。プロダクト内で使用するクリエイティブなどコミュニケーションデザインで利用する際にブランドイメージが保てます。

また、わたしがよく使うTipsとしては文字色や背景色にほんのりプライマリーカラーを混ぜています。個人的な感覚ですが、プロダクト全体が調和されていい感じになります。

サンプルとしてサインアップ・イン画面を作ってみました。基本的なフォームUIを用いながら今回設定したカラーを使っています。色の比率としてはこのくらいがちょうど良いと感じています(もちろんある程度画面数が揃っているプロダクトはその限りではありませんが)。

カラーシステムを作っていくときにも参考になり得そうだと感じたので備忘録も兼ねてこのしずかな場所に放流したいと思います。流れ着いたこの記事を見つけたあなたに幸せが訪れますように。

@nanammeon
シンプルだけどちょっと可愛いデザインが好きなデザイナーです。ナニトッツォ🍩🙏|@nanammeon