Claude Artifactsを活用した自作ミニアプリ作成｜プロンプト1つで動くシミュレータや電卓を画面上で動かす方法

結論：対話の中で自作の計算ツール、料金シミュレータ、インタラクティブな図表を一瞬で動かし、その場で動作確認をするなら、AnthropicのClaude Artifacts機能が最適です。コードを書く知識がなくても、対話ベースで画面パーツを追加したり機能を拡張したりすることが可能です。

「ChatGPTなどに便利な計算ツールのコードを書いてもらったが、自分のパソコン上で実行する手段が分からない」「プレゼンやブログに使えるインタラクティブなチャートをその場でテストして動かしたい」と感じたことはありませんか。

これまでは、AIが作成したHTMLやJavaScriptコードをローカルファイルに保存してブラウザで開く必要がありました。しかし、Claude 3.5 Sonnetに搭載された「Artifacts（アーティファクト）」機能により、チャット画面の右側に『実際に機能する独立したプレビューウィンドウ』が立ち上がり、プロンプトを投げるだけでアプリがその場で動作するようになりました。

この記事では、画面上でミニアプリやデザインを即時シミュレーションできる代表的なAIプレイグラウンドツール5選を比較し、ClaudeのArtifactsを使って自分だけの便利ツールを開発する具体的な手順を解説します。

プレビュー機能付きAI開発プレイグラウンド5選 比較表

1. Claude (Artifacts) —— チャットとプレビューの高度な同期

Artifactsは、Claudeのチャットスペースを「会話」と「アウトプット表示」の2つにスプリット（分割）する仕組みです。AIが作成したコード、ベクター画像（SVG）、ドキュメントが個別タブとして右側に自動で表示されます。

ノンプログラマーにとってのメリット

• その場ですぐ動く：ReactコードやHTML/JSが含まれる場合、右側の「Preview」タブを押すだけで、ボタン入力やスライダー操作ができるアプリとして動作します。
• ワンクリックコード取得：画面右下からコードを1クリックでコピー、あるいはファイルとして直接ダウンロードが可能です。
• 対話による機能追加：「この計算機に履歴保存機能を追加して」と指示するだけで、右側のアプリ画面が動的にアップデートされます。

2. v0 by Vercel —— 洗練されたWeb UIコンポーネントの作成

v0は、Vercelが提供するUIデザインに特化したAIシステムです。

ClaudeのArtifactsが「多様なミニアプリやドキュメント」を扱うのに対し、v0は「実用的なWebサイトのフロントエンド画面」の生成に完全に特化しています。非常に美しいモダンなデザインを一瞬でプレビュー・構築したい場合に利用します。

3. Codepen —— フロントエンドプレイグラウンドの老舗

Codepenは、HTML/CSS/JavaScriptを書いてその場でプレビューできる有名なWebエディタです。

近年はAIによるコード編集アシスト機能が追加されており、記述中のコードに対して「このレイアウトをレスポンシブ（スマホ対応）にして」などの指示を出し、リアルタイムに変化を確認できます。

4. StackBlitz —— ブラウザで動く完全なローカル風環境

StackBlitzは、自身のパソコンにNode.jsやエディタをインストールすることなく、ブラウザ内でローカル環境と同等の開発ができるクラウドサービスです。

AIを用いてNext.jsやReactの本格的なパッケージを立ち上げ、プレビューウィンドウを見ながらコードの書き換えが行えます。本格的なWebエンジニアリングを学習したい初心者に最適です。

5. Replit —— サーバーサイドも含めたアプリホスティング

Replitは、Pythonやデータベースを組み合わせたバックエンドアプリケーションをブラウザだけで動作させられるプラットフォームです。

AIアシスタントに仕様を告げるだけで、サーバーの起動からデータの永続化、公開URLの発行までをシームレスに行えます。簡易的なWebツールを実稼働させてユーザーに提供したい場合に強い実力を誇ります。

Claude Artifactsで「副業案件用シミュレータ」を作る3ステップ

実際にClaudeを起動し、クライアント提案や自身のWebサイトに埋め込める「金利・ローン計算ツール」を構築する流れは以下の通りです。

1. 初期プロンプトの入力：Claudeに「借入金額、金利、返済年数を入力すると、毎月の返済額と総返済額をシミュレーションしてグラフ表示するReactコンポーネント（Shadcn UI使用）を作成して」と指示します。
2. Previewタブでの動作検証：右側に表示されたシミュレータを実際に操作し、入力値を変えて計算が正しく実行されるか確認します。
3. 調整と埋め込みコードの抽出：「デザインをダークテーマにして」「毎月の返済額の内訳を円グラフで表示して」といった追加指示を重ねて仕上げ、コードをコピーしてWordPressのカスタムHTMLブロック等に貼り付けます。

以下の要件を満たすReactコンポーネントを作成してください。
作成されたコードはArtifactsとしてプレビュー可能な形式で出力してください。

■ アプリ機能: [フリーランス向け源泉徴収・手取り計算ツール]
  - 総支給額（売上）を入力するフィールド
  - 源泉徴収税（10.21%）、住民税想定（10%）、個人事業税を自動計算
  - 計算された「手取り額」を中央に大きく表示
  - 各税金の内訳を可視化するシンプルな棒グラフ（RechartsまたはSVGベース）

■ デザイン: Tailwind CSSを使用し、十分な余白とクリーンな角丸ボックスを用いて、洗練されたモダンなデザインに仕上げてください。

AIとの対話を通じて、プログラムの学習コストをゼロにし、実際に稼働するインタラクティブなモックアップや実用ツールをスピーディに量産しましょう。