🎨 デザインコミュニティ

design-style-skill

PPT資料のデザインにおいて、角の丸みや余白などのスタイルレシピを用いて、シャープ、ソフト、丸みを帯びた印象など、一貫性のある視覚的なデザインシステムを提案するSkill。

📜 元の英語説明(参考)

Select a consistent visual design system for PPT slides using radius/spacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes Sharp/Soft/Rounded/Pill recipes, component mappings, typography/spacing rules, and mixing guidance. Triggers: 风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style.

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

一言でいうと

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

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

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

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o design-style-skill.zip https://jpskill.com/download/19693.zip && unzip -o design-style-skill.zip && rm design-style-skill.zip

🪟 Windows (PowerShell)

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

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

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

1. 下の青いボタンを押して design-style-skill.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → design-style-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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Style Recipes - PPT視覚スタイルシステム

同一のデザインでも、角丸（rectRadius）と間隔を調整することで4種類の異なるスタイルを表現できます。シーンに合わせて適切なスタイルレシピを選択してください。

単位説明: PptxGenJS はインチ(inch)を単位として使用します。スライドサイズは 10" × 5.625" (LAYOUT_16x9) です。

スタイル概要

スタイル	角丸範囲	間隔範囲	適合シーン
Sharp & Compact	0 ~ 0.05"	コンパクト	データ集約型、表、専門レポート
Soft & Balanced	0.08" ~ 0.12"	適度	企業報告、ビジネスプレゼンテーション、汎用PPT
Rounded & Spacious	0.15" ~ 0.25"	ゆったり	製品紹介、マーケティングプレゼンテーション、クリエイティブな展示
Pill & Airy	0.3" ~ 0.5"	透明感	ブランド展示、発表会、ハイエンドプレゼンテーション

Sharp & Compact（シャープ＆コンパクト）

視覚的特徴: 四角く、情報密度が高く、プロフェッショナルで厳粛な印象です。

Token レシピ

カテゴリ	値 (インチ)	説明
角丸-小	0"	完全な直角
角丸-中	0.03"	微妙な角丸
角丸-大	0.05"	小さな角丸
要素内パディング	0.1" ~ 0.15"	コンパクト
要素間隔	0.1" ~ 0.2"	コンパクト
ページ余白	0.3"	やや狭い
ブロック間隔	0.25" ~ 0.35"	コンパクト

Soft & Balanced（ソフト＆バランス）

視覚的特徴: 適度な角丸、快適な余白、プロフェッショナルでありながら親しみやすい印象です。

Token レシピ

カテゴリ	値 (インチ)	説明
角丸-小	0.05"	小さな角丸
角丸-中	0.08"	中程度の角丸
角丸-大	0.12"	やや大きな角丸
要素内パディング	0.15" ~ 0.2"	適度
要素間隔	0.15" ~ 0.25"	適度
ページ余白	0.4"	標準
ブロック間隔	0.35" ~ 0.5"	適度

Rounded & Spacious（丸み＆ゆったり）

視覚的特徴: 大きな角丸、十分な余白、フレンドリーで親しみやすく、モダンな印象です。

Token レシピ

カテゴリ	値 (インチ)	説明
角丸-小	0.1"	中程度の角丸
角丸-中	0.15"	大きな角丸
角丸-大	0.25"	非常に大きな角丸
要素内パディング	0.2" ~ 0.3"	ゆったり
要素間隔	0.25" ~ 0.4"	ゆったり
ページ余白	0.5"	やや広い
ブロック間隔	0.5" ~ 0.7"	ゆったり

Pill & Airy（ピル＆エアリー）

視覚的特徴: 全面的な角丸のピル型、大量の余白、軽やかで透明感があり、ブランド展示に強い印象を与えます。

Token レシピ

カテゴリ	値 (インチ)	説明
角丸-小	0.2"	大きな角丸
角丸-中	0.3"	ピル型
角丸-大	0.5"	完全なピル型
要素内パディング	0.25" ~ 0.4"	透明感
要素間隔	0.3" ~ 0.5"	透明感
ページ余白	0.6"	広い
ブロック間隔	0.6" ~ 0.9"	透明感

コンポーネントレベルのスタイルマッピング表

コンポーネント	Sharp	Soft	Rounded	Pill
ボタン/ラベル	rectRadius: 0	rectRadius: 0.05	rectRadius: 0.1	rectRadius: 0.2
カード/コンテナ	rectRadius: 0.03	rectRadius: 0.1	rectRadius: 0.2	rectRadius: 0.3
画像コンテナ	rectRadius: 0	rectRadius: 0.08	rectRadius: 0.15	rectRadius: 0.25
入力ボックス形状	rectRadius: 0	rectRadius: 0.05	rectRadius: 0.1	rectRadius: 0.2
バッジ/Badge	rectRadius: 0.02	rectRadius: 0.05	rectRadius: 0.08	rectRadius: 0.15
アバターフレーム	rectRadius: 0	rectRadius: 0.1	rectRadius: 0.2	rectRadius: 0.5 (円形)

PptxGenJS 角丸の例

// Sharp スタイルカード
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.03
});

// Rounded スタイルカード
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.2
});

// Pill スタイルボタン (高さ0.4"の場合、rectRadiusを0.2"に設定するとピル型になります)
slide.addShape("rect", {
  x: 3, y: 4, w: 2, h: 0.4,
  fill: { color: "4A90D9" },
  rectRadius: 0.2
});

組み合わせの原則

1. 外側コンテナ ≥ 内側角丸

// 正しい：外 > 内
card:   rectRadius: 0.2
button: rectRadius: 0.1

// 誤り：内 > 外 → 視覚的なはみ出し感
card:   rectRadius: 0.1
button: rectRadius: 0.2

2. 情報密度が間隔を決定

領域タイプ	推奨スタイル
データ表示領域	Sharp / Soft（コンパクトな間隔）
コンテンツ閲覧領域	Rounded / Pill（ゆったりとした間隔）
タイトル領域	Soft / Rounded（適度な間隔）

3. 角丸と要素の高さの関係

要素の高さ	Sharp	Soft	Rounded	Pill
小 (< 0.3")	0"	0.03"	0.08"	高さ/2
中 (0.3" ~ 0.6")	0.02"	0.05"	0.12"	高さ/2
大 (0.6" ~ 1.2")	0.03"	0.08"	0.2"	0.3"
超大 (> 1.2")	0.05"	0.12"	0.25"	0.4"

Pillスタイルヒント: 完璧なピル型を実現するには、rectRadius = 要素の高さ / 2 に設定してください。

Typography 組版規範 (PPT)

用途	フォントサイズ (pt)	説明
注釈/出典	10 ~ 12	最小可読フォントサイズ
本文/説明	14 ~ 16	標準本文
副見出し	18 ~ 22	主要ではない見出し
見出し	28 ~ 36	ページタイトル
大見出し	44 ~ 60	カバー/章タイトル
データハイライト	60 ~ 96	重要な数字の表示

Spacing 間隔規範 (PPT)

10" × 5.625" のスライドサイズに基づいています。

用途	推奨値 (インチ)
アイコンとテキストの間隔	0.08" ~ 0.15"
リスト項目間隔	0.15" ~ 0.25"
カード内パディング	0.2" ~ 0.4"
要素グループ間隔	0.3" ~ 0.5"
ページ安全余白	0.4" ~ 0.6"
主要ブロック間隔	0.5" ~ 0.8"

迅速な選択ガイド

プレゼンテーションタイプ	推奨スタイル	理由
財務/データレポート	Sharp & Compact	情報密度が高く、専門的で厳格
企業報告/ビジネス	Soft & Balanced	プロフェッショナルさと親しみやすさのバランス
製品紹介/マーケティング	Rounded & Spacious	モダンで親しみやすい印象
発表会/ブランド展示	Pill & Airy	ハイエンド感、視覚的インパクト
トレーニング/教育	Soft / Rounded	明確で読みやすく、フレンドリー
技術共有	Sharp / Soft	プロフェッショナル、情報が明確

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

Style Recipes - PPT视觉风格系统

同一套设计可通过调整圆角（rectRadius）和间距呈现4种不同风格。根据场景选择合适的风格配方。

单位说明: PptxGenJS 使用英寸(inch)作为单位。幻灯片尺寸为 10" × 5.625" (LAYOUT_16x9)

风格概览

风格	圆角范围	间距范围	适合场景
Sharp & Compact	0 ~ 0.05"	紧凑	数据密集型、表格、专业报告
Soft & Balanced	0.08" ~ 0.12"	适中	企业汇报、商务演示、通用PPT
Rounded & Spacious	0.15" ~ 0.25"	宽松	产品介绍、营销演示、创意展示
Pill & Airy	0.3" ~ 0.5"	通透	品牌展示、发布会、高端演示

Sharp & Compact（锐利紧凑）

视觉特征: 方正、信息密度高、专业严肃感。

Token 配方

类别	值 (英寸)	说明
圆角-小	0"	完全直角
圆角-中	0.03"	微圆角
圆角-大	0.05"	小圆角
元素内边距	0.1" ~ 0.15"	紧凑
元素间距	0.1" ~ 0.2"	紧凑
页面边距	0.3"	较窄
区块间距	0.25" ~ 0.35"	紧凑

Soft & Balanced（柔和均衡）

视觉特征: 适中的圆角、舒适的留白、专业又不失亲和。

Token 配方

类别	值 (英寸)	说明
圆角-小	0.05"	小圆角
圆角-中	0.08"	中等圆角
圆角-大	0.12"	较大圆角
元素内边距	0.15" ~ 0.2"	适中
元素间距	0.15" ~ 0.25"	适中
页面边距	0.4"	标准
区块间距	0.35" ~ 0.5"	适中

Rounded & Spacious（圆润宽松）

视觉特征: 大圆角、充裕留白、友好亲切、现代感。

Token 配方

类别	值 (英寸)	说明
圆角-小	0.1"	中等圆角
圆角-中	0.15"	大圆角
圆角-大	0.25"	很大圆角
元素内边距	0.2" ~ 0.3"	宽松
元素间距	0.25" ~ 0.4"	宽松
页面边距	0.5"	较宽
区块间距	0.5" ~ 0.7"	宽松

Pill & Airy（胶囊通透）

视觉特征: 全圆角胶囊形、大量留白、轻盈通透、品牌展示感强。

Token 配方

类别	值 (英寸)	说明
圆角-小	0.2"	大圆角
圆角-中	0.3"	胶囊形
圆角-大	0.5"	完全胶囊
元素内边距	0.25" ~ 0.4"	通透
元素间距	0.3" ~ 0.5"	通透
页面边距	0.6"	宽
区块间距	0.6" ~ 0.9"	通透

组件级风格映射表

组件	Sharp	Soft	Rounded	Pill
按钮/标签	rectRadius: 0	rectRadius: 0.05	rectRadius: 0.1	rectRadius: 0.2
卡片/容器	rectRadius: 0.03	rectRadius: 0.1	rectRadius: 0.2	rectRadius: 0.3
图片容器	rectRadius: 0	rectRadius: 0.08	rectRadius: 0.15	rectRadius: 0.25
输入框形状	rectRadius: 0	rectRadius: 0.05	rectRadius: 0.1	rectRadius: 0.2
徽章/Badge	rectRadius: 0.02	rectRadius: 0.05	rectRadius: 0.08	rectRadius: 0.15
头像框	rectRadius: 0	rectRadius: 0.1	rectRadius: 0.2	rectRadius: 0.5 (圆形)

PptxGenJS 圆角示例

// Sharp 风格卡片
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.03
});

// Rounded 风格卡片
slide.addShape("rect", {
  x: 0.5, y: 1, w: 4, h: 2.5,
  fill: { color: "F5F5F5" },
  rectRadius: 0.2
});

// Pill 风格按钮 (高度0.4"时，rectRadius设为0.2"即为胶囊形)
slide.addShape("rect", {
  x: 3, y: 4, w: 2, h: 0.4,
  fill: { color: "4A90D9" },
  rectRadius: 0.2
});

混搭原则

1. 外层容器 ≥ 内层圆角

// 正确：外 > 内
card:   rectRadius: 0.2
button: rectRadius: 0.1

// 错误：内 > 外 → 视觉溢出感
card:   rectRadius: 0.1
button: rectRadius: 0.2

2. 信息密度决定间距

区域类型	推荐风格
数据展示区	Sharp / Soft（紧凑间距）
内容浏览区	Rounded / Pill（宽松间距）
标题区域	Soft / Rounded（适中间距）

3. 圆角与元素高度的关系

元素高度	Sharp	Soft	Rounded	Pill
小 (< 0.3")	0"	0.03"	0.08"	高度/2
中 (0.3" ~ 0.6")	0.02"	0.05"	0.12"	高度/2
大 (0.6" ~ 1.2")	0.03"	0.08"	0.2"	0.3"
超大 (> 1.2")	0.05"	0.12"	0.25"	0.4"

Pill风格提示: 要实现完美胶囊形，设置 rectRadius = 元素高度 / 2

Typography 排版规范 (PPT)

用途	字号 (pt)	说明
注释/来源	10 ~ 12	最小可读字号
正文/描述	14 ~ 16	标准正文
副标题	18 ~ 22	次要标题
标题	28 ~ 36	页面标题
大标题	44 ~ 60	封面/章节标题
数据高亮	60 ~ 96	关键数字展示

Spacing 间距规范 (PPT)

基于10" × 5.625"幻灯片尺寸：

用途	推荐值 (英寸)
图标与文字间距	0.08" ~ 0.15"
列表项间距	0.15" ~ 0.25"
卡片内边距	0.2" ~ 0.4"
元素组间距	0.3" ~ 0.5"
页面安全边距	0.4" ~ 0.6"
主要区块间距	0.5" ~ 0.8"

快速选择指南

演示类型	推荐风格	原因
财务/数据报告	Sharp & Compact	信息密度高，专业严谨
企业汇报/商务	Soft & Balanced	平衡专业与友好
产品介绍/营销	Rounded & Spacious	现代感，亲切感
发布会/品牌展示	Pill & Airy	高端感，视觉冲击
培训/教育	Soft / Rounded	清晰易读，友好
技术分享	Sharp / Soft	专业，信息清晰