AIに丸投げでWebサイトを作ってみた｜言語化が出来る＝プログラミングが出来るという時代に

「AIでWebサイトが作れるらしい」

最近そんな話をよく耳にします。でも、本当にプログラミングの知識がなくても作れるんでしょうか？

「なんとなくそれっぽいものはできるけど、実用レベルには程遠いんでしょ？」——そう思っている方も多いはずです。

今回は、それを実際に検証してみます。使うのはClaude Code。やることはシンプルで、架空のカフェ「欅珈琲」のWebサイトを、プロンプト（AIへの指示）の出し方を変えて3パターン作ってみます。

検証：3つのプロンプトで試してみた

パターン1：雑に投げてみる

まずは何も考えず、こう伝えてみました。

カフェのホームページを作って

以上。本当にこれだけです。

……まあ、できてはいます。メニュー、営業時間、アクセス。最低限の情報は揃っている。ただ、正直なところ「どこかで見たことのある、テンプレ感のあるページ」という印象です。店名すら「CAFE」になっています。伝えていないので当然ですが。

パターン2：具体的な情報を渡す

次はちゃんとカフェの情報を伝えてみました。

「欅珈琲」というカフェのホームページを作って。大通り沿いの広々した店舗で、静かな雰囲気の珈琲店。ランチもやっている。メニューは欅ブレンド520円、カフェラテ580円、水出し珈琲600円など。ランチは欅カレー1,100円、ナポリタン1,000円、BLTサンド950円。営業時間は平日8:00-20:00、土日祝9:00-19:00、火曜定休。

一気にそれっぽくなりました。「欅珈琲」の名前が入り、メニューも営業時間も正確。ナビゲーション付きで、セクションごとに整理されたページが出てきます。パターン1との差は歴然です。

パターン3：世界観まで伝える

最後に、デザインの雰囲気や空気感まで言葉にしてみました。

「欅珈琲」のWebサイトを作って。大通りの欅並木沿いにある、広くて静かな珈琲店。「むさしの森珈琲」「高倉町珈琲」のような上質で落ち着いた雰囲気。色はエスプレッソブラウンとクリームを基調に、ゴールドをアクセントで。フォントは明朝体でクラシックに。店主のこだわりや珈琲への想いが伝わるような、余白を活かした上品なデザインにして。

正直、驚きました。フルスクリーンのヒーロー画面、明朝体の上品なタイポグラフィ、ゴールドのアクセント。店主の言葉を引用したコンセプトセクションまで自動生成されています。「架空のカフェのサイト」としては、十分すぎる完成度です。

さらにその先へ——AIは組み合わせて使う

ここまでの検証で、「プロンプト次第でかなりのクオリティのものが作れる」ということがわかりました。

でも、実際に私がWebサイトを作るときは、ここで終わりにしません。

私の場合、Claude Codeで叩きを作ったあと、Antigravityという別のAIツールに渡してデザインをさらにブラッシュアップしています。Antigravityの裏側ではGeminiが動いているのですが、デザイン面ではこちらの方が好みの仕上がりになることが多いんです。

つまり、「一つのAIで完結させる」よりも「得意なAIを使い分ける」方がうまくいく。

Claude Codeはコードを書くのが得意。Geminiはビジュアルの仕上げが得意。それぞれの強みを活かして組み合わせると、自分一人では到底作れなかったものが出来上がります。

これはWebサイトに限った話ではありません。文章の下書きをChatGPTで作ってClaudeで推敲する、データの整理をGeminiでやってClaude Codeで実装する——そんな使い方もできるわけです。

まとめ：「AIの限界」を考えるのをやめた

今回の検証を通して、改めて感じたことがあります。

「AIには限界がある」。これは事実です。完璧なものが一発で出てくるわけではないし、細かいこだわりまで汲み取ってくれるとは限りません。

でも、その「限界」にフォーカスしていると、何も始まりません。

大事なのは、「AIにできないこと」を探すことではなく、「AIをどう使いこなすか」を考えること。今回の検証でも、プロンプトをちょっと工夫するだけで結果がまるで変わりました。さらにツールを組み合わせれば、もっと先に行ける。

プログラミングの知識がなくても、Webサイトは作れる。重要なのはコードを書く力ではなく、「自分が何を作りたいのか」を言葉にする力です。

AIの進化を待つ必要はありません。今あるツールだけで、すでに十分すぎるほどのことができます。まずは「作って」と言ってみるところから始めてみませんか？