Claude CodeはHTMLで視認性UP｜進捗ダッシュボードで多数プロジェクトを一望

 

「僕はいま8つのClaude Codeプロジェクトを同時に動かしていますが、進捗確認に見るのはHTMLダッシュボード1枚だけです」

ターミナルの文字を延々と追いかける必要は、もうありません。この記事では、Claude Codeの視認性を上げるHTMLプレビュー術、コピペで使える神プロンプト2選、進捗ボードの作り方、AI社員を擬人化した"会社運営システム"の構想までを、実践ベースで紹介します。

 

こんにちは、ルーティンラボ（@rutinelabo）です。

 

今回は、前回・前々回の「Claude Fable 5の使い方・設定」の続編にあたる内容です。Fable 5のような高速なモデルを使いこなすほど、"人間側の理解"が追いつかなくなります。まずは環境設定の話から入りたい方は、先にこちらを読むと流れがつかめます：Claude Fable 5の使い方・設定方法｜CLAUDE.mdでモデル自動切替＆トークン節約

前回の記事

Claude Fable 5の使い方・設定方法｜CLAUDE.mdでモデル自動切替＆トークン節約

続きを見る

 

LINE友だち登録して情報Get

 

なぜ2026年は「視認性」が開発の勝負どころになるのか

 

本題に入る前に、なぜ今「視認性（見た目の分かりやすさ）」がこれほど重要になったのかを整理しておきます。ここを理解しておくと、HTMLで見える化する意味が腑に落ちます。

 

AIを使った開発の手法は、ここ数年でめまぐるしく変わってきました。流れを一覧にすると次のとおりです。

 

 

手法	何をするか	人間の役割
プロンプトエンジニアリング	AIへの指示文の書き方を工夫する（初期の手法）	毎回プロンプトを考えて打つ
コンテキストエンジニアリング	指示を書いたファイルを置き、AIに読み取らせて動かす	指示ファイルを整備する
ハーネスエンジニアリング	AIが動く"環境と仕組み"を先に設計する	環境を設計する
ループエンジニアリング	実行→観測→修正のループを回し続ける	区切りで確認と指示出しだけ

 

この4つの手法の詳細は別の記事で実演解説しているので、背景から知りたい方はあわせてご覧ください：ハーネスエンジニアリングとは？AIに任せきる開発の新常識を実演解説

 

これらの手法に共通しているのは、コードを書くのも、レビューするのも、どんどんAIが担うようになったという点です。ハーネスの仕組みを使えば、5つも6つもプロジェクトを同時に走らせることも珍しくありません。

 

ところが、ここでボトルネックになるのが人間自身の処理能力（認知機能）です。生成そのものはAIが一瞬で終わらせても、出てきたものを人間が理解する速度は、もうAIに追いつけないのが現実になってきました。黒と白の文字を読み続けるだけで脳は疲弊します。だからこそ、AIが作ったものを「いかに速く・正確に理解するか」——つまり視認性を上げる工夫が、2026年の開発では勝負どころになるのです。

 

これはデータでも裏づけられています。AnthropicでClaude Codeを手がけるThariq Shihipar氏によると、Claudeが生成するトークンのうち、本番コードに使われるのは約1%（How I AI・2026年5月時点）。残りの99%は計画・試行・中間生成物、つまり「人間が読んで判断するためのもの」です。AIの出力のほとんどが"読み物"なら、その読みやすさ＝視認性が効率を左右するのは当然と言えます。

 

 

マークダウンより「HTML」｜"HTML is new markdown"の意味

 

Claude Codeを使っていると、CLAUDE.mdやmemory.mdなど、大量のマークダウン形式のファイルがたまっていきます。筆者の環境にも、メモとして置かれたマークダウンが山のようにあります。これ自体は悪いことではありません。

 

ただ、マークダウンは量が増えるほどパッと読みづらくなります。細々とした箇条書きやToDoリストが積み上がると、結局どこが重要なのか、全体としてどう進んでいるのかが一目では分からないのです。5つも6つもプロジェクトを動かしていれば、そのすべてを読み込む時間はありません。

 

 

そこでおすすめなのが、マークダウンをHTMLファイルにも変換しておくという一手間です。マークダウンをわざわざ消す必要はありません。マークダウンはAIが読む・記録するためのファイル、HTMLは人間が理解するためのファイル、と役割を分けるのがコツです。デザインされたHTMLに変換しておくと、ブログのように整ったページになり、人間の目にすっと入ってきます。

 

実はこれ、筆者が独自に言っているわけではありません。AnthropicのClaude Codeチームのエンジニア、Thariq Shihipar氏が「HTML is the new Markdown（HTMLは新しいマークダウンだ）」と発信しています（Lenny's Newsletter「How I AI」・2026年5月18日公開）。理由として挙げているのは、インタラクティブ要素・視覚的モックアップ・スクロール可能なセクション・情報密度の高さ。マークダウンの長文レポートは読み捨てられるが、HTMLは"使われるインターフェース"になる、という主張です。

 

実際に筆者もこの1ヶ月、進捗もメモもHTMLに寄せて運用してきましたが、ターミナルを覗きに行く回数が目に見えて減りました。公式の主張どおり、と実感しています。

 

神プロンプト①：作業結果を「1枚のHTMLダッシュボード」にまとめさせる

 

ここからは、実際にコピペで使えるプロンプトを紹介します。1つ目は、今の作業結果をそのままHTMLダッシュボードにまとめさせる指示です。Claude CodeでもCodexでも、チャットで作業がガーッと進んだ後に、次の一文を送るだけでOKです。

 

今の作業の結果を、マークダウン形式の長文ではなく、
1枚のHTMLダッシュボードにまとめて書き出してください。

 

正直、この2行だけで十分です。さらに精度を上げたいときは、「作業のゴール」「全体の進捗状況」「このプロジェクトがどれくらい進んでいるか」を含めてほしいと付け加えると、理解度がぐっと増すダッシュボードになります。

 

 

筆者の場合は、この指示でプロジェクトの工程表（作業ラインのHTML）を作ってもらっています。収録した音声からブログの下書きやサムネイルを自動生成し、本編カット（動画編集）まで自動で進め、最後にショート動画まで作る——この各工程がどこまで進んでいるのかが、1枚のHTMLで一目で分かります。

 

神プロンプト②：プロジェクト全体を「1枚のHTMLダッシュボード」で俯瞰する

 

2つ目は、作業の一部ではなくプロジェクト全体を調べて俯瞰するためのプロンプトです。筆者自身、最近はどのプロジェクトでも欠かさず使っている、とくにおすすめの一文です。

 

このプロジェクト全体を調べて、
現状を1枚のHTMLのダッシュボードにまとめてください。

 

これを送るだけで、プロジェクト全体を確認できるページが1枚できあがります。第三者にプロジェクトを共有するときにも抜群に効きます。ターミナルやテキストエディターの画面を見せても伝わりにくいものが、HTMLプレビューなら"ブログの1ページ"のように伝わるからです。タブでプロンプトを切り替えて共有する、といった使い方もできます。

 

CLAUDE.mdに貼れば「自動で更新」になる

 

とはいえ、毎回このプロンプトを手で打つのは面倒です。そこでおすすめなのが、この2つのプロンプトをCLAUDE.mdに貼り付けておく方法です。タスクが一区切りするたびに、工程表や全体ダッシュボードが自動で更新されるようになります。手順は次の3ステップだけです。

 

step
12つのプロンプトをコピーする

上で紹介した神プロンプト①と②を、そのままコピーします。文言を変える必要はありません。

 

step
2CLAUDE.mdを開く

全プロジェクトで効かせたいなら、ホームディレクトリ（ユーザーの大元のフォルダ）のCLAUDE.mdを開きます。特定のプロジェクトだけで効かせたいなら、そのプロジェクトフォルダ直下のCLAUDE.mdでも構いません。

 

step
3一文添えて貼り付ける

「作業のセクションが終わるたびに、次のHTMLダッシュボードを作成・更新してください」と一文添えて、2つのプロンプトを貼り付けます。これだけで、区切りごとに自動で見える化される状態が完成します。

 

 

この考え方は、前述のハーネスエンジニアリング（AIが動く環境を先に整える）やループエンジニアリング（実行→観測→修正を回す）の実践そのものです。環境さえ整えておけば、あとはループの区切りで自動的に"見える化"される状態を作れます。

 

進捗ボード｜タスクの進行をリアルタイムで動かす"動的HTML"

 

HTMLプレビューは、静的な1枚もののダッシュボードだけではありません。数秒に1回など、一定間隔で自動更新される"動的なコンテンツ"としても作れます。これを使うと、いわゆる進捗ボードが完成します。

 

たとえば筆者は、動画編集やブログ制作などのタスクが進むにつれて、進捗がリアルタイムに動いていく工程ボードを作っています。ページを開いておくだけで、今どのタスクが動いていて、どこまで完了したのかが刻々と反映される——まさに管制室のダッシュボードのような感覚で、ターミナルを覗きに行く回数が激減します。

 

こうした動的コンテンツは、進捗ボードに限らず応用が利きます。コンテンツの台本づくりや、プレゼンスライドの構成案を動的に組み立てるなど、アイデア次第でいろいろな"見える化"が可能です。まずは静的ダッシュボードから始め、慣れてきたら自動更新の動的ボードに広げていくのがおすすめです。

 

究極形｜Claude Codeを擬人化する"AIオフィス"で会社運営システムを自作する

 

ここまでは「見える化」の話でしたが、視認性を極限まで突き詰めると、次のステップが見えてきます。それがユーザー体験（UX/UI）そのものを自分で作り込むという発想です。アプリ開発でユーザーの使い心地を大事にするのと同じように、自分専用の開発環境の"使い心地"にもこだわってみるのです。

 

その一例として筆者が構想しているのが、動かしているClaude Codeの各プロジェクトを"擬人化"したAIオフィスです。プロジェクトごとにキャラクター（AIアバター）を割り当て、実際に仕事をしているように動かします。ダッシュボードに数字が並ぶだけでなく、AI社員がオフィスの中で働いたり、会議室に移動したりと、動的に動くのを眺められるイメージです。

 

 

パソコンのスペックにもよりますが、6つや8つのプロジェクトを同時に動かしても、それぞれのAI社員が働き、自分自身は"一つの会社の社長"として社員に指示を出す——そんな運営システムを作ることも可能になります。各キャラクターにコメントや指示を出せるようにすれば、まさに小さな会社を経営している感覚です。

 

この仕組みは現在さらに作り込みを進めており、後日あらためて詳しく解説する予定です。アプリ化ができたら、多くのユーザーの方に使っていただけるよう共有していきますので、楽しみにしていてください。

 

あわせて読みたい

ハーネスエンジニアリングとは？AIに任せきる開発の新常識を実演解説

続きを見る

 

よくある質問

 

Q1. コードが書けなくても使えますか？

A. 使えます。この記事のプロンプト2つはコピペするだけで、HTMLの知識は不要です。デザインやレイアウトはAIが自動で整えます。生成されたHTMLファイルをダブルクリックしてブラウザで開くだけで確認できます。

 

Q2. Claude Code以外のツールでも使えますか？

A. 使えます。CodexなどチャットでAIに指示を出す開発ツールなら同じプロンプトがそのまま機能します。「作業結果を1枚のHTMLに」という指示自体はツールを選びません。自動更新（CLAUDE.md登録）の部分だけはClaude Code固有の仕組みです。

 

Q3. マークダウンのメモはもう不要になりますか？

A. 不要にはなりません。マークダウンはAIが読む・記録するためのファイルとして残し、HTMLは人間が理解するためのファイルとして追加で作らせる——役割分担が基本です。既存のCLAUDE.mdやメモを消す必要はありません。

 

まとめ：視認性を上げれば、AIの速度に人間が追いつける

Claude Codeの視認性を上げる方法を、考え方から実践まで整理しました。今回のポイントをまとめます。

 

 

 

視認性を上げるというのは、単に見た目をきれいにする話ではありません。AIが猛烈な速度で生み出したものを、人間が正しく理解し、的確に次の一手を出すための"土台"です。まずは今回の神プロンプト2つをCLAUDE.mdに貼るところから始めてみてください。それだけで、あなたのClaude Code環境の見え方が大きく変わるはずです。

 

なお、今回紹介したダッシュボードのより詳しい作り方や、AIオフィスのプロジェクトそのものは、後日配布・解説する予定です。今回使ったHTMLダッシュボード生成のページは、公式LINEからメッセージをいただいた方に共有できるよう準備しています。より深くAIを学びたい方・実践的に使いたい方に向けては、メンバーシップの動画やDiscordの限定コミュニティでも、便利なプロンプトやプロジェクトを配信しています。今回の記事が参考になった方は、YouTubeチャンネルの登録もあわせてよろしくお願いします。それではまた次の記事でお会いしましょう。

 

LINE友だち登録して情報Get

 

こちらの動画もおすすめ

 

おすすめAIツール

 

本ブログ「ルーティンラボ」では、他の記事で様々なAIやI Tに関するツールについて紹介しています。

他にもITスキルを高めてキャリアアップや副業の役立つ情報の発信もしています。ぜひチェックしてみてください。

▶︎他の記事も読んでみる

▶︎ AIツールを使った解説した記事はこちら