Question 1

カラーパレットとは何ですか？なぜデザインで重要なのですか？

Accepted Answer

カラーパレットはデザイン全体で一貫して使用する精選された色のセットです。適切に選ばれたパレットは視覚的な調和を生み出し、ブランドアイデンティティを確立し、ユーザーの注意を誘導します。ほとんどのパレットには、メインブランドカラー、1〜2のアクセントカラー、ニュートラルな背景色、成功/エラー/警告状態のセマンティックカラーが含まれます。

Question 2

カラーパレットの60-30-10ルールとは？

Accepted Answer

60-30-10ルールは古典的なデザイン原則です：主要色をデザインの60%（背景、広い領域）、セカンダリカラーを30%（カード、サイドバー）、アクセントカラーを10%（ボタン、ハイライト、CTA）に使用します。この比率は目を圧倒せずにバランスのとれたプロフェッショナルな見た目を作り出します。

Question 3

アクセシブルなカラーパレットはどう作りますか？

Accepted Answer

テキストと背景色の間に十分なコントラストを確保してください。WCAG AAは通常テキストで最低4.5:1、大きなテキストで3:1のコントラスト比を要求します。意味を伝えるために色だけに頼らず、アイコンやラベルも使用してください。WebAIM Contrast Checkerなどのツールでパレットがアクセシビリティ基準を満たしているか確認できます。

Question 4

補色・類似色・三色配色の違いは？

Accepted Answer

補色は色相環の反対側にあります（例：青とオレンジ）— 高コントラストで鮮やか。類似色は隣接しています（例：青、青緑、緑）— 調和がとれて落ち着いた印象。三色配色は均等間隔の三色を使います（例：赤、黄、青）— バランスがとれていながら活気があります。補色はCTAに、類似色は背景に、三色配色はイラストに向いています。

Question 5

デザインシステムのパレットにはいくつの色が必要ですか？

Accepted Answer

一般的なデザインシステムのパレットには、それぞれ複数のシェードを持つ5〜10の基本色があります（例：Tailwind CSSのような50〜900スケール）。最低限、プライマリ、セカンダリ、ニュートラル/グレー、セマンティックカラー（成功の緑、エラーの赤、警告の黄、情報の青）が必要です。各色はライト/ダークモードでコントラストを維持するために明るい背景用バリアントと暗いテキスト用バリアントを持つべきです。

カラーパレット生成

よくある質問

Comments & Feedback