【初心者でも簡単】Claude「Artifacts」機能の使い方をやさしく解説

Claude（クロード）には、視覚的なコンテンツを生成できるArtifacts（アーティファクト）という機能が搭載されています。

しかし、「便利そうだけど、どう使えばいいのかわからない」と悩む方も多いのではないでしょうか。

とくに新しい機能が登場すると、試してみたい気持ちはあるものの、専門的な説明に戸惑い、そのまま利用を諦めてしまうケースも見受けられます。

本記事では、Artifacts機能の概要や使い方、具体的な活用例までやさしく解説していきます。

この記事を読むことで、Artifacts機能を日常生活や仕事で活用できるようになり、生産性を大幅に向上させることができます。ぜひ、内容を参考にしてみてください。

Artifactsは、Claudeが文章の返事ではなく「動く成果物」を作って渡してくれる機能です。使い方を覚えると、AIとの付き合い方が「聞く相手」から「作ってもらう相手」に変わります。

この「作ってもらう」感覚を仕事全体に広げたのが、いま注目されているAIエージェントの働き方です。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。読むだけでは、明日も同じやり方に戻ります。

参加者自身がその場でPCを操作し、動いたところまで確かめて帰れます。直近は9月16日（水）のCodex回です。予約はLINEから。

ClaudeのArtifacts機能とは？

Artifacts（アーティファクト）は、Claudeに搭載されている、リアルタイムで視覚的なコンテンツを生成できる機能です。

ウェブサイトのプロトタイプ作成、プログラミングコードの生成、マインドマップなどを作成することができ、アイデアの視覚的共有やプロトタイプ開発の迅速化、複雑な情報の理解促進にも貢献します。

作成したコンテンツは、必要に応じて編集や保存も可能です。

Artifacts機能を活用することで、プログラマーやデータアナリストなど専門家だけでなく、一般のユーザーも複雑な情報の分析やコンテンツ制作が簡単に行えるようになります。

また、2026年7月24日にはClaudeの最新モデル「Claude Opus 5」が発表されました。複雑なエージェント型コーディングや長時間の自律タスクに強く、Claude Maxのデフォルトモデルに設定されています。

Claude Opus 5についての詳細は以下の記事でご覧いただけます。

調べて理解する段階と、実際に手を離せる段階のあいだには、まだ一段あります。

それを埋めるのが、目的だけ伝えれば最後まで進めてくれるAIエージェントです。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。読むだけでは、明日も同じやり方に戻ります。

参加者自身がその場でPCを操作し、動いたところまで確かめて帰れます。直近は9月16日（水）のCodex回です。予約はLINEから。

Artifacts機能は無料で使える

ClaudeのArtifacts機能は、すべてのユーザーが無料で利用できます。

無料プランでは、Claude Sonnet 5の利用は回数制限※があります。これに伴い、Artifacts機能も回数制限はあるものの無料で利用可能です。
※具体的な数値は非公開

有料のProプランやTeamプランでは利用回数の上限が増えるため、自身のニーズに応じて最適なプランを選択しつつ、Artifacts機能を柔軟に活用しましょう。

Claudeの料金について詳細を確認したい方は以下の記事を参照してください。

【スクショ付き】Artifactsの使い方をやさしく解説

本章では、Artifacts機能の使い方をやさしく解説していきます。

1. Claudeを開き、利用するモデルを選択する
2. プロンプト入力欄に、テキストを入力する
3. 必要に応じて追加の指示を出し、修正を行う
4. コンテンツのコードやファイルをダウンロードする

スクショ付きでステップごとに説明していくので、実際に手を動かしながら記事を読み進めてみてください。

Claudeを開き、利用するモデルを選択する

まずはブラウザでClaudeを開きます。

プロンプト入力欄の右下を押し、利用するモデルを選択します。

無料プランの場合は、Claude Sonnet 5がデフォルトで選択されているためそのままでも利用できます。

モデルの選択が完了すれば、Artifacts機能は自動で使用できるようになります。

プロンプト入力欄に、テキストを入力する

通常のClaudeの使い方と同じく、プロンプト入力欄にテキストを入力しましょう。

この際、コンテンツ作成や数値分析等を依頼することで、自動でArtifacts機能を用いて生成を行ってくれます。

今回は、以下のプロンプトを使用しました。

シンプルなTodoリストアプリをReactで作成してください。タスクの追加、完了、削除ができる基本的な機能を実装してください。

Artifacts機能を用いて生成された、Todoリストアプリがこちらです。

生成されたコードやドキュメントは、動画内の画面右側にあるArtifacts専用ウィンドウに表示されます。

Previewボタンでプレビューを表示でき、Codeボタンを押すことでコードを確認することもできます。

必要に応じて追加の指示を出し、修正を行う

必要に応じて、プロンプト入力欄に追加の指示を入力し、修正を行います。

今回は、追加で「色を付けて、デザインを改善して」と修正の指示を出しました。

再生成されたTodoリストアプリがこちらです。

Artifacts専用ウィンドウの上部にあるV2ボタンを選択すると、修正前のコンテンツを確認することもできます。

これにより、試行錯誤しながら最適なコンテンツを生成することが可能です。

生成されたコンテンツのコードやファイルをダウンロードする

Artifacts専用ウィンドウの右上にある「コピー」を押すと、生成されたコンテンツのコードをコピーできます。

また、コピーマークの横のダウンロードボタンを押すことで、ファイルをダウンロードすることが可能です。

保存できたらファイルを開き直し、表示と必要な操作を確かめます。保存できたことと、用途に合う完成品になったことは別です。

手順どおりに動かすとき、操作しているのは結局いつも自分です。

一方で、やってほしいことを一度伝えるだけで、手順の組み立てから実行までをAIに任せる進め方も出てきています。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。読むだけでは、明日も同じやり方に戻ります。

参加者自身がその場でPCを操作し、動いたところまで確かめて帰れます。直近は9月16日（水）のCodex回です。予約はLINEから。

【プロンプト付き】Artifactsの活用例3選を紹介

本章では、ClaudeArtifacts機能の活用例3選を紹介していきます。

• シンプルな天気アプリを作成
• 企業のランディングページを作成
• リッチなプレゼン用スライドを作成

以下は記事制作時の生成例です。画面の作成と実用時の動作は分けて確認しましょう。

シンプルな天気アプリを作成

Artifacts機能は、都市名や天気情報を表示する画面の試作に活用できます。

使用したプロンプトは以下です。

シンプルな天気アプリを作成してください。ユーザーが都市名を入力すると、その都市の現在の気温、天気状態（晴れ、雨など）、湿度を表示するようにしてください。

生成された天気アプリの画面例です。現在の天気を正しく取得できているかは、表示だけでは判断できません。

実際の天気アプリとして使う前に、情報の取得元と更新時刻を確認します。次の点を確かめてください。

• 表示が架空の値か、外部の天気情報を取得しているか
• 都市名を変えたとき、取得元の天気と表示内容が一致するか
• 取得できないときに、古い値や架空の値を現在の情報として表示していないか

取得元や値の正しさを確認できるまでは、天気表示の試作品として扱います。画面の動作と、外部情報との連携の両方を確認してから利用しましょう。

企業のランディングページを作成

Artifacts機能は、企業のランディングページの見た目と操作画面の試作にも使えます。

使用したプロンプトは以下です。

企業のランディングページを作成してください。ヘッダー、メインコンテンツ、お問い合わせフォーム、フッターを含め、モバイルとデスクトップの両方に対応したレスポンシブデザインにしてください。

生成されたランディングページの画面例です。フォームが表示されても、問い合わせが届く仕組みまで完成したとは限りません。

公開前に、テスト用の内容を送信し、想定した受信先に届くかを確かめます。送信完了の画面だけで判断しないでください。

未入力や入力間違いがある場合の表示も確かめます。送信先との連携が未設定なら、入力欄のある試作品として扱い、動作を整えてから公開しましょう。

リッチなプレゼン用スライドを作成

Artifacts機能は、スライドの構成や見た目の試作にも使えます。以下は記事制作時に使用したプロンプトです。

AI開発会社に関する、5枚のリッチなプレゼンテーションスライドを作成してください。各スライドにはタイトル、箇条書きの要点、関連する簡単な図を含めてください。

生成されたスライドの画面例です。見た目だけでなく、内容と数字の確認が必要です。

掲載したプロンプトには、会社情報や売上データの根拠が含まれていません。生成された数値を実績として使わず、次の点を確認して資料を整えます。

• 会社名・製品名・実績が、渡した資料に基づいているか
• 売上や割合が、元データの数値・単位・合計と一致するか
• 保存したファイルを開き直し、使いたい画面で文字や図を読めるか

根拠を確認できない数字は削除するか、実データに差し替えます。表示の確認に加え、共有先で開ける形に整えてから説明資料として利用しましょう。

Claudeの他のモデルの特徴や、料金プランについてより詳しく知りたい方は、以下の記事もご覧ください。

ClaudeのArtifacts機能を活用し、生産性を向上しよう！

Artifactsは、画面や資料を試作し、見ながら修正できる機能です。見た目・数値・実際の動作を確かめるところまで進めると、仕事に使えるか判断できます。

まずは小さな試作品を作り、分からない点を一つずつ確認しましょう。保存や共有まで試すと、次に学ぶべき操作や知識も見えてきます。

Artifacts機能でアイデアを形にする力がついたら、次に問われるのはそこから先の話です。ほかの作業もどこまでAIに任せられるかという、運用の広がりを考える番です。

AIの使いどころが見えても、工程を前に進めるのは自分という点は変わりません。

変わるのは、工程ごと引き渡してしまったときです。目的を一度伝えれば、あとは確認だけが自分の役目になります。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。読むだけでは、明日も同じやり方に戻ります。

参加者自身がその場でPCを操作し、動いたところまで確かめて帰れます。直近は9月16日（水）のCodex回です。予約はLINEから。