MENU

第14回 Artifactsの使い方

こんにちは、くまじろうです。

今日は「Artifacts(アーティファクト)」を紹介します。チャットの右側に別ウィンドウが開いて、文章やコード、HTMLなどをそこに書き出してくれる機能です。「コピーしてから別のメモ帳に貼る」という手間がなくなります。

目次

今日のゴール

Artifactsの仕組みを理解して、記事構成や報告書を右パネルで作成・ダウンロードできるようになります。

Artifactsとは?

チャット左側の会話・右側にArtifactsパネルが開いた画面イメージ
Claudeがある程度まとまった内容を作ると、チャット右側に自動でArtifactsウィンドウが開きます

Claudeは通常、チャット内に回答を書きます。でも「15行以上の自己完結したコンテンツ」を作るとき、自動的に右側の専用ウィンドウ(Artifacts)に出力します。

このウィンドウでは、

  • 内容を直接コピー・ダウンロードできる
  • 「もっと短くして」「見出しを追加して」などの修正を指示して更新できる
  • 過去バージョンに戻せる(バージョン履歴あり)

Artifactsで作れるもの

Artifactsで作れる6種類のコンテンツ一覧
FreeプランからEnterpriseまで全プランで利用できます(公式確認済み)
種類使い道の例
Markdownドキュメント記事の構成案、報告書、マニュアル
コードスニペットPython・JavaScriptなどのプログラム
HTMLウェブページ簡易フォームや自己紹介ページ
図表・フローチャート業務フローの可視化
SVG画像ロゴやアイコンのベクター作成
ReactコンポーネントインタラクティブなUI(上級者向け)

使ってみる:記事構成を作る

「在宅ワークでAIを使って時短する方法」というテーマで
ブログ記事の構成を作ってください。

・見出しは3〜5つ
・各見出しの下に2〜3行の概要
・Markdown形式で

このプロンプトを入力すると、右側のArtifactsパネルにMarkdown形式の記事構成が表示されます。「もっと実践的な内容に」「結論を先に書いて」と追加指示すれば、その場で更新されます。

Artifactsの有効化確認

初めて使う場合、設定から確認しておきましょう。

  1. 画面左下の自分のイニシャル(名前)をクリック
  2. 「設定」→「機能」を開く
  3. 「Artifacts」がオンになっているか確認

つまずきポイント

  • 「Artifactsが表示されない」:短い返答はチャット内に表示されます。ある程度まとまった量(目安15行以上)になると自動でArtifactsに切り替わります
  • 「HTMLが表示されない」:設定の「機能」から「コード実行とファイル作成」もオンにする必要があります
  • 「修正を頼んだら別のArtifactsが増えた」:「このArtifactsを修正して」と明示すると上書き更新されます

今日の練習

自分が書きたいブログ記事や報告書のテーマを1つ決めて、「〇〇というテーマで記事構成をMarkdownで作ってください」と試してみましょう。右側のパネルに表示されたら「ダウンロード」で手元に保存できます。

次回(第15回)はClaudeチャット機能の総まとめです。これまで学んだ内容を整理します。

この記事を書いた人

・Claude・AIを使った在宅ワークの方法を発信中
・スキルゼロからの試行錯誤をそのまま共有しています
・YouTube・Substackでも発信中

詳しくは → プロフィールをチェック

コメント

コメントする

目次