【Claude Artifacts × WBS】AIでプロジェクト管理をやってみた！（テンプレ無料配布）

2026年5月、Anthropicのエンジニア・Thariq Shihipar氏が、

「HTML is the new Markdown」と宣言し、

AI界隈で大きな話題になりました。

要は、AIが返すテキストをMarkdownではなくHTMLにすることで、
人間が理解がしやすく、チームの生産性が上がったという話です。

そこで、今週のAIクリエイトは、HTMLにするとどう便利になるのか？

Claude Artifactsを活用し、
実際に僕がWBS（タスク管理ツール）を作ってみた話を紹介します。

こんなHTMLのテンプレを作ってみました！

・ダッシュボード
・タスクリスト
・ガントチャート
の３構成です。

それでは、みていきましょう！

1.Claude Artifacts とは？

Artifacts（アーティファクト） とは、Claude（Anthropicが開発するAI）のチャット画面の右側に、生成したコンテンツを独立して表示・プレビュー・編集できる専用スペースのことです。

普通のチャットだと、AIの回答はテキストとして左側に流れてくるだけ。

でもArtifactsは違います。
作ったものが右側に「動くアプリ」として即座に表示されるのです。

Claude デスクトップアプリで表示できるので便利ですよ。こんな感じ↓

なので、作業指示をしながら進捗も確認できます。

Artifacts で何ができる？

• Webアプリのプロトタイプ
  （React、HTML/JS）をリアルタイムプレビュー

• コードの実行・編集
  （HTML/CSS/JS、Pythonなど）

• 図表・ビジュアライズ
  （Mermaid、SVG、チャートなど）

• インタラクティブツール
  （TODOリスト、ダッシュボード、タスクボードなど）

• ドキュメント・資料の作成

作ったArtifactsは保存・共有・再利用が可能で、リンク一つで他の人に共有できます。Claudeアカウントがなくても閲覧できる場合もあるのが便利です。

使い方はシンプル。

Claudeで
「ReactでTODOアプリを作って」
「インタラクティブなプロジェクト管理表を作って」
と指示するだけ。

条件を満たすと自動で右側にArtifactsが表示されます。

2.なぜ今、HTMLなのか？

Thariq氏の主張の核心はこうです。

実際に同氏が公開した20個の実例（https://thariqs.github.io/html-effectiveness/）を見ると、その差は一目瞭然。

コードレビューが色分け注釈付きのdiffになり、設計比較が並べて触れるインタラクティブな表になっています。

MarkdownではなくHTMLにするだけで、AIとの協働の質が変わるのです。

確かに、非エンジニアの人は読む気がしないかもですね。

僕も、HTMLの方がパッと一瞬で全体感がわかるので好きです。

なんとなく、脳の負担が減る気がしますよね。

3.ChatGPTも似た機能ある？

あります。

ChatGPTのCanvas（キャンバス） です。

両者を比べると役割がはっきり違います。

1）Claude Artifacts

• 主な強み：「作って動かして見る」

• 向いている作業：Webアプリ・インタラクティブツール・図表

• プレビュー：◎ 実際に動くものが見られる

• 特長：リアルタイムプレビューが強力

2）ChatGPT Canvas

• 主な強み：「書いて編集する」

• 向いている作業：文章の推敲・コードの部分修正

• プレビュー：△ 編集が中心

• 特長：細かい編集・バージョン管理が便利

まとめると、
Artifactsは「作って動かして遊ぶ」
Canvasは「じっくり編集・修正する」 という棲み分けです。

ただ、Codexのデスクトップアプリでは、
HTMLをプレビューすることはできるので、ほぼ同じです！

4.Claude ArtifactsでWBS（タスク）管理をやってみた！

今回は、何かとあると便利なWBSを作ってみました！

汎用的に作ると、アプリ開発やSNS運用などプロジェクト単位でのタスク管理に良いので。

1） WBSとは？

そもそも、WBS（Work Breakdown Structure＝作業分解構造） とは、プロジェクトを細かいタスクに分解して管理する手法です。

大きな仕事を「誰が・何を・いつまでに」という単位に落とし込むことで、抜け漏れなく進捗を管理できます。

タスク管理みたいなものです。

2） 実際に作ったもの

今回作ったWBSはこんな感じのシンプルなものです。

あまり凝ったものだと成果にAIが反映できないのも嫌ですし、
チェックすべき情報が多いのも嫌なのでミニマムデザインです！

以下の3つの要素があるHTMLにしました。

• ダッシュボード

• タスクリスト

• ガントチャート

ブラウザで開けばすぐ使える、依存関係ゼロの完全独立ファイルです。

5.やってみて気づいたこと

人がやるべきこととAIがやるべきことが、
はっきりわかるようになる というのが最大の発見でした。

具体的には、こういう棲み分けになります。

1）AIが得意なこと

• 文章作成

• コーディング

• アイデアだし

など

まぁ、なんでもいけますよね。

2)人間がやるべきこと

• 個人情報や社外秘情報の入力（申請書類の記入など）

• できた成果物のチェックとフィードバック

• 最終的な判断・意思決定

ツールを実際に使うと、この境界線が自然と見えてきます。

こんな感じに↓

＜タスク一覧＞

働いたコストの比較。

ほぼ、作業はAIです。

ボトルネックは、完全に人です。
219Hも作業できる気がしません・・・

AIはあくまで「たたき台を作る係」で、
精度を高めるのは人間のチェックとフィードバックなのだと再確認しました。

6.こだわった点：「ソロプレイヤー前提」のシンプル設計

今回作ったWBSツールで一番こだわったのは、「AIたちと１人で進めることを前提にしたシンプルさ」 です。

プロジェクト管理ツール（Notionなど）は機能が多すぎて、
個人が使うには重い。

今回は「AIに次のアクションを聞きながら、一人でプロジェクトを回す」ことに特化して、余計な機能を削りました。

具体的な設計方針：

• 表示項目は最小限：
  タスク名・ステータス・期日・メモなどだけ

• 入力項目は不要：
  AIに指示して反映するため

• ファイル保存不要：
  ブラウザだけで完結。Codexなど別のAIアプリでも動くように。

• トークン量表示：
  どのタスクがどのくらいトークン量を消費するのか表示

1回の指示でここまで作れなかったので、地味にClaudeの作業量は5〜6時間はかけて作っています！

7.HTMLのWBSテンプレート（ダウンロード）

今回作ったHTMLテンプレートは、以下からダウンロードできます。