本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つHTML CSS Style Color Guideについてです。
HTML CSS Style Color Guide
HTML CSS Style Color GuideはHTML / CSS における「デザイン・スタイル・カラー設計」のベストプラクティスです。
コードの正しさではなく見た目・デザイン品質（UI/UX）にフォーカスした提案を行います。
以下のページからGenaiscriptのインストールボタンをクリックして取得します。
github.com
インストールボタンを押してHTML CSS Style Color Guideをダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。
インストールしたインストラクションはCopilotの動作に自動的に適用されます。
このインストラクションを読み込むと、Copilotは「デザインとして整ったUI」を前提にコードを提案するようになります。
以下のHTML、CSS、JS（スタイル生成やDOM操作含む）を対象に動作します。
**/*.html, **/*.css, **/*.js
具体的にはCopilotは以下のような行動をとります。
色の分類
以下のように色を用途に合わせて分類します。
Hot Colors（暖色）
赤・オレンジ・黄色
強い・目立つ・警告系
Cool Colors（寒色）
青・緑・紫
落ち着き・信頼感
Neutral Colors（中立）
グレー系
ベース・補助
Binary Colors
黒・白
コントラスト用
60-30-10ルール（超重要）
UIデザインの基本ルールとして色合いの割合を定義します。
- Primary: 60%
- Secondary: 30%
- Accent: 10%
これにより派手な色はアクセントとして10%だけ利用します。
意味
60%：ベース（背景など）
30%：サブカラー（カードなど）
10%：アクセント（ボタン・強調）
色の制約
60% → cool / light
30% → cool / light
10% → hot（アクセント）
背景色のルール
以下の通り、背景色の利用ルールを定義します。
OK
白・オフホワイト
薄い青・薄い緑
薄いグレー
微妙なグラデーション
NG
紫・マゼンタ
赤・オレンジ・黄色
ピンク
暖色全般
背景に強い色は使わないようになります。
テキスト色のルール
以下の通り、テキスト色の利用ルールを定義します。
OK
濃いグレー（#1f2328 など）
黒に近い色
ダークグレー
高コントラスト
背景に応じた明暗
NG
黄色（見えない）
ピンク
明るい背景に明るい文字
暗い背景に暗い文字
コントラスト不足を禁止して可読性最優先します。
特に避ける色
以下の色の利用を避けます。
- 明るすぎる紫・ピンク
- ネオンカラー
- 彩度が高すぎる色
- コントラスト不足
特別な色
暖色の扱いは以下のような特別な個所に限定します。
- 警告・エラーのみ
- 小さな領域だけ
- 多用禁止
赤は「特別な意味」に限定します。
グラデーションのルール
以下をグラデーションのベストプラクティスとして定義します。
- 色変化は小さく
- 同系色のみ
- 暖色×寒色を混ぜない
- linear gradient優先
またグラデーションは以下の個所で利用します。
- 背景
- ボタンhover
- カード
- ヘッダー
このルールにより派手なグラデーションは禁止します。
