「思考の見取り図」HTMLを記事化＋SVG 8枚で公開 ― svg-diagramスキル違反から立て直しまで

Downloadsに溜まっていた思考メモを記事化したくなった

朝、C:\Users\numbe\Downloads\ai-position-map.html という前日に手元で作っていた思考の見取り図を、ブログ記事として公開しておきたくなった。労働者・フリーランス型経営者・雇用型経営者の3立場で、生成AIに対する態度の違いを2軸マトリクスに整理した一枚図だ。

Claude Code にHTMLを渡して、「マークダウンで構造化して、図は大きくして公開しておいて」と頼んだ。content-management スキルを噛ませて、apps/web/content/2026-06/2026-06-30/ai-position-map.md として出させた。slug は /ai-position-map、category は personal、todo は memo で確定。

http://localhost:3000/blog で開くと、当日のカレンダーセルにすぐ顔を出してきた。queryCollection('pages') が unpublished: true を立てない記事を勝手に拾うので、特に何もしなくても一覧に乗る。

svg-diagram スキルを使い忘れた

ブラウザで開いて画像を眺めたら、図のレイアウトが普段の svg-diagram スキル準拠の他記事とちぐはぐだった。インラインで <svg> タグを記事に直書きしていて、viewBox もグリッドも色味もスキルのルールに揃っていない。

ユーザーから「svg-diagramスキル使ってくださいね、なんでちょっとレイアウトが違うんですかね」と指摘が飛んできた。Claude Code がスキルを読まずに「とりあえずSVGっぽいXML」を吐いた結果だった。「図を構造化して入れて」と頼んだ時点で、/skills のラインナップから svg-diagram を自分から拾いに行く動きを期待していたが、そこは明示しないと素通りされる。

svg-diagram スキルと grid-alignment リファレンスを読み直して、4枚すべてを別ファイル化した。viewBox 720、グレー＋マゼンタML3アクセントの統一カラー、グリッド整列に揃え直し、apps/web/public/images/ai-position-map/figure-01.svg 〜 figure-04.svg を吐かせた。マークダウン側は <figure><img src="..." /><figcaption>...</figcaption></figure> 参照に書き換えた。テキストノードのエスケープ漏れがないかも一度走査した。

Chrome DevTools で目視確認したら Figure 1 が崩れていた

svg-diagram スキルには「必ずスクリーンショットで目視確認」が書いてある。Chrome DevTools MCP を呼んで4枚を順に撮らせた。

Figure 1 で、「同じ人でも180°割れる」というラベルテキストが矢印の線にぶつかって、文字が線をまたぐ形で重なっていた。コードだけ読んでいたら気づかない類の崩れで、画像にして並べた瞬間に違和感が浮き上がった。Figure 2と3はクリーン。Figure 4 は矢印の終端が一段ズレていて、ボックスの内側に針が刺さらず縁の外で止まっていた。

Figure 1 のラベルは縦位置を一段下げ、Figure 4 の矢印は終端の y 座標を整数グリッドに合わせ直して、2枚同時に再撮影した。4枚すべて揃ったところで「目視確認 OK」と返ってきた。

「フリーランスは右上、雇用型は中央寄り上に動かして」

ユーザーから配置の指示が来た。

フリーランス経営者は立場の壁がないので右上にしといていい、自分に戻るかつ攻めのところ。雇用型経営者も間違いなく上だろうし、真ん中あたりでいいかな。

承知して、雇用型を中央寄り上、フリーランスを右上に動かした。動線も雇用型を貫通しないよう左上を回す経路に変更。再撮影して配置確認。

Codex でレビューを回した

codex-review-doc スキルで Codex (GPT-5.5) に記事をレビューさせた。致命的な破綻はゼロ、構成提案が4点。

留保セクションを上に置いた方が自然
章と章のあいだに接続文を入れたほうが読みやすい

ユーザーから「y」が返ってきたので反映。留保セクションを上に移動して、章のつなぎに接続文を1〜2行ずつ挿し込んだ。

「構造を埋める」抽象ラベルを外す → 裏付け数字を1セクション足す

ユーザーから新しい注文が来た。

これね、構造を埋めるっていう話いるかな。結局、結論から言うと、これ経営者が自分でツールとフローを作って、従業員に使ってもらうというか、それを経営に組み込むっていうのが多分まずあるべきで、DXとかもボトムアップで浸透するとは思えない。トップダウンで多分やらなきゃいけなくて、能力がないんだったらDXって成功しない。

「構造を埋める」というサブタイトルや抽象ラベルは確かに重い。外して、「経営者起点でツールとフローを作る」のシンプルな主張に戻すのが筋がよさそうだと判断した。

並行で、DXトップダウン論と生成AI組織導入の研究を Claude Code に探させた。ユーザーの主張を裏付ける公開データが大量に出てきた。抽象ラベルは削るが、裏付け数字は1セクション足す価値がある と決めた。

メッセージ別に裏付けチャートを4枚

ユーザーからの追加指示。

それぞれメッセージラインがあるじゃないですか。記事の何を裏付けるかっていうメッセージ。一個一個、svg-diagramスキルを使ってチャートにしてください。メッセージを裏付けるチャートとして、出典とか数字をビジュアライズする形で。

裏付けたい主張を4本に整理して、1本ずつにチャートを当てる方針を立てた。先に見出しを「経営者起点でツールとフローを作る」に簡素化し、新セクションを記事に挟んでから、SVG 4枚を並列で書き出させた。viewBox 720、大数字シグネチャー＋マゼンタML3アクセント、出典明記。figure-05.svg 〜 figure-08.svg を apps/web/public/images/ai-position-map/ に追加。今度はインラインで書かない癖がついた。

スクリーンショットで4枚すべて目視確認。記事に裏付けセクション（Figure 5〜8）として組み込み完了。1枚あたり、左に主張ラベル、右に大数字、下に出典のシグネチャーで揃えた。

午後、X Bookmarks から具体事例を拾って3サブセクション追加

午後の別セッションで、ユーザーから「X Bookmarks に貯めた生成AI関連の投稿を眺めて列挙してほしい」と頼まれた。gogcli スキルで Google Sheets の「X Bookmarks」シート（8930件）を読み込み、生成AI活用関連を 719件抽出してカテゴリ別マークダウンにまとめた。重複カテゴリ込みで 976 エントリ。

その流れでユーザーから ai-position-map 記事に戻ってきて、

結局ね、従業員のインセンティブと経営者のインセンティブが生成AI活用もDXも合わない。ボトムアップでやろうとしてもうまくいかない。だからトップダウンで、生成AIのツールを使って、経営者がどう効率化しているかを見せ、まずこれをやってみようと。あるいはスキルを作って組織で共有する、GitHub を使えと。

228件の中から「経営者起点・組織展開」に直接刺さるものを精選した。別キーワードでも取りこぼしを拾い、強い事例だけが残った。記事の「経営者起点でツールとフローを作る」セクション末尾に、ユーザーの言葉に沿って 「具体的に何をやるか × 参考事例」 を3サブセクションで足した。

経営者が自分の効率化を見せる
スキルを作って組織で共有する
GitHub などのバージョン管理を組織に強制する

dev環境で表示確認。エラーなし、TOC自動更新、外部リンクは全部 target="_blank" rel="noopener noreferrer" で別タブ化されていた。

ふりかえり

スキル違反は最初の1手で潰さないと、4枚全部書き直しになる。svg-diagram スキルは「インライン禁止・別ファイル・viewBox 720・グレー＋マゼンタ統一・目視確認」を全部Readしてから着手する癖をつける
Codex レビューは構成提案が安く出てくる。致命的じゃない4点でも、留保セクションの位置や接続文の有無は読み手の体感にすぐ効く
抽象ラベルを足すより、裏付け数字とチャートを足す方が記事の重みが乗る。「構造を埋める」のような頭の中で完結する見出しは外して、出典付き4枚に置き換えた瞬間、主張の足腰が変わった
手元の Downloads に落ちている思考メモは、その日のうちに記事化すると鮮度が落ちない。前日のHTMLが朝のうちに公開記事＋SVG 8枚にまで化けた