プログラミング初心者でもClaude Codeを使えば自分のサイトを作れます。Cloudflare Pagesなら無料で公開でき、Honoフレームワークとの組み合わせで開発効率も抜群。その方法を分かりやすく解説します。
「ウェブサイトを作りたいけど、プログラミングは難しそう…」と感じていませんか？
実は今、Claude CodeというAIツールを使えば、プログラミングの知識がほとんどなくても自分のサイトを作れるようになっています。しかもCloudflare Pagesを使えば完全無料で公開まで可能です。
この記事では、Claude Codeを使ってウェブサイトを作り、Cloudflareで公開するまでの手順を初心者向けに解説します。さらに、Honoというフレームワークを使うと開発がよりスムーズになる理由もご紹介します。
Claude CodeはAnthropicが開発したAIコーディングアシスタントです。ターミナル（コマンドライン）上で動作し、あなたが日本語で「こんなサイトを作りたい」と話しかけると、コードを自動で書いてくれます。
従来のウェブ開発では、HTML・CSS・JavaScriptの知識、サーバーの設定、デプロイの手順などをすべて自分で覚える必要がありました。Claude Codeを使えば、これらをAIがサポートしてくれるので、初心者でも挑戦しやすくなります。
Hono（炎）は日本人開発者が作った軽量なウェブフレームワークです。Cloudflare Workers / Pagesとの相性が抜群で、以下の特徴があります。
Claude CodeにHonoのプロジェクトを作ってもらうと、構造がシンプルなのでAIが指示を正確に理解してくれます。結果として、少ない指示でも狙い通りのサイトができあがります。
ターミナル（Macはターミナル.app、WindowsはPowerShell）を開いて、以下のコマンドを実行します。
npm install -g @anthropic-ai/claude-codeインストール後、claude と入力するとClaude Codeが起動します。初回起動時にAnthropicのアカウントとの連携が求められます。
Claude Codeに日本語で話しかけます。
「Cloudflare Pages用のHonoプロジェクトを作ってください。シンプルな会社紹介サイトを作りたいです。」
するとClaude Codeが自動でプロジェクトのファイルを作成してくれます。自分でコードを書く必要はありません。
Claude Codeに続けて指示を出します。
「トップページに会社名と事業内容の説明を入れてください。デザインはダークテーマでお願いします。」
このように日本語でお願いするだけで、デザインや内容を変えてもらえます。変更を確認しながら少しずつ形にしていきましょう。
サイトの内容が決まったら、Cloudflareに公開します。Claude Codeに頼みます。
「Cloudflare Pagesにデプロイしてください。」
Claude Codeが以下のようなコマンドを実行してくれます。
npm run build
npx wrangler pages deploy dist --project-name my-site数分後、https://your-site.pages.dev のようなURLでサイトが公開されます。しかも完全無料です！
A. 使えます。Cloudflare Pagesでは独自ドメインを無料で設定できます。ドメイン自体は年間1,000〜2,000円程度で購入する必要がありますが、ホスティング費用は無料のままです。
A. Claude Codeに「この部分を変更して」と伝えて、再度デプロイするだけです。GitHubと連携すれば、コードを更新するたびに自動でデプロイされる設定もできます。
A. 基本的な操作は日本語の指示だけでできます。Claude Codeへの指示は具体的であればあるほど精度が上がります。「変えて」より「トップページのタイトルを〇〇に変えて」のように伝えると意図が正確に伝わります。
Claude Code × Hono × Cloudflare Pagesの組み合わせは、初心者でもウェブサイトを公開できる強力な無料スタックです。
まずは「Hello World」だけのシンプルなページでもいいので、ひとつ作ってみることをおすすめします。最初の一歩を踏み出すと、思ったより簡単だと気づくはずです。ぜひ挑戦してみてください！