こんにちは、くまじろうです。
今日は「Artifacts(アーティファクト)」を紹介します。チャットの右側に別ウィンドウが開いて、文章やコード、HTMLなどをそこに書き出してくれる機能です。「コピーしてから別のメモ帳に貼る」という手間がなくなります。
目次
今日のゴール
Artifactsの仕組みを理解して、記事構成や報告書を右パネルで作成・ダウンロードできるようになります。
Artifactsとは?

Claudeは通常、チャット内に回答を書きます。でも「15行以上の自己完結したコンテンツ」を作るとき、自動的に右側の専用ウィンドウ(Artifacts)に出力します。
このウィンドウでは、
- 内容を直接コピー・ダウンロードできる
- 「もっと短くして」「見出しを追加して」などの修正を指示して更新できる
- 過去バージョンに戻せる(バージョン履歴あり)
Artifactsで作れるもの

| 種類 | 使い道の例 |
|---|---|
| Markdownドキュメント | 記事の構成案、報告書、マニュアル |
| コードスニペット | Python・JavaScriptなどのプログラム |
| HTMLウェブページ | 簡易フォームや自己紹介ページ |
| 図表・フローチャート | 業務フローの可視化 |
| SVG画像 | ロゴやアイコンのベクター作成 |
| Reactコンポーネント | インタラクティブなUI(上級者向け) |
使ってみる:記事構成を作る
「在宅ワークでAIを使って時短する方法」というテーマで
ブログ記事の構成を作ってください。
・見出しは3〜5つ
・各見出しの下に2〜3行の概要
・Markdown形式で
このプロンプトを入力すると、右側のArtifactsパネルにMarkdown形式の記事構成が表示されます。「もっと実践的な内容に」「結論を先に書いて」と追加指示すれば、その場で更新されます。
Artifactsの有効化確認
初めて使う場合、設定から確認しておきましょう。
- 画面左下の自分のイニシャル(名前)をクリック
- 「設定」→「機能」を開く
- 「Artifacts」がオンになっているか確認
つまずきポイント
- 「Artifactsが表示されない」:短い返答はチャット内に表示されます。ある程度まとまった量(目安15行以上)になると自動でArtifactsに切り替わります
- 「HTMLが表示されない」:設定の「機能」から「コード実行とファイル作成」もオンにする必要があります
- 「修正を頼んだら別のArtifactsが増えた」:「このArtifactsを修正して」と明示すると上書き更新されます
今日の練習
自分が書きたいブログ記事や報告書のテーマを1つ決めて、「〇〇というテーマで記事構成をMarkdownで作ってください」と試してみましょう。右側のパネルに表示されたら「ダウンロード」で手元に保存できます。
次回(第15回)はClaudeチャット機能の総まとめです。これまで学んだ内容を整理します。


コメント