はじめに
図解プロンプトを使っていると、次のような壁に当たることがあります。
- その場では分かりやすいが、後から使い回せない
- Canvaやスライドに転用しにくい
- 毎回AIに一から説明し直している
- 図解の「型」が人によってバラバラになる
これは、図を「完成形」で出させていることが原因です。
目次
キャリアAIカレッジが採用する「構造×表示」二段設計の考え方
キャリアAIカレッジでは、
図解を「表示」と「構造」に分けて考えることを推奨しています。
JSON／YAMLに切り替えると何が変わるのか
HTML/CSSは「見せるための形式」です。
一方、JSON／YAMLは「考えを保存・再利用するための形式」です。
JSON／YAMLが向いている代表的なユースケース
ユースケース①Canva・スライド・LPに後加工したい場合
よくある状況
- ChatGPTでHTML図解を作った
- 見た目は良いが、Canvaにそのまま使えない
- 結局、内容を目で見て手で作り直している
JSON／YAMLを使うと
- 図の「要素」「流れ」「関係性」がテキストで整理される
- Canvaでは
- nodes＝ボックス
- edges＝矢印
として機械的に再構成できる
- デザインは人間、構造はAIという役割分担が可能
👉 **「AIは設計士、人はデザイナー」**という分業が成立します。
ユースケース②
受講生に「型」として配りたい場合
よくある状況
- 図解の作り方を教えたが、受講生ごとにバラバラ
- 何が正解か分からず、手が止まる
- 添削に時間がかかる
JSON／YAMLを使うと
- 図解のフォーマットを「共通言語」として配布できる
- 受講生は
- title
- nodes
- flow
を埋めるだけでOK
- 添削も「構造」で見られるため、指導が一気に楽になる
👉 講座の再現性・品質が安定します。
ユースケース③
カリキュラム・図解を量産したい場合
よくある状況
- 毎回テーマが違う
- 図解の構成を考えるだけで疲れる
- 過去の図解が資産として残らない
JSON／YAMLを使うと
- 出力フォーマットを固定できる
- AIに
「このYAML形式で、新しいテーマの図解を作成してください」
と依頼できる - カリキュラム全体が「同じ骨格」で揃う
👉 図解がストック型資産になります。
ユースケース④
AIに「構造だけ」を考えさせたい場合
よくある失敗
- 見た目までAIに任せる
- デザインが微妙
- 修正が伝えにくい
JSON／YAMLを使うと
- AIには
- 要素の洗い出し
- 因果関係
- 手順の流れ
だけを担当させる
- 表現・色・余白は人間が調整できる
👉 **「考えるAI」「仕上げる人間」**という理想的な役割分担です。
では、HTML/CSSが向いているのはどんな場面か
JSON／YAMLが万能というわけではありません。
HTML/CSSの方が適しているケースもあります。
HTML/CSSが向いているケース
- 勉強会や講座中に、その場で図を見せたい
- Canvas機能で即表示したい
- Web記事にそのまま貼りたい
- 受講生に「まず目で理解」してもらいたい
つまり、
即時性・視認性が最優先の場面です。
キャリアAIカレッジが推奨する最強の運用方法
結論として、最も強いのは次の運用です。
① YAML／JSONで構造を出す
② 必要に応じてHTML／CSSで表示する
これは、
- 保存用：JSON／YAML
- 表示用：HTML／CSS
という二層構造です。
この形にすると、
- 再利用できる
- 教材にできる
- 表示もきれい
という三拍子が揃います。
図解用YAML／JSONのおすすめ構成
キャリアAIカレッジでは、以下の項目を固定することを推奨しています。
YAML（人が読む・編集する用）
- title：図解タイトル
- summary：1行要約
- nodes：要素一覧
- edges：関係性
- flow：手順（あれば）
- notes：補足
JSON（自動処理・ツール連携用）
- 同じ構造でOK
- プログラム処理や変換に強い
まとめ
- 教材化・テンプレ化・資産化が目的ならJSON／YAML
- その場で理解させたいならHTML／CSS
- 最強なのは
JSON／YAMLで構造化 → HTML／CSSで表示
この考え方は、
キャリアAIカレッジが重視している
**「AIを一発芸で終わらせない」**ための設計思想でもあります。
図解を「その場限り」にせず、
積み上がる知的資産に変えたい方には、
JSON／YAML形式は非常に有効な選択です。