Artifacts を使用して、コードを一切記述することなく、AI アプリを可視化し作成する

Artifacts は、Claude で構築できるミニアプリのようなものです。これを用いてアイデアを視覚化して説明する方法を学びます。次にカスタマイズし、Claude アプリから直接共有します。
  • カテゴリ
    プロフェッショナル
  • 製品
    Claude.ai
  • 読書時間
    Watch time
    5
  • 共有
    リンクをコピー
    https://claude.com/resources/tutorials/use-artifacts-to-visualize-and-create-ai-apps-without-ever-writing-a-line-of-code

創造的なアイデアが湧き上がっている時、一番避けたいことは自身の創造的なビジョンを実現するための技術的な詳細に悩まされ、作業の流れを中断することです。Artifacts を活用すれば、創造的なひらめきが訪れた際、流れを止める必要も、技術チームのサポートを待つ必要もありません。Claude に実現したいことを伝えるだけで、目の前で形になる様子をご覧になれます。Artifacts は、ユーザーの集中状態を維持したまま、機能するアプリのプロトタイプを数分で完成させるお手伝いをします。

このガイドをお読みいただければ、アイデアを視覚化して説明するために Artifacts 使用するタイミング、Claude アプリから直接 Artifacts を作成、カスタマイズ、共有する方法を理解できます。

Artifacts とは?また、どのような場面で使用するのか?

Artifacts とは、Claude との会話から生まれるインタラクティブなアプリです。Claude アプリのチャットからコード、文書、アプリなどの素材を生成できます。

本格的なビジネスツールから子供向けの楽しいゲームまで、あらゆるデジタル製品を素早く立ち上げる際に非常に便利です。次の例をご参照ください。

  • 製品プロトタイプ —デザイナーやエンジニアでなくても、新しいランディングページやアプリのモックアップを作成することが可能です。必要なものを Claude に尋ねるだけです。このムードキャンバスのように、ユーザー入力に基づいてカラフルな可視化を作成します。
  • カスタマイズ可能な AI アシスタント — 同じ質問に繰り返し回答することに飽き飽きていませんか?Claude はよくある質問に対応できるコンテキストを理解するチャットボットを構築できます。これによりユーザーのは他の作業に集中できます。具体例としてすべての業者情報を把握する結婚式のプランナーボットや、子供が喜んで食べる料理だけを提案するレシピアシスタント、あるいはメール作成アシスタントのように、素の考えを洗練された文章へと変えるものなどが挙げられます。
  • 学習ゲーム — 子供が掛け算の九九を習得するのを手伝いたいと考える親は、子供が算数の問題を解くことでモンスターと戦うインタラクティブなゲームを説明できます。数ターン後には、実用的なプロトタイプが完成します。あるいはご自身で学ぶために、お好みの言語で会話しながら学べるこの言語チューターをお試しください。
  • 中小企業向けソリューション — 在庫管理が必要な中小企業経営者は、Claude にワークフローを説明し、ニーズに完全に適合するカスタムツールを作成できます。例えば、このプロジェクトダッシュボード生成ツールは、ユーザー入力を受け取り、ガントチャート、進捗バー、マイルストーン管理を提供します。

選択肢は実に無限です。さらなるインスピレーションを得るには、Claude アプリの「Artifacts」タブにアクセスするか、Claude に「何を構築すべきか」を尋ねてみてください。(注:Artifacts タブは無料、Pro および Max plan でのみご利用いただけます。現在、モバイル版ではご利用いただけません。)

最初の Artifacts 作成

Artifacts を作成する最良の方法は、解決したい問題を説明し、その後、Claude に改善の支援を依頼することです。以下に手順を説明します:

  1. サイドバー内の「Artifacts」に移動:どのチャットからでも Artifacts を作成できますが、ここから始めることで、Claude にその意図が伝わり、最適なアプリバージョンを構築を支援できます。
  2. まずは問題点の探求から開始:自身のアイデア(および問題点)を Claude と共有します。例えば「クラスで、水循環をもっと効果的に教えたいのですが、生徒たちが退屈しているようです」などです。
  3. Claude がインタビューを実施:Claude は、依頼者のビジョンを明確化するためにフォローアップ質問をします。例えば、「どの年齢層の生徒にを教えようとしていますか?」といった内容です。
  4. Claude に構築を指示する:議論を通じてアイデアを明確化したら、「これを作成してもらえますか?」または「今すぐこれを構築しましょう」などのフレーズで直接 Artifacts の生成を指示します。次に、Claude は会話に基づいて Artifacts を生成します。

以上です!わずか数回のターンで、自身のニーズに合わせてさらにカスタマイズ可能な機能的なアプリが完成します。

Artifacts を改善するためのヒント

最初の成果物は出発点に過ぎません。ここから、変更やフィードバックなどをリクエストして、Artifacts を共有可能な状態に仕上げていきます。以下は、Artifacts を最大限に活用するための 3 つのヒントです。

  • フォローアッププロンプトを用いた反復作業:単に、Claude に Artifacts を修正するよう依頼します(「ボタンを大きくしてください」、「タイマーを追加してください」、「配色を変更してください」など)。各リクエストは以前のバージョンを基に構築されますが、Claude は構築した成果物とその構築理由に関するコンテキストを保持します。
  • 会話を通じたデバッグ:不具合が発生した際は、「Claude で修正」をクリックするか、平易な言葉で問題点を説明します(「電卓が小数点数を動作しません」、「ゲームがレベル 3 でクラッシュします」など)。技術的なエラーメッセージを理解する必要はありません。より深い理解を求める場合は、拡張思考機能を有効にするか、より高度なモデルをご利用ください。
  • 分岐機能の試行:過去のメッセージに戻り、「編集」をクリックして新しい会話の分岐を作成し、様々なアプローチを試します。いつでも元のバージョンに戻ることができるため、スタイルや機能、あるいはまったく異なる方向性など、大胆な試行を奨励します。

成果物の共有

Artifacts が期待通りに動作したら、数回クリックするだけで友人や共同作業者と共有できます。

公開ボタンをクリックしてリンクを生成することで、完成した Artifacts を他のユーザーと共有できます。リンクを持っている方なら誰でも、公開を解除するまで自身が作成した Artifacts にアクセスできます。

閲覧者は Artifacts を操作する際に以下の 2 つのオプションから選択できます:

  • 閲覧のみ:ログアウトしたユーザーはサインインせずに Artifacts を使用および対話できます(AI を活用した Artifacts は除く。サインインが必要)が、変更を加えることはできません。
  • リミックスとカスタマイズ — Claude ユーザーは、自身のコピーを作成し、Artifacts を修正および反復改善できます。ご安心ください! オリジナルコピーは変更されません。
__wf_reserved_inherit

開始するための追加リソース

  • すべての Artifacts を閲覧し、より多くのインスピレーションを得ます。プロのヒント:「カスタマイズ」をクリックすると、Artifacts をコピーし、自分用に変更を加えることができます。