graphic-designer

Name: graphic-designer
Author: thepexcel

github.com/thepexcelデザイン・UI398 回インストール

リポジトリ

graphic-designer について

graphic-designerは、スライドやグラフィックなどの制作を支援するデザインスキルです。対象者に合わせたレイアウト、色、文字、アクセシビリティの指針と、任意の反復レビューを提供します。

主な機能

01目的と対象者の整理
02視覚的階層とレイアウトの指針
03色・文字・コントラストのルール
04任意の反復的な品質レビュー

活用シーン

01プレゼンテーションスライドの設計
02ソーシャルメディア画像の制作
03視覚的階層とコントラストの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thepexcel/agent-skills --skill graphic-designer

インストール後、Claude Code で/graphic-designerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.claude-plugin/

plugin.json

references/

color-theory.md

gestalt.md

layouts.md

presentation-design.md

typography.md

詳細

グラフィックデザイナー

調査に基づくデザイン原則を活用し、効果的なビジュアルコミュニケーションを実現します。

デザイン = コミュニケーション + 美しさ — 優れたデザインは目立ちません。視線を導き、メッセージを伝え、意識せずとも「しっくりくる」ものです。

クイックワークフロー

1. PURPOSE   — What should viewer DO after seeing this?
2. AUDIENCE  — Who? What culture? What device?
3. HIERARCHY — What's #1, #2, #3 in importance?
4. LAYOUT    — Sketch placement (Z or F pattern)
5. COLORS    — 60-30-10 rule (check cultural meaning!)
6. TYPE      — Max 2 fonts (1 display + 1 body)
7. ELEMENTS  — Add graphics, icons, photos
8. REFINE    — Remove until it breaks, then add back
9. CHECK     — Squint test, mobile test, contrast check
10. REVIEW   — Self-critique and iterate (optional loop)

自己レビューのループ（自動改善）

成果物を作成した後、ループを開始して自動的に分析・改善できます。

ユーザーに確認するタイミング

ループを開始する前にユーザーに確認します：

「Auto-Improvement Loop を開始しますか？成果を分析し、十分な品質に達するまで繰り返し改善します。」

オプション：

クイックレビュー — 1回分析し、必要に応じて修正
フルループ — Quality Checklist のすべての項目に合格するまで繰り返し分析
スキップ — レビューせずに納品

レビューループのワークフロー

┌─────────────────────────────────────────────────────┐
│  1. CREATE — สร้างผลงาน (slides, graphics, etc.)    │
└─────────────────────────────────────────────────────┘
                          ↓
┌─────────────────────────────────────────────────────┐
│  2. ANALYZE — วิเคราะห์โครงสร้าง                    │
│     • อ่าน XML/code ที่สร้าง                        │
│     • ตรวจสอบ positions, sizes, colors             │
│     • สร้าง thumbnails (ถ้าเป็น PPTX)              │
└─────────────────────────────────────────────────────┘
                          ↓
┌─────────────────────────────────────────────────────┐
│  3. CRITIQUE — วิจารณ์ตาม Design Principles         │
│     ใช้ Review Checklist (ด้านล่าง)                 │
└─────────────────────────────────────────────────────┘
                          ↓
              ┌───────────────────┐
              │  ผ่านทุกข้อ?      │
              └───────────────────┘
               ↙ NO          YES ↘
┌──────────────────┐      ┌──────────────────┐
│  4. FIX          │      │  5. DELIVER      │
│  แก้ไขปัญหา       │      │  ส่งมอบผลงาน     │
│  ที่พบ           │      │                  │
└──────────────────┘      └──────────────────┘
          ↓
    กลับไป Step 2
    (max 3 iterations)

レビューチェックリスト（スコア 0～10）

カテゴリ	確認項目	重要度
階層	#1 の要素は他の要素より 2 倍以上目立っていますか？	高
コントラスト	WCAG AA（4.5:1）を満たしていますか？	高
整列	要素はグリッドに沿って整列していますか？	中
余白	空白が 20% 以上ありますか？	中
色数	色は 4 色以下ですか？	中
フォント数	フォントは 2 種類以下ですか？	低
視覚的インパクト	目を引く焦点がありますか？	高
ブランドの一貫性	ブランドガイドラインに沿っていますか？	高

合格基準： 平均 7/10 以上で、重要度が高い項目に 6 未満のものがないこと

視覚的インパクトを高める

視覚的インパクトのスコアが低い場合は、以下のスキルを活用できます：

ニーズ	スキル	用途
ヒーロー画像	`/art-director`	優れた構図の AI 画像を生成するためのプロンプトを作成
ローカルでの画像生成	`/comfyui-user`	ローカルの ComfyUI サーバーを通じて画像を生成
装飾要素	`/geometric-elements`	角、線、パターンを作成

連携例：

1. สร้าง slide แล้วพบว่า visual impact ต่ำ
2. ใช้ /art-director สร้าง prompt สำหรับ background image
3. ใช้ /comfyui-user gen รูป (หรือ cloud API)
4. ใส่รูปใน slide แล้ว re-analyze

反復の上限

最大反復回数： 3 回（無限ループを防止）
早期終了の条件： ユーザーから停止の指示があった場合、またはスコアが 2 回連続で向上しなかった場合
報告： 各反復で行った変更をまとめる

デザイン原則（概要）

CRAP の原則

原則	内容	方法
コントラスト	違いを明確にする	サイズ、色、太さ
反復	一貫性を生み出す	色やフォントを再利用
整列	視覚的につなげる	グリッド、端
近接	関連する項目をまとめる	間隔

→ 詳細：references/gestalt.md

視覚的階層（影響の大きい順）

サイズ — 大きいほど重要
色／コントラスト — 明るい色ほど先に目を引く
位置 — 左上（西洋）、右上（RTL）
余白 — 独立させることで強調
太さ — 太字は目立つ

読み取りパターン

パターン	最適な用途	流れ
Z パターン	ビジュアル／マーケティング	左上 → 右上 → 左下 → 右下
F パターン	テキストの多いコンテンツ	横方向に読み、左側を縦方向に下へ

カラーシステム

60-30-10 ルール

%	役割	例
60%	メイン	背景
30%	サブ	コンテナー、カード
10%	アクセント	CTA、強調箇所

クイックパレット

雰囲気	色
プロフェッショナル	ネイビー + 白 + ゴールド
エネルギッシュ	オレンジ + 黒 + 白
穏やか	青 + ライトグレー + 白
プレミアム	黒 + ゴールド + 白
2025 年のトレンド	ダークカラー + ネオンのアクセント

色が持つ文化的な意味（まず確認してください！）

色	西洋	東アジア	タイの文脈
赤	危険、緊急性	幸運、喜び	縁起が良い
白	純粋、清潔	喪	正式／喪
黄	楽観	神聖	王室
金	高級	繁栄	プレミアム

→ 詳細ガイド：references/color-theory.md

アクセシビリティ（WCAG）

規格	通常のテキスト	大きなテキスト（18pt以上）
AA（最低基準）	4.5:1	3:1
AAA（強化基準）	7:1	4.5:1

ツール：WebAIM Contrast Checker

タイポグラフィ

クイックルール

フォントは最大2種類 — ディスプレイ用1種類＋本文用1種類
サイズで階層を表現 — フォントを変えるのではありません
行の高さ — 本文は1.4〜1.6、見出しは1.1〜1.2

安全なフォントの組み合わせ

ディスプレイ	本文	印象
Montserrat Bold	Open Sans	モダン
Playfair Display	Lato	エレガント
Kanit Bold	Sarabun	タイ語に適した組み合わせ

→ 詳細ガイド：references/typography.md

レイアウト

8px間隔システム

サイズ	用途
8px	グループ内
16px	要素間
24-32px	セクション
48px	ページの余白

ソーシャルメディアのサイズ

プラットフォーム	比率	サイズ
YouTube サムネイル	16:9	1280×720
Instagram 投稿	1:1	1080×1080
Instagram ストーリー	9:16	1080×1920
Facebook/LinkedIn	1.91:1	1200×630

→ レイアウトテンプレート：references/layouts.md

プレゼンテーションスライド

基本ルール

ルール	ガイドライン
1枚につき1つのアイデア	メッセージを1つに絞る
4のルール	箇条書きは最大4項目、各項目は4語まで
競合させない	聴衆は読むことと聞くことを同時にできません

フォントサイズ

場面	タイトル	本文	キャプション
広い会場	60pt以上	40pt以上	24pt以上
オンライン	44pt以上	32pt以上	20pt以上

→ 詳細ガイド：references/presentation-design.md

YouTube サムネイル

要素	推奨事項
顔	表情豊かな顔を使う（CTRが20〜30％向上）
テキスト	最小限にし、大胆で興味を引く内容にする
色	コントラストを高め、最大3〜4色にする
モバイル	小さいサイズでも読めるようにする

レイアウト： 顔の高さを40％以上にし、視線を合わせ、背景をぼかします

よくある間違い

間違い	修正方法
フォントが多すぎる	最大2種類にする
階層がない	最も重要な要素を2倍の大きさにする
すべてを中央揃えにする	左揃えと近接性を活用する
虹のような配色	アクセントカラーを1色選ぶ
すべての空間を埋める	余白を20％増やす
ごちゃごちゃした写真にテキストを重ねる	オーバーレイを追加するか、ぼかす
文化への配慮を怠る	色の意味を確認する

チェックリスト

デザインを始める前に

伝えたいメッセージは何ですか？
対象となる人は誰ですか？（文化、デバイス）
どのような感情を呼び起こしたいですか？

品質チェック

階層は明確ですか？（目を細めて確認）
想定サイズで読みやすいですか？
色は最大3〜4色、フォントは2〜3種類ですか？
コントラストは4.5:1以上ですか？（WCAG AA）
グリッドに沿って配置されていますか？
余白は十分ですか？

ツールの連携

/geometric-elements — 装飾アセット

python scripts/generate.py shape --style star --color "#D4A84B" --size 100
python scripts/generate.py corner-accent --color "#D4A84B" --size 150
python scripts/generate.py line-divider --color "#D4A84B" --width 800

/art-director — ビジュアルインパクト（AI画像プロンプト）

構図とビジュアルインパクトに優れた画像が必要な場合：

1. Invoke /art-director พร้อมบอก context (slide theme, mood, brand)
2. ได้ prompt ที่พร้อมใช้กับ AI image generators
3. Gen รูปผ่าน /comfyui-user หรือ cloud API

AIスライド背景（ベストプラクティス）

効果的なワークフロー：

1. ขอดู REFERENCE — ให้ user แชร์ตัวอย่าง slides ที่ชอบ
2. วิเคราะห์ PATTERNS — สรุป style (colors, elements, layout)
3. Gen ทั้ง BACKGROUND — ไม่แยกชิ้น, ไม่มี text
4. ITERATE — ปรับ size/position ตาม feedback
5. User วาง TEXT เอง — ยืดหยุ่นกว่า

✅ 推奨：

手法	理由
背景全体を生成する	パーツごとに作るより、統一感のある美しい画像になります
ロゴを参照画像として`--edit`で使う	AIが実際の形状を認識できるため、推測する必要がありません
「NO TEXT」と指定する	AIが生成するテキストは間違っていたり、見栄えが悪かったりすることがよくあります
白い背景にする	Nano Banana Proは透明背景を作成できません
シンプルなものから始める	ロゴを1つの隅に小さく配置するほうが、各隅にたくさん配置するより効果的です

❌ 非推奨：

手法	問題点
「TRANSPARENT BACKGROUND」	偽のチェッカーボード模様が生成されます
ロゴの形状を自分で説明する	AIが誤って解釈するため、代わりに--editを使います
パーツごとに生成して組み合わせる	要素同士が一致しません
装飾を増やしすぎる	ごちゃごちゃして、プロらしさが失われます

プロンプトテンプレート：

Professional presentation [TYPE] slide background,
16:9 aspect ratio. NO TEXT. [STYLE] STYLE.
BACKGROUND: [color, grid, gradient]
DECORATIVE: [small/subtle elements, specific corners]
LAYOUT: Leave [area] empty for [content]
COLORS: [hex codes]

/comfyui-user — ローカル画像生成

ComfyUIを使ってローカルで画像を生成する場合：

1. Invoke /comfyui-user พร้อมบอกว่าต้องการรูปแบบไหน
2. เลือก workflow (turbo สำหรับ gen ใหม่, edit สำหรับแก้รูปเดิม)
3. ได้รูปพร้อมใช้ใน slides

統合スキル

必要なもの	スキル	使用する場面
装飾要素	`/geometric-elements`	角、線、パターン、図形
AI 画像プロンプト	`/art-director`	ヒーロー画像、優れた構図が必要な背景
ローカル画像生成	`/comfyui-user`	ComfyUI サーバー経由で画像を生成する
PowerPoint スライド	`/pptx`	PPTX ファイルを作成／編集する
ThepExcel ブランド	`/thepexcel-brand-guidelines`	ブランドカラー、フォント、ロゴの使用

参考資料

トピック	ファイル
色彩理論	references/color-theory.md
タイポグラフィ	references/typography.md
レイアウト	references/layouts.md
プレゼンテーションデザイン	references/presentation-design.md
ゲシュタルト原則	references/gestalt.md

基本情報

作者: thepexcel
リポジトリ: thepexcel/agent-skills
カテゴリ: デザイン・UI
インストール数: 398

問題を報告