color-font-skill について
PowerPointやエージェント製品の配色とフォント選びに使えるデザイン資料です。用途別のカラーパレットに加え、白金テーマの拡張デザインシステムと色階を収録しています。
主な機能
- 0118種類の分類済みカラーパレット
- 02パレットのスタイルと用途の指針
- 03白金テーマの拡張カラーシステム
- 04中国語・英語のフォント推奨
活用シーン
- 01プレゼンテーションの配色選定
- 02レポートやイベント向けパレット選び
- 03多言語スライドのフォント規則の統一
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/color-font-skillを入力して読み込まれたか確認します。
詳細
カラースキーム - PPT 配色ガイド
| # | 名称 | 色値 | スタイル | 適用シーン | おすすめ |
|---|---|---|---|---|---|
| 1 | モダン＆ヘルシー | #006d77 #83c5be #edf6f9 #ffddd2 #e29578 | 爽やか、癒やし | 医療・健康、心理カウンセリング、スキンケア用品、ヨガ・スパ | 濃い青緑をタイトルに、淡いピンクを背景に使います |
| 2 | ビジネス＆権威 | #2b2d42 #8d99ae #edf2f4 #ef233c #d90429 | 厳格、定番 | 年次報告、金融分析、企業紹介、行政報告 | 濃い青でプロらしさを、鮮やかな赤でデータを強調します |
| 3 | 自然＆アウトドア | #606c38 #283618 #fefae0 #dda15e #bc6c25 | 落ち着いたアースカラー | アウトドア用品、環境保護、農業プロジェクト、歴史・文化 | 濃い緑を背景に、ベージュを文字色に使います |
| 4 | レトロ＆アカデミック | #780000 #c1121f #fdf0d5 #003049 #669bbc | クラシック、知的 | 学術講演、歴史の振り返り、博物館、レトロブランド | 濃い赤と濃い青のコントラストが際立ちます |
| 5 | フェミニン＆クリエイティブ | #cdb4db #ffc8dd #ffafcc #bde0fe #a2d2ff | 夢のような、キャンディカラー | ベビー・マタニティ用品、スイーツ店、女性向けファッション、幼稚園 | 文字には濃いグレーか黒を使います |
| 6 | ボヘミアン | #ccd5ae #e9edc9 #fefae0 #faedcd #d4a373 | やさしい、低彩度 | ウェディングプランニング、インテリア、オーガニック食品、スローライフ | ベージュの背景に、緑と茶色をアクセントとして使います |
| 7 | 活力＆テクノロジー | #8ecae6 #219ebc #023047 #ffb703 #fb8500 | エネルギッシュ、スポーティー | スポーツイベント、ジム、スタートアップのピッチ、子ども向け教育 | 濃い青で安定感を出し、オレンジをポイントにします |
| 8 | 職人技＆ハンドメイド | #7f5539 #a68a64 #ede0d4 #656d4a #414833 | 素朴、コーヒー系 | コーヒーショップ、工芸品、伝統文化、パン・お菓子作り教室 | 紙や革のような質感によく合います |
| 9 | テクノロジー＆夜景 | #000814 #001d3d #003566 #ffc300 #ffd60a | 深み、鮮やか | テクノロジー発表会、星空・天文学、ナイトエコノミー、高級車 | 必ずダークモードで使います |
| 10 | 教育＆グラフ | #264653 #2a9d8f #e9c46a #f4a261 #e76f51 | 明快、論理的 | 統計レポート、教育研修、市場分析、一般的なビジネス | グラフに最適な配色です |
| 11 | 森林＆環境保護 | #dad7cd #a3b18a #588157 #3a5a40 #344e41 | 単色グラデーション、森の雰囲気 | 造園設計、ESGレポート、環境保護活動、植物研究 | 単色系なので、まとまりやすく安心して使えます |
| 12 | エレガンス＆ファッション | #edafb8 #f7e1d7 #dedbd2 #b0c4b1 #4a5759 | 低彩度、モランディカラー | オートクチュール、アートギャラリー、化粧品ブランド、雑誌風 | 余白が重要です |
| 13 | アート＆グルメ | #335c67 #fff3b0 #e09f3e #9e2a2b #540b0e | 深み、レトロな絵入りポスター | 食のドキュメンタリー、アート展、民族文化、レトロなレストラン | 大きな色面を組み合わせるのに適しています |
| 14 | ラグジュアリー＆ミステリアス | #22223b #4a4e69 #9a8c98 #c9ada7 #f2e9e4 | クール、紫系 | ジュエリー展示、ホテル運営、高度なコンサルティング、心理学 | 紫色で高級感を演出します |
| 15 | ピュアテクノロジーブルー | #03045e #0077b6 #00b4d8 #90e0ef #caf0f8 | 未来的、ピュア | クラウドコンピューティング／AI、水利・海洋、病院・医療、クリーンエネルギー | 深海から空へと続くグラデーションです |
| 16 | 海岸のコーラル | #0081a7 #00afb9 #fdfcdc #fed9b7 #f07167 | 爽やか、夏らしい | 旅行・リゾート、夏のイベント、飲料ブランド、海洋テーマ | 青緑とコーラルの補色が目を引きます |
| 17 | 活気あるオレンジ＆ミント | #ff9f1c #ffbf69 #ffffff #cbf3f0 #2ec4b6 | 明るく、楽しい | 子ども向けイベント、販促ポスター、日用消費財、ソーシャルメディア | オレンジで目を引き、ミントグリーンで爽やかさを出します |
| 18 | プラチナ＆ゴールド | #0a0a0a #0070F3 #D4AF37 #f5f5f5 #ffffff | 高級感、プロフェッショナル | エージェント製品、企業サイト、フィンテック、高級ブランド | ホワイトとゴールドを基調に、青をアクション、金色を強調に使います |
Agent Design System - 完全なカラーパレット
tokens.css/ts の Platinum White-Gold Theme をベースに、精密なデザインに使える完全な色階を提供します。
White ホワイト系（背景と明るい面）
| 色階 | 色値 | 用途 |
|---|---|---|
| white-0 | #ffffff | メイン背景 |
| white-50 | #fefefe | わずかに暖色がかった白 |
| white-75 | #fcfcfc | かすかにグレーがかった白 |
| white-100 | #fafafa | セカンダリ背景 |
| white-200 | #f7f7f7 | カード背景 |
| white-300 | #f5f5f5 | 第三背景 |
| white-400 | #f0f0f0 | 区切り領域 |
| white-500 | #ebebeb | 薄い色の境界線 |
| white-600 | #e5e5e5 | 無効状態の背景 |
| white-700 | #e0e0e0 | 濃いグレーがかった白 |
| white-800 | #d9d9d9 | プレースホルダー |
| white-900 | #d4d4d4 | 区切り線 |
| white-1000 | #cccccc | 最も濃い白 |
Gold ゴールド系（プラチナビジネスのアクセントカラー）
| 色階 | 色値 | 用途 |
|---|---|---|
| gold-25 | #FFFDF5 | ごく淡いゴールドの背景 |
| gold-50 | #FEF9E7 | 淡いゴールドの背景 |
| gold-75 | #FCF3D0 | 淡いゴールドのハイライト |
| gold-100 | #FAECB8 | ゴールドのホバー状態 |
| gold-200 | #F5DC8A | 明るいゴールドの強調 |
| gold-300 | #E8C860 | ゴールドのホバー |
| gold-400 | #D4AF37 | メインのゴールド（コア） |
| gold-500 | #B8972E | ゴールドの文字 |
| gold-600 | #9A7E26 | 濃いゴールドの強調 |
| gold-700 | #7C651E | 暗いゴールドの境界線 |
| gold-800 | #5E4C16 | 濃いゴールドの背景 |
| gold-900 | #40330F | ごく濃いゴールド |
| gold-1000 | #221A08 | ブラックゴールド |
Blue ブルー系（メインの操作色）
| 色階 | 色値 | 用途 |
|---|---|---|
| blue-25 | #F0F7FF | ごく淡い青の背景 |
| blue-50 | #E0EFFF | 情報提示の背景 |
| blue-75 | #C2DFFF | 淡い青のハイライト |
| blue-100 | #A3CFFF | 無効状態の青 |
| blue-200 | #66AFFF | 明るい青 |
| blue-300 | #338FFF | 青のホバー |
| blue-400 | #0070F3 | メインの青（コア） |
| blue-500 | #005FCC | 青の文字 |
| blue-600 | #004FA6 | 濃い青の強調 |
| blue-700 | #003F80 | 暗い青の境界線 |
| blue-800 | #002F5A | 濃い青の背景 |
| blue-900 | #001F3D | ごく濃い青 |
| blue-1000 | #001026 | ブラックブルー |
Gray グレー系（文字色と中性色）
| 色階 | 色値 | 用途 |
|---|---|---|
| gray-0 | #ffffff | 白色 |
| gray-50 | #fafafa | 極薄グレー |
| gray-75 | #f5f5f5 | 薄いグレーの背景 |
| gray-100 | #ededed | 薄い区切り線 |
| gray-200 | #d4d4d4 | 薄い境界線 |
| gray-300 | #a3a3a3 | 4次テキスト |
| gray-400 | #737373 | 3次テキスト |
| gray-500 | #525252 | 2次テキスト |
| gray-600 | #404040 | 濃いグレー |
| gray-700 | #2e2e2e | 暗い背景 |
| gray-800 | #1f1f1f | 濃い背景 |
| gray-900 | #141414 | 極めて濃い背景 |
| gray-1000 | #0a0a0a | メインテキスト色（中核） |
透明度の色値
Opacity Black（黒の透明度）
| 透明度 | 色値 | 用途 |
|---|---|---|
| 0% | #0a0a0a00 | 完全に透明 |
| 2% | #0a0a0a05 | ごく薄いオーバーレイ |
| 4% | #0a0a0a0a | サブのインタラクション背景 |
| 8% | #0a0a0a14 | 境界線／区切り |
| 15% | #0a0a0a26 | 押下状態 |
| 20% | #0a0a0a33 | 薄いオーバーレイ |
| 25% | #0a0a0a40 | 中程度のオーバーレイ |
| 50% | #0a0a0a80 | 半透明 |
| 70% | #0a0a0ab2 | 濃いオーバーレイ |
| 80% | #0a0a0acc | ホバー状態 |
| 90% | #0a0a0ae5 | ツールチップ |
| 95% | #0a0a0af2 | ポップアップ |
Opacity White（白の透明度）
| 透明度 | 色値 | 用途 |
|---|---|---|
| 0% | #ffffff00 | 完全に透明 |
| 2% | #ffffff05 | ごく薄いオーバーレイ |
| 4% | #ffffff0a | サブのインタラクション背景 |
| 8% | #ffffff12 | 境界線／区切り |
| 15% | #ffffff26 | 押下状態 |
| 20% | #ffffff33 | 薄いオーバーレイ |
| 25% | #ffffff40 | 中程度のオーバーレイ |
| 50% | #ffffff80 | 半透明 |
| 70% | #ffffffb2 | 濃いオーバーレイ |
| 80% | #ffffffcc | ホバー状態 |
| 90% | #ffffffe5 | ツールチップ |
| 95% | #fffffff2 | ポップアップ |
フォントファミリー - フォント仕様
推奨フォント
| 言語 | デフォルトフォント | 選択可能なフォント |
|---|---|---|
| 中国語 | 微软雅黑 (Microsoft YaHei) | — |
| 英語 | Arial | Georgia, Calibri, Cambria, Trebuchet MS |
- 中国語と英語を混在させる場合：中国語には微软雅黑を、英語には選択したフォントを使用します
- クロスプラットフォームでの互換性を確保するため、システム標準フォントを優先的に使用します
- 見出しと本文には異なるフォントを組み合わせて使用できます（例：Georgia + Calibri）
コメント
Markdown 対応