Claude Artifactsで個人サイトを作る方法 — 非エンジニアでも公開までできる
Claude Artifactsで個人サイトを作る手順を、有効化から公開・更新まで具体的に解説します。Publishと新しいShareの違いも扱います。
Claude Artifactsとは何か(個人サイト作りの前提)
Claude Artifactsは、Claudeとの会話で作った成果物をチャットの脇の専用ウィンドウに切り出し、編集・保存・共有できる機能です。目安はおおよそ15行を超える自己完結したコンテンツで、会話の外でも参照・再利用したくなるものが対象になります。代表的な成果物の一つに「1ページ完結のHTMLサイト」が明記されており、コードを書かずに簡単な個人サイトを作る用途にそのまま使えます。
Artifactsは無料プランを含むFree・Pro・Max・Team・Enterpriseの全プランで使え、Claude Codeでも対象プランなら利用できます。利用にあたっては、設定画面の「Settings > Capabilities」で「Code execution and file creation」を有効にしておく必要があります。ProjectsとArtifactsを組み合わせたもう一段進んだ使い方は、Claude Projects完全ガイドで扱っています。
ステップ1: Artifactsを有効にする
まだCode execution and file creationをオンにしていない場合は、次の手順で有効化します。個人サイトを作る前に一度だけ確認しておけば十分です。
- Claude.aiの画面左下にある自分の名前(またはイニシャル)をクリックする
- 「Settings」から「Capabilities」を開く
- 「Code execution and file creation」のトグルをオンにする
Team・Enterpriseプランで組織全体に有効化する場合は、Ownerが「Organization settings > Capabilities」から同じトグルを切り替えます。個人アカウント側の設定場所とは異なるので注意してください。
ステップ2: Claudeにサイトの内容を作ってもらう
有効化が済めば、あとは会話でサイトの内容を伝えるだけです。デザインやコードの知識は必要ありません。載せたい情報と雰囲気を具体的に伝えると、Claudeが1ページ構成のHTMLサイトをArtifactとして作成します。
自己紹介用の個人サイトを1ページのHTMLで作ってください。
- プロフィール、経歴、実績、連絡先の4セクション
- 落ち着いた配色で、スマートフォンでも見やすいレイアウト
- ナビゲーションはページ内スクロールのアンカーリンクで作成後の修正も会話で完結します。「配色をもう少し明るくして」のように話しかけて直せるほか、Markdownで書いた文章部分は該当箇所を選択して「Edit with Claude」から直接編集を頼むこともできます。編集を重ねるたびに版が積み重なり、バージョン選択で過去の状態に戻すことも可能です。表示が崩れたりエラーが出た場合は、エラーメッセージの近くに出る「Try fixing with Claude」ボタンを押すと、エラー内容が自動的にメッセージへコピーされ、そのまま修正を依頼できます。
作成したサイトは、自動的にサイドバーの専用「Artifacts」セクションに保存されます。会話をまたいで作った複数のサイト案も一覧から呼び出せるので、別の会話で作ったバナー画像やロゴ案と組み合わせたいときも探しやすくなります。同じ会話の中で複数のArtifactを開いている場合は、画面右上のアイコンから今どのArtifactをClaudeに参照させるかを切り替えられます。
ステップ3: 完成したサイトを公開する
サイトが仕上がったら、外部に公開して見てもらう段階です。ここで押さえておきたいのが、Claudeの画面が今どちらの体験になっているかという点です。メッセージ入力欄に「Chat」と「Cowork」の選択肢が表示されている場合は「以前の体験」で、チャット内で作ったArtifactは「Publish」機能から公開します。
Publish(以前の体験、Free・Pro・Max)の手順:
- 公開したいArtifactを開く
- 表示されているバージョンが公開したい内容と合っているか確認する
- 「Publish」ボタンをクリックする
- 生成された公開リンクをコピーして配布する
Publishで公開したサイトは、Claudeアカウントを持たない人でもそのまま閲覧できます。個人サイトを不特定多数に見てもらいたい場合、この「アカウント不要で閲覧できる」という点が重要です。
自分のドメインに埋め込みたい場合は、Publish後に表示される「Get embed code」から埋め込みコードを取得します。埋め込みには「Allowed domains」への登録が必須で、埋め込み先のドメインをカンマ区切りで指定しないと表示されません。この埋め込み機能とコードのコピーは、チャットで作ったArtifactにだけ用意されている機能です。
Claude経由で公開せず、自分で用意したホスティング先に置きたい場合は、Artifactウィンドウ右下の操作メニューからHTMLファイルをダウンロードする方法もあります。ダウンロードしたファイルはそのまま自分のホスティングサービスにアップロードして公開できるため、閲覧者にClaudeアカウントを求めたくない場合や、Publish・Shareの制約を避けたい場合の選択肢になります。独自ドメインでの本格的な静的サイト運用まで踏み込みたい場合はClaude CodeでHugoサイトを作るを参考にしてください。
公開方法の使い分け早見表
作ったサイトをどう公開するかは、使っている体験(以前のUIか新しいUIか)とプランで変わります。
| 公開方法 | 非エンジニア向け度 | 訪問者にClaudeアカウントが必要か | 独自ドメインへの埋め込み |
|---|---|---|---|
| Publish(以前の体験・チャット、Free/Pro/Max) | 非エンジニア向け度◎ | 訪問者にClaudeアカウントが必要か不要 | 独自ドメインへの埋め込み◎(埋め込みコード+Allowed domains) |
| Share(新しいClaude体験・Design/Slides/Docs/Code) | 非エンジニア向け度△ | 訪問者にClaudeアカウントが必要か必要 | 独自ドメインへの埋め込み不可 |
| Share & copy link(Team/Enterprise、組織内既定) | 非エンジニア向け度△(社内向け) | 訪問者にClaudeアカウントが必要か必要 | 独自ドメインへの埋め込み不可 |
| ダウンロードして自分のホスティングで公開 | 非エンジニア向け度△(ホスティングの用意が必要) | 訪問者にClaudeアカウントが必要か不要 | 独自ドメインへの埋め込み◎(制約なし) |
不特定多数に見せる個人サイトが目的なら、Publishが使える状態かどうかを最初に確認するのが近道です。
よくあるつまずき
- Unpublishすると同じサイトを二度と公開できない: 公開の取り下げ(Unpublish)は即時に反映されますが、同じArtifactを再度公開することはできません。作り直すと新しいArtifactになり、公開URLも変わります。URLを名刺やSNSに書いた後で取り下げる場合は、この不可逆性を先に理解しておく必要があります。
- 1ページ構成が前提なので、複数ページのつもりで作ると崩れやすい: 一次ソースが代表例として挙げているのは単一ページのHTMLサイトです。プロフィール・ブログ・お問い合わせを分けたい場合も、複数ページに分けるより、ページ内のタブや折りたたみで1ファイルに収める設計にするほうが扱いやすくなります。
- 埋め込みが表示されない: Allowed domainsに埋め込み先のドメインを登録していないケースがほとんどです。サブドメインや
wwwの有無まで正確に一致させて指定します。 - Code execution and file creationがオフのまま作業を始めている: この設定がオフだとArtifacts自体が使えません。会話の途中で気づいた場合は、Settings > Capabilitiesを確認してからやり直します。
サイトを更新・修正するときのポイント
公開後にサイトの内容を変えたい場合も、基本はステップ2と同じで会話でClaudeに修正を依頼します。新しい体験の「Share」では、リンク作成時に「最新バージョンを表示」を選んでおくと、その後の編集が自動的にリンク先へ反映されます。一方、以前の体験の「Publish」については、編集後の内容が公開リンクへ自動的に反映されるかどうかは公開手順の説明からは読み取れません。内容を更新したら、公開リンクを開いて表示が最新になっているかを都度確認するのが安全です。
サイトにAIの機能を組み込む(発展編)
静的な1ページサイトが完成した後、もう一歩進んだ機能を足すこともできます。ClaudeにはAIを組み込んだArtifactを作る仕組みがあり、テキストベースのやり取りで質問に答えたり、入力内容に応じて反応を変えたりする機能をコードを書かずに追加できます。個人サイトの用途では、簡単な自己紹介チャットや、来訪者からの質問に定型で答える窓口のような形で使えます。
ただしAI機能を使う来訪者には、自分のClaudeアカウントでのログインが求められます。基本的な閲覧はアカウント不要ですが、AI機能はアカウントを持つ人向けの上乗せ機能という位置付けです。課金の向きも押さえておく価値があります。ログインした来訪者がAI機能を使った場合、その利用は来訪者自身のClaude利用枠から消費され、サイトを作った側に追加コストは発生しません。何人に使われても作成者の負担が増えない仕組みなので、Team・Enterpriseプランで組織内に配布する場合も同様です。まずは静的な1ページサイトを完成させてから、AI機能を追加するかどうかを検討するのが無理のない順番です。
デザインを複数人で継続的に作り込みたい場合は、Claude Code Artifactsのデザインシステムと共同編集で扱う共同編集の仕組みも参考になります。
まとめ — 非エンジニアが最初に押さえること
Claude Artifactsを使えば、コードを書かずに会話だけで1ページの個人サイトを作り、リンク一つで公開できます。最初に確認するのは、Settings > Capabilitiesでの有効化と、自分がどちらのClaude体験を使っているかの2点です。以前のチャット画面で作ったサイトなら「Publish」でアカウント不要の公開ができ、新しい体験やClaude Design・Codeで作った場合は「Share」経由になり閲覧にもアカウントが必要になります。この違いを知っておけば、公開後に「思ったように見てもらえない」という戻り作業を避けられます。
マーケティング用のランディングページや資料作りにArtifactsを使いたい場合はClaudeマーケティング活用を、独自ドメインでの本格的な静的サイト運用まで踏み込みたい場合はClaude CodeでHugoサイトを作るを参考にしてください。