🎨 デザインコミュニティ

color-font-skill

PPT資料やデザインで、配色やフォントの組み合わせに迷った際に、ブランドイメージに合った見やすいテーマやフォントを提案してくれるSkill。

📜 元の英語説明(参考)

Choose presentation-ready color palettes and font pairings for PPT/design tasks. Use when users ask for visual theme choices, brand-safe palettes, or font recommendations. Triggers include: 配色, 色板, 字体, color palette, font, PPT配色, 字体搭配.

🇯🇵 日本人クリエイター向け解説

一言でいうと

PPT資料やデザインで、配色やフォントの組み合わせに迷った際に、ブランドイメージに合った見やすいテーマやフォントを提案してくれるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o color-font-skill.zip https://jpskill.com/download/19692.zip && unzip -o color-font-skill.zip && rm color-font-skill.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19692.zip -OutFile "$d\color-font-skill.zip"; Expand-Archive "$d\color-font-skill.zip" -DestinationPath $d -Force; ri "$d\color-font-skill.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して color-font-skill.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → color-font-skill フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] 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製品、企業公式サイト、フィンテック、ハイエンドブランド	プラチナを基調に、青を行動色、金を強調色に

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`	四次文字
gray-400	`#737373`	三次文字
gray-500	`#525252`	二次文字
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`	tooltip
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`	tooltip
95%	`#fffffff2`	ポップアップ

Font Family - フォントガイドライン

推奨フォント

言語	デフォルトフォント	オプションフォント
日本語	微软雅黑 (Microsoft YaHei)	—
英語	Arial	Georgia, Calibri, Cambria, Trebuchet MS

日本語と英語が混在する場合：日本語は微软雅黑、英語は選択したフォントを使用します。
クロスプラットフォームの互換性を確保するため、システムに標準搭載されているフォントを優先的に使用します。
タイトルと本文で異なるフォントの組み合わせを使用できます（例：Georgia + Calibri）。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Color Scheme - PPT 配色方案指南

#	名称	色值	风格	适用场景	建议
1	现代与健康	`#006d77` `#83c5be` `#edf6f9` `#ffddd2` `#e29578`	清新、治愈	医疗健康、心理咨询、护肤品、瑜伽Spa	深青做标题，浅粉做背景
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产品、企业官网、金融科技、高端品牌	白金主调，蓝色行动，金色强调

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`	金色 hover 态
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`	四级文字
gray-400	`#737373`	三级文字
gray-500	`#525252`	二级文字
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`	tooltip
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`	tooltip
95%	`#fffffff2`	弹窗

语言	默认字体	可选字体
中文	微软雅黑 (Microsoft YaHei)	—
英文	Arial	Georgia, Calibri, Cambria, Trebuchet MS