Claude Artifactsの使い方：画面で動くアプリを3分で作る手順

「ClaudeってChatGPTと何が違うの？」と思いながら使っている人、いませんか。チャットで質問するだけなら同じに見えるのに、なぜかエンジニアやフリーランスがやたらとClaudeを推してくる。その理由が、Claude Artifacts（アーティファクト）という機能にあります。

Artifactsは、AIが作ったコードやHTMLをそのまま画面上で動かして確認できる機能です。「コードを貼り付けてブラウザで開く」という手間がなくなり、会話しながらリアルタイムでアプリが完成していく感覚を体験できます。

この記事を読めば、Artifactsの有効化手順・ミニアプリを3分で作るプロンプト・失敗しやすいポイントまで一通りわかります。結論から言うと、Artifactsはコードが書けなくても使えます。日本語でやりたいことを伝えるだけで、画面で動くアプリが3分で完成します。

Claude Artifactsとは何か：ChatGPTと決定的に違うポイント

Artifactsは「動く成果物」を右側に表示する機能

通常のAIチャットは、返ってくるのがテキストだけです。コードを生成してもらっても、それが正しく動くかどうかは自分でコピーして確認しなければなりません。

Claude Artifactsはその工程をなくします。Claudeがコード・HTML・SVG・Markdownなどを生成すると、チャット画面の右側に専用ウィンドウが自動で開き、その場でプレビューが確認できます。「プレビュー」ボタンを押せば、実際にクリックできるボタンやアニメーションが動く状態で確認できます。

これはChatGPTの標準機能にはない体験です。ChatGPTでコードを出力してもらう場合、通常はコピーしてVS CodeやCodePenに貼り付けて確認するという手順が必要です。Artifactsはその「コードを貼り付けてブラウザで確認」という2ステップをゼロにします。

Artifactsで作れるものの種類

Artifactsで生成・プレビューできるコンテンツは大きく5種類あります。

• インタラクティブアプリ（HTMLとJavaScript）：計算機、クイズ、タイマーなど
• コード（Python、JavaScriptなど）：スクリプトやアルゴリズム
• ドキュメント（Markdown）：企画書・議事録・テンプレート
• 図解・チャート（SVG・Mermaid）：フローチャート・組織図
• Webページ（HTML/CSS）：ランディングページのプロトタイプ

副業やフリーランスの文脈でとくに使えるのはインタラクティブアプリとWebページのプロトタイプです。クライアントへの提案時に「こんなイメージです」と実際に動くものをその場で見せられます。

ChatGPTとの使い分けの基準

結論から言うと、「動くものを作りたいときはClaude、会話やアイデア出しはどちらでも」という基準が使いやすいです。

• HTMLやJavaScriptで動くミニアプリを作りたい → Claude Artifacts一択
• コードをリアルタイムでプレビューしながら修正したい → Claude Artifacts一択
• 画像を生成したい → ChatGPT（DALL-E 3搭載）
• 長文のドキュメント・企画書・論理的な文章を作りたい → Claudeが強い
• 日常的な質問・簡単な要約 → どちらでも差はほぼない

Claude Artifactsの有効化：30秒でONにする手順

無料プランでも使える？料金条件を確認

まず気になる料金の話です。Artifactsは無料プランでも使えます。2024年以降、Claude Sonnet（現在はClaude Sonnet 4.5）がベースモデルとして無料枠で利用可能になり、Artifacts機能もそのまま使えます。ただし無料プランは1日あたりの利用回数に上限があります。

本格的に使うならProプラン（月額約20ドル）がおすすめですが、まず無料で試してみて感覚をつかむのが正解です。

Artifactsを有効にする手順（設定画面の場所）

注意：2024年後半以降のアップデートで、Artifactsがデフォルトで有効になっているアカウントも増えています。設定を開いてすでにONになっていれば、そのまま使えます。

3分でミニアプリを作る：実際のプロンプトと手順

最初に試すべき「計算機アプリ」の作り方

Artifactsを有効にしたら、まず計算機を作ってみてください。コード不要で、日本語で指示するだけで画面で動く計算機が完成します。以下のプロンプトをそのままコピーして試してください。

プロンプト例：

「シンプルな電卓アプリをHTML/JavaScriptで作ってください。四則演算ができて、デザインはミニマルでモダンにしてください。Artifactsでプレビューできるようにしてください。」

送信後、数秒でチャット右側にプレビューウィンドウが開き、実際に動く計算機が表示されます。ボタンをクリックすると数字が入力でき、計算が実行できます。

「もっとこうして」と追加指示して仕上げる方法

最初の出力が気に入らなくてもOKです。Artifactsの真価は対話しながらリアルタイムで修正できることにあります。以下のような追加指示を日本語で入れるだけで、Claudeが自動でコードを書き直してArtifactsを更新してくれます。

• 「ボタンの色をネイビーに変えて」
• 「フォントをもう少し大きくして」
• 「%（パーセント）の計算機能も追加して」
• 「スマートフォンで見ても崩れないようにして」

修正のたびにArtifactsが更新され、バージョン管理も自動で行われます。右側ウィンドウの矢印ボタンで過去のバージョンに戻せるので、「やっぱり前のデザインの方が良かった」というときも安心です。

副業・仕事で使えるArtifactsのプロンプト例3選

計算機以外にも、副業や仕事の現場で使えるアプリを3分で作れます。以下のプロンプトをそのままコピーして試してみてください。

①副業の見積もり計算ツール

「フリーランスの案件見積もりシミュレーターをHTML/JavaScriptで作ってください。工数（時間）と時給を入力すると合計金額と消費税込みの金額が自動計算されるシンプルなツールです。」

②ポモドーロタイマー（集中作業用）

「25分集中・5分休憩のポモドーロタイマーをHTML/JavaScriptで作ってください。スタート・ストップ・リセットボタンがあり、残り時間をカウントダウン表示してください。シンプルなデザインにしてください。」

③自己紹介ページのプロトタイプ

「フリーランスのポートフォリオページのHTMLプロトタイプを作ってください。名前・スキル・実績・連絡先セクションがあり、モダンでシンプルなデザインにしてください。Artifactsでプレビューできる形にしてください。」

Artifactsで失敗しないための注意点

「Artifactsが表示されない」ときの3つの原因

有効化したはずなのにArtifactsが表示されない、という声をよく見かけます。原因はほぼ3パターンです。

• 原因①：設定がOFFのまま
  → 設定 → Feature Preview → Artifactsのトグルを確認してください。
• 原因②：生成したコンテンツがArtifactsの条件を満たしていない
  → 短いコードや単純なテキストはArtifactsではなくチャット内に表示されます。「HTMLで作って」「Artifactsでプレビューできる形で」と明示するとほぼ確実に表示されます。
• 原因③：モバイルブラウザを使っている
  → ArtifactsのプレビューはPC・タブレットのブラウザ向けです。スマートフォンでは右側ウィンドウが表示されない場合があります。PC環境を使ってください。

初心者が陥りがちな「ゼロから全部作らせる」の失敗

Artifactsを使い始めて最初に失敗しやすいのが、「ゼロから全部完成させて」という指示の出し方です。たとえば「ECサイトを全部作って」という指示はClaudeには重すぎます。出力が中途半端になったり、エラーが出たりします。

コツは「小さく始めて、追加指示で育てる」です。

1. まず骨格だけ作ってもらう（「ヘッダーと商品カードのHTMLを作って」）
2. プレビューで確認する
3. 「商品カードにホバーエフェクトを追加して」と1つずつ追加する

この順番で進めると、完成度が上がりやすく、途中でエラーになっても原因を特定しやすいです。

作ったアプリをダウンロード・公開する方法

Artifactsで作ったアプリはそのままダウンロードして使えます。右側ウィンドウの右上にあるダウンロードアイコンをクリックすると、HTMLファイルとしてPCに保存できます。

保存したHTMLファイルはブラウザでそのまま開けます。Webサーバーがなくてもローカルで使えるので、自分専用のツールとして日常業務に活用できます。

ただし、外部公開（インターネット上で誰かに使ってもらう）するにはWebホスティングサービスが別途必要です。GitHubPagesやNetlifyの無料プランで手軽に公開できます。

この記事のまとめ

• Claude ArtifactsはコードをリアルタイムでプレビューできるClaude独自の機能で、ChatGPTにはない体験ができる
• 有効化は設定 → Feature Preview → ArtifactsをONにするだけで30秒で完了、無料プランでも使える
• 「小さく作って追加指示で育てる」という使い方が失敗しにくく、3分でミニアプリが完成する

まず今日やること：claude.aiにログインしてArtifactsをONにして、「シンプルな電卓アプリをHTML/JavaScriptで作ってください。Artifactsでプレビューできる形にしてください。」というプロンプトを送ってみてください。本当に3分で動くものができます。

NEXT STEP使いこなせたら次は仕組みで稼ぐ →ズルく稼ぐへ

よくある質問

Q1：Claude Artifactsは無料プランでも使えますか？

A1：はい、無料プランでも使えます。ただし1日あたりの利用回数に上限があります。本格的に使うならProプランが快適です。

Q2：Artifactsで作ったアプリをスマートフォンで使えますか？

A2：ダウンロードしたHTMLファイルはスマートフォンのブラウザでも開けます。ただし作成・編集はPC環境が推奨です。

Q3：プログラミングの知識がなくてもArtifactsは使えますか？

A3：はい、完全に日本語の指示だけで使えます。「HTMLで」「JavaScriptで」という単語を指示に入れるとArtifactsが確実に起動します。

---

難しく考えなくて大丈夫です。
まず一歩踏み出せば、あとはAIが助けてくれます。
ズルいくらい、うまくいく。

---