[{"data":1,"prerenderedAt":236},["ShallowReactive",2],{"content-/tsukumi-seminar-svg-slides":3,"all-pages-for-dir":234,"og-image-/tsukumi-seminar-svg-slides":235},{"id":4,"title":5,"body":6,"category":217,"description":218,"extension":219,"meta":220,"navigation":186,"ogImage":221,"path":222,"project_name":223,"published":224,"publishedAt":225,"seo":226,"stem":227,"tags":228,"todo":221,"unpublished":224,"updatedAt":221,"__hash__":233},"pages/2026-06/2026-06-30/tsukumi-seminar-svg-slides.md","つくみセミナー用ドラフトに SVG スライド 17 枚を埋め、既存記事にも比較用 SVG を追加した日",{"type":7,"value":8,"toc":201},"minimark",[9,14,18,29,33,40,43,50,54,57,60,64,67,70,73,76,80,87,90,94,97,100,103,107,114,117,120,124,127,130,134,137,140,144,147,150,153,156,172,175],[10,11,13],"h2",{"id":12},"朝のお題はつくみのセミナーをバックオフィス向けに作り直す","朝のお題は「つくみのセミナーをバックオフィス向けに作り直す」",[15,16,17],"p",{},"つくみのセミナーは元々「地域事業者向けの生成AIホームページ体験会」として枠を取ったつもりでいた。先方から返ってきた要件を読み直すと、業種を問わずバックオフィス担当者向けの業務効率改善で、会計・税務スペシャリストの視点でAIを含めて話してほしい、とトーンが変わっていた。手元のアイデアが空っぽだったので、ひとまず Unpublished のドラフト記事を立てて、書きながら考える方針に振った。",[15,19,20,24,25,28],{},[21,22,23],"code",{},"apps/web/content/2026-06/2026-06-30/tsukumi-backoffice-ai-seminar-draft.md"," を ",[21,26,27],{},"unpublished: true"," で作らせて、骨子を Claude Code に任せた。中身を眺めて、自分の中でひっかかる箇所だけ手で書き直していく構成。",[10,30,32],{"id":31},"ai-position-map-の結論を引っ張ってきて骨組みにする","ai-position-map の結論を引っ張ってきて骨組みにする",[15,34,35,36,39],{},"ゼロから書かせると総花的な「AI で効率化しましょう」になりがちだったので、先に ",[21,37,38],{},"/ai-position-map"," を読み込ませた。インセンティブ設計の話と、経営者起点で AI を入れろという結論を、そのままセミナーの背骨にあてた。",[15,41,42],{},"デモ枠は Claude Code / Codex / Claude-in-Chrome の3本に絞った。聴衆がバックオフィス担当者と、それを束ねる経営層の両方になりそうだったので、「下に降ろせる道具」と「経営者が自分で触れる道具」を並べる構図にした。",[15,44,45,46,49],{},"ついでに Google Workspace CLI（gws）を渡していく道具箱としてセミナーに組み込みたかったので、",[21,47,48],{},"gws-cli-setup-guide.md"," の方は公開記事として別に切り出し、公式リポジトリのセットアップ手順を確認させてから書かせた。Claude Code に渡したのは「セミナードラフトに gws を道具箱として組み込め」「セットアップ手順は別記事に分離して公開扱い」の 2 つだけで、ディレクトリ構成・frontmatter・本文の章立てまで一気に書かせた。",[10,51,53],{"id":52},"スライドっぽくして指示で-svg-14-枚に埋め直す","「スライドっぽくして」指示で SVG 14 枚に埋め直す",[15,55,56],{},"ドラフトが文章ベースで一通り立ち上がったところで、「スライドっぽくしておいて、全部」と指示を出した。svg-diagram スキルを噛ませて記事内に SVG を直接埋め込む方針。720 幅・グレースケール＋マゼンタアクセント・塗りのみ・スライド番号付きの共通トンマナで 13 枚作らせ、デモ枠を「3本」→「4本」に拡張する判断を途中で挟んだので、書籍→スキル化のフロー図を 1 枚追加して計 14 枚にした。",[15,58,59],{},"タイムテーブルと description も「デモ4本」に揃えて貼り直した。ここまでで一旦見れる状態になり、ローカルで開いてざっと流した。",[10,61,63],{"id":62},"_10-時間で返すソリューションじゃないと差し戻された","「10 時間で返すソリューションじゃない」と差し戻された",[15,65,66],{},"スライドを見返したユーザー（筆者）の中で違和感が立ち上がった。スライドの構図が「業務時間が短くなる」話に寄りすぎていて、自分が言いたかったことと噛み合っていなかった。",[15,68,69],{},"言いたいのは、7 時間あるルーチン業務のうち、入力・集計・転記といった 2 時間分を非同期で Claude Code に移譲して、人間はその空いた時間を別のことに振る、という話だった。「半分の時間で終わらせる」ではなく「2 時間分を AI に移譲する」が正しいフレーミング。",[15,71,72],{},"過去に「経営者が人を下に束ねる組織から、人が AI エージェントを束ねる組織に変わる。だから少数精鋭がいい」という記事を書いた覚えがあったので、Claude Code に「人がAIエージェントを束ねる」キーワードで過去記事を当てさせた。引用元として記事の URL を控え、新規 SVG スライドを 3 枚追加（5b、11b、11c）して本文を書き直す方針に切り替えた。",[15,74,75],{},"スライド 11b で「フロントで具体的に何をするか」の例を 1 枚足し、結論を「AI 投資の本命はフロント、バックオフィスは外注」に書き換えた。タイムテーブル・description・TODO・§12 のクロージングまで連動して直して、ようやく自分が話したい筋に近づいた。",[10,77,79],{"id":78},"ついでに-ai-era-dismantle-division-of-labormd-にも比較用-svg-を入れた","ついでに ai-era-dismantle-division-of-labor.md にも比較用 SVG を入れた",[15,81,82,83,86],{},"セミナードラフトの構図と地続きの記事として、",[21,84,85],{},"/ai-era-dismantle-division-of-labor","（分業をやめて一人の守備範囲を広げる話）を思い出した。この記事は mermaid 図しか入っておらず、svg-diagram スキルを通していなかった。",[15,88,89],{},"既存の mermaid をいきなり置き換えると、生成された SVG が見るに堪えなかった場合の戻し作業が痛い。なので「mermaid はそのまま残し、各図の直下に svg-diagram スキル準拠の SVG を 1 枚追加して比較できるようにする」運用に振った。Claude Code に 6 枚作らせて、各 mermaid の直後に挿入させた。updatedAt も忘れず書き換えさせた。",[10,91,93],{"id":92},"矢印が崩れていたのに目視確認をサボっていた","矢印が崩れていたのに、目視確認をサボっていた",[15,95,96],{},"挿入直後にユーザー（筆者）がブラウザで開いて、矢印が崩れていることに気づいた。polygon と rect の重ね方を間違えていて、左向きの三角形に横棒がぶら下がる謎の形になっていた。",[15,98,99],{},"「矢印を描こうとせず、▶ の三角印だけでいい」とフィードバックして、Claude Code に grep で全 SVG を引かせた。ここで「スクショで目視確認はしましたか？」と問うと、Claude Code から「していませんでした」と返ってきた。svg-diagram スキル §6.6 に「スクリーンショット目視確認 — 必須」と明記されているのに、XML パースエラーチェックだけで通したことになる。",[15,101,102],{},"スキルに書いてあるチェックを飛ばすと、こうして他人（自分）の目で初めて発見される。Claude Code を責めても仕方がないが、自分がレビュー側に立つ前提で運用するなら、目視チェック工程を明示的に発火させる仕掛けがいる、と頭に書き留めた。",[10,104,106],{"id":105},"python-スクリプトで-polygon-rect-を-だけに統一する","Python スクリプトで polygon + rect を ▶ だけに統一する",[15,108,109,110,113],{},"Claude Code に Python スクリプトを書かせ、",[21,111,112],{},"polygon + rect(height=4)"," のペアをまとめて削り、右尖りの三角形 polygon だけに置換した。1 回目は元 SVG が持っていたミスの向きをそのまま継承してしまい、左尖りのままになる図が残った。スクリプトを「向きを ▶（右尖り）と ▼（下尖り）のどちらかに強制統一する」ロジックに書き直して再実行。",[15,115,116],{},"ここで一度躓いた。1 本目のスクリプトを叩いた直後、rect は全部消えていたのに、残った polygon の向きが揃っていなかった。理由は単純で、元 SVG が「左向き polygon ＋ 右側に rect」で矢印を表現していたパターンが混じっていて、rect だけ取ると polygon の左向きが裸で残っていた。「向きを判定して回す」のではなく「全 polygon を強制で ▶ 形状の頂点座標に書き換える」第 2 のスクリプトを別ファイルで書かせて、ようやく揃った。",[15,118,119],{},"矢印を一掃したあと、Claude Code に書かせた XML パースチェックで構文だけ確認し、今度は自分でブラウザを開いて 6 枚全部目視した。これが本来やるべきだった工程。",[10,121,123],{"id":122},"figure-02-は縦フローなので-に統一する","figure-02 は縦フローなので ▼ に統一する",[15,125,126],{},"▶ で一括統一したものの、figure-02 は BEFORE 上 → AFTER 下の縦方向フローだった。横向き矢印がフローの向きとズレていて、見ている側がどっちに目を動かせばいいか分からなくなる。縦フローの図だけは矢印を ▼ に差し替えて、横一律 ▶ ルールを破る判断を入れた。",[15,128,129],{},"figure-01 の「差し戻し」テキストの直後の矢印も、ラベルから離れて宙に浮いていたので、テキスト末尾の直後に近づけて配置を詰めさせた。",[10,131,133],{"id":132},"y-軸の低い生産性-高い生産性が象限と逆だった","Y 軸の「低い生産性 / 高い生産性」が象限と逆だった",[15,135,136],{},"その次にユーザー（筆者）の目で拾ったのが、Y 軸ラベルの上下逆転だった。「上が低い生産性、下が高い生産性」と書かれていて、象限の中身（上が好ましい状態、下が好ましくない状態）と矛盾していた。上を「↑ 高い生産性」、下を「↓ 低い生産性」に直して整合性を戻した。",[15,138,139],{},"ラベルの上下は SVG を流し読みすると見落とす。Claude Code に「軸の意味と象限の中身が一致しているかチェックして」と明示しないと、機械的に座標値だけ見て通してしまう、というのも目視チェックの一環として頭に入れた。",[10,141,143],{"id":142},"figure-05-を中途半端に横縦から最初から縦一列に作り直す","figure-05 を「中途半端に横→縦」から「最初から縦一列」に作り直す",[15,145,146],{},"最後に拾ったのが figure-05 のレイアウト崩れ。横並びで始めて、入りきらなくなった最後の 1 ノードだけ下に折り返す、という中途半端な構図になっていた。",[15,148,149],{},"横→縦の途中切り替えは、見ている側に「最初から縦にしてほしかった」と思わせる典型パターン。「中途半端に横にする制約あったっけ？」と問い直したら、特に技術的制約はなくて単に Claude Code が「横並びにできるだけ詰める」を優先しただけだった。「入りきらないなら最初から縦一列でいい」と方針を伝えて、figure-05-three-person.svg を縦一列レイアウトで Claude Code に作り直させた。",[15,151,152],{},"縦一列にすると、横並びでは隠れていた「3 人の役割が直列に積み上がる」構図がそのまま読めるようになった。横並びを諦めるのは負けではなく、図の意味が立ち上がる選択だった、と気づき直した。これでようやく 6 枚並べて違和感がなくなった。",[10,154,155],{"id":155},"今日の学び",[157,158,159,163,166,169],"ul",{},[160,161,162],"li",{},"スライドっぽい SVG を 17 枚（14 + 3）と、別記事の比較用 SVG 6 枚を 1 日で記事に埋めた。やってもらった量は多いが、自分がやったのは「ここがおかしい」と画面を見て指差すことだけ",[160,164,165],{},"svg-diagram スキル §6.6 の「スクリーンショット目視確認 — 必須」を、Claude Code 側がサボっても自分側で発火させる仕掛けがいる。XML パースエラーがゼロでも、矢印が崩れている SVG は普通に出来上がる",[160,167,168],{},"「10 時間で返す」と「2 時間を AI に移譲する」は似ているようで全然違うフレーミング。前者は人間のスケジュールが空く話、後者は経営の組織設計が変わる話で、聞き手の動き方が変わる。スライドを作りながら言葉の選択でメッセージがブレることを実感した",[160,170,171],{},"横並びを途中で諦めて縦に折る図は、最初から縦一列にした方が読み手の目線が迷わない。図の制約は最初に決めておく",[10,173,174],{"id":174},"明日以降",[157,176,179,189,195],{"className":177},[178],"contains-task-list",[160,180,183,188],{"className":181},[182],"task-list-item",[184,185],"input",{"disabled":186,"type":187},true,"checkbox"," セミナー本番までに、ドラフト記事のスライドを Chrome DevTools MCP で全枚スクショ → 自分の目で 1 枚ずつレビューする工程を入れる",[160,190,192,194],{"className":191},[182],[184,193],{"disabled":186,"type":187}," svg-diagram スキルを使うフローに、「Claude Code 側で目視確認させたあと、自分側でも 1 枚はランダムスクショして見る」を運用ルールとして固定するか検討",[160,196,198,200],{"className":197},[182],[184,199],{"disabled":186,"type":187}," ai-era-dismantle-division-of-labor は SVG 比較を残したままだが、最終的には mermaid を消して SVG だけにするか、両方残すかを決める",{"title":202,"searchDepth":203,"depth":203,"links":204},"",2,[205,206,207,208,209,210,211,212,213,214,215,216],{"id":12,"depth":203,"text":13},{"id":31,"depth":203,"text":32},{"id":52,"depth":203,"text":53},{"id":62,"depth":203,"text":63},{"id":78,"depth":203,"text":79},{"id":92,"depth":203,"text":93},{"id":105,"depth":203,"text":106},{"id":122,"depth":203,"text":123},{"id":132,"depth":203,"text":133},{"id":142,"depth":203,"text":143},{"id":155,"depth":203,"text":155},{"id":174,"depth":203,"text":174},"dev","つくみのバックオフィス業務効率セミナードラフトを Unpublished で作り、svg-diagram スキルで 14+3 枚のスライドを埋め込んだ。既存記事 ai-era-dismantle-division-of-labor にも比較用 SVG 6 枚を追加。矢印崩れの一括修正で目視確認をサボった反省と、縦一列レイアウトへの作り直しまでの試行錯誤。","md",{},null,"/tsukumi-seminar-svg-slides","mdx-playground",false,"2026-06-30T00:00:00.000Z",{"title":5,"description":218},"2026-06/2026-06-30/tsukumi-seminar-svg-slides",[229,230,231,232],"日記","SVG","セミナー","生成AI","YiRJ-zUe5fpTVkZI5IaSDP-ujtmyL1E5eBLl9T_Gcdk",[],"https://log.eurekapu.com/og/blog/tsukumi-seminar-svg-slides.png?v=2026-06-30T00%3A00%3A00.000Z&title=%E3%81%A4%E3%81%8F%E3%81%BF%E3%82%BB%E3%83%9F%E3%83%8A%E3%83%BC%E7%94%A8%E3%83%89%E3%83%A9%E3%83%95%E3%83%88%E3%81%AB%20SVG%20%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%2017%20%E6%9E%9A%E3%82%92%E5%9F%8B%E3%82%81%E3%80%81%E6%97%A2%E5%AD%98%E8%A8%98%E4%BA%8B%E3%81%AB%E3%82%82%E6%AF%94%E8%BC%83%E7%94%A8%20SVG%20%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E6%97%A5&author=Kei%20Komatsu&sig=855974194b9da480",1782885018194]