スライドを作るたびに「このデザイン、毎回ゼロから」になっていませんか。フォントを選び、カラーを決め、レイアウトを組む。内容を書く時間より見た目を整える時間のほうが長くなる、という経験は珍しくありません。
familyaidesign は、Claude Code（AIエージェント）に追加できるデザインシステムです。クリーム地×テラコッタ×ティールの共有パレットを持つ 2つのバリアント（business / casual）が、KPIレポートからスクラップブック風アルバムまでをカバーします。
詳細なコンポーネント一覧・ワークフロー・スクリプトの使い方は familyaidesign利用方法 を確認してください。
familyaidesignとは
familyaidesignは1つのパレットを共有する2バリアント構成のHTMLデザインシステムです。tw93/kami をベースに、familyai.jp向けにカスタマイズ・拡張したローカル版です。
| バリアント | 向いている文書 | 判断の目安 |
|---|---|---|
| business | ピッチデッキ・QBR・白書・KPIレポート・ランディングページ | 数字・データが主役 |
| casual | スピーチ・旅行記・思い出アルバム・家族向けスライド | 物語・体験が主役 |
指示の基本形は「familyaidesign の [バリアント名] で [文書タイプ] を作ってください。[目的と読者] / [提供するデータ・素材] / [制約：ページ数・言語・出力形式]」の4要素です。これだけで、必要なテンプレートと構成を選べます。
よく使う用例
1. ピッチデッキ — business slide-deck
投資家・顧客向けのプレゼン資料。スライド構成とKPI数値を渡すと、KPIカード・折れ線チャート・象限図が自動配置されます。ロゴや画像が未提供の場合は [IMAGE NEEDED: ...] プレースホルダが入り、数字を捏造しません。
familyaidesign の business slide-deck で、シリーズA投資家向けピッチデッキを英語で作成してください。
会社名：Atlas AI（エンタープライズ向けAI分析SaaS）。
KPI：ARR $2.1M（前年比+340%）、顧客42社、NDR 127%、粗利78%。
スライド構成：カバー／問題提起／トラクション（折れ線チャート）／競合（2×2象限図）／チーム／Ask。
HTML + PDF で出力。12スライド以内。
2. 事業報告書 / QBR — business report
経営陣向けの四半期レビュー。KPI数値と前期比を渡すと、KPI band・チャート・テーブルを自動配置します。
familyaidesign business report で Q3 事業報告書を作成してください。読者は社内経営陣。日本語メイン、数値は英語併記。
KPI：Revenue ¥2.4B（YoY +12.4%）、MAU 1.82M（QoQ +8.1%）、粗利68%、Churn 2.1%。
図表：KPI band 4枚 + 地域別棒グラフ + 四半期折れ線チャート。3ページ以内。
頻出チャート4種
| 見せたいこと | 使うチャート |
|---|---|
| カテゴリ別の比較 | bar-chart |
| 時系列のトレンド | line-chart |
| 内訳・構成比 | donut-chart |
| 増減の要因分解 | waterfall |
全14種のチャートと使い分けは familyaidesign利用方法 のセクション05を確認してください。
3. マーケティングサイト — landing-page
Web公開用の静的HTMLサイト。Vercel / Netlify にそのままデプロイできます（印刷・PDFには非対応）。
familyaidesign の landing-page で製品サイトを作成してください（Vercelにデプロイ予定）。
プロダクト：Kazumi — AI搭載の家族向け写真整理アプリ。ターゲット：30〜50代。
構成：Hero「あなたの写真が家族の物語になる」/ 主要機能3つ / 利用統計 / ユーザーの声 / FAQ / CTA。
日本語・温かみのあるトーン。スクリーンショットは後日提供。
4. スピーチ原稿 — casual report
結婚式・送別会などの登壇原稿。num-stamp で章立て、ポラロイド写真と手書き風キャプションで構成されます。印刷してそのまま読める形式で出力されます。
familyaidesign の casual report で結婚式の友人スピーチ原稿を作ってください（5分・日本語）。
構成：「出会い」→「一緒に過ごした時間」→「これからの二人へ」の3章。
写真プレースホルダーを3箇所（実際の写真は後日差し替え）。A4 2枚以内。
casualバリアントの文体ルール：「京都の魅力」ではなく「京都、はじめての銭湯で湯加減がわからない」。具体的な時間・温度・音に紐づけた文章を書きます。「〜素晴らしい思い出になりました」のような汎用フレーズは除去されます。
5. 旅行記・思い出アルバム — casual slide-deck / report
旅の記録や家族アルバムをスクラップブック風に仕上げます。写真枚数と旅程メモを渡すだけです。
familyaidesign casual slide-deck で京都旅行の記録スライドを作ってください（日本語）。
写真：12枚提供します（ファイルパスは後で追加）。
日程：3泊4日、錦市場 / 銀閣寺 / 嵐山 / 哲学の道。
1枚目はチケット風カバー。各スポットにポラロイド写真＋手書きキャプション。
6. 単体画像の生成 — Image Generation
文書ではなく1枚の画像を作る場合は、references/image-generation.md が自己完結したガイドです。文書フローとは独立して動きます。
| ルート | 使う場面 | 指示例 |
|---|---|---|
| A · AI画像生成 | イラスト・写真風 | 「家族の食卓のイラストを生成して（5:2・Xポスト用）」 |
| B · Diagram → PNG | チャート・構成図 | 「この折れ線チャートをPNGで書き出して」 |
| C · シェアカード → PNG | 告知カード・ポスター | 「イベント告知カードを作ってPNGで（1500×600）」 |
| D · HTML → PNG | 既存ページを画像化 | 「このレポートの1ページ目をPNGにして」 |
インストール
familyaidesign フォルダをスキルディレクトリにコピーします。
# macOS / Linux
~/.claude/skills/familyaidesign/
# Windows
C:\Users\<you>\.claude\skills\familyaidesign\
フォルダ名は familyaidesign のまま変えないこと。コピー後にClaude Codeを再起動すると自動的に読み込まれます。
まとめ
| やりたいこと | 使うテンプレート |
|---|---|
| 投資家向けピッチデッキ | business slide-deck |
| 四半期KPIレポート・QBR | business report |
| 1ページ営業シート | business report（1ページ） |
| Webマーケティングサイト | landing-page |
| スピーチ原稿 | casual report |
| 旅行記・家族アルバム | casual slide-deck / report |
| 単体のイラスト・画像 | Image Generation（4ルート） |
「毎回ゼロからデザインする」から「指示するだけで整った文書ができる」へ。KPI数値を渡すなら business report、旅程メモや思い出を形にするなら casual report が入口になります。