Claude Artifactsとは？コードなしでHTMLページ・ツール・スライドを作る方法【初心者向け】
公開日: 2026年2月22日
「AIにHTMLページを作ってもらいたいけど、コードのことはまったくわからない」——そんな方に届けたい機能がClaude Artifacts（アーティファクツ）です。 AnthropicのAI「Claude」に搭載されたこの機能を使えば、プログラミングの知識ゼロでも、動く計算ツール・ゲーム・HTML名刺・スライドを 数分で作れてしまいます。しかも、生成したものがその場でプレビュー表示されるため、「何ができたか」を目で確認しながら調整できます。 この記事では、Artifactsの仕組みから実際に作れるもの・プロンプト例・コツまで、初心者の方でもすぐ使えるよう丁寧に解説します。
関連テーマを先に押さえるならChatGPT Canvas完全ガイド・プロンプトの書き方入門・AI全体マップ2026・ChatGPT上級活用テクニックもあわせてご覧ください。
要点まとめ（結論先出し）
- Claude ArtifactsはAnthropicのAI「Claude」が生成したコード・HTMLページ・ツールをその場でプレビュー表示できる機能。プログラミング知識なしで動くウェブページや計算ツールが作れる
- 作れるものは多岐にわたる：計算ツール、カウントダウンタイマー、ゲーム、HTML名刺、プレゼンスライドの骨格、Reactコンポーネントなど
- 無料プラン（Claude.ai無料版）でもArtifactsは利用可能。毎日の利用制限はあるが、まず試すには十分
- ChatGPT Canvasが「文書・コードを一緒に編集する」機能なのに対し、Artifactsは「生成結果をその場で動かして確認できる」プレビュー機能が最大の違い
- コツは「何を作りたいか」を具体的に伝えること。「計算ツールを作って」より「身長・体重を入力するとBMIが計算されて評価コメントも出るツールをHTMLで作って」のほうが精度が上がる
Claude Artifactsとは何か
Claude Artifactsは、Anthropicが提供するAI「Claude」（クロード）に搭載されたコンテンツプレビュー機能です。 Claudeがコード・HTMLページ・マークダウン文書などを生成したとき、チャット画面の横に独立したプレビューウィンドウが自動で開き、 生成物を「実際に動く状態」で確認できます。
たとえば「BMI計算ツールをHTMLで作って」と頼むと、チャット画面の右側にフォーム付きの計算ツールが表示され、 その場で実際に数値を入力して動作確認ができます。コードの中身を読む必要はありません。 気に入らなければ「ボタンの色をオレンジにして」「フォントを大きくして」と追加指示を出すと、プレビューがリアルタイムで更新されます。
Artifactsが対応しているコンテンツの種類は以下の通りです。
- HTML/CSS/JavaScript：動くウェブページ、計算ツール、ゲームなど
- React（JSX）：インタラクティブなUIコンポーネント
- SVG：ベクターグラフィック・アイコン
- Markdown：構造化されたドキュメント・メモ
- Mermaid：フローチャート・組織図・ガントチャート
Artifactsで実際に作れるもの6選
「プログラミングを一切知らない自分でも本当に作れるの？」——その答えはYESです。 実際にどんなものが作れるのか、6つのカテゴリで紹介します。
①計算ツール・シミュレーター
BMI計算機、ローン返済シミュレーター、カロリー計算ツール、年齢計算機、単位換算ツールなど、数値を入力して結果を計算するあらゆるツールをHTMLで作れます。「入力フォームに数値を入れると計算結果が出る」という仕組みは、Artifactsが最も得意とする分野です。完成したコードをファイルとして保存し、サーバーなしでローカル環境でも使えます。
作れる例
- BMI計算＋評価コメント付きツール
- 月々のローン返済額シミュレーター
- 目標達成日まで何日か計算するカウントダウンタイマー
②ミニゲーム・インタラクティブコンテンツ
テキスト系のクイズゲーム、数字当てゲーム、タイピングゲームの骨格、カードめくりゲームなど、シンプルなブラウザゲームを作れます。「JavaScriptを使ったゲームを作って」と頼むと、Artifacts内でそのままプレイできる状態で生成されます。子供向けの算数ドリルや、社内研修用のクイズアプリとしても活用できます。
作れる例
- 都道府県クイズゲーム
- 数字当てゲーム（1〜100で答えを探す）
- 英単語フラッシュカード
③HTML名刺・プロフィールページ
自分の名前・職業・SNSリンクを含むシンプルなHTMLページを作れます。「名前：田中太郎、職業：フリーランスデザイナー、Twitterリンク付きのHTML名刺を作って」と伝えると、そのままブラウザで開けるHTMLファイルが生成されます。印刷用名刺のデザインではなく、URLを送れるデジタル名刺として活用できます。
作れる例
- 名前・職業・連絡先入りのデジタル名刺
- ポートフォリオの一枚ページ
- イベント案内用のシンプルなランディングページ
④プレゼン・スライド骨格
HTML/CSS製のプレゼンテーションを作れます。PowerPointとは異なり、ブラウザで表示するReveal.js風のスライドや、各スライドのテキスト内容をまとめた構造化文書として出力することが得意です。「3分間のプレゼン用に5枚スライドをHTMLで作って。テーマは新入社員研修」と依頼すると、デザイン付きのスライドが生成されます。
作れる例
- 社内向けツール紹介スライド（5枚）
- 自己紹介プレゼンのHTML版
- 商品説明スライドの骨格
⑤データ可視化・チャート
棒グラフ、折れ線グラフ、円グラフなど、数値データをビジュアル化するHTMLを作れます。「以下の売上データを棒グラフで可視化するHTMLを作って」とデータを貼り付けると、Chart.js等を使ったインタラクティブなグラフが生成されます。Excelのグラフより見た目がきれいで、ウェブに埋め込みやすいという利点があります。
作れる例
- 月次売上推移の棒グラフ
- アンケート結果の円グラフ
- 複数商品の比較折れ線グラフ
⑥メモ・ToDoアプリのプロトタイプ
シンプルなToDoリスト、メモ帳アプリ、タスク管理ツールのプロトタイプを作れます。「チェックボックス付きのToDoリストをHTML/JavaScriptで作って。追加・削除・完了チェックができるもの」と依頼すると、実際に動くアプリが生成されます。アイデア段階のプロトタイプを即座に確認できるため、アプリ開発の初期検討に役立ちます。
作れる例
- チェックボックス付きToDoリスト
- タグ付き日記アプリのプロトタイプ
- 買い物リスト（カテゴリ分け付き）
無料プランでも使えるのか
「Artifactsって有料プランじゃないと使えないの？」——これはよく聞かれる質問です。 結論から言えば、無料プランでもArtifactsは使えます（2026年2月時点）。
ただし、無料プランにはいくつかの制限があります。
| 比較項目 | 無料プラン | 有料プラン（Pro） |
|---|---|---|
| Artifacts機能 | 利用可能 | 利用可能 |
| 1日の利用上限 | あり（上限に達するとリセットまで待機） | 無料より大幅に多い |
| 使えるモデル | Claude 3.5 Sonnet など（混雑時は制限あり） | 最新モデルを優先利用 |
| 長文・複雑なArtifacts | 短め・シンプルな内容なら問題なし | 複雑な処理も安定 |
無料プランで1日数回の試し作りをするなら十分です。本格的に毎日使い込むなら、 Claudeの有料プラン（Pro）への移行を検討してもよいでしょう。 まずは無料プランで「どんなものが作れるか」を体験してみてください。
まずはLINEで、AI活用の第一歩を相談してみませんか？
「自分にはどのツールが合う？」「補助金は使える？」といった疑問に、専門スタッフが個別にお答えします。匿名・無料で気軽にご相談いただけます。
＼ 1分で完了・匿名性も安心 ／
ChatGPT Canvasとの違い
「ClaudeのArtifactsとChatGPTのCanvasって何が違うの？」——どちらもAIが生成したコンテンツをプレビューできる機能ですが、 設計思想が少し異なります。
| 比較項目 | Claude Artifacts | ChatGPT Canvas |
|---|---|---|
| 主な強み | HTMLアプリ・ゲーム・ツールを生成して即プレビュー・即動作確認 | 文書・コードをインライン編集しながら作り込む共同編集 |
| 対象コンテンツ | HTML/JS/React/SVG/Mermaid/Markdown | 文書（テキスト）・コード |
| プレビュー機能 | あり（動くアプリとして確認できる） | テキスト・コードの表示。コードの実行プレビューは限定的 |
| 部分選択編集 | なし（チャットで修正指示を出す） | あり（テキストを選択して直接編集指示） |
| 向いている用途 | 「動くもの」を作る・プロトタイピング | 文書・レポートを繰り返し磨く |
| 無料プランでの利用 | 利用可能（回数制限あり） | Plus以上が必要（2026年2月時点） |
一言でまとめると、「動くHTMLツールやアプリを作ってすぐ確認したい」ならArtifacts、 「文書を何度も修正しながら完成させたい」ならCanvasが向いています。 両方のAIを目的に応じて使い分けると、作業効率が大きく上がります。
今すぐ試せるプロンプト例12選
以下のプロンプトをClaude.aiにそのままコピーして入力してみてください。 Artifacts機能が自動的に起動してプレビューが表示されます。
計算ツール系
プロンプト例 1
身長（cm）と体重（kg）を入力するとBMIを計算し、「低体重／普通体重／肥満（1度）」などの評価コメントも表示するHTMLツールを作ってください
プロンプト例 2
借入額・金利・返済期間を入力すると月々の返済額と総返済額が計算できる住宅ローンシミュレーターをHTMLで作ってください。デザインはシンプルに
プロンプト例 3
目標日（年月日）を入力すると今日から何日後かが表示されるカウントダウンタイマーHTMLを作ってください
ゲーム・クイズ系
プロンプト例 1
1から100の中からコンピューターが選んだ数字を当てるゲームをHTMLで作ってください。「大きい」「小さい」のヒントが出るもの
プロンプト例 2
日本の都道府県名を答える4択クイズゲームをHTMLで作ってください。10問出題して最後に点数が出るもの
プロンプト例 3
アルファベットA〜Zのタイピング練習ゲームをHTMLで作ってください。制限時間30秒で何文字打てるか測定できるもの
名刺・プロフィール系
プロンプト例 1
名前：山田花子、職業：フリーランスライター、メール：example@email.com、TwitterリンクをイメージしたシンプルなHTMLデジタル名刺を作ってください。白ベースのクリーンなデザインで
プロンプト例 2
私のポートフォリオ紹介ページをHTMLで作ってください。スキル：Webデザイン・Illustrator・写真撮影。最近の仕事：ECサイトのバナー制作、ブログデザイン。文字は読みやすいシンプルなデザイン
プレゼン・スライド系
プロンプト例 1
「AIを仕事で活用する3つのメリット」というテーマで、5枚のスライドをHTMLで作ってください。各スライドに見出しと箇条書き3点。濃紺×白のビジネス向けデザイン
プロンプト例 2
新入社員向けのビジネスメール作法研修スライドを6枚のHTMLで作ってください。件名の書き方・本文構成・締めの言葉を含む内容で
Artifactsを使いこなす5つのコツ
Artifactsを初めて使うとき、うまく動くものが作れずに諦めてしまう人が多いです。 以下のコツを押さえるだけで、成功率が大幅に上がります。
コツ1：「何のため」「誰が使うか」「どんな見た目か」を3点セットで伝える
「計算ツールを作って」だけでは曖昧です。「40代の一般ユーザーが使うBMI計算ツール。入力は身長・体重の2項目、結果には数値と評価コメントを表示。白ベースのシンプルデザイン」のように、目的・ユーザー・見た目の3点を伝えるとイメージ通りのものが生成されやすくなります。
コツ2：「HTMLで作って」と明示してArtifactsプレビューを引き出す
Claudeに「〇〇ツールを作って」と頼むだけではコードをテキストで返すこともあります。「HTMLとJavaScriptで作って。ブラウザで動くもの」と明示することで、Artifacts機能が発動してプレビューが表示される確率が上がります。「プレビューで確認できるようにして」と付け加えるのも有効です。
コツ3：「修正して」より「〇〇が〇〇なので、〇〇に変えて」と具体的に
生成されたものが気に入らない場合、「もっとよくして」という指示より「ボタンの色が背景と馴染みすぎているので、オレンジ色にして視認性を上げて」「フォントサイズが小さくて読みにくいので、本文を16pxに」のように、「問題点＋変更内容」を具体的に伝えると修正精度が上がります。
コツ4：完成品はHTMLファイルとして保存して再利用する
Artifactsで生成したコードは会話が終わると再アクセスしにくくなります。気に入ったツールができたら、コードをコピーして「index.html」という名前でPC上に保存しておきましょう。ブラウザでそのファイルを開けば、インターネット接続なしでいつでも使えます。よく使うツールはフォルダにまとめておくと便利です。
コツ5：「スタイルはTailwind CSS（または Bootstrap）で」と指定するときれいになりやすい
デフォルト状態では素朴なデザインになりがちです。「スタイルはTailwind CDNで整えて、モダンでクリーンなデザインに」「Bootstrap 5 CDNを使ってレスポンシブにして」と指定すると、見た目が格段によくなります。CDNは外部から読み込むだけなので、ファイルを追加する必要はありません。
よくある質問（FAQ）
まとめ：「作れない」の思い込みを捨てて、今日から作ってみよう
Claude Artifactsは、「プログラミングは自分には無理」と思っていた方の常識を覆す機能です。この記事のポイントを振り返りましょう。
- Artifactsは生成したHTMLやコードをその場でプレビュー・動作確認できる機能。コードの知識は不要
- 計算ツール・ゲーム・HTML名刺・スライド・データ可視化など幅広いものが作れる
- 無料プランでも利用可能（回数制限あり）。まず試すには十分
- ChatGPT Canvasとの違いは「動くものを即プレビュー」できる点。用途に応じて使い分けよう
- コツは「何のため・誰が使う・どんな見た目か」を3点セットで伝えること
まずは「BMI計算ツールをHTMLで作って」と一言打つところから始めてみてください。 数秒で動くツールが画面に現れるその瞬間に、AIの可能性を肌で感じることができます。
Claude・ChatGPT最新情報やプロンプトテクニックを毎週お届けしています。AIリブートのLINE公式アカウントをぜひ登録してください。
Claude・ChatGPT最新情報を毎週配信中
Artifacts・Canvas・最新AIツールの使い方を毎週お届けしています。AIリブートのLINE公式アカウントをぜひ登録してください。プログラミング知識なしで使えるAI活用術を無料でお届けします。
＼ 1分で完了・匿名性も安心 ／
次のステップ
Artifactsを使いこなしたら、プロンプトの書き方を学ぶとさらに精度が上がります。