Claude Codeに『HTMLで作って』と頼むだけで、報告書が爆速で読みやすくなった話
🌸 この記事は今回特別に全文無料公開です。Claude Codeを使うすべての人に届けたい内容なので、約5,200文字すべてを無料でお届けしますね。
この記事を読むとわかること：
- ✅ なぜClaudeの長い返事が読みにくくなるのか、3分で説明できる
- ✅ 「HTMLで作って」と頼むだけで何が変わるのかがわかる
- ✅ 仕様書・報告書・コードレビューを劇的に読みやすくできる
- ✅ 副業の納品物のクオリティを上げる頼み方が身につく
- ✅ みやびがそのまま使ってるコピペ用の頼み方をもらえる
Contents
そもそもの話：Claudeの返事、長くなると読みにくくないですか？
Claudeに「副業の事業計画を作って」「この記事の構成案を考えて」と頼むと、長い文章で返してくれますよね。
でも、その返事をスクロールしながら読んでいると、こんなことありませんか？
- 同じ見た目の文字がずっと続いて、どこが大事かわからない
- 表があるはずなのに、なんだか枠線がガタガタしてる
- 図にしてほしかったところが、文字の絵（アスキーアート）で描かれてる
- 100行を超えた瞬間、もう読む気がしなくなる
これは、Claudeが返事を書くときに使っている「Markdown（マークダウン）」という形式の限界なんです。
Anthropicの中の人「Thariqさん」が提案している新しい頼み方
そこで先日、AnthropicでClaude Codeチームに在籍しているThariq（タリック）さんという方が、こんなブログを公開しました。
Markdownはエージェントが私たちとやり取りするための主要な形式になりました。でもエージェントが強力になるにつれて、Markdownは制約が多くなってきた。だから私はMarkdownの代わりに「HTML」を出力形式として好むようになったのです。
― Thariq氏ブログ「The Unreasonable Effectiveness of HTML」より要約
HTMLというと「ホームページを作る言語でしょ？難しそう…」と身構えるかもしれませんね。
でも安心してください。私たちは1行もコードを書きません。Claude Codeに「HTMLで作って」と頼むだけです。あとはClaudeが全部やってくれます。
HTMLで頼むと何がいいの？3つの大きなメリット
① 情報の「見え方」が一気にリッチになる
HTMLには、文字を整える仕組みがたくさん入っています。表・色・図・アイコン・グラフ。これらを全部、Claudeが自動で組み立ててくれます。
たとえば「副業のジャンル比較表を作って」と頼むと、Markdownでは線がガタガタな表が返ってきますが、HTMLなら色分けされた美しい比較表がパッと出てきます。
② 100行を超えても、ちゃんと読める
Thariqさんも本音で書かれていましたが、100行を超えるMarkdownはもう読まれないんですよね。Claudeが頑張って書いてくれても、私たちが読めなければ意味がありません。
HTMLなら、見出し・タブ・色付きハイライト・画面サイズに合わせた折り返しが効くので、長くなっても疲れずに読めます。スマホでもちゃんと見やすい形で出してくれますよ。
③ そのままリンクで人に共有できる
これが副業希望者にとって一番うれしいポイントです。
HTMLファイルは、ブラウザでそのまま開けます。クライアントさんに納品するときも「このファイルを開いてください」で済む。Markdownのように「これ、何のソフトで開けばいいの？」と聞かれることがありません。
ここまでで「なぜHTMLで頼むといいのか」の理由はしっかり伝わったかと思います。ここからは実践編、副業希望者が今日からそのまま真似できる4つの使い方と、私みやびが実際にClaude Codeに毎日投げている「魔法の頼み方の型」を全部お見せしますね。
副業希望者が真似したい4つの使い方
使い方①：副業の「企画書・仕様書」をHTMLで作ってもらう
クライアントさんに提案する企画書は、見た目で8割決まります。Claudeにこう頼んでみてください。
「中小企業向けLINE公式アカウント運用代行」の提案書をHTMLファイルで作ってください。表紙・サービス概要・料金プラン3種の比較表・導入ステップ4段階・よくある質問の5セクションで構成し、紫とゴールドを基調にした上品なデザインでお願いします。1ファイル完結で。
これをClaude Codeに投げるだけで、ブラウザで開いてそのままPDF化できる提案書ができあがります。Wordで何時間もかけて作っていた作業が、ものの数分で終わりますよ。
使い方②：コードや作業内容の「説明資料」をHTMLで作ってもらう
プログラミング副業をしている方、コーディング作業を非エンジニアのクライアントに説明するの、大変じゃないですか？
Thariqさんも「PRを作るたびに必ずHTMLの解説書を添付している」と書かれていました。これは納品物の信頼度がぐっと上がるテクニックです。
今日修正したこのコードについて、非エンジニアでもわかるHTML解説資料を作ってください。「何を変えたか」「なぜ変えたか」「お客様にとっての効果」の3点を、実際の差分・図解・色分けで示してください。
使い方③：上司・クライアントへの「週次レポート」をHTMLで作ってもらう
副業で複数案件を持つようになると、定期報告が必須になります。これをClaude Codeに任せると一気に楽になります。
今週のSNS運用代行の進捗をHTMLレポートにまとめてください。投稿数・エンゲージメント率・フォロワー増減の3つのKPIをグラフ風に表示し、トピック別の振り返りと来週のアクションを箇条書きで。クライアントが3分で読める分量に。
大事なのは「クライアントが3分で読める分量に」と入れることです。これだけで、Claudeはダラダラ書かずに、要点だけギュッとまとめてくれます。
使い方④：自分専用の「使い捨てツール」を作ってもらう
これがThariqさんの記事で一番面白かった部分です。「自分が今やりたい作業のためだけの専用ツール」をその場で作ってもらうんです。
たとえば私みやびが先日やったのは、ブログ記事のタイトル候補を一覧で並べて、ドラッグで順位付けできるHTMLツールを作ってもらったことです。
10個のブログタイトル候補をカードで横並びに表示し、ドラッグで好きな順番に並べ替えられるHTMLファイルを作ってください。並べ替え結果を「コピー」ボタンでテキストとしてコピーできるようにしてください。
これ、エクセルでも紙でもできない作業ですよね。でもClaude Codeなら数分で「自分専用ツール」が手に入ります。
② コード解説・作業説明 → 信頼度アップ
③ 週次レポート → 「3分で読める分量」と必ず指定
④ 自分専用ツール → ドラッグや並べ替えなど、テキストで表現しにくい作業に
みやびがよく使う「魔法の頼み方の型」
どんな用途でも使い回せる、私の頼み方の基本テンプレを公開しますね。これをコピーして、太字部分だけ書き換えてください。
【目的】〇〇のための資料／ツールをHTMLファイルで作ってください。
【対象読者】〇〇な人（例：非エンジニアのクライアント）
【含める要素】①〜、②〜、③〜
【デザイン】紫とゴールドを基調に、上品で読みやすく
【文字量】〇分で読める分量
【出力】1つのHTMLファイルにまとめて
この型に沿って頼むだけで、Claude Codeはあなたの意図をピタッと汲んで、迷いなくいいHTMLを出してくれます。
気をつけたい3つのポイント
- Markdownより生成に2〜4倍の時間がかかる：Thariqさんも認めている事実です。ただ、出力の価値を考えれば十分元は取れます。
- 修正のしやすさは少し落ちる：HTMLの中身を自分で編集するのは難しいので、修正もClaudeに頼むのが基本です。
- 機密情報を含むファイルはネットに上げない：HTMLファイルを共有するときは、内容を確認してから。クライアント情報は特に注意してください。
今日できること（ひとつだけ）
最後に、今日試してほしいことを1つだけ。
Claude Codeに今やっている作業の「次の納品物」をHTMLで作ってもらうこと。報告書でも提案書でも、構いません。
頼み方は、上の「魔法の頼み方の型」をそのままコピーしてください。返ってきたHTMLをブラウザで開いた瞬間、「あ、これは違う」と感じるはずです。
