こんにちは、株式会社 AI Shift の後藤です。
本記事は AI Shift Advent Calendar 2024 の 15 日目の記事となります。
4月からAI Shiftに参画しまして、主にアプリケーションのUI/UXデザイン領域を担当しております。どうぞご贔屓に。
タイトルの通り幅広く使えるカラーパレットを作ってみましたので、その過程の一部をご紹介いたします。
経緯
なぜカラーパレットを、しかも幅広く使えるものをつくる事になったのかという経緯からお話します。
AI Shiftは既に複数のアプリケーションが存在しており、新しいアプリケーションも目下開発中で今後も増えていきます。それらを統合して管理する必要がある、というのは開発側で既に課題としてありました。
また、お客様にご説明する資料で使う色が単調になりがちだったり、色選びが属人化してしまうのでなんとかしたい、という課題がセールス側にありました。
そして、情報発信していく際のトーン・マナーを統一していきたいのでそのための軸が必要、という課題が広報チームにありました。
これらの課題を解決するために、アプリケーションだけでなく提案資料や広報活動でも使える幅広いカラーパレットを作ろうと決めました。
カラーパレットの重要性
そもそもカラーパレットをなぜつくるのか・どのような効果があるのか。
自分なりに振り返ってみると、次のような事が挙げられると思います。
ユーザー体験の向上
なにより一貫性のあるデザインや色はユーザーを混乱させず、操作性や理解度を向上させます。
ブランドイメージの強化
一貫した色使いはブランドの認知度を高め、ユーザーに信頼感を与えます。
デザインや開発の効率向上
統一されたカラーパレットがあることで、チーム内でのデザインや開発作業がスムーズになり、アプリケーション、提案資料、Webサイトなどで統一感を出すことができます。
カラーパレットの決め方
ブランドガイドラインに基づく色の選定
まず、ブランドの一貫性を保つために、AI Shiftのシンボルマークで使用されている以下の3色を基にカラーパレットを作成することにしました。
-
#EAE400（イエロー） -
#154D60（ブルー） -
#AEC6CE（グレー）
色彩調和の検討
3つの各ブランドカラーに対して、色彩調和の理論を使って色のバリエーションを作っていきます。
色彩調和には次のようなものがあります。
- 補色：色相環で正反対に位置する色を選び、強いコントラストを生み出します。
- 分割補色：補色の両隣の色を選び、補色よりも柔らかなコントラストを実現します。
- トライアド（3色配色）：色相環を等間隔に3分割した位置の色を組み合わせ、バランスの取れた配色を作ります。
- 類似色：色相環で隣接する色を選び、まとまりのある穏やかな配色を生み出します。
これらの配色パターンを作ってくれるツールとしてFigmaプラグインのColor wheel palette generatorを利用しました。わかりやすいUIで、無料で使えるのでオススメです。
3つの各ブランドカラーの色彩調和を並べてみると次の図のようになります。
単色展開によるカラーバリエーションの拡充
さらに、各色の明度や彩度を調整する単色展開を行い、幅広いバリエーションを確保しました。
使用したツールはFigmaプラグインのTailwind CSS Color Generatorです。既にフロントエンドでTailwind CSSを使うことが決まっていた事もあり、このプラグインを選びました。
これにより、さまざまなデザイン要素や状況に適した色を選ぶことができるようになりました。
単色展開した結果が下記の図です。
カラーパレットを目的別に当ててみる
作成した色の数は全部で264色あります。
すべての色を同時に使うことはありませんが、どんなときにどの色を使うか明確だと嬉しいですね。
目的別に色の組み合わせを試していきます。簡単なモックに色を当てて確認していきます。
アプリケーション(Light/Dark)
ユーザビリティと視認性を重視して色を選びました。重要な操作ボタンには強調色を使用し、ユーザーの注意を引くようにしています。また、ダークモードでも統一感が保たれるように色を選びました。
資料などで使うチャート
データの可視化に適した色を選ぶために、色覚多様性に配慮しつつできるだけ識別しやすい色を選びました。
フィードバック
簡易モックでいくつか試したあと、他の人の意見も聞いてみます。職種それぞれの視点から様々な意見が出てきますので、バランスをとりながら反映していきます。
最終的にはユーザビリティテストやアクセシビリティチェックを行い完成形に近づけていくのですが、それはまたこれからのお話となります。なので、今回はここまでです。
学びと展望
今回、アプリケーションにとどまらず提案資料やWebサイトなどにも適用できるカラーパレットを作成することは新鮮な体験でした。これまで単調になりがちだった色選びに対して、一定のルールと豊富な選択肢を持たせることができたのは大きな成果だと思います。これにより、デザインの一貫性を保ちながら、表現の幅を広げることができるのではと思います。
しかし、色のバリエーションが多いことで、使用するメンバーがどの色を選べばよいか迷ってしまう可能性があることも懸念として浮かび上がりました。今後は、色の使用ガイドラインやおすすめの組み合わせを共有し、チーム内で皆が適切な色を選べるようにサポートしていきたいと考えています。
まとめ
カラーパレットの決め方について、ブランドカラーを基にした展開から、色彩調和の理論を活用したバリエーションの生成、そして具体的な用途別の適用まで、一連のプロセスを振り返りました。色はデザインの根幹を支える重要な要素であり、その選び方ひとつでユーザー体験やブランドイメージに大きな影響を与えます。今回の取り組みを通じて得た知見や工夫が、デザイナーやチームでのカラーパレット作りに携わる方々の参考になれば幸いです。色選びに迷われている方や、デザインの統一感を高めたいと考えている方にとって、本記事が少しでもお役に立てれば嬉しく思います。
最後に
AI Shiftではエンジニアの採用に力を入れています！
少しでも興味を持っていただけましたら、カジュアル面談でお話しませんか？
（オンライン・19時以降の面談も可能です！）
【面談フォームはこちら】
Discussion