生成AI活用シリーズ記事2本の執筆とインデックスのカードUI改修 - 並列ファクトチェックからSVG図解まで
生成AI活用シリーズ記事2本の執筆とインデックスのカードUI改修
生成AI活用シリーズの記事を2本書き上げた日。
1本目は「お金を稼いできて」とAIに経済活動を丸投げする委任実験を題材にしたエッセイ。
2本目は「1人で月3,000万円稼ぐAI研修ビジネス」の仕組みを助成金から分解する記事。
あわせて、シリーズのインデックスページ /genai-ideas を正方形カードのグリッドに作り替えた。
「お金を稼いできて」委任実験の記事
Fable 5 に「お金を稼いできて」と頼んだ結果の画像を見て、これは記事になると思い、Claude Code にまとめさせた。 最初は画像の結論部分だけを渡して書かせたが、途中で元の全文が手に入った。 そこで全文をレビューさせた上で、記事を全面的に書き直させた。
SVG図解も2枚追加した。
対比図（左右パネル）の型を使い、XMLエスケープ漏れの機械チェックとdev環境での表示確認まで一気に回した。
確認の途中、スクリーンショットでは図の部分が空白に見えて一瞬ひやりとしたが、SVGの配信自体を確かめさせたら記事内では正しく描画されていた。
途中でBashエラーも1件出た（Git Bash が $ 変数を展開したのが原因）。
ルールどおり issue を作成してからリトライさせた。
スキム読みで通じない文章の書き直し
完成した記事を読み返して、引っかかった。 原文に近い形で残った「顔なしチャンネルの視聴実績もこの一種だ」という一文が、その文だけ読んでも前の文脈とどうつながるのか分からない。 自分は文章をスキムしながら（飛ばしながら）読むことが多いので、この手の「前の段落を全部読んでいないと解読できない文」があると止まってしまう。
そこで日本語技術文書のリライト規範スキルを読み込ませて、記事全体を構造化して書き直させた。 方針は「段落の冒頭文だけ拾っても筋が追えるようにする」。 スキム読み耐性という観点で文章を直したのは初めてかもしれない。 完成したのがこれ。
AI研修ビジネス記事とサブエージェント並列ファクトチェック
2本目は「1人で月3,000万円稼ぐAI研修ビジネス」という、Xで定期的に流れてくる言説を題材にした記事。 原文を貼って、ファクトチェック→記事修正→SVG図解→Codexレビュー→レポートまで一気通貫で任せた。
ファクトチェックは Sonnet 5 のサブエージェント3体を並列で立てて、制度要件の調査・数値の独立検証・周辺クレームの検証に分担させた。 ここで感心したのが作図の順序制御。 賃金助成の単価が1時間1,000円なのか960円なのかで記事中の計算例が変わるため、数値が確定するまで図を描き始めずに待たせる進行になっていた。
検証結果はこうだった。
- 記事の核となる数値（助成率75%・賃金助成1,000円/時・計算例・時限措置）は、すべて厚労省の令和8年度一次資料で裏付けが取れた
- 誤りは1点だけ。「計画届は1か月前まで」ではなく、正しくは「6か月前〜1か月前のウィンドウ」だった
- eラーニング型だと賃金助成が出ない、という補足も拾えた
図解は3枚。 XMLパース検証→ブラウザでの目視確認と進めつつ、Codex（gpt-5.5）のレビューを並行で走らせ、待ち時間に数値の突き合わせレビューをさせた。 直列で待たずに検証を重ねる進め方が板についてきた。
公開先を確認していなかった
全工程が完了した後で気づいた。
この記事、どこに公開するつもりで作業していたのか。
確認したら、note向けと推測されて memo/ に作業ファイルとして置かれたままだった。
原文がnote風のエッセイだったための推測らしいが、自分としてはこのブログの記事として入れてほしかった。
content-managementスキルの形式でfrontmatterを付け、未公開記事としてブログ側へ配置し直させた。
教訓は単純で、執筆物は公開先を最初に確認する（させる）こと。 書き上がってから置き場所を議論するのは手戻りになる。
/genai-ideas インデックスを正方形カード5列に改修
朝いちは昨日の積み残しの棚卸しから始めた。
生成AIシリーズは記事10本の下書きが完成・検証済みで、残りは表示確認とコミット。
Chrome DevTools で /genai-ideas の目次・記事本体・トップページの導線カードを順に確認させ、問題なかったので機能単位で10コミットに分割して積んだ。
その後、目次ページの見た目に注文を付けた。
縦一列のリストではなく、正方形のカードコンポーネントを並べる形にしたい。
max-widthを設けず、カラム数は画面幅に応じて動的に変わるレスポンシブグリッドに。
実装させて1600×900で5カラム×2段、1280で4カラム、モバイル幅も崩れないことを確認してコミットした（57300f17）。
一度使ってみて、さらに直した。
記事は最大でも10本しかないので、カラム上限は5列でいい。
カードをもっと大きくして、せっかく書いた説明文（description）を省略なしで全文見せたい。
調整後は実ウィンドウ幅で5列×2段・10枚が1画面に収まり、説明文も全文表示になった（0e6915f3）。
全10記事にBefore/After対比図解を追加
シリーズ各記事のイントロには「参考にした書籍ではこうやっている。自分の環境ではこうなっている」という対比の宣言文が入っている。 この構図を文章だけで済ませるのはもったいない。 svg-diagramスキルで「書籍のやり方（Before）→ 自分のやり方（After）」の対比図解を全10記事のイントロに追加させた。
10枚は同一のグリッドレイアウトで生成させた。
確認は10枚並べたコンタクトシートを作らせて一括目視。
テキストのはみ出しや重なりがないことを確かめた。
既存の図をfigure-02へ繰り下げる整合と、全記事で図がイントロ内（宣言文の直後・最初の見出しの手前）に配置されていることは機械チェックで確認してからコミットした（831a7593）。
なお、この作業中にdevサーバーが3回落ちた。 原因は自分の作業ではなく、並行して走らせている別セッションが学習コンテンツを大量に書き込むたびにNuxtのHMRが暴走すること。 issueに再発記録を追記して、再起動でしのいだ。
学び
- ファクトチェックと作図を並走させるときは、図に入る数値が確定してから描き始める。単価が1,000円か960円かで計算例ごと変わる場面で、この順序制御が効いた
- 執筆を任せるときは公開先（ブログ本体か、外部プラットフォームか、非公開メモか）を最初に指定する。完成後の移設は手戻り
- 文章の分かりやすさは「段落の冒頭文だけ拾って筋が追えるか」で判定できる。スキム読みで意味がつながらない一文は書き直しのサイン
- SVGを10枚単位で量産したら、コンタクトシートで一括目視するのが速い
- カードグリッドは総アイテム数でカラム上限を決める。10枚なら5列×2段が収まりよく、無限に伸びるレスポンシブは過剰だった