Claudeに「Webページ作って」と頼んでみよう

チャットでWebページが作れる？

前回の記事では、Claudeとの会話のコツをつかみました。聞き方を変えるだけで答えがガラッと変わりましたね？

今回は、その会話の力でもっとすごいことをやります。Claudeに「Webページ作って」とお願いするだけで、Webページが作成できます！

「え、プログラミングの知識いるんじゃないの？」と思いますよね。いりません。普通に話しかけるだけです。前回の記事で晩ごはんのメニューを聞いたのと同じノリで大丈夫です。

これを可能にしてるのがArtifacts(アーティファクツ)というClaudeの機能です。

Artifactsってなに？

Artifactsは、Claudeが作ったものをチャットの横にプレビューとして表示してくれる機能です。

普通にClaudeとチャットすると、返答はテキストで返ってくるのですが、Artifactsが使えると、HTMLやコードをClaudeが書いて、その結果をWebページとしてその場で見られるようになります。

つまり、こういう流れです。

1. あなたが「こんなページ作って」とお願いする
2. Claudeがコードを書く
3. そのコードの結果がプレビューとして横に表示される
4. 気に入らなければ「ここを変えて」と追加でお願いする

特別な設定は何もいりません。 Claudeのアカウントがあればすぐに使えます。

自己紹介ページを作ってみよう

では実際にやってみましょう。今回作るのは自己紹介ページです。自分のことを紹介するシンプルなWebページを、Claudeに作ってもらいます。

Claudeを開いて、新しいチャットを始めてください。そして、こんなふうにお願いしてみましょう。

中身は自由に変えてOKです。自分の情報を入れてみてください。

送信すると、Claudeがコードを書いて、チャットの右側にWebページが表示されるはずです。

自分の名前が載ったWebページが目の前に現れる。コードは一行も書いてないのに。ちょっと感動しませんか？

もっとかっこよくしよう

最初に出てきたページ、悪くないけど「もうちょっとこうしたい」って思うところがあるはずです。そしたら、そのままClaudeに言えばいいんです。

たとえばこんな感じで。

すると、プレビューが更新されて雰囲気がガラッと変わります。

もっと具体的に指示してみましょう。

こんなふうに、「もうちょっとこうして」を繰り返すだけで、どんどん理想に近づいていくんです。

前回の記事で「条件を付けると答えが変わる」「役割を指定すると深い答えが返ってくる」という話をしましたよね。あのテクニックがここでも活きてきます。

こんなこともお願いできる

自己紹介ページのベースができたら、いろいろ追加してみましょう。全部チャットで頼むだけです。

アニメーションを付ける

SNSリンクを追加する

スマホ対応にする

どうですか？ プログラミングの知識がゼロでも、お願いの仕方次第でどこまでもカスタマイズできる。 これがAIと一緒にものを作るということです。

作ったものを保存しよう

すると、ブラウザの新しいタブで自分が作ったページが表示されます。Claudeの中だけじゃなく、ブラウザでちゃんと動いているWebページです。

まとめ

今回やったことをおさらいします。

• Artifactsは、Claudeが作ったものをその場でプレビューできる機能
• 話しかけるだけで、Webページが作れる
• 「もうちょっとこうして」を繰り返すだけで、どんどん良くなる
• コードの知識はゼロでOK

ここまでで、AIとの会話だけで、自分だけのWebページを手に入れました。 でもこのページは、今のままだとあなたのパソコンの中にしかありません。

次の記事では、このページをインターネットに公開して、URLを友達に送れる状態にします。「自分が作ったサイトがあるよ」って言えるようになる回です。