Consulting Slide Generator
コンサルファーム品質のスライド図解をHTML+Tailwindで生成する。
生成ワークフロー
Step 1: スライドタイプを特定
| タイプ | 用途 | テンプレート |
|---|---|---|
| problem | 課題提起（数字で説得） | assets/templates/problem.html |
| solution | ソリューションフロー | assets/templates/solution.html |
| matrix | 2x2マトリクス | assets/templates/matrix.html |
| compare | 比較・Do/Don't | assets/templates/compare.html |
| process | プロセスフロー | assets/templates/process.html |
Step 2: テンプレートを読み込み、内容を置換
Step 3: HTMLを保存
slides/<project-name>/<slide-name>.html
Step 4: PNGに変換
bash scripts/html2png.sh input.html output.png
デザイン原則
詳細は references/design-principles.md を参照。
必須ルール
- 12カラムグリッド -
grid-cols-12で構成 - 3レベル階層 - Eyebrow → Title → Body
- 2-3色配色 - Navy + Accent (Red/Green/Gold)
- 意図的な余白 - 詰め込まない
- 数字は大きく -
text-5xl font-black+ プログレスバー
配色
Navy: #0f172a, #1e293b, #334155
Red: #dc2626
Green: #059669
Gold: #ca8a04
フォント
- Noto Sans JP (Google Fonts CDN)
- ウェイト: 300, 400, 500, 700, 900
スライドタイプ別ガイド
Problem（課題提起）
- 左: メッセージ / 右: 数字+プログレスバー
- 推定値には注釈
Solution（ソリューション）
- ステップ横並び（5段階）
- Navy→Greenグラデーション
- 下部に効果3カラム
Matrix（2x2）
- 軸に意味を持たせる
- 各セルに優先度バッジ
Compare（比較）
- Do/Don't 2カラム
- ✓/✗ アイコン
Process（プロセス）
- 縦フロー + ゲート
- Yes/No分岐
出力仕様
- 解像度: 1200 x 675 px
- フォーマット: HTML → PNG