Claude Codeの"見えない"を消す
— HTMLで開発の視認性を上げる

一目サマリー

壁打ち→合意済み（2026-07-08）。実測データで裏取りした確定事項。

冒頭フック（結果先見せ ＋ 数字で殴る）

当ch実測：冒頭30秒残存55%・離脱の崖は開始26秒。→ 挨拶最小、16秒までに"何が見られるか"を映像で予告、自己紹介は崖の手前に置かない。

最初の数秒で見せる結果

ドット絵AIオフィスが動く画面（社員＝各Claude Codeが吹き出しで"◯◯を編集中"）＋工場ライン風の進捗ボード。一言：「これ、僕が今動かしてるClaude Codeたちの"中身"を丸ごと見える化したものです」

フック：「もう、賢さは足りてる。足りてないのは"それを見て捌く"僕らの帯域の方でした」

冒頭に置く客観数字（＝人間が律速の証拠）

今日話す3つ（1秒判定）

1. なぜ2026年の開発は「視認性」が勝負なのか（ハーネス→ループの"次"）
2. MarkdownよりHTML ── Anthropicの中の人も公式も言っている話
3. 自作3点（進捗ボード・AIオフィス・設定ハブ）を実演＆今日から真似できる最小の型

本編フロー（9論点 / 7章）

各論点に「見せる素材」を1つ。■ティール＝実演デモ。チップ＝答える検索意図。

• 1
  AI開発の地図が変わった基礎
  プロンプト→コンテキスト→ハーネス→ループの4段ロケット。ループ＝「もうプロンプトは打たない、ループを書く」(B. Cherny)。
  見せる：4層ピラミッド図／前回のハーネス動画をチラ見せ（続編と示す）
  ハーネスエンジニアリングループエンジニアリング
• 2
  詰まりは"人間側"に移った基礎
  AIが2〜7倍コードを吐く→人間の"見て・理解して・判断する"帯域が律速。Anthropic自身、マージの8割超はClaude執筆と報じられている。
  見せる：+98%/+91%/26%の数字カード／「課題は創造でなく"理解"」
  claude code 自動化
• 3
  なぜMarkdownだと限界かHTML
  計画も進捗も長文MDだと縦に積もり"全体像"が消える。人の認知は構造化された見た目に強い。
  見せる：長文MDのTODO vs 同内容のHTMLダッシュボード（Before/After）
  claude code HTML
• 4
  「HTMLが効く」は公式も推すHTML
  Claude Codeのエンジニア(Thariq)が「HTML is the new markdown」で1,400万ビュー。公式も2026-06にHTML Artifactsを正式導入。
  見せる：Thariq投稿のスクショ／公式HTML Artifactsブログ
  HTML Artifacts Claude Code
• 5
  実演①：進捗を「工場ライン」でDEMO・価値ピーク
  制作の12工程を実ファイルから自動判定してHTML化。Stop hookで作業のたび自動再生成＝手で更新しない。
  見せる：進捗ボードのライブ＋「CLAUDE.md数行＋hook数行だけ」とコードをチラ見せ
  claude code ダッシュボードclaude code 進捗
• ▼ ここが中盤CTA地点（50〜70%）＝チャンネル登録＋LINE予告
• 6
  実演②：複数AIを「一目」でDEMO・映え
  エージェント増で"タブ地獄(agent sprawl)"。Mac全体の全セッションを"ドット絵オフィス"の司令塔に集約。
  見せる：AIオフィスのライブ。※元祖OSS "Pixel Agents"との差別化＝「Mac全体・複数案件の司令塔」を明示
  claude code 複数管理claude code ハーネス
• 7
  実演③：そのまま「共有」DEMO・共有
  設定・スキルの一覧を設定ハブ(HTML)にまとめ、チームや視聴者にそのまま共有。共有4手を実演。
  見せる：設定ハブを実際にPublish→リンクをブラウザで開く
  claude code 共有claude code 設定
• 8
  今日から真似できる最小の型応用
  ①CLAUDE.mdに「進捗をHTMLで書き出す」数行 ②Stop hookで自動再生成 ③ブラウザ開きっぱなし。まずTODOをHTMLで書かせるだけでも効く。
  見せる：コピペで使える最小コード（＝LINE配布物の予告）
  claude code 使い方CLAUDE.md
• 9
  why-now：Fable 5復活締め
  6/9公開→輸出規制で一時停止→7/1復活。SWE-bench 95%、5000万行を1日で移行。AIが速く吐くほど人間の"見る力"が律速＝強いモデルほど視認性投資が効く。
  見せる：Fable5のベンチ数字カード＋モデル使い分け簡易表
  Claude Fable 5

SEO確定 ＆ タイトル3案

タイトル案（メインKWを前半に）

サムネ文言候補：「MDの壁 → HTML」／「12工程まる見え」／「開発が"見える"」

リサーチの背骨

5レーンの横断リサーチ（証跡＝リサーチ.md）。台本に織り込んだ事実。

AI開発の4段ロケット（各層は前を包む）

Fable 5（why-nowの弾）

使い分け：重い長時間タスク＝Fable5／通常の高自律コーディング＝Opus4.8／バランス＝Sonnet5。料金は入力$10・出力$50（Opusの2倍）。

HTMLの共有4手（実演③で見せる）

「リンク1本で不特定の第三者に見せる」ならclaude.aiチャットのArtifact Publishが唯一のClaude内完結の公開手段。

共通の落とし穴：外部CDN/Webフォント/外部画像参照は file:// やCSPで崩れる → CSS/JS/画像をインライン化しておくと事故が減る。

CTA設計（本命＝LINE）

# CLAUDE.md に足す最小の型（イメージ）
作業が一段落したら、進捗を Markdown ではなく
<progress>.html に「工程バー付きHTML」で書き出すこと。
→ Stop hook で毎回自動再生成 → ブラウザで開きっぱなしにする。

※ メンバー延長＝進捗ボード/AIオフィス/設定ハブの完全コード＋CLAUDE.md全設定＋hook配線（＝設定ハブそのもの）を配布・解説。

視聴者向けスライド13枚（裏側ナシ）

生成プロンプト＝スライド生成プロンプト.md。CTA・秒数・内部メモは含まない純粋な解説資料。

次工程

1. 収録：本編=20260707_視認性HTMLプレビュー.mp4 / SNS=20260707_SNS_視認性HTMLプレビュー.mp4
2. 今回の収録動画/ へドロップ → /work-start（SEO設計.mdのKWを自動で引き継ぐ＝表記を揺らさない）
3. 公開後、CTR/維持率を 当たり狙い・学び.md に追記（特に冒頭30秒残存＝崖対策が効いたか）
4. このフォルダを _済み/20260707_視認性HTMLプレビュー/ へ手動退避