[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"content-/shigoto-no-kata-article-writing":3,"all-pages-for-dir":239,"og-image-/shigoto-no-kata-article-writing":240},{"id":4,"title":5,"body":6,"category":221,"concepts":222,"description":223,"extension":224,"meta":225,"navigation":226,"ogImage":222,"path":227,"project_name":228,"published":229,"publishedAt":230,"seo":231,"stem":232,"tags":233,"todo":222,"unpublished":229,"updatedAt":222,"__hash__":238},"pages/2026-07/2026-07-06/shigoto-no-kata-article-writing.md","仕事の進め方の「型」を記事にした日 — SVG図解7点の量産とFable 5での本文作り直し",{"type":7,"value":8,"toc":210},"minimark",[9,19,23,26,48,51,54,57,60,64,67,70,73,76,152,155,159,162,165,169,172,175,178,196,199],[10,11,12,13,18],"p",{},"どんな仕事もだいたいこれで回ると思っている型がある。経営方針や目標を確認するところから始まり、課題を並べ、いちばん効く詰まりから外していく手順。今まで頭の中だけで回してきたこの型を、今日はじめて文字と図に固定して公開記事にした。完成したのが ",[14,15,17],"a",{"href":16},"/shigoto-no-kata","仕事の型の記事"," で、図解7点つき。",[20,21,22],"h2",{"id":22},"型の中身は6ステップ",[10,24,25],{},"記事にしたのは次の繰り返し。",[27,28,29,33,36,39,42,45],"ol",{},[30,31,32],"li",{},"経営方針や目標を確認する",[30,34,35],{},"目標に対して何が課題かを特定する",[30,37,38],{},"発見した課題を整理する",[30,40,41],{},"ボトルネックを特定する",[30,43,44],{},"ボトルネックを解決する",[30,46,47],{},"方向性を確認する — そして1に戻る",[10,49,50],{},"Claude Code には冒頭の1行と箇条書きの型だけ渡し、ドキュメント構成のスキルと SVG 図解のスキルの2本を読み込ませてから、本文構成と図解の両方を作らせた。",[20,52,53],{"id":53},"リファレンスは3分割で読ませた",[10,55,56],{},"着手前に一つ引っかかった。SVG 図解スキルのグリッド整列リファレンスが約30KBあり、一気に読ませるとセッションが不安定になりかけた。座標値とコード例が密集したファイルは、ツール呼び出しを壊す前科がある。",[10,58,59],{},"そこで前半・中盤・後半の3回に分けて読ませた。スキップはさせない。全部読み終えた時点で、viewBox 720・12カラム・8pxベースライン・直角コネクタといった図の統一仕様が揃った。",[20,61,63],{"id":62},"図解7点の量産-lint-が機械チェック目視は意味だけ","図解7点の量産 — lint が機械チェック、目視は意味だけ",[10,65,66],{},"図は「全体像1枚 → 各ステップ1枚ずつ」の順で作らせた。最初に6ステップの循環を描く全体像を固めると、後続の図が語彙とレイアウトを引き継げる。",[10,68,69],{},"各ステップの図は、書かせる前に絵の骨格を決めさせた。STEP 1 なら「逆算」を軸にした3層構造、STEP 2 なら「社内に聞く」と「現状把握」の2つの入口が課題リストに合流する形。骨格に納得してから SVG を書かせる。",[10,71,72],{},"1枚書くたびに、文字のはみ出しを lint スクリプトで機械チェックさせた。1枚目からはみ出し0。機械が拾える崩れは機械に任せると、自分の目視は「意味が合っているか」だけに集中できる。",[10,74,75],{},"出来上がった7枚は、それぞれ1メッセージずつ持たせた。",[77,78,79,92],"table",{},[80,81,82],"thead",{},[83,84,85,89],"tr",{},[86,87,88],"th",{},"図",[86,90,91],{},"描いたもの",[93,94,95,104,112,120,128,136,144],"tbody",{},[83,96,97,101],{},[98,99,100],"td",{},"図1",[98,102,103],{},"6ステップ全体の循環。目標から始まり、上流の確認に戻って繰り返す",[83,105,106,109],{},[98,107,108],{},"図2",[98,110,111],{},"経営方針から自分の成果まで、一本の線でつながるまで逆算する3層",[83,113,114,117],{},[98,115,116],{},"図3",[98,118,119],{},"課題の入口は2つ。社内に聞くか、現状把握から自分で発見するか",[83,121,122,125],{},[98,123,124],{},"図4",[98,126,127],{},"課題を束ねてから、解決したときに効く順に並べ替える",[83,129,130,133],{},[98,131,132],{},"図5",[98,134,135],{},"「なぜ今まで解けなかったのか」の答えがボトルネック。解けないなら深追いしない",[83,137,138,141],{},[98,139,140],{},"図6",[98,142,143],{},"一度で外れるなら実行、続く活動が必要ならプロジェクト化して仕組みで回す",[83,145,146,149],{},[98,147,148],{},"図7",[98,150,151],{},"上流の議論と自分の仕事のつながりを、自分から確認しに行く",[10,153,154],{},"完成した記事は STEP 1〜6 の見出しごとに図を1枚ずつ置き、末尾の「以上を繰り返す」で全体像に戻る構成に落ち着いた。1見出し1図の対応を崩さなかったので、図だけ拾い読みしても型が追える。",[20,156,158],{"id":157},"途中でモデルを-fable-5-に切り替え本文は作り直させた","途中でモデルを Fable 5 に切り替え、本文は作り直させた",[10,160,161],{},"図を3枚作ったあたりで、モデルを Fable 5 に切り替えた。ここで「続きをそのまま書かせる」のではなく、書きかけの本文をレビューさせて、Fable 5 ベースで作り直させた。モデルをまたいで継ぎ足すと文体に継ぎ目が残る。作り直しを挟んだおかげで、最後まで一つの声で通った。",[10,163,164],{},"図は作り直さず、そのまま続行。最後の図（STEP 6: 方向性の確認）と記事本文は、Fable 5 に書かせた版で確定した。",[20,166,168],{"id":167},"chrome-devtools-で1枚ずつ表示確認","Chrome DevTools で1枚ずつ表示確認",[10,170,171],{},"書きっぱなしにせず、dev 環境に Chrome DevTools を繋いで表示確認をさせた。まずフルページのスクリーンショットで全体を眺めると、全体像の図の右側ループに直したい箇所が見つかった。修正させたうえで、同じ崩れを繰り返さないよう SVG 図解スキルにルールを追記させた。直して終わりではなく、スキルに書いて横展開する。",[10,173,174],{},"そのあと残りの図を1枚ずつ単品で目視確認。矢印ラベルの位置、束ねた課題が根っこに繋がる線、優先順位バー。図2から図7まで全部スクリーンショットを撮らせて目で追い、コンソールエラーがないことまで確認して閉じた。SVG マニフェストには7点分（49行）が自動生成で反映され、コミットも済んだ。",[20,176,177],{"id":177},"学び",[179,180,181,184,187,190,193],"ul",{},[30,182,183],{},"30KB級の座標密集リファレンスは一気に読ませない。3分割にしたらセッションが安定した",[30,185,186],{},"図の量産は「全体像 → 各論」の順。全体像が後続の図の語彙とレイアウトを決めてくれる",[30,188,189],{},"lint と目視の役割分担が効く。はみ出しは lint が拾い、目視は意味の一致だけ見る",[30,191,192],{},"モデル切り替え時は「続き」ではなく「レビュー → 作り直し」。文体の継ぎ目が消える",[30,194,195],{},"表示確認で見つけた修正は、その場でスキルにルール追記して次回に繋ぐ",[20,197,198],{"id":198},"成果物",[179,200,201,207],{},[30,202,203,204],{},"公開記事: ",[14,205,206],{"href":16},"どんな仕事もだいたいこの型で回る",[30,208,209],{},"SVG 図解: 7点（全体像1 + ステップ別6）、lint・ブラウザ目視・コンソール確認済み",{"title":211,"searchDepth":212,"depth":212,"links":213},"",2,[214,215,216,217,218,219,220],{"id":22,"depth":212,"text":22},{"id":53,"depth":212,"text":53},{"id":62,"depth":212,"text":63},{"id":157,"depth":212,"text":158},{"id":167,"depth":212,"text":168},{"id":177,"depth":212,"text":177},{"id":198,"depth":212,"text":198},"dev",null,"頭の中だけで回してきた仕事の進め方の型を、6ステップの公開記事に固定した。スキルで本文構成とSVG図解7点を作らせ、途中でモデルをFable 5に切り替えて本文をレビュー・作り直しさせた過程の記録。","md",{},true,"/shigoto-no-kata-article-writing","mdx-playground",false,"2026-07-06T00:00:00.000Z",{"title":5,"description":223},"2026-07/2026-07-06/shigoto-no-kata-article-writing",[234,235,236,237],"ブログ執筆","SVG図解","Claude Code","仕事の進め方","vrfs2THvpbUjoMfeN6_T5sOl18bcB2PcuRXD2g6BMAA",[],"https://log.eurekapu.com/og/blog/shigoto-no-kata-article-writing.png?v=2026-07-06T00%3A00%3A00.000Z&title=%E4%BB%95%E4%BA%8B%E3%81%AE%E9%80%B2%E3%82%81%E6%96%B9%E3%81%AE%E3%80%8C%E5%9E%8B%E3%80%8D%E3%82%92%E8%A8%98%E4%BA%8B%E3%81%AB%E3%81%97%E3%81%9F%E6%97%A5%20%E2%80%94%20SVG%E5%9B%B3%E8%A7%A37%E7%82%B9%E3%81%AE%E9%87%8F%E7%94%A3%E3%81%A8Fable%205%E3%81%A7%E3%81%AE%E6%9C%AC%E6%96%87%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97&author=Kei%20Komatsu&sig=228aea3e21d5fae7",1783483677318]