Claudeで「アーティファクト」を作る
「Claudeで何かしらのアプリを作る方法」を考える時、恐らく多くの方はClaude Codeを思い浮かべるのではないでしょうか。
最近はClaudeアプリからもClaude Codeを使えるようになり、使い始めるまでのハードルが下がったことも相まって、非常に多くの方が利用されているような気がします（個人の感想です）。
ただ、外部連携などを必要としないシンプルな機能のアプリであれば、Claudeの「アーティファクト」でも対応できることがあります。
アーティファクトとは
Claudeにおけるアーティファクトとは、Claudeとのチャットの中で作成したコンテンツを、その場でプレビューしながら確認できる機能です。
たとえば「用量変換用の計算ツールを作ってください」とお願いすると、コードと一緒に実際に動かせるアプリが画面の右側に表示されます。追加で「もう少しボタンを大きくしてください」などと指示をすれば、リアルタイムで修正してくれますし、修正結果もその場で確認できるため、バイブコーディングの入口として非常に有用なツールです。
また、実用的なアプリに限らず、文書、Webページ、グラフ、ゲームなど、さまざまなものを作成できます。
さっそく使ってみましょう
Claudeの画面左側のメニューから「アーティファクト」を選択した後、画面右上の「新規アーティファクト」をクリックしましょう。
試しになにか作ってもらいましょう。
今回は「生産性向上ツール」を選択して、簡単なタスク管理アプリを生成してもらいます。
選択後はClaudeから色々と質問されるので、該当する項目を選択していきましょう（もちろん自由に指示することも可能です）。
そして、なんやかんやで完成したアプリがこちらです。
機能は必要最小限ですが、このような形でアプリが完成しました。
完成した後は、画面右上の「コピー」をクリックすることで、コード部分をコピーすることが可能です。
Claude Codeの「前段階」としても活用できる
先程はアーティファクト機能で簡単なアプリを生成してもらいましたが、それだけでなく、Claude Codeで本格的にアプリを開発するにあたっての「前段階」として活用することも可能です。
具体的には、アイデアを考えた後にアーティファクト機能でアプリの完成イメージを作り、そのコードの内容をもとにClaude Codeでアプリ全体の微調整、複数のファイルや画面の結合、デバッグ、テストをするという流れです。
建築で例えると、アーティファクトで模型や設計図を作り、Claude Codeで実際に建築するようなイメージが近いと思います。
なので、「本格的な開発とまではいかなくても、とりあえずアイデアを形にしたい」という場合は、いきなりClaude Codeに依頼するのではなく、アーティファクト機能で試してみると良いかもしれません。
どのようなツールを使う場合でも、重要なのは
以前「バイブコーディングの成果物の質を上げるために必要なのは…」という記事を投稿しましたが、その中でこのようなことを主張しました。
今回の研究では、バイブコーディングにおいて文章力とCS達成度の両方が成績と関連し、とくにCS達成度のほうがより強い予測因子だったと報告されています。
つまり、AIにそれらしく伝える能力だけでなく、条件分岐や状態の管理、例外処理のような構造を考える基礎力も重要であることが示唆されています。
よって、調剤薬局でバイブコーディングを活用するなら、具体的に何を解決したいのか、そのためにはどのような条件・機能が必要なのかを整理することが大切です。
記事「バイブコーディングの成果物の質を上げるために必要なのは…」より一部引用、改変
要するに、まずは現場の課題が何なのかを特定し、それを解決するために必要な機能が何なのかを言語化することが重要です。
この工程にしっかり時間を割いて、AIに対して具体的かつ明確な指示をすることができれば、より効率よくアプリ開発を進めることができるでしょう。
以下の記事には、さらに具体的な内容を掲載しています。
研究結果自体も面白いので、ぜひご一読いただけますと幸いです。
＜関連記事＞
参考資料
[1] Anthropic. Claude Code Docs「Claude Code overview」
https://code.claude.com/docs/en/overview
[2] Anthropic. Claude Help Center「What are artifacts and how do I use them?」
https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
