MENU

ClaudeのArtifactsで図解・ミニアプリを作る方法|プログラミング知識ゼロでOK

最終更新:2026年7月11日

この記事でできるようになること:会話するだけで、図解・スライド・動くミニアプリをClaudeに作らせる 無料でOK 所要:15分/シナリオ12(全体地図に戻る)※Claude最大の見せ場です

ここまでのシナリオは「文章」の話でした。最終回は毛色が違います。ClaudeのArtifacts(アーティファクト)機能を使うと、会話するだけで図解・スライド・そして実際に動くWebアプリが画面の横に生成されます。プログラミング知識はゼロでOK。

目次

Artifactsとは:チャットの横に「作品」が出る

図やアプリを作る頼みごとをすると、チャット画面の横に専用ウィンドウが開き、成果物が表示されます。会話を続けながら、その場で修正させられるのが特徴。「ボタンをもっと大きく」「色を変えて」が全部通じます。

レベル1:図解を作らせる

「稟議が通るまでの流れ」を新入社員向けに図解してください。 登場ステップ:起案→課長承認→部長承認→経理チェック→決裁。 差し戻しがあり得る箇所も矢印で示して。シンプルで見やすく。
▶ 結果イメージ
フローチャートの図がArtifactsに生成されます。「差し戻しの矢印を赤に」「横向きのレイアウトに」と対話で調整でき、完成したら画像やファイルとして保存して資料に貼れます。

レベル2:動くミニアプリを作らせる

OK「何に使うか」と「欲しい機能」を箇条書きで
家族4人(夫婦+子ども2人)の家事分担がうまく回っていません。家事分担を管理できる簡単なWebアプリをArtifactsで作ってください。機能:①家事タスクの一覧と担当者 ②完了チェック ③人ごとの今週の達成率がグラフで見える。スマホでも見やすく、操作は子どもでもわかるくらい簡単に。
▶ 結果イメージ
数十秒後、実際にタップして動くアプリが横に現れます。チェックを入れると達成率グラフが動く。「タスクを追加できるようにして」「達成率が80%超えたらお祝いの表示を」——追加注文も会話でOK。初めて見ると、ちょっと感動します。
やりたいこと+機能を箇条書き Artifactsに動くアプリが出現 会話で改良「ここをこうして」 保存・共有

アイデア集:こんなものが作れます

単位変換ツール、割り勘計算機、子どもの学習クイズ、プレゼン用のスライド、イベントのカウントダウン、簡単な診断チャート、部活のスコアボード——「あったら便利だけど、探すほどでもない」道具を自作できるのがArtifactsの真価です。

ワンポイント:欲張ると失敗します 最初から10機能を頼むと崩れがち。まず3機能で作らせて、動いたら1つずつ追加——このリズムが成功パターンです。凝ったものを作ると無料プランでは利用上限に当たりやすいので、ハマったらProを検討するタイミングかもしれません(プラン比較)。

※本記事は個人の利用体験に基づく解説です。機能・プランは執筆時点の情報です。最新情報は Anthropic公式ヘルプ をご確認ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次