AI社員 成果物サンプル

28-diagram-maker

diagram-briefhow-to-diagramprompt-set
🖥 diagrams/aiueo-structure.html （別タブで開く）
diagram-brief.md

diagram-brief.md — 図解ブリーフ（前提整理）

すべて架空。実在の個人・企業・口座・連絡先は使わない（_quality_audit/SCENARIO.md 準拠）。

0. 案件サマリー

1. 図解対象・読者・分かればよいこと

2. モード選択

成果物モード理由
diagrams/aiueo-structure.htmlHTML図解仕組みの階層・工程・役割分担を、ツリー/スイムレーン/比較で構造的に見せたい。社内共有・印刷・会員サイト埋め込みにも使える1ファイル完結が適する
images/diagram-*.png画像図解（gpt-image-2）SNS・セミナー資料・LPに貼る1枚ビジュアル。視覚メタファーで直感的に見せる。プロンプトは prompt-set.md

3. 入れる要素（省略しない）

4. ブランド・トーン

5. 使ってはいけない情報

6. 成功条件

how-to-diagram.md

how-to-diagram.md — 難しいものを「一目で分かる図解」にする手順

難しい概念・複雑なフォルダ・業務フロー・事業の仕組みを、文章で説明する代わりに
ノード・矢印・階層・比較・色分けで「見ただけで分かる」状態にするための手順です。
この案件（株式会社アイウエオ / AIO Marketing OS）を例にしています。

ステップ0 — モードを決める（画像 / HTML）

合図モード
「HTML / 1ファイル / コピペで動く / 印刷したい / フォルダ階層を見せたい」HTML図解
「図解作って / 分かりやすい図に / SNS・資料に貼る1枚」画像図解（gpt-image-2）

迷ったら確認する。両方欲しいなら両方作る（本案件は両方）。

ステップ1 — 「この1枚で何が分かればよいか」を1つに絞る

図解が失敗する一番の原因は、欲張って全部詰めること。伝えたいことを1つに絞る。

これが図全体の背骨になる。すべての要素は、この1つを支えるために置く。

ステップ2 — 要素を漏らさず抜き出す（まだ絵にしない）

対象を、次の5種類に分解して箇条書きにする。ここで省略しない。 省略は最後の整理でやる。

種類本案件の例
ノード（登場するもの）入力素材 / AI社員 / 集客・営業・制作 / 残る資産
関係（矢印）入力 → AI社員 → 各現場 → 資産
階層（上下・包含）作業が消える → 仕組みが残る → 導線がつながる → 売上が残る
入力 / 出力入力＝自社情報・資料 / 出力＝下書き・蓄積データ
順序（時間）Step1 診断 → Step5 運用（8週間）

ステップ3 — 「難しい言葉」を視覚メタファーと言い換えに置き換える

抽象語のままだと伝わらない。絵にできる言葉と、中学生でも分かる言い換えにする。

難しい言葉図解での扱い
AIエージェント / 自動化「AI社員」＝手順を覚えた仕組み。中心ハブのアイコンで表現
業務効率化「作業が消える」「時間が空く」と状態で言う
資産化・再現性「積み上がるブロック（価値ラダー）」で見せる
ワークフロースイムレーンで「人がやる / AIがやる」を分ける

ステップ4 — 対象に合う「視覚化の型」を選ぶ

1種類だけだと単調になる。最低4種類を混ぜる。本案件で選んだ6型:

  1. 左右比較（before/after） … 導入前と導入後の状態差
  2. 中心ハブ図 … AI社員を真ん中に置き、入力と3つの現場へ放射
  3. スイムレーン … 人の仕事 / AIの仕事を2レーンで分担
  4. 階層ツリー … 8週間5工程と、各工程の成果物
  5. 価値ラダー … 価値が下から積み上がる順序
  6. 判断マトリクス … 最初に任せる業務の見分け方（○✕表）

ステップ5 — 視線の流れと色の意味を固定する

ステップ6 — 作る

外部ライブラリ・外部画像・CDN・Webフォント禁止。CSSは <style> 内。スマホ・A4印刷対応。

16:9 横長、全要素列挙、視覚メタファー、比較、色指定を入れる。

ステップ7 — 検証する（HTMLはスクショ必須）

```bash

構文チェック

python3 -c "import html.parser; html.parser.HTMLParser().feed(open('diagrams/aiueo-structure.html',encoding='utf-8').read()); print('OK')"

外部参照ゼロ確認

grep -nE "<script|@import|https?://|cdn|fonts.googleapis" diagrams/aiueo-structure.html || echo "外部参照なし"

headless Chrome スクショ（desktop / mobile）

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
ABS="$(pwd)/diagrams/aiueo-structure.html"
"$CHROME" --headless=new --disable-gpu --hide-scrollbars --force-device-scale-factor=2 \
--window-size=1180,2880 --screenshot="screenshots/aiueo-structure-desktop.png" "file://$ABS"
"$CHROME" --headless=new --disable-gpu --hide-scrollbars --force-device-scale-factor=2 \
--window-size=390,4000 --screenshot="screenshots/aiueo-structure-mobile.png" "file://$ABS"
```

スクショを目視し、文字潰れ・要素漏れ・崩れ・モバイルで1カラム化を確認する。

ステップ8 — 効いた型を残す

うまくいった視覚化の型を qa.md の改善メモに残す。次回、似た対象に同じ型を再利用する。

チェック（この手順を1枚に縮めると）

1つに絞る → 要素を漏らさず出す → 難語を絵と言い換えに → 型を4種以上選ぶ → 流れと色を固定 → 作る → スクショ検証 → 型を残す。

prompt-set.md

prompt-set.md — 画像図解プロンプト（gpt-image-2）

株式会社アイウエオ / AIO Marketing OS の画像図解用プロンプト。
16:9 横長（推奨 3840x2160、速度優先 2048x1152）。すべて架空。実名・実連絡先は使わない。
生成画像は同フォルダ images/ に保存し、ファイル名を下表の通りにする。deliverable.html のギャラリーで表示される。

生成物の対応表

ファイル名内容状態
images/diagram-aiueo-overview.pngAIO Marketing OS の全体像（事業の仕組み1枚）別プロセスで生成予定。生成後にここへ配置
images/diagram-ai-employee-flow.png「AI社員を雇うと作業が消えて売上が残る」の流れ図別プロセスで生成予定。生成後にここへ配置
現時点で images/ は空。生成された画像が届いたら上記名で置くと、deliverable に自動で紐づく。
HTML図解（diagrams/aiueo-structure.html ＋ screenshots/）は本パックで生成済み。

プロンプト1 — diagram-aiueo-overview.png（事業の全体像）

```text
用途: infographic-diagram / business-system-visual。16:9 横長、3840x2160。
テーマ: 架空のAIマーケティング支援サービス「AIO Marketing OS」の仕組みを、1枚で理解できる高密度インフォグラフィック。
読者: 技術用語を知らない中小企業の経営者・個人事業主。

構図: 中央に「AI社員」を表す親しみやすいロボットのアイコンを大きく置き、中心ハブにする。
左から「入力（自社情報・過去資料・お客様の声・商品データ）」が矢印でAI社員へ流れ込む。
AI社員から右へ3本の矢印が伸び、3つの現場「集客」「営業」「制作」のカードへつながる。
さらに右端に「残る資産（蓄積データ・再現できる型・空いた時間）」を宝箱/積み上がるブロックのメタファーで置く。
下部に8週間の流れを5ステップの帯で表す: 「①無料診断 → ②設計 → ③AI社員構築 → ④導線接続 → ⑤運用・改善」。

入れる要素（省略しない）:

視覚メタファー: AI社員＝働くロボット、残る資産＝積み上がるブロックや宝箱、現場3つ＝拡声器(集客)/握手(営業)/カチンコ(制作)のアイコン。
色: ブランドグラデ 紫 #7b6ce0 → 橙 #c87941 を基調。背景は明るい白〜淡い空色。
文字: 日本語中心。サービス名・番号は正確に。見出しは大きく、説明は短いラベルに圧縮。
禁止: 過度な装飾・ネオン・意味のない抽象背景・文字だけのカード羅列・実在ロゴや実在人物。
```

プロンプト2 — diagram-ai-employee-flow.png（作業が消えて売上が残る）

```text
用途: infographic-diagram / before-after-visual。16:9 横長、3840x2160。
テーマ: 「AI社員を1人雇うと、なぜ作業が"消えて"売上が"残る"のか」を、左右の before/after 比較で直感的に見せる。
読者: 技術用語を知らない中小企業の経営者・個人事業主。

構図: 画面を左右に分割。中央に大きな矢印「➜」。
左（導入前・赤系）: 山積みの書類とパソコンの前で疲れた人。ラベル「毎回手作業 / 人に依存 / 資産が積み上がらない」。状態に赤の「✕」マーク。
右（導入後・緑系）: 同じ人が余裕を持ち、横でAI社員ロボットが反復作業を処理。ラベル「反復はAIが処理 / 仕組みが残る / 導線がつながる」。状態に緑の「✓」マーク。
下部に価値が積み上がる4段の階段: 「作業が消える → 仕組みが残る → 導線がつながる → 売上が残る」。

入れる要素（省略しない）:

視覚メタファー: 導入前＝書類の山と疲れた人、導入後＝余裕のある人＋働くAIロボット、価値＝積み上がる階段。
色: ブランドグラデ 紫 #7b6ce0 → 橙 #c87941 を基調。左は淡い赤、右は淡い緑で状態差を表す。背景は明るい白。
文字: 日本語中心。見出し大きく、説明は短いラベル。
禁止: 過度な装飾・ネオン・意味のない抽象背景・文字だけのカード羅列・実在ロゴや実在人物。
```

生成後の紐付け手順

  1. 生成画像を上表のファイル名で images/ に保存する。
  2. deliverable.html のギャラリー（<div class="gallery">）に <a href="images/xxx.png"><img src="images/xxx.png" loading=lazy></a> を追加する。
  3. qa.md の「画像図解」軸を再評価する（文字潰れ・要素漏れ・色・16:9 を目視）。

株式会社アイウエオ / AIO Marketing OS（架空シナリオ）向けに生成した成果物サンプル。実在の個人情報・口座・連絡先は含みません（example.com のみ）。