[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"content-/ai-position-map-diary":3,"all-pages-for-dir":312,"og-image-/ai-position-map-diary":313},{"id":4,"title":5,"body":6,"category":294,"description":295,"extension":296,"meta":297,"navigation":298,"ogImage":299,"path":300,"project_name":301,"published":302,"publishedAt":303,"seo":304,"stem":305,"tags":306,"todo":299,"unpublished":302,"updatedAt":299,"__hash__":311},"pages/2026-06/2026-06-30/ai-position-map-diary.md","「思考の見取り図」HTMLを記事化＋SVG 8枚で公開 ― svg-diagramスキル違反から立て直しまで",{"type":7,"value":8,"toc":280},"minimark",[9,14,23,42,56,60,67,74,89,93,96,99,102,106,109,115,118,122,125,135,138,142,145,150,153,161,164,167,172,186,189,193,196,199,204,211,222,229,232,258,261],[10,11,13],"h2",{"id":12},"downloadsに溜まっていた思考メモを記事化したくなった","Downloadsに溜まっていた思考メモを記事化したくなった",[15,16,17,18,22],"p",{},"朝、",[19,20,21],"code",{},"C:\\Users\\numbe\\Downloads\\ai-position-map.html"," という前日に手元で作っていた思考の見取り図を、ブログ記事として公開しておきたくなった。労働者・フリーランス型経営者・雇用型経営者の3立場で、生成AIに対する態度の違いを2軸マトリクスに整理した一枚図だ。",[15,24,25,26,29,30,33,34,37,38,41],{},"Claude Code にHTMLを渡して、「マークダウンで構造化して、図は大きくして公開しておいて」と頼んだ。content-management スキルを噛ませて、",[19,27,28],{},"apps/web/content/2026-06/2026-06-30/ai-position-map.md"," として出させた。slug は ",[19,31,32],{},"/ai-position-map","、category は ",[19,35,36],{},"personal","、todo は ",[19,39,40],{},"memo"," で確定。",[15,43,44,47,48,51,52,55],{},[19,45,46],{},"http://localhost:3000/blog"," で開くと、当日のカレンダーセルにすぐ顔を出してきた。",[19,49,50],{},"queryCollection('pages')"," が ",[19,53,54],{},"unpublished: true"," を立てない記事を勝手に拾うので、特に何もしなくても一覧に乗る。",[10,57,59],{"id":58},"svg-diagram-スキルを使い忘れた","svg-diagram スキルを使い忘れた",[15,61,62,63,66],{},"ブラウザで開いて画像を眺めたら、図のレイアウトが普段の svg-diagram スキル準拠の他記事とちぐはぐだった。インラインで ",[19,64,65],{},"\u003Csvg>"," タグを記事に直書きしていて、viewBox もグリッドも色味もスキルのルールに揃っていない。",[15,68,69,70,73],{},"ユーザーから「svg-diagramスキル使ってくださいね、なんでちょっとレイアウトが違うんですかね」と指摘が飛んできた。Claude Code がスキルを読まずに「とりあえずSVGっぽいXML」を吐いた結果だった。「図を構造化して入れて」と頼んだ時点で、",[19,71,72],{},"/skills"," のラインナップから svg-diagram を自分から拾いに行く動きを期待していたが、そこは明示しないと素通りされる。",[15,75,76,77,80,81,84,85,88],{},"svg-diagram スキルと grid-alignment リファレンスを読み直して、4枚すべてを別ファイル化した。viewBox 720、グレー＋マゼンタML3アクセントの統一カラー、グリッド整列に揃え直し、",[19,78,79],{},"apps/web/public/images/ai-position-map/figure-01.svg"," 〜 ",[19,82,83],{},"figure-04.svg"," を吐かせた。マークダウン側は ",[19,86,87],{},"\u003Cfigure>\u003Cimg src=\"...\" />\u003Cfigcaption>...\u003C/figcaption>\u003C/figure>"," 参照に書き換えた。テキストノードのエスケープ漏れがないかも一度走査した。",[10,90,92],{"id":91},"chrome-devtools-で目視確認したら-figure-1-が崩れていた","Chrome DevTools で目視確認したら Figure 1 が崩れていた",[15,94,95],{},"svg-diagram スキルには「必ずスクリーンショットで目視確認」が書いてある。Chrome DevTools MCP を呼んで4枚を順に撮らせた。",[15,97,98],{},"Figure 1 で、「同じ人でも180°割れる」というラベルテキストが矢印の線にぶつかって、文字が線をまたぐ形で重なっていた。コードだけ読んでいたら気づかない類の崩れで、画像にして並べた瞬間に違和感が浮き上がった。Figure 2と3はクリーン。Figure 4 は矢印の終端が一段ズレていて、ボックスの内側に針が刺さらず縁の外で止まっていた。",[15,100,101],{},"Figure 1 のラベルは縦位置を一段下げ、Figure 4 の矢印は終端の y 座標を整数グリッドに合わせ直して、2枚同時に再撮影した。4枚すべて揃ったところで「目視確認 OK」と返ってきた。",[10,103,105],{"id":104},"フリーランスは右上雇用型は中央寄り上に動かして","「フリーランスは右上、雇用型は中央寄り上に動かして」",[15,107,108],{},"ユーザーから配置の指示が来た。",[110,111,112],"blockquote",{},[15,113,114],{},"フリーランス経営者は立場の壁がないので右上にしといていい、自分に戻るかつ攻めのところ。雇用型経営者も間違いなく上だろうし、真ん中あたりでいいかな。",[15,116,117],{},"承知して、雇用型を中央寄り上、フリーランスを右上に動かした。動線も雇用型を貫通しないよう左上を回す経路に変更。再撮影して配置確認。",[10,119,121],{"id":120},"codex-でレビューを回した","Codex でレビューを回した",[15,123,124],{},"codex-review-doc スキルで Codex (GPT-5.5) に記事をレビューさせた。致命的な破綻はゼロ、構成提案が4点。",[126,127,128,132],"ul",{},[129,130,131],"li",{},"留保セクションを上に置いた方が自然",[129,133,134],{},"章と章のあいだに接続文を入れたほうが読みやすい",[15,136,137],{},"ユーザーから「y」が返ってきたので反映。留保セクションを上に移動して、章のつなぎに接続文を1〜2行ずつ挿し込んだ。",[10,139,141],{"id":140},"構造を埋める抽象ラベルを外す-裏付け数字を1セクション足す","「構造を埋める」抽象ラベルを外す → 裏付け数字を1セクション足す",[15,143,144],{},"ユーザーから新しい注文が来た。",[110,146,147],{},[15,148,149],{},"これね、構造を埋めるっていう話いるかな。結局、結論から言うと、これ経営者が自分でツールとフローを作って、従業員に使ってもらうというか、それを経営に組み込むっていうのが多分まずあるべきで、DXとかもボトムアップで浸透するとは思えない。トップダウンで多分やらなきゃいけなくて、能力がないんだったらDXって成功しない。",[15,151,152],{},"「構造を埋める」というサブタイトルや抽象ラベルは確かに重い。外して、「経営者起点でツールとフローを作る」のシンプルな主張に戻すのが筋がよさそうだと判断した。",[15,154,155,156,160],{},"並行で、DXトップダウン論と生成AI組織導入の研究を Claude Code に探させた。ユーザーの主張を裏付ける公開データが大量に出てきた。抽象ラベルは削るが、",[157,158,159],"strong",{},"裏付け数字は1セクション足す価値がある"," と決めた。",[10,162,163],{"id":163},"メッセージ別に裏付けチャートを4枚",[15,165,166],{},"ユーザーからの追加指示。",[110,168,169],{},[15,170,171],{},"それぞれメッセージラインがあるじゃないですか。記事の何を裏付けるかっていうメッセージ。一個一個、svg-diagramスキルを使ってチャートにしてください。メッセージを裏付けるチャートとして、出典とか数字をビジュアライズする形で。",[15,173,174,175,80,178,181,182,185],{},"裏付けたい主張を4本に整理して、1本ずつにチャートを当てる方針を立てた。先に見出しを「経営者起点でツールとフローを作る」に簡素化し、新セクションを記事に挟んでから、SVG 4枚を並列で書き出させた。viewBox 720、大数字シグネチャー＋マゼンタML3アクセント、出典明記。",[19,176,177],{},"figure-05.svg",[19,179,180],{},"figure-08.svg"," を ",[19,183,184],{},"apps/web/public/images/ai-position-map/"," に追加。今度はインラインで書かない癖がついた。",[15,187,188],{},"スクリーンショットで4枚すべて目視確認。記事に裏付けセクション（Figure 5〜8）として組み込み完了。1枚あたり、左に主張ラベル、右に大数字、下に出典のシグネチャーで揃えた。",[10,190,192],{"id":191},"午後x-bookmarks-から具体事例を拾って3サブセクション追加","午後、X Bookmarks から具体事例を拾って3サブセクション追加",[15,194,195],{},"午後の別セッションで、ユーザーから「X Bookmarks に貯めた生成AI関連の投稿を眺めて列挙してほしい」と頼まれた。gogcli スキルで Google Sheets の「X Bookmarks」シート（8930件）を読み込み、生成AI活用関連を 719件 抽出してカテゴリ別マークダウンにまとめた。重複カテゴリ込みで 976 エントリ。",[15,197,198],{},"その流れでユーザーから ai-position-map 記事に戻ってきて、",[110,200,201],{},[15,202,203],{},"結局ね、従業員のインセンティブと経営者のインセンティブが生成AI活用もDXも合わない。ボトムアップでやろうとしてもうまくいかない。だからトップダウンで、生成AIのツールを使って、経営者がどう効率化しているかを見せ、まずこれをやってみようと。あるいはスキルを作って組織で共有する、GitHub を使えと。",[15,205,206,207,210],{},"228件の中から「経営者起点・組織展開」に直接刺さるものを精選した。別キーワードでも取りこぼしを拾い、強い事例だけが残った。記事の「経営者起点でツールとフローを作る」セクション末尾に、ユーザーの言葉に沿って ",[157,208,209],{},"「具体的に何をやるか × 参考事例」"," を3サブセクションで足した。",[126,212,213,216,219],{},[129,214,215],{},"経営者が自分の効率化を見せる",[129,217,218],{},"スキルを作って組織で共有する",[129,220,221],{},"GitHub などのバージョン管理を組織に強制する",[15,223,224,225,228],{},"dev環境で表示確認。エラーなし、TOC自動更新、外部リンクは全部 ",[19,226,227],{},"target=\"_blank\" rel=\"noopener noreferrer\""," で別タブ化されていた。",[10,230,231],{"id":231},"ふりかえり",[126,233,234,240,246,252],{},[129,235,236,239],{},[157,237,238],{},"スキル違反は最初の1手で潰さないと、4枚全部書き直しになる","。svg-diagram スキルは「インライン禁止・別ファイル・viewBox 720・グレー＋マゼンタ統一・目視確認」を全部Readしてから着手する癖をつける",[129,241,242,245],{},[157,243,244],{},"Codex レビューは構成提案が安く出てくる","。致命的じゃない4点でも、留保セクションの位置や接続文の有無は読み手の体感にすぐ効く",[129,247,248,251],{},[157,249,250],{},"抽象ラベルを足すより、裏付け数字とチャートを足す方が記事の重みが乗る","。「構造を埋める」のような頭の中で完結する見出しは外して、出典付き4枚に置き換えた瞬間、主張の足腰が変わった",[129,253,254,257],{},[157,255,256],{},"手元の Downloads に落ちている思考メモは、その日のうちに記事化すると鮮度が落ちない","。前日のHTMLが朝のうちに公開記事＋SVG 8枚にまで化けた",[10,259,260],{"id":260},"関連ファイル",[126,262,263,268,275],{},[129,264,265,266],{},"記事本体: ",[19,267,28],{},[129,269,270,271,80,273],{},"SVG 8枚: ",[19,272,79],{},[19,274,180],{},[129,276,277,278],{},"公開URL: ",[19,279,32],{},{"title":281,"searchDepth":282,"depth":282,"links":283},"",2,[284,285,286,287,288,289,290,291,292,293],{"id":12,"depth":282,"text":13},{"id":58,"depth":282,"text":59},{"id":91,"depth":282,"text":92},{"id":104,"depth":282,"text":105},{"id":120,"depth":282,"text":121},{"id":140,"depth":282,"text":141},{"id":163,"depth":282,"text":163},{"id":191,"depth":282,"text":192},{"id":231,"depth":282,"text":231},{"id":260,"depth":282,"text":260},"dev","Downloadsに落ちていた思考メモのHTMLを構造化記事として公開した。最初インラインSVGで書いて怒られ、svg-diagramスキル準拠で4枚書き直し、Codexレビューと裏付けチャート4枚を追加した一日の作業ログ","md",{},true,null,"/ai-position-map-diary","mdx-playground",false,"2026-06-30T00:00:00.000Z",{"title":5,"description":295},"2026-06/2026-06-30/ai-position-map-diary",[307,308,309,310],"日記","SVG","生成AI","記事執筆","KH4tp4vIDRkaGluxbHUDbii50pOYe46P8CJui-lbsaU",[],"https://log.eurekapu.com/og/blog/ai-position-map-diary.png?v=2026-06-30T00%3A00%3A00.000Z&title=%E3%80%8C%E6%80%9D%E8%80%83%E3%81%AE%E8%A6%8B%E5%8F%96%E3%82%8A%E5%9B%B3%E3%80%8DHTML%E3%82%92%E8%A8%98%E4%BA%8B%E5%8C%96%EF%BC%8BSVG%208%E6%9E%9A%E3%81%A7%E5%85%AC%E9%96%8B%20%E2%80%95%20svg-diagram%E3%82%B9%E3%82%AD%E3%83%AB%E9%81%95%E5%8F%8D%E3%81%8B%E3%82%89%E7%AB%8B%E3%81%A6%E7%9B%B4%E3%81%97%E3%81%BE%E3%81%A7&author=Kei%20Komatsu&sig=19e96976d58c16bf",1782885017552]