Claudeでアプリ開発！アーティファクトとClaude Codeの使い方を解説

Claudeでアプリを作れると聞いたものの、何から始めればよいのか分からない方も多いのではないでしょうか。アーティファクトとClaude Codeの違いが分からず、どちらを使えばよいのかで迷う場面もあるはずです。

この記事では、Claudeでアプリを開発する2つの方法・アーティファクトでの作り方・Claude Codeでの作り方・手順・注意点を、Anthropicの公式情報に沿って解説します(2026年10月4日時点)。

記事を読めば、作りたいアプリに合う方法を選び、最初の試作まで進められる状態です。結論は、小さなアプリはアーティファクトで足り、本格的なアプリはClaude Codeで作ります。まずはアーティファクトで試作してみましょう。

Claudeでアプリ開発する方法は2つ

Claudeでアプリを開発する方法は、以下の表の2つです。

方法ごとの特徴は、以下の3つです。

• アーティファクトは会話の横で動く小さなアプリを作る
• Claude Codeは自分のPCで本格的なアプリを作る
• 作りたいものの大きさで方法を選ぶ

アーティファクトは会話の横で動く小さなアプリを作る

アーティファクトは、Claudeが作ったものを会話の横に開く機能です。文書や資料のほか、ダッシュボードや小さな対話型の道具も作れます。

ソフトのインストールが要らず、作ったものをすぐに動かして確かめられます。無料のプランを含む、すべてのプランで使える機能です。

Claude Codeは自分のPCで本格的なアプリを作る

Claude Codeは、PCのフォルダの中のファイルを編集し、コマンドを実行するコーディングの道具です。複数のファイルで構成されるアプリを、手元のPCで作れます。

既存のシステムとつなぐアプリや、多くの画面を持つアプリに向いています。

Claude Codeとは？AIが開発作業を代行する仕組みと料金を解説！

作りたいものの大きさで方法を選ぶ

計算の道具やクイズなど、1つの画面で完結するものは、アーティファクトで足ります。会員の登録や決済など、複数の機能を組み合わせるものは、Claude Codeが向いています。

迷う場合は、アーティファクトで試作し、足りなくなったらClaude Codeに移る進め方が確実です。

アーティファクトでアプリを作る方法

アーティファクトでの作り方は、以下の4つで押さえます。

• 作りたいものを伝えると会話の横にアプリが開く
• Claudeを組み込んだアプリを作れる
• データを保存するアプリを作れる
• 作ったアプリをほかの人と共有できる

作りたいものを伝えると会話の横にアプリが開く

チャットで作りたいものを伝えると、Claudeがコードを書き、会話の横にアプリが開きます。直してほしい点を伝えると、アプリが書き換えられる流れです。

エラーが出た場合は、エラーの近くに表示されるボタンから、Claudeに修正を頼めます。ただし、公式のヘルプは必ず直るとは限らないと注意しており、過信は禁物です。

Claudeを組み込んだアプリを作れる

アーティファクトの中からClaudeを呼び出す、小さなAIのアプリも作れます。使う人の入力に合わせて、質問に答えたり文章を作ったりするアプリです。

APIの鍵は必要なく、作った人に費用はかかりません。使った分は、アプリを使う人のプランの利用の上限から引かれる仕組みです。

データを保存するアプリを作れる

アーティファクトには、データを保存する機能もあります。日記や記録の道具など、次に開いたときに前の内容が残っているアプリが例です。

データの保存を使えるのは、Proプラン以上です。保存できる量は1つのアーティファクトにつき20MBまでで、文字のデータに限られます。

作ったアプリをほかの人と共有できる

アーティファクトは、最初は自分だけが見られる状態です。共有の操作をすると、ほかの人に使ってもらえます。

共有できる範囲は、プランによって違う点に注意してください。TeamプランとEnterpriseプランでは、初期の設定で組織の中だけに共有されます。

Claude Codeでアプリを作る方法

Claude Codeでの作り方は、以下の4つで押さえます。

• 作りたいアプリを言葉で伝えて作らせる
• Webアプリは動かして確かめながら作る
• iPhoneのアプリはXcodeと組み合わせる
• 公開するには別の準備が必要になる

作りたいアプリを言葉で伝えて作らせる

Claude Codeに、作りたいアプリの内容を伝えます。必要なファイルの作成からコードの記述・コマンドの実行までを、Claude Codeが進める仕組みです。

デスクトップアプリのCodeタブを使うと、ターミナルを使わずに始められます。

Claude Codeは非エンジニアでも使える？初心者の始め方と活用例も紹介

Webアプリは動かして確かめながら作る

ブラウザで動くWebアプリは、最初の題材に向いた種類です。作ったアプリを手元のPCで動かし、画面を見ながら直す指示を重ねます。

Claude Codeの公式ドキュメントは、テストやスクリーンショットなど、Claudeが実行できる確かめ方を渡すことをすすめています。

iPhoneのアプリはXcodeと組み合わせる

iPhone向けのアプリの開発に使うのは、Appleの開発の道具のXcodeです。Xcodeの中でClaudeを使う機能も、公式のヘルプで案内されています。

対象は、ProプランとMaxプランなどです。コードについての質問・説明・画面の中での書き換えができます。

公開するには別の準備が必要になる

Claude Codeで作ったアプリは、手元のPCの中で動きます。ほかの人に使ってもらうには、インターネット上のサーバーに置く作業が必要です。

スマートフォンのアプリは、アプリのストアの審査も通す必要があります。公開の手順は、Claude Codeに聞きながら進められます。

Claudeでアプリを作る手順

アプリを作る手順は、以下の5つです。

• 作るアプリと使う人を決める
• アーティファクトで試作する
• 動かして直す指示を重ねる
• 足りなくなったらClaude Codeに移る
• 公開の前に安全を確かめる

作るアプリと使う人を決める

最初に、誰が何のために使うアプリなのかを決めます。自分だけが使う道具から始めると、失敗しても困りません。

アーティファクトで試作する

チャットで、作りたいアプリを具体的に伝えます。入力する項目・表示したい結果・画面の雰囲気を書くと、意図に近いものができます。

動かして直す指示を重ねる

できあがったアプリを動かし、直してほしい点を伝えます。1回で完成を目指さず、確かめては直す流れを繰り返してください。

バイブコーディングの始め方！ツールの選び方と最初の手順・コツを解説

足りなくなったらClaude Codeに移る

機能が増えて1つの画面に収まらなくなったら、Claude Codeに移ります。アーティファクトで固めた内容を伝えると、Claude Codeで作り直す作業が速く進みます。

Claudeでコーディングする方法！3つの使い方とモデルの選び方を解説

公開の前に安全を確かめる

ほかの人が使うアプリは、公開の前に安全を確かめます。個人の情報やお金を扱うアプリは、エンジニアに確かめてもらってください。

バイブコーディングのセキュリティを徹底解説！事故例と安全に使う条件も紹介

Claudeでアプリを作るときの注意点

注意点は、以下の4つです。

• 共有のデータに機密の情報を入れない
• 他人が作ったアーティファクトは信頼できる人のものだけ使う
• アーティファクトで保存できるデータには上限がある
• 動いていても安全とは限らない

共有のデータに機密の情報を入れない

データを保存するアーティファクトには、自分だけが見られる保存と、使う人全員が見られる保存の2つがあります。どちらを使うかを決めるのは、アーティファクトを作った人です。

公式のヘルプは、機密の情報を入力する前に、共有の保存を使っているかを確かめるよう注意しています。

他人が作ったアーティファクトは信頼できる人のものだけ使う

公開されているアーティファクトをもとに、自分用のアプリを作る方法もあります。他人のコードと内容を、自分の会話に取り込む形です。

公式のヘルプは、信頼できる人のアーティファクトに限って行うよう求めています。

アーティファクトで保存できるデータには上限がある

保存できるデータは、1つのアーティファクトにつき20MBまでです。画像やファイルは保存できません。

多くのデータを扱うアプリは、Claude Codeで作る方法を選んでください。

動いていても安全とは限らない

Claudeが作ったアプリにも、誤りや安全上の問題が含まれる場合があります。動いていることと、安全であることは別です。

社外に公開するアプリは、内容を判断できる人の確認を受けてから公開しましょう。

Claudeのアプリ開発のよくある質問

よく出る疑問は、以下の4つです。

• 無料でアプリを作れますか？
• プログラミングの知識がなくても作れますか？
• スマートフォンのアプリは作れますか？
• 作ったアプリは公開できますか？

無料でアプリを作れますか？

アーティファクトは、無料のプランで作れます。データの保存など一部の機能と、Claude Codeの利用には、Proプラン以上が必要です。

プログラミングの知識がなくても作れますか？

小さなアプリなら、作れます。作りたいものを言葉で伝え、動かして確かめる作業が中心です。

公開するアプリや、業務で使うアプリは、詳しい人の確認が必要になります。

スマートフォンのアプリは作れますか？

Claude Codeで作れます。iPhone向けのアプリの開発には、Xcodeが必要です。

ブラウザで動くWebアプリなら、スマートフォンからも使えるため、最初の題材に向いています。

作ったアプリは公開できますか？

アーティファクトは、共有の操作でほかの人に使ってもらえます。Claude Codeで作ったアプリは、サーバーに置くなどの準備をすると公開できます。

Claudeのアプリ開発はアーティファクトの試作から始めましょう

Claudeでアプリを開発する方法は、アーティファクトとClaude Codeの2つです。小さなアプリはアーティファクトで足り、本格的なアプリはClaude Codeで作ります。

まずは、自分だけが使う小さな道具を、アーティファクトで作ってみましょう。機能が足りなくなったらClaude Codeに移り、公開の前には安全を確かめてください。