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

メタ情報

ジョブID

20260707_視認性HTMLプレビュー（収録ファイル名＝このID）

テーマ

Claude Code開発を「視認性（工程・全体像・共有）」で格段にしやすくする。MarkdownよりHTMLプレビュー。ニュースフック＝Fable 5復活。

想定タイプ

B使い方解説 × C完全ガイド（実演型）

ペルソナの悩み

「Claude Codeが今"何を目的に、どこまで"やっているのか着地点が見えない。エージェントを増やすほどタブ地獄で、全体像も進捗も頭に入らない」

狙うキーワード（SEO設計.md「2.確定」から転記）

• メインKW：Claude Code（文脈語「効率化 / 見える化」）
• サブKW：ハーネスエンジニアリング／ループエンジニアリング／Claude Code アプリ開発
• ロングテール：claude code ハーネス／claude code ダッシュボード／claude code 使い方／claude code 自動化／HTML Artifacts Claude Code

本命CTA（1つ）：LINE登録（＝可視化HTML一式＋CLAUDE.md/hook設定サンプルの無料配布。動画の"続き"）。中盤ピーク直後にチャンネル登録も。

タイトル案・サムネ案（方向だけ決める）

サムネ文言候補：「MDの壁 → HTML」／「12工程まる見え」／「開発が"見える"」
ビジュアル方向：ドット絵AIオフィス全景（吹き出し"作業中"）＋横に工場ライン風の工程バー。赤字で「Markdownの壁→HTML」。数字「12工程」を大きく。

オープニング（秒数は書かない・アドリブ前提）

• (a) 最初の数秒で"結果"を画面で見せる（show, don't tell）
  • 見せる結果＝ドット絵AIオフィスが動いている画面（社員＝各Claude Codeが吹き出しで"◯◯を編集中"）＋工場ライン風の進捗ボード。一言：「これ、僕が今Macで動かしてるClaude Codeたちの"中身"を丸ごと見える化したものです」
  • 一言フック＝「もう、賢さは足りてる。足りてないのは"それを見て捌く"僕らの帯域の方でした」
  • 冒頭の客観数字＝AIでコードは+98%、なのにレビュー時間は+91%。レビューせず出荷できてるシニアはたった26%
• (b) 冒頭要約と本編で同じ話を2回しない（ここで手法の中身を語りきらない）
• (c) チャンネル説明は短く・冒頭で登録依頼しない（崖26秒より後、実演に入ってから）

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

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

本編（論点メモ＋実演フロー）

読み上げ文は書かない。各論点に「見せる素材」を1つ。初心者60/中級30/上級10を時間帯で。

【基礎：なぜ今"視認性"か】

• 論点1（AI開発の地図が変わった）：プロンプト→コンテキスト→ハーネス→ループの4段ロケット。各層は前を"包む"。ハーネス＝「Agent = Model + Harness（モデル以外ぜんぶ）」、ループ＝「もうプロンプトは打たない、ループを書く」（Boris Cherny）。
  → 見せる素材：4層のピラミッド図（スライド）。前回の「ハーネスエンジニアリング」動画をチラ見せ（続編と示す）。
• 論点2（今の"詰まり"はどこか）：モデルはもう十分速い。AIが人間の2〜7倍コードを吐く → 人間の"見て・理解して・判断する"帯域が律速に。GitLab調査でも85%が「ボトルネックは執筆→レビューへ移った」。Anthropic自身、マージするコードの8割超はもうClaudeが書いてる。答えは「人間を外す」でなく「人間の注意を、いちばん価値ある判断だけに向ける」＝視認性への投資。
  → 見せる素材：+98%/+91%/26%の数字カード。「創造ではなく"理解(comprehension)"が課題」（No Priors）。

【MarkdownよりHTML＝この動画の背骨・公式の裏付け】

• 論点3（なぜMarkdownだと詰まるか）：計画も進捗もMarkdownの長文だと、情報が縦に積もって"全体像"が消える。人間の認知はテキストの壁に弱い。
  → 見せる素材：長いMarkdownのTODO vs 同じ内容のHTMLダッシュボード（Before/After）。
• 論点4（これ、僕の思いつきじゃない）：Claude Codeを作ってるAnthropicのエンジニア（Thariq）が「HTML is the new markdown」とXで発信 → 約1,400万ビューでバズった。名言「AIが生成するトークンの99%は、本番コードじゃなく"計画・インターフェース・コミュニケーション"に使え」。しかもAnthropic公式が2026年6月にClaude Codeへ「HTML Artifacts」を正式導入 ── 進捗もレビューも"生きた・共有できるビジュアルページ"にできる、と公式が推してる。
  → 見せる素材：Thariqの投稿のスクショ（ビュー数）＋公式HTML Artifactsブログの該当文。

【実践デモ①＝最初の山＝価値ピーク｜進捗ボード】

• 論点5（"12工程"が勝手に見える）：制作パイプライン（収録→ブログ→本編/ショート→公開→SNS）を、実ファイルから自動判定して"工場ライン風HTML"にした。どこまで進んだか一目。しかもStop hookで作業のたび自動再生成＝手で更新しない。
  → 見せる素材：進捗ボードのライブ（今日のジョブが流れる）。「実は、これを実現してるのはCLAUDE.mdの数行＋hookの数行だけ」とコードをチラ見せ。

【実践デモ②＝一番映える｜AIオフィス（ドット絵）】

• 論点6（複数のClaude Codeが"今なにをやってるか"を一目で）：エージェントを増やすとタブ地獄（agent sprawl）。Mac全体の全セッションを"AI社員が働くドット絵オフィス"にした。1セッション＝1社員、吹き出しに"今の作業"、部下（サブエージェント）の数まで見える。司令塔（mission control）。
  → 見せる素材：AIオフィスのライブ。「祈りの時間（AI待ち）」が"社員が働いてる画"に変わる楽しさ。

【実践デモ③＝共有｜設定ハブ＋共有方法】

• 論点7（HTMLの本当の強み＝"第三者に渡せる"）：設定・スキルの一覧を設定ハブ（HTML）にまとめると、チームや視聴者にそのまま共有できる。ここでHTMLの共有4手を実演：
  1. ローカルでブラウザにドラッグ（最速・オフライン・でもリンクは無い）
  2. claude.aiのArtifactでPublish → リンク1本、相手はアカウント不要で見られる（手軽な公開の主役）
  3. GitHub / GitHub Pages → 消えない公開URL・独自ドメイン
  4. Cloudflare Pages → 案件ごとにURLを分けて配る
  → 見せる素材：設定ハブを実際にPublish→リンクをブラウザで開く。

【応用：今日から真似できる最小の型＝自分ごと化の担保】

• 論点8（"自作すごい"で終わらせない）：真似の最小セットを渡す。①CLAUDE.mdに「作業が終わったら進捗をHTMLで書き出す」の指示を数行 ②Stop hookで毎回そのHTMLを自動再生成 ③ブラウザで開きっぱなし＝勝手に更新。「まずTODOをMarkdownでなくHTMLで書かせる」だけでも効果アリ。
  → 見せる素材：コピペで使える最小コード（これがLINE配布物の予告）。

【why-now：Fable 5復活＝"だから今"】

• 論点9（なぜこの話を"今"するのか）：Claude Fable 5が帰ってきた（6/9公開→輸出規制で一時停止→7/1復活）。SWE-bench 95%、Stripeの5000万行を1日で移行するレベル。＝AIはさらに速く・大量にコードを吐く。つまり人間の"見る力"はますます律速に。強いモデルほど、視認性への投資が効く。（使い分けは一言：重い長時間タスク=Fable5／通常の高自律コーディング=Opus4.8）
  → 見せる素材：Fable5のベンチ数字カード＋モデル使い分けの簡易表。

CTA設計（1動画＝本命CTA1つ＝LINE）

LINE導線（本命）

• 概要欄最上部にLINEリードマグネット。配布物＝①進捗ボード/AIオフィス風の最小HTMLテンプレ ②「CLAUDE.mdにこう書く＋Stop hookで自動再生成」の設定サンプル（コピペ可）。
• 終盤の口頭案内：「この動画の"続き"はLINEに置いてます。手を動かす人向けに、今日の型をそのまま配ってます」

人間味（本人で振り切る）

• 本編の解説・実演は本人。AIキャラ（ドット絵の社員）は"見せる対象"であって要約ナレーターにはしない。
• 本人の本音を出す箇所：「正直、最初はMarkdownで満足してた。でも案件が増えて"今どこ?"が分からなくなって、HTMLに全部作り替えたら世界が変わった」／「AIの待ち時間（祈りの時間）が、社員が働く画で"楽しい"に変わった」。

独自価値メモ（YPP対策・必須1行）

実ファイルから自動判定する自作の可視化3点（進捗ボード・AIオフィス・設定ハブ）の一次実演＋実運用知見。既存OSS（Pixel Agents/observability系）と発想は近いが、"Mac全体・複数案件を横断する1人運用者の司令塔"という独自運用が変換的価値。

メンバー延長パート（別出力）

切り出す部分：僕の実運用フルセット＝進捗ボード/AIオフィス/設定ハブの完全なコード一式＋CLAUDE.md全設定＋hook配線を配布・ハンズオン解説（＝設定ハブそのもの）。無料版＝"最小の型"、メンバー版＝"丸ごと工房"で分割（制作負荷ゼロ）。

概要欄メモ（/video-description・/make-toc へ渡す種）

紹介文の核（200字の素）：Claude Codeでの開発は、モデルの賢さより「今なにを・どこまでやっているか」を人間が把握できるかが律速に。この動画では、MarkdownをやめてHTMLで開発を"見える化"する手法を、自作の進捗ボード・AIオフィス・設定ハブの実演で解説。Anthropic公式のHTML Artifactsや、誰でも真似できる最小の型（CLAUDE.md＋hook）まで。Fable5復活で加速する"人間ボトルネック"時代の必修スキル。

ハッシュタグ

#ClaudeCode　#AI開発　#ハーネスエンジニアリング

公式リンク

Claude Code（code.claude.com）／HTML Artifacts（claude.com/blog/artifacts-in-claude-code）／Claude Fable 5（anthropic.com/news/claude-fable-5-mythos-5）

関連動画

①「ハーネスエンジニアリングとは？」(cv_ZuEeRuaY) ②「Codexで毎朝のAI情報収集を全自動化」(3qXf0Zx8ioI) ③「Fable 5徹底検証」(C51h5STnVaM)

注意事項

Artifactsの公開範囲・料金プランは変更され得る（2026年7月時点）。輸出規制の停止/復活はメディア報道ベース。

概要欄の並び順は R7テンプレ準拠：①紹介文＋ハッシュタグ→②目次→③LINE→④登録→⑤メンバー→⑥Discord→⑦作品/プログラム→⑧運営メディア→⑨お仕事依頼→⑩公式リンク→⑪関連動画→⑫注意事項。

次工程への申し送り

• 本編右上「今回のトピック」テロップ候補：「Claude Code 視認性 / HTML可視化」
• サムネ文言の最終候補：「MDの壁→HTML」＋「12工程まる見え」
• 見せる素材の段取り：進捗ボード（ドキュメント/進捗ボード/index.html）／AIオフィス（localhost:4780・事前起動）／設定ハブ（共有ページ/設定ハブ/index.html）を収録前に全部立ち上げておく。MD vs HTMLのBefore/Afterスライドを1枚用意。