開発mdx-playground

週刊SPA!の「1億円世帯」特集を画像3枚から文字起こしして記事にした。最初は素直にテーブルで並べた。読み返してみたら、自分でも「で？」と止まった。数字は並んでいるのに、メッセージが立ち上がってこない。

午後ずっと、テーブルをチャートに置き換える作業を Claude Code に投げ続けた。途中で「単純な積み上げ棒では伝わらない」と気づいて、ウォーターフォール（構成割合が段々減っていく見せ方）に切り替えた瞬間、ページの説得力が一段上がった。その編集判断の記録を残しておく。

対象記事: 週刊SPA! 1億円世帯アンケート（Q1〜Q12 全文＋チャート）— unpublished

やったこと

1. 雑誌の文字起こしとQ1〜Q12のテーブル化

クリップボードに撮りためた紙面写真3枚を Claude Code に渡して、Q1〜Q12までを Markdown のテーブルに起こしてもらった。最初は internal/ に下書きとして置いたが、すぐ apps/web/content/2026-06/2026-06-17/weekly-spa-1oku-household-survey.md に unpublished: true 付きで移し、/blog/unpublished 経由で dev 表示しながら編集を進めた。

特集本文で目を引いたケーススタディが「月の生活費5000円・公園で身体を洗う山下さん（資産4億円）」。これを声に出して読んで「土下地生活ちょっとやりすぎだろ」と笑ったあと、本気で気になったのは別のところだった。

月5000円の節約でどうやって4億円に到達したのか——投資側のストーリー（何に投資したか、いつ始めたか、どんなリターンだったか）が記事からは読み取れない。

家計簿は載っていても、入金フローを何のストックに振り向けたかが書かれていない。そこが資産形成の本丸なのに、雑誌では家計の極端さだけが見せ場になっていた。

2. テーブルをSVGチャートに置き換える（最初の失敗）

「テーブル全部チャートにして」と指示し、まず Q1〜Q5 を1枚にまとめた積み上げ棒チャートが出てきた。これを記事に埋め込もうとして、Nuxt Content の画像ミドルウェアのパス規約（/{dir}/filename.svg 形式）に合わせるためにパスを書き直した。

dev で開くと、図はちゃんと出ている。出ているが、つまらない。

5枚をバラした個別チャートに分割してもらった。それでもまだ「ふーん」止まりだった。バーが寝そべったまま、閾値の意味が読み取れない。

3. ウォーターフォール宣言

ここで自分から「ウォーターフォールチャートっぽくしてくれませんか？分けてください、意味があるところで」と方針を切り替えた。

最初の試作は段差がほぼ見えなかった。viewBox の縦横比、prose-img の max-width: 100%、SVG の preserveAspectRatio——Claude Code が原因をひとつずつ潰したが、根本は別だった。バーの高さに対してカテゴリ間の人数差が小さすぎる（74〜135人で均等寄り）ため、段差が物理的に出ない。

途中で「閾値の2分割棒（30万円未満 vs 以上）」に簡略化した版が出てきたが、これだと粒度が消えてしまう。「全カテゴリの分布を見せた上で、閾値で切ったメッセージを強調したい」のだと整理し直した。

4. カスケード型ウォーターフォール（決着）

別タブで → 投資余力マトリックス を開き、「このイメージなんですよ、各バーが前のバーの終点から始まって階段状に積み上がるやつ」と画像を貼って指示し直した。

Q1なら、月の生活費を「10〜15万 → 15〜20万 → 20〜30万」と階段状に積み上げ、30万円のラインで横点線を入れ、右側に**合計棒（マゼンタ 336人/51.1% と グレー 322人/48.9%）**を並べる。これで「分布も見える・閾値の意味も立つ・メッセージも残る」が三立した。

Q1〜Q4 をこの形式に揃え、続いて Q6〜Q12 も同じ方針で全部チャート化した。複数選択のランキング系（Q9〜Q11）は構成比のカスケードに馴染まないので、横棒に落として「意味の合わない型は無理に揃えない」と決めた。

5. 「フロー × ストック」の二軸チャートで記事先頭を組み直す

特集の読後感である「入金フローを増やすレバー と どこに置くかのストックのレバー が両輪」を、SVG 1枚にまとめた 1oku-flow-stock-levers.svg を作って記事末尾に置いた。表示確認のあと、自分で「これ最後にあると話の入り口に間に合わないから先頭に持ってきて」と気づき、調査概要の直下に移動した。

ここで Codex CLI（gpt-5.5）に構造レビューを投げた。返ってきた致命的指摘の筆頭が「Phase 表記と『同時に運用する』が矛盾している」。フローとストックは順番ではなく同時に走る両輪なので、「Phase 1/2」を全部「レバー1/2」に置換した。一文字の語感だけど、読者の脳内モデルが変わる修正だった。

6. 既存記事との接続

  • → 投資の種銭2000万〜3000万円はどう作るのか をレバー1（フロー）の冒頭にリンク。「月25万円 × 10年 = 3000万円」のテーブルがSPA!のQ1〜Q3（生活費・年収・投資比率の分布）の裏付けとして機能する構図にした。
  • → ミリオネア16人の共通点まとめ をレバー1とレバー2の橋として末尾の関連記事セクションに配置。
  • → 投資余力マトリックス をレバー2（ストック）に接続。30万円積み立て × 為替込みのS&P500バックテストで、元本2450万 × 20年 = 約1.5億円という実績が、Q8の「達成期間10年以上が大半」というアンケートと整合することを書き添えた。

3記事が「フロー（種銭2〜3000万を作る）→ストック（運用で1億超に伸ばす）」の流れで自然に繋がった。1本の特集記事を起点に、自分の過去ストックの中から関連3本を引きずり出して接続したことで、ハブとして使える記事になった。

学び

  • チャートは「思い出す装置」ではなく「メッセージを立ち上げる装置」。テーブルでも積み上げ棒でも数字は載るが、ウォーターフォールに切り替えた瞬間に閾値の意味が浮き上がる。「分布の粒度を見せた上で閾値で切る」の二段構えが効いた。
  • 別記事のチャートを直接見せて「このイメージ」と渡した瞬間、AI 側の試行錯誤が一発で止まった。抽象指示で3回往復するより、参照URL1本貼る方が早い。
  • レバーは順番ではなく同時に動く——「Phase」を「レバー」に変えるだけで、記事の前提が読者の頭に正しく入る。Codex のレビューで気づけた一発。
  • 雑誌のケーススタディ（土下地生活）に違和感を覚えた瞬間が、記事の方向性を決めた。「ポジションをどこに取るかが重要」——預金に200万置くか株に200万置くかで10年後のリターンは別物。山下さんは入金力を絞り切って全額をポジションに回したからこその4億で、節約だけでは到達しない。
  • アンケートデータを既存の自記事3本と接続したら、記事が「読み物」から「自分のSSOTのハブ」に変わった。新規記事を書くたびに過去の関連3本を引きずり出して繋ぐ作法、続ける価値ありそう。

残りタスク

  • unpublished: true を外す前に、もう一度通しで読んで二軸構成の流れに穴がないか確認する
  • Q5（金銭感覚タイプ）だけまだ単純比較バーなので、二択軸の見せ方を検討する
  • フロー × ストック図の右側「ストック配分先の10年後リターン」の根拠を、別記事へリンクで補強する