Claude Codeでウェブサイトを作ってみた体験記 ― 自然言語だけでどこまでできるのか？
Claude Codeを使って自然言語だけでウェブサイトを作ってみた体験記。サイト構造の設計からデザイン、機能実装まで、AIコーディングツールの実力を率直にレポートします。
最近、AI技術の進化が本当に目覚ましいです。ChatGPTやGeminiなど、さまざまなAIツールが登場し、私たちの日常や仕事のやり方に大きな変化をもたらしています。そんな中、Anthropic社が提供する「Claude Code」というツールを使って、実際にウェブサイトを作ってみました。
結論から言うと、自然言語だけでウェブサイトの90%は作れる時代が、もう来ています。
今回は、その体験を通じて感じたことを率直にお伝えします。
Claude Codeとは？
Claude Codeは、Anthropic社が開発したAIコーディングツールです。ターミナル上で動作し、自然言語で指示を出すだけでコードを生成・編集・実行してくれます。一般的なチャット型AIとは異なり、実際のプロジェクトフォルダにアクセスして、ファイルの作成や修正をリアルタイムで行ってくれるのが特徴です。
簡単に言えば、「こんなウェブサイトを作りたい」と日本語で伝えるだけで、HTMLやCSS、JavaScriptはもちろん、ReactやNext.jsといったモダンなフレームワークを使ったサイトまで構築してくれます。
実際に作ってみました ― 自然言語だけでここまでできます
最初は半信半疑でした。本当に自然言語だけで、ちゃんとしたウェブサイトが作れるのだろうかという疑問がありました。
「トップページにはヒーローセクションを配置して、その下にカテゴリー別のカード型レイアウトを並べてほしい。全体的にモダンでクリーンな雰囲気にしてほしい。」
このように自然言語で伝えただけなのに、Claude Codeはサイト構造の提案から始めてくれました。ページ構成、ナビゲーションの設計、レスポンシブデザインの対応まで、まるで経験豊富なウェブデザイナーと打ち合わせをしているかのようでした。
サイト構造の提案が的確です
驚いたのは、サイト構造の提案力です。単に「作って」と言っただけなのに、トップページにヒーローセクションとカテゴリーカードを配置し、各カテゴリーの詳細ページを個別に構成してくれました。お問い合わせページも自動的に含めてくれましたし、フッターにはプライバシーポリシーとサイトマップまで入れてくれました。
SEOを意識したメタタグの設定や、OGP（Open Graph Protocol）の設定まで自動的に組み込んでくれたのは、正直言って予想外でした。こういった部分は、普通はウェブ開発の経験がある人が意識的にケアする領域ですが、AIが勝手にやってくれるのはかなり印象的でした。
デザインのクオリティが高いです
「モダンでクリーンなデザインにしてほしい」と伝えただけで、配色、フォントサイズ、余白のバランスまで整ったデザインが仕上がりました。グラデーションの使い方やホバーエフェクトなど、細かいUIの部分も自然に仕上がっていて、プロのデザイナーが作ったものと比べても遜色ないレベルでした。
さらに、「もう少し温かみのある色合いにしてほしい」「ボタンをもう少し大きくしてほしい」といった修正依頼にも即座に対応してくれます。本当にリアルタイムでデザイナーとやり取りしている感覚でした。この部分がClaude Codeの最大の強みだと思います。一度で完璧な成果物が出なくても、会話を重ねながら少しずつ思い通りの方向に仕上げていける点が、実際の開発現場のコミュニケーションと非常に似ています。
機能の実装もスムーズです
デザインだけでなく、機能面でも優秀でした。例えば、ダークモード切り替え機能、レスポンシブ対応（スマートフォン・タブレット・PC）、画像のlazy loading、スムーズスクロール、フォームのバリデーション、外部APIとの連携まで、自然言語の指示だけで実装できました。
特にAPI連携は、従来であればかなりの技術知識が必要だった部分です。それが「このAPIを使って、ユーザーがアップロードした画像を分析する機能をつけてほしい」と伝えるだけで実装されたのには、本当に驚きました。自然言語の一文が数十行のコードに変換されていく過程を見るのは、なかなか新鮮な体験でした。
90%は作れます。でも残りの10%があります
ここまで読むと、「もうウェブ制作は完全にAIに任せられるのでは？」と思われるかもしれません。確かに、サイトを「作る」という部分に関しては、90%以上AIで対応できると感じました。
しかし、残りの10%、つまりサイトを実際に公開するための作業には、まだ人間の手が必要です。
サーバーの契約とドメインの取得
ウェブサイトを公開するためには、サーバー（ホスティングサービス）の契約とドメインの取得が必要です。VercelやNetlifyなどのホスティングサービスへのデプロイ自体は、Claude Codeがコマンドを教えてくれますが、アカウントの作成や決済は自分で行う必要があります。
これは当然のことです。個人情報の入力やクレジットカードでの支払いをAIに任せるわけにはいきません。セキュリティの観点からも、この部分は人間が直接操作すべき領域です。
ドメインのDNS設定
ドメインを購入した後のDNS設定も、自分で行う必要があります。Claude Codeは「こう設定してください」と手順を案内してくれますが、実際にドメインレジストラの管理画面にログインして設定するのは自分です。
SSL証明書の設定
HTTPSでの通信を可能にするSSL証明書の設定も同様です。多くのホスティングサービスでは自動設定されますが、カスタムドメインを使う場合は追加の設定が必要なこともあります。
AIがまだ越えられない壁 ― でも時間の問題かもしれません
サーバー契約、ドメイン取得、決済処理。これらは個人情報やお金が絡む部分なので、現時点ではAIが直接操作することはできません。
しかし、これは技術的な限界というよりも、セキュリティとプライバシーの観点からの制約だと考えています。将来的に、AIに安全に認証情報を預けられる仕組みが整えば、この部分も自動化される可能性は十分にあります。
実際、最近ではAIエージェントがブラウザを操作してタスクを実行するツールも登場し始めています。数年後には「サイトを作って、公開まで全部やっておいて」と一言伝えるだけで完結する時代が来るかもしれません。
サイト制作そのものは、もう十分なレベルです
改めて強調したいのは、サイト制作そのものに関して、Claude Codeは本当に優秀だということです。
サイト構造の設計は的確な提案をしてくれますし、UI/UXデザインはプロ級の仕上がりを見せてくれます。フロントエンドの実装はモダンな技術スタックに対応していますし、バックエンドの連携もAPI統合までスムーズに処理してくれます。コードの品質も読みやすく、保守しやすい形で書いてくれます。
一般的なコーポレートサイト、ポートフォリオサイト、ブログ、ランディングページなどであれば、自然言語の指示だけで十分に実用レベルのサイトが完成します。
まとめ ― 自然言語でウェブサイトを作る時代は、もう始まっています
Claude Codeを使ったウェブサイト制作の体験を通じて、AIによるウェブ開発は「未来の話」ではなく「今、ここにある現実」だと実感しました。
自然言語で自分のイメージを伝えるだけで、構造、デザイン、機能が形になっていきます。その過程は、まるで優秀なパートナーと一緒にプロジェクトを進めているかのようでした。
もちろん、デプロイやドメイン設定など、まだ人間の手が必要な部分は残っています。しかし、サイト制作の核心 ― つまり「何を作るか」を決めて「どう作るか」を実行する部分 ― については、AIが十分に頼れるレベルに達しています。
ウェブサイトを作りたいけれど技術的なハードルを感じている方、あるいは開発コストを抑えたい方にとって、Claude Codeは間違いなく強力な選択肢になるでしょう。
自然言語でウェブサイトを作る時代。その扉は、もう開いています。