ClaudeでHP作り、プレビュー見ながらサクサク！

0.Artifactsとは？

Anthropic社の生成AI『Claude』には、「Artifacts（アーティファクツ）」という強力な機能が搭載されています。これは、生成したコードをその場でプレビュー表示しながらリアルタイムで編集できる機能です。

HP制作において、このArtifacts機能は非常に便利です。通常の生成AIでは、コードを生成してからローカルにファイルを保存し、ブラウザで確認する手順が必要ですが、ClaudeのArtifactsなら会話しながらその場で完成イメージを確認できます。

Artifactsの主な特徴：

・HTML/CSS/JavaScriptをリアルタイムでプレビュー
・画面を見ながら修正指示が可能
・コードを直接編集できるエディタ機能
・ワンクリックでコードをダウンロード

画面を見ながら修正できるのは便利だな

そうですね。「もう少し余白を増やして」「色をもっと落ち着いた感じに」といった指示を、実際の画面を見ながら出せるのがメリットです。

1.Claudeにアクセスしてプロンプトを入力

まずはClaudeにアクセスして、HP作成のプロンプトを入力していきます。

今回入力したプロンプトは下記になります。

結果、次のようになります。

プロンプトを入力すると、Claudeがコードを生成し、右側のプレビューエリアにこの完成イメージが表示されます。

すぐにプレビューが見れるのか！

はい。生成されると同時にプレビューが表示されるので、イメージと違う場合はすぐに修正指示を出せます。

2.リアルタイムプレビューで確認しながら調整

Artifactsのプレビューを見ながら、必要に応じて調整していきます。

デザインを調整

プレビューを見て「ここを変えたい」と思った部分を具体的に伝えます。

入力したプロンプトは下記になります。

結果、次のようにコードが修正されました。

見ながら修正できるから、イメージが伝わりやすいな

その通りです。「この部分」と画面を指しながら説明するような感覚で修正依頼ができます。

3.Artifacts内で直接編集

Artifactsには、コードを直接編集できるエディタ機能もあります。

直接編集でできること：

・テキストの修正（会社名や連絡先など）
・色コードの微調整
・余白やサイズの調整
・簡単なスタイル変更

ちょっとした修正なら自分でできるってことか

そうですね。例えば電話番号を変えたい、ボタンの色を少しだけ変えたいといった場合は、直接編集した方が早い場合もあります。

4.完成したコードをダウンロード

満足のいくデザインが完成したら、コードをダウンロードして使用します。

ダウンロード手順：

1. Artifactsプレビューの右上にある「コードをコピー」ボタンをクリック
2. テキストエディタに貼り付けて「index.html」として保存
3. ブラウザで開いて動作確認

Artifactsで確認済みのコードなので、ローカルでも同じように表示されるはずです。もし問題があれば、再度Claudeに聞くことで解決できます。

5.自社向けにカスタマイズするコツ

自社用のページを作るときはどうすればいい？

最初のプロンプトで具体的な情報を伝えておくと、カスタマイズの手間が省けます。

自社向けプロンプト例：

以下の情報で会社紹介ページを作成してください。

・会社名：○○株式会社
・キャッチコピー：「テクノロジーで未来を創る」
・事業内容：Webシステム開発、ITコンサルティング、AI導入支援
・メインカラー：#2563EB（青）、アクセントカラー：#10B981（緑）
・電話番号：052-XXX-XXXX
・所在地：愛知県名古屋市○○区...
・デザインの方向性：シンプルでモダン、信頼感のあるデザイン

ClaudeとGeminiの使い分け

HP制作においては、ClaudeとGeminiそれぞれに特徴があります。

Claudeの強み：

・Artifactsによるリアルタイムプレビュー
・コードの直接編集が可能
・長いコンテキストの維持が得意

Geminiの強み：

・画像生成機能との連携
・Google系サービスとの統合
・日本語での自然な会話

それぞれ得意なところが違うんだな

そうです。プレビューしながら対話的に作りたいならClaude、画像も含めて一気に作りたいならGeminiという使い分けがおすすめです。

Artifacts活用のメリットと注意点

Artifactsってかなり便利そうだな

便利ですが、いくつか注意点もあります。

メリット：

・すぐに結果が見えるので修正が楽
・試行錯誤がしやすい
・コードの知識がなくてもデザイン確認できる

注意点：

・外部ファイル（画像など）は読み込めない
・複雑なJavaScriptは動作しない場合がある
・実際のサーバー環境とは異なる場合がある

じゃあ、画像を使いたいときはどうすればいいの？

Artifacts内ではプレースホルダー（仮の画像）で確認し、ダウンロード後に実際の画像パスに置き換えます。または、Base64エンコードで画像を埋め込む方法もありますが、ファイルサイズが大きくなるので注意が必要です。

なるほど、用途に合わせて使い分けるってことだな

その通りです。生成AIはあくまでツールなので、基本的なHTMLやCSSの知識を持っておくと、より効果的に活用できます。生成されたコードを理解し、必要に応じて修正できるスキルがあると、生成AIの真価を発揮できます。

ClaudeでHP作り、 プレビュー見ながら サクサク！