html-planで認識ズレは減るのか、Claude Codeの公式スキルを自分で試した

出典: 【認識ズレ対策】世界で話題、Claude Code公式の『html-plan』スキル！AIとの認識ズレを1枚のHTMLで解消する方法を解説します

動画は、Claude Codeの公式側の人が共有したhtml-planの紹介です。最初に出てくる課題は、AIエージェントとの認識のずれ。話者のまさおさんは、こう言います。

まさおさん（動画の中で・0:43〜）

やっぱ今の時代っていうのはAIエージェントとのその認識のね、え、ずれの部分をどう解消していくかで、ま、思った通りにですね、仕事をしてもらうみたいなとところで、え、非常にですね、重要視されているんですけれども、

公式のREADMEによると、html-planは、AIが作る実装計画を1枚のHTMLにします。計画は「主張のツリー」で、閉じた状態ならツリーがそのまま要約になります。開くと、画面のモック、仕組み、コードの順に1段ずつ降りていけます。決める所には番号が付いて、選択肢を選んでRespondを押すと、答えが1つの文になります。

動画では1分19秒ごろから、実際の画面が映ります。画面で回答していき、「Copy response」を押して、ターミナルに貼り付ける流れです。1分45秒ごろには、図の中を触りながら理解を進められること、ソースコードまで見られることも説明されます。

「ずれ」という言葉は、8月20日に私がすでに名前を付けていた痛みと同じでした。

その日の魂磨き（分身AIとの一問一答で、自分の発言の奥にある本音を掘っていくセッション）で、「3日後にチェックするって言ってたじゃん」と怒った瞬間、怒りの奥で何を感じていたかを聞かれました。私の答えは、これです。

ひろくん（8月20日の魂磨きでの答え）

認識のズレがシンプルにうざい

怒りの中身は、複雑な話ではありませんでした。ずれが、うざい。それだけです。その下の答えは「委ねたのに手放せない」でした。

同じずれを、監視の位置から見ると、現場ですり合わせし続けることになって、管理のボール（やり切る責任）が私に戻ってきます。メタな位置から見ると、おかげで仕組みを改善できる、に変わります。ただし、これは放っておく話ではありません。直す先は、現場の言い直しではなく、仕組みです。この整理は、8月の記事に書きました。

10月7日の夜、私はAI秘書の凛ちゃんに、「HTMLプランと赤ペンスキル両方試したい」と頼みました。動画が言う認識のずれは、8月に私が名前を付けた痛みと、同じ向きの話です。

次の章から、公式が出したこの道具を、私が頼んでAI秘書の凛ちゃんが動かした記録を重ねます。

動画は、出どころの話に進みます。

まさおさん（動画の中で・0:57〜）

ま、解決策じゃないですけれどもというところで、こ、クロードコードの公式チームがこれを共有してくれたというのがね、大きいかなと思います。

まさおさん（動画の中で・2:14〜）

ま、まだこれちょっとね、え、正式になんていうかな、クロードコードのブログというよりは、ま、この中の人がですね、つぶやきという形で共有してくれている。

まだ正式なブログではなく、中の人のつぶやきとして共有されている段階で、コミュニティのプラグインには入っている、という説明です。最近アップロードされたばかりとも話しています。話者は、自分でも赤ペンなどを作ってきたと言ったうえで、html-planについて、「やっておくとめちゃくちゃいい」と評価しています。

出どころが公式でも、つぶやきの段階の物です。ここで私が決めたのは、同じお題で2つ動かすところまでです。

2つのページを作って動かしたのは、AI秘書の凛ちゃんです。私は「赤ペンの方がよい」と返しました（10月7日 20:30）。お題は、同じ物にそろえました。AI秘書の確認を、答えられるページにするか、という物です。決めることは2問で、2つとも同じです。1問目は答えの返し方、2問目はどの確認でこのページを使うか、です。

動かしたのは、10月7日の夜の1回です。html-planは、公式のリポジトリ（anthropics/claude-plugins-community）から必要な所だけ取り込んで、Nodeで1枚のHTMLにまとめました。警告は6件出ました。日本語で書いた主張を、英語の動詞の判定が誤検知した物でした。

動画の「やっておくとめちゃくちゃいい」という評価は、聞いただけでは、自分の仕事のどこに入るのかが見えません。同じお題で動かすと、入る所と入らない所が、先に見えます。

▶ つぶやきの段階の道具を、自分のお題で動かす（15分）

対象は、今あなたがAIに出している確認を1つ。同じ確認を、2つの道具で作って、どちらが答えやすいかだけを比べます。2つ目の道具が用意できない日は、1つ目を動かしたところで止めて大丈夫です。

動画の実演は、来月のオフ会用のアプリを作る想定です。「応募する」を押すと出る画面、ログインの実装方針、コメントを付けられる所などが、1枚のページの中に並びます。話者は、使い心地をこう話します。

まさおさん（動画の中で・3:24〜）

やっぱこうこう書いてくれていると中で何を抑えないといけないのかっていうのがここでね、サマリーとして、え、登場しているので、ま、非常にですね、え、本当に必要最低限の部分、え、抑えながら回答して、ま、いい感じになってきますよっていうものになっております。

私の2問でも、同じ形になりました。左の目次に、答える所が2つ（答えの返し方を聞く問いと、このページを使う場面を聞く問い）。右に「1 decision」のバッジが2つ。右下に「2 to answer」と「Respond」のボタン。開かなければ、ページ全体が、短い要約になっています。

公式のREADMEには、各決定に番号が付いていて、下のボタン（「3 to answer」のような表示）を押すと、まだ開いていない次の決定へ進める、と書かれています。選んで、データの形を直して、どの主張や行にもコメントを付けて、最後にRespondで1つの答えをClaudeに貼り戻す流れです。

html-plan版は、3つの主張でできていました。1つ目は、私がスマホで計画ページを開き、その場で選べる、という主張です。スマホの形の画面の中に、選択肢と、RespondとCopy responseのボタンがあります。おすすめが選択済みの所のピンには「何も変えなければ、そのまま答えになる」と書いてあります。2つ目は、私の答えがAI秘書のタスクに戻る、という主張です。流れ図があって、中継を選ぶと「中継が止まると答えが届かない。そのときページはコピーに戻る。」という注意が開きます。3つ目は、設計・画面・計画の確認だけにこのページを使う、という主張です。

私は、普通の逆の形が好きです。普通は、人がAIに聞きます。私は、AIが一次元上の問いを出して、人は答えるだけ、にしたい。聞く主語はAIです。

html-planのページは、その形を、そのまま画面にしていました。私に聞いてくるのは、答えの返し方と、どの確認で使うか、の2つだけ。選択肢の横には、一言が付いています。たとえば1問目の「Askの自由入力に貼る」には「仕組みの変更は 0」。Askは、AI秘書の凛ちゃんが私に確認を出す窓口のことです。

別の選択肢の「[送信]で直接届く」には、中継（ページで選んだ答えを、AI秘書の凛ちゃんのタスクへ渡す小さな受け口のプログラム）を1つ置く、と付いています。選ぶ前に、何が増えて何が増えないかが、一言で読めます。利点と代償を並べて書いたのは、赤ペン版のほうでした。次の章の表で、その出し方の違いを並べます。

実演のあと、話者は、議論が1つ残る、と言います。

まさおさん（動画の中で・3:39〜）

ただコードをね、ま、見る必要があるのかみたいなのは1個議論として、ま、残るのかなとは思っているんですけども、

続けて、「コード読んでも分からないという人もいるでしょうから」と話します。そこで出る提案が、生のコードではなく、「ここで何をやっているか」とコードの流れの「解説まであれば」、開発者でない人にも使えるのでは、というものです。

ほかに1つ、話者が面白いと言うのは、選んだ時に表示が変わる、状態に応じた画面の変化です。

私は、わかることは2度聞かない、を決めています。この決め事に当てはめると、コードの行を調べる所は、AIが先に済ませておく側の仕事です。

2枚を並べると、この問いへの答えの出し方が、道具ごとに違いました。赤ペン版の1問目は、根拠にコードの1行を載せています。s.bind(('127.0.0.1', port))（中継のプログラムの120行目）。意味は、中継が自分のMacの中だけで待っているので、スマホからは届かない、です。AIが読んで見つけた事実が、1行だけ、最初から目の高さに置いてあります。

html-plan版も、同じ120行目を持っています。READMEの階層でいちばん下の段、コードの場所です。ただ、閉じたままでは出ません。開いて、1段ずつ降りていくと見えます。1枚目の要約には、同じ事実が「中継は今 127.0.0.1 だけで待つ。スマホからは届かない。」の1文で出ています。

つまり、違いは、コードを出すか出さないかではありません。出す場所です。最初から1行で見えるか、開いて降りると見えるか。動画が言う「コードの流れの解説」と、赤ペン版の「根拠の1行」は、読む量を、人が読める大きさまで小さくして渡す、という同じ向きの提案です。

赤ペン版は、問いごとに「根拠」の欄があって、コードの1行を最初から載せています。私が採用したルールにも、各問に推奨と根拠（ファイルと行番号か、実測）を書く、とあります。

▶ 確認を2〜4問に書き直す（10分）

次にAIから来る確認を1つ選び、「何を決めてほしいか」を2〜4問に書き直します。各問に、選択肢と、根拠を付けます。

動画の中盤で、話者は、自分が作った赤ペンの話をします。開発者でない人が認識をすり合わせたい時の手段です。

まさおさん（動画の中で・5:02〜）

ま、正直ね、ま、特に開発者じゃない方とかで、ま、その認識すり合わせをしたい場合って、ま、意外とね、ま、このプランンっていう部分で、ま、一応スキルにはなってますけど、個人的にはね、結構やっぱ赤ペンもおすすめやなっていうことは思ってます。

赤ペンでできることは、動画ではこう説明されます。図をたくさん入れて、解説を付けてもらう。「視覚訂正モード」で、ここはこう、と画面の上に入れながら、視覚的に修正を頼む。AIエージェントから「決めてほしいこと」の提案を受けて、選んでいく。そして、AIエージェントは最初からずれていることがあるので、全体への赤ペンで、ここはこうして、としっかりフィードバックを返す。

話者は、「自分の手札として持っておく」ことの大切さも話しています。

10月7日の夜、同じお題・同じ2問で作った2枚から、私が選んだのは、赤ペンです。

赤ペンのシートは、結論の1文、赤い①②が付いた全体図、決めてほしいこと2問、という順で、1枚の上に並びます。html-plan版は、左の目次と、閉じた要約と、開いて降りる根拠の段でできていました。

赤ペンのシートの下半分は、回答フォームです。シートの下に回答フォームがあって、問いごとに選ぶ所があり、選ぶと、「貼り付ける文章を作る」のボタンで答えの文が出ます。右上の「視覚訂正モード」を入れると、シートの上の直したい所に、赤いピンが置けます。

赤ペンのシートは、私に出す前に、読者役のAIに1回読ませました。内輪の言葉など8か所が直りました。読み手の目で先に直しておくのも、ずれを減らす手順の一つです。

赤ペンは、9月10日に入れてあったのに、無効になっていました。無効になった原因は未特定です。採用を選んだあとに、有効にしました。

同じお題で作った2枚の違いを、私の手元の記録から並べます。

私は、紙とペンで書くと俯瞰できる、と思っています。言葉だけでなく、図解やつながりとして紙へ出して、その紙をAIも一緒に見ながら話すと、人間の感覚とAIの構造化がスパークします。

動画の結論に入ります。

まさおさん（動画の中で・6:40〜）

こういう形でHTMLアプリケーションでエージェントと、え、会話をしながら認知、認識のずれっていうのをより解消していくっていう方法はもうね、え、結構前からあのやられていたことなんですけれども、絶対やった方がいいと個人的にも思っておりますし、

Claudeのチームから出たので、これからClaude Codeに標準で入ったら面白い、という期待も語られます。品質がより最適化されたら使いやすい、という希望も添えられていました。

まさおさん（動画の中で・7:28〜）

っていうのをね、ちょっと皆さんも1個、え、手札として持っておくと、ま、よりAIエージェントとね、え、仕事をしていく上で快適にやっていけるんじゃないかなということは思っています。

結びで、話者は、「このHTMLプランもいいんですけれども」、赤ペンも試してほしい、と話します。

私は、この結論に、実際に使い始める形で答えました。10月7日の夜、赤ペンを「この案で入れる」で採用しています。

足したのは、使い方のルール1ファイルだけです。内容は3点。1つ目、設計の分かれ道、画面の配置、実装の計画など、絵で見て決める確認は、赤ペンのシートで返してもらう。2つ目、文面の全文確認と、公開・送信・削除・課金の最終判断、完了の確認は、今までどおりの確認の通知で取る。3つ目、答えは、シートで作った文を、確認の自由入力に貼って返す。コード、自動で動く確認の仕組み、既存のルールは、変えていません。

html-planは、計画を木の形で見せたい時に使う物として残しました（Nodeが要ります）。

つまずいた所は、次のとおりです。1つ目、AI共創OSのプレビューでは、ページのボタンが動きませんでした。動くページは、別の置き場から配ることにしました。2つ目、赤ペンの返信の中継は、ページが決まった道筋で呼ぶ作りで、置き場の途中の道の下では動きませんでした。専用の番号の入口を1つ出して、試しの間だけ動かしました。常設はしていません。3つ目、画面の写真を撮る操作が120秒でタイムアウトして、原因は未特定です。ページの文字を直接読む方法で、代わりに確かめました。

私ならこうします。確認を答えられるページにすると、私が返すのは、選ぶことだけになります。言い直しや催促で、ボールが私に戻ってくる回数を、減らす形にできるはずです。ずれが本当に減ったかどうかは、まだ測れていません。

▶ 使い分けの1行を書く（10分）

提案です。自分の確認を、絵で見て決める物と、文面で読んで決める物の2つに分けて、それぞれの出し方を1行ずつ書きます（例:「画面と設計は図つきのシート。タイトルと本文は全文」）。書けたら完了です。分けにくい確認は、まず文面の側に置いたままにします。

まさおさんの動画は、AIとの認識のずれを、1枚のHTMLで減らす方法を見せてくれました。計画を主張のツリーにして、決めてほしいことを選んで、答えを1つの文で返す。公式から出た、というのが、話者の言う大きな点でした。

私は、10月7日の夜、同じお題・同じ2問で、html-planと赤ペンを動かしました。選んだのは赤ペンで、使い方のルールを1枚だけ足しました。

各問に根拠を付けるところまでが、私が採用したルールです。ずれは、答えられるページで、先に潰します。

あなたが次にAIから受ける確認は、どれから答えられるページにできますか？