CallConectのカラーシステム構築について

こんにちは、デザイナーの畠です。
私はCallConnectのデザインとマーケティングを担当しています。
CallConnectは2015年7月にリリースされて以来、数多くの機能が追加されてきました。

それとともに多くの色を使うようになり、管理に課題を感じるようになりました。

色の重要性について

人が情報を得るときは「五感（視覚、聴覚、嗅覚、触覚、味覚）」と呼ばれる感覚が用いられます。
その中でも最も重要なのが、「視覚、色の情報」と言われています。

色はサービスやブランドの想起につながります。
例えばコカ・コーラといえば赤色、マクドナルドといえば黄色を思い浮かべる人も多いでしょう。 私達は多くのものを色のイメージで覚えているのです。

しかし、色に一貫性がなければ、ユーザーのブランド認知の妨げになります。
そして、ページごとにツギハギで色の違いが大きければ、整理されていない印象を抱くなど、サービスへの違和感にもつながります。

CallConnectでもイメージを統一するために、色の一貫性を高めたいと考えていました。
また、一貫性を持たせたほうが、複数メンバーでの管理や運用がしやすくなります。

色の管理の課題

色の管理において、課題となったのは主に以下の3つです。

1. 色の一貫性の維持が困難
2. デザイン作成時の色選びに時間がかかる
3. 他のデザイナーやエンジニアにとって理解しにくい

初期の段階では、複数のツールを使用してデザイン管理を行う必要があり、データの重さや使い勝手の悪さが問題となりました。

しかし、Figmaという革新的なデザインツールの登場により、色やフォント、デザイン要素の共通化がずっと容易になりました。
このツールの最新機能であるバリアブルを利用して、より効率的なカラーシステムの構築を目指しました。

www.figma.com

「PrimitiveColor」と「SemanticColor」の採用

サービスで使用する色に「PrimitiveColor」と「SemanticColor」の2つのカテゴリーを設けました。
PrimitiveColorでは色相ごとに同系色を10段階に分け、SemanticColorでは色に特定の意味（例えば「danger」や「caution」）を付与し、PrimitiveColorを参照するような仕組みを構築しました。

これにより、色選びが直感的に行えるようになりました。
例えば具体的な名前（例：「border/default」）を用意しておくことで、通常の枠線の色を選択する時の作業が容易になり、他のデザイナーやエンジニアもファイルを見た際に色の意図を理解しやすくなりました。

以前はFigmaのスタイル機能を用いていましたが、参照機能がないなど柔軟性に欠ける点がありました。
しかし、バリアブルの導入により、SemanticColorがPrimitiveColorを参照することで、より一貫性のあるカラーシステムを構築できるようになりました。

さらに、バリアブル機能は数値管理にも対応しており、例えば四角形の角の丸みを事前に数値で設定しておくことで、数値を毎回入力することなく、選択だけで簡単に変更ができるようになりました。

おわりに

新しいカラーシステムの導入により、全体の色の変更が一瞬で行えるようになり、一貫性も格段に向上しました。
これにより、チーム全体がより理解しやすいファイル構造で作業できるようになり、効率的なデザイン作業が可能となりました。

今後は文字の扱いなど、他のデザイン要素も同様に効率化を図っていく予定です。

参考書籍：Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り