この図解デザイン骨格を丸コピして作り始める
これはHTML図解の「デザイン骨格 v1」のデモです。毎回この骨格をコピーして中身だけ差し替えることで、どのAIが作っても同じデザイン水準のHTML図解になります。以下の各セクションが承認済みコンポーネントの実例です。
0この図の読み方
左右を見る
左が現状、右が改善後。まず大きな違いを見る。
木を見る
成果物がどのフォルダに出るかを確認する。
流れを見る
依頼から完成まで誰が何をするかを見る。
丸を見る
次回も良くなる循環を確認する。
表を見る
どの場面でどれを選ぶかを判断する。
1先に結論: 要点は5つ
この骨格HTMLをコピーし、中身のテキストとデータだけを差し替える。CSSをゼロから書き始めた時点で品質バラつきが始まる。
色・影・線の定義（OD-TOKENS）は正本。案件固有の装飾は CASE-SPECIFIC 欄にだけ追記する。
カードの羅列で終わらせない。比較・ツリー・フロー・循環・マトリクスを組み合わせて「見ただけで分かる」を作る。
preflight スクリプトが外部参照・印刷CSS・ブロック欠落を検査する。FAIL が残る図解は未完成。
右上のインラインSVGが「チープに見えない」ための最重要パーツ。外部画像は使わず、SVGで内容を絵にする。
2現状と改善後の「地図」
現状: 毎回CSSを書き直している
作るたびにデザインを再発明するので、余白・影・文字階層が毎回違い、簡素な回に当たると「チープ」になる。
従来の作り方/ ├── 依頼を読む ├── CSSをその場で書く 毎回ゼロから ├── 見た目が回ごとに変わる 品質バラつき └── チェックは目視だけ 見落とし
固定化
改善後: 骨格コピー + 機械検査
scaffold が骨格を配り、AIは中身に集中し、preflight が検査する。誰が作っても同じ水準になる。
新しい作り方/ ├── scaffold_diagram.py 骨格を自動生成 ├── 中身だけ差し替え AIは内容に集中 ├── preflight検査 FAIL 0まで自己修正 └── ブラウザで開いて確認 毎回必須
3どんな指示をすると、何が出てくるか
HTMLは出るが、水準が運まかせ
output/archive/YYYY-MM-DD_slug/
├── diagram.html 見た目は回ごとに違う
├── source-map.md
└── prompt.md
同じ指示で、毎回同じ水準の3点セット
output/archive/YYYY-MM-DD_slug/ ├── diagram.html 骨格ベース・preflight合格 ├── source-map.md 読んだ正本と判断理由 └── prompt.md 次回同じ図解を出す入力
4依頼から完成までの流れ
骨格生成（scaffold）
作業フォルダ・diagram.html（この骨格のコピー）・source-map.md・prompt.md を自動で作る。
対象を読み、要点を10行以内に固める
何の話か・誰が見るか・何が分かればよいか・避けたい事故を先に決める。
図解形式を選び、中身を差し替える
パターン集から5種類以上を選び、骨格の各ブロックに内容を流し込む。
機械検査（preflight）
外部参照ゼロ・トークン無改変・必須ブロック・形式数・印刷CSSを検査。FAIL 0まで自己修正。
ブラウザで見て、指摘を還流する
依頼者の指摘は骨格・チェック項目へ反映し、次回から自動で守られるようにする。
5実働タイムライン（1件の図解依頼の一生）
上から下へ時間が流れる。オレンジ=依頼者（あなた）がやること、緑=自動（スクリプト）、青=AIの判断。
PHASE A — 受付から骨格まで
担当: scaffold（スキャフォールド＝作業フォルダを自動で建てる仕組み） ／ 所要: 数秒
最初の一言
これだけでOK。読者や強調点を言わなくても、決めてある標準設定で最後まで進む。
作業フォルダと骨格が自動で建つ
デザインの土台（この見本と同じ見た目）ごとコピーされるので、デザインで迷う工程がそもそも無い。
PHASE B — AIが中身を作る
担当: AIの判断 ／ 所要: 10〜30分
先に自分で調べる
図解する対象の正本ファイルを実際に読み、要点を10行以内に固める。聞かなくても分かることは聞かない。
骨格の中身だけを差し替える
見せ方を5種類以上選び、ヒーローの絵（SVG＝HTMLに直接描く図形）も内容に合わせて描き直す。
PHASE C — 点検と納品
担当: preflight（プリフライト＝納品前の自動点検） ＋ AI ／ 所要: 数分
自動点検（不合格ゼロまで）
外部への参照が無いか・デザインの土台を壊していないか・必須パーツが揃っているかを機械が検査。不合格が出たらAIが直して再検査。
見せられるもの: ブラウザで開ける完成図解＋点検合格の証拠 ／ やること: 見て一言返すだけ（OKか、直してほしい点）
最初の一言
「◯◯をHTML図解で」
完成品を見て一言返す
AIの仕事（調べる・選ぶ・差し替える・直す）
自動処理（足場づくり・納品前点検）
6誰が何をするか（分担レーン）
（依頼者）
7作るたびに良くなる循環
依頼は一言でいい
「◯◯をHTML図解で」だけで、骨格・検査・保存先はすべて仕組み側が持っている。
工場
コピー
差し替え
検査
還流
指摘は骨格に蓄積
「ここが惜しい」は骨格CSSとpreflight項目に反映され、次回から全AIが自動で守る。
8どの図解形式をいつ使うか
9骨格方式で何が変わるか（目安）
数値はダミーの見本。実案件では根拠のある数字だけを使い、推測値には「目安」と明記する。
10よくある注意点 3つ
「簡単な図解だから」とCSSを書き始めると、また品質がバラつく。どんな小さな図解でも骨格コピーから始める。
色や影を変えたくなっても正本トークンは触らない。案件固有の装飾は CASE-SPECIFIC 欄に追記する。
目視だけだと外部参照・印刷崩れ・ブロック欠落を見落とす。FAIL 0 と TEMPLATE→FILLED の切り替えまでが制作。
11よくある質問
全部のブロックを使う必要がある？
必須は ヒーロー・要点・注意点・今日の一歩・編集メモ・更新履歴。meter や faq など任意ブロックは、合わなければ削除してよい。
新しい見せ方を追加したい
CASE-SPECIFIC 欄にCSSを追記して作ってよい。良かったものは骨格へ昇格させ、次回から全員が使えるようにする。
画像やアイコンフォントは使える？
使えない。外部画像・CDN・Webフォントは preflight が FAIL にする。絵が必要ならインラインSVGで描く。
12今日からできる一歩
次のHTML図解を scaffold から始める
`scripts/scaffold_diagram.py` を実行して骨格を受け取り、この見本と同じ水準で中身だけを差し替える。
13編集しやすいポイント
- タイトル・リード文:
<header class="hero">内のテキストを差し替える - ヒーローの絵:
.hero-visual内のSVGを案件内容に合わせて描き直す - 要点の数:
.point-cardを3〜7枚の範囲で増減する - ツリーの中身:
pre.tree内のテキストと<span class="ok/hot/new/warn">を書き換える - 任意ブロック（meter・faq など）: 合わなければ
<section>ごと削除する
14更新履歴
| 日付 | 変更内容 | 理由 |
|---|---|---|
| 2026-07-05 | デザイン骨格 v1 を作成 | HTML図解のデザイン水準を毎回同じにするため |