AIでWebサイトを作る完全ガイド ── 企画からデプロイまでの実践ワークフロー
AIでWebサイトを作る時代が来た
「Webサイトを作りたいけど、制作会社に頼むと数十万円かかる」「自分で作りたいけど、プログラミングがわからない」。そんな悩みを持っている方に朗報です。
2026年現在、AIの力を借りれば企画からデプロイ（作ったサイトをインターネット上に公開すること）まで半日で終わる時代になりました。
ただし「AIにまるっとお任せすればOK」というわけではありません。ツール選びを間違えたり、AIが出したコードをそのまま使ったりすると、品質の低いサイトになってしまいます。
この記事では、実際に1日で3つのWebサイトを作って公開した経験をもとに、ツールの比較から具体的な手順、費用の内訳、よくある失敗まで、初心者にもわかりやすく解説します。
従来の方法 vs AI活用の比較
従来の方法
- 制作期間: 2週間〜1ヶ月
- 外注費用: 30万〜100万円
- 修正依頼: そのたびに追加費用
- 自由度: 制作会社まかせ
AI活用
- 制作期間: 半日〜2日
- 費用: 月額数千円のみ
- 修正: 何度でもすぐにできる
- 自由度: 自分で完全にコントロール
主要AIツール徹底比較
Webサイトを作るためのAIツールはたくさんありますが、それぞれ得意なことが違います。「自分がやりたいこと」に合ったツールを選ぶのが大事です。
結局どれを使えばいい？
本格的なサイトを作るならClaude Codeがイチオシです。ファイルの作成、コマンドの実行、Git（ファイルの変更履歴を管理する仕組み）操作、デプロイ（公開）まで、ぜんぶターミナル上で完結します。「まずは雰囲気を見たい」という方はBoltやLovableで試作品を作ってみるのもアリです。
実践ワークフロー：5つのステップ
実際にサイトを作る流れを、5つのステップに分けて説明します。
企画・設計（30分）
サイトの目的、だれに向けたサイトか、ページ構成、使う技術を決める
デザイン方針の決定（15分）
使いたい色、フォント、レイアウトの方向性をAIに伝える
コーディング（2〜3時間）
AIにコードを作ってもらい、確認・修正をくり返す
コンテンツ作成（1〜2時間）
記事やページの文章をAIと一緒に書く
デプロイ・公開（15分）
Cloudflare PagesやVercelにアップして公開する
ステップ1：企画・設計（30分）
AIに丸投げする前に、人間が決めておくべきことがあります。ここをあいまいにすると、あとで何度も作り直すはめになり、かえって時間がかかります。
最低限決めておきたいのは以下の5つです。
- サイトの目的：情報を発信したい？ポートフォリオ？ネットショップ？
- だれに見てほしいか：どんな人に向けたサイトか
- 必要なページ：トップ、自己紹介、記事一覧、お問い合わせなど
- 使う技術：Astro、Next.js、Hugo、WordPressなど
- 公開先：Cloudflare Pages、Vercel、Netlifyなど
どの技術を選べばいい？
ブログやメディアサイトのような「読み物中心のサイト」ならAstro + Tailwind CSSがおすすめです。表示が速く、Cloudflare Pagesなら無料で公開できます。ログイン機能やデータベースが必要なサイトならNext.jsを検討しましょう。
ステップ2：デザイン方針の決定（15分）
AIにデザインを任せる場合でも、大まかな方向性は人間が決めます。具体的には、以下のような情報をAIに伝えましょう。
以下の条件でWebサイトのデザインを作成してください。
- テーマカラー: ダークネイビー(#1e3a5f) + アクセントにオレンジ(#f59e0b)
- 雰囲気: プロフェッショナルだけど親しみやすい
- レイアウト: カードグリッド型（記事がカード状に並ぶデザイン）
- フォント: Noto Sans JP（本文）、Inter（英字）
- レスポンシブ: スマホでも見やすいデザインにする参考にしたいサイトのURLを一緒に見せると、AIがデザインの雰囲気をより正確にくみ取ってくれます。
ステップ3：コーディング（2〜3時間）
ここがAIの本領発揮ポイントです。Claude Codeを使う場合、以下のような指示でサイトの骨格を一気に作れます。
Astro + Tailwind CSSでブログサイトを作成してください。
- src/pages/index.astro: トップページ（最新記事6件をカードグリッドで表示）
- src/pages/posts/[slug].astro: 記事詳細ページ
- src/layouts/BaseLayout.astro: 共通レイアウト
- src/components/Header.astro: ナビゲーション
- src/components/Footer.astro: フッター
- src/content/config.ts: コンテンツコレクション設定一度に全部やらせないのがコツ
AIに「サイト全体を一気に作って」とお願いすると、品質が下がりがちです。ページごと・パーツごとに指示を出して、ひとつずつ確認しながら進めるのが成功のコツです。つまり、小さく作って確認するのをくり返すイメージです。
ステップ4：コンテンツ作成（1〜2時間）
サイトの骨格ができたら、中身のコンテンツを作ります。ブログ記事や自己紹介ページの文章もAIに下書きしてもらい、自分で手直しする「ハイブリッド方式」が効率的です。
コンテンツ作成で気をつけたいポイントはこの3つ。
- SEO（Googleなどの検索で上位に表示されるための対策）を意識したタイトルと説明文を必ず設定する
- 画像はUnsplashなどの無料素材を使い、直接リンクではなくダウンロードしてサイト内に配置する
- 日本語の記事は5,000〜8,000文字が検索で有利になりやすい
ステップ5：デプロイ・公開（15分）
Cloudflare Pagesを使う場合、GitHubリポジトリ（コードの保管場所）と連携するだけで自動的に公開されます。
# GitHubにアップロード
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/my-site.git
git push -u origin main
# Cloudflare Pagesで連携設定
# ダッシュボード画面からGitHubリポジトリを選択
# ビルドコマンド: npm run build
# 出力ディレクトリ: distかんたんに言うと、「コードをGitHubに置いて、Cloudflareに”これ公開して”と設定するだけ」です。独自ドメイン（自分だけのURL）の設定も、Cloudflareの管理画面から数クリックで完了します。
実例：1日で3サイトを構築した記録
実際に私たちは、Claude Codeを使って1日で3つのWebサイトを企画・構築・公開しました。
バイブコーディング入門サイト
Astro + Tailwind CSS + Cloudflare Pages
- 構築時間: 約3時間
- ページ数: 10ページ+
- ステップ形式のレイアウト
AI業務活用ラボ
Astro + Tailwind CSS + Cloudflare Pages
- 構築時間: 約3時間
- ページ数: 8ページ+
- カードグリッド型レイアウト
経営者向け税金・節税サイト
Astro + Tailwind CSS + Cloudflare Pages
- 構築時間: 約2時間
- ページ数: 8ページ+
- 信頼感を重視したデザイン
3サイトともAstro + Tailwind CSS + Cloudflare Pagesという同じ組み合わせで作りました。同じ技術で揃えることで、部品やデザインの使い回しができて、効率がぐんと上がります。
コスト内訳
AIでWebサイトを作る場合、実際にいくらかかるのか、くわしく見てみましょう。
月額コスト内訳（3サイト運営の場合）
| ドメイン費用（3ドメイン） | 約3,000円/年（月250円） |
| ホスティング（Cloudflare Pages） | 無料 |
| Claude Code（Max plan） | 約$100〜$200/月 |
| 画像素材（Unsplash等） | 無料 |
| 合計 | 月額 約15,000〜30,000円 |
※ 制作会社に1サイト分を外注した場合（30万〜100万円）と比べると、圧倒的にお得です
品質を上げるためのポイント
AIにコードを作ってもらうだけでは、良いサイトにはなりません。以下のポイントを押さえましょう。
1. AIが作ったコードは必ずチェックする
AIが書いたコードには、不要な部分や非効率な書き方が含まれることがあります。特に以下の4点をチェックしましょう。
- 表示速度：いらないJavaScriptが含まれていないか
- アクセシビリティ：画像の説明文（alt属性）、見出しの順番、文字と背景のコントラスト
- SEO（検索対策）：ページの説明文、構造化データ、SNS共有用の設定
- スマホ対応：スマートフォンでの表示がくずれていないか
2. デザインに統一感を持たせる
AIに毎回自由にデザインさせると、ページごとに雰囲気がバラバラになります。最初にデザインのルール（色・フォントサイズ・余白の基準）を決めて、それに沿って作ってもらいましょう。
3. コンテンツには「人間らしさ」を入れる
サイトの文章が全部AIっぽいと、読む人は違和感を覚えます。特に以下の部分は自分の言葉で書くのがおすすめです。
- 自己紹介やAboutページ：実際の経験を必ず盛り込む
- 事例紹介：具体的な数字や固有名詞を入れる
- 行動を促す文章：読者にとって自然な誘導になるように
AIと人間の役割分担
AIには「コードを書く」「文章の下書き」「調べもの」をお任せし、人間は「方向性を決める」「品質をチェックする」「オリジナリティを加える」に集中する。この分担がいちばん効率的です。
よくある失敗と対処法
実際にAIでサイトを作る中で経験した失敗と、その対処法をシェアします。
失敗1：画像の直リンク
AIがUnsplashの画像URLをそのままコード内に埋め込むことがあります。これは利用規約的にグレーですし、突然画像が表示されなくなるリスクもあります。
対処法：画像は必ずダウンロードして、サイト内のpublic/images/フォルダに置く。つまり、「借り物」ではなく「自分のサイト内に保存」するということです。
失敗2：ドメイン設定後にサイトが見えない
独自ドメインを設定した直後に「サイトが表示されない！」と焦ることがあります。DNS（ドメインとサーバーを結びつける仕組み）の設定が世界中に反映されるまで、最大48時間かかることがあるためです。
対処法：Cloudflareでドメインを管理していれば比較的早く反映されます（数分〜数時間）。焦らず少し待ちましょう。
失敗3：ビルドエラーの放置
AIが作ったコードにミスが含まれていて、自分のパソコンでは動くのに、公開用のビルド（サイトの組み立て作業）で失敗するケースがよくあります。
対処法：コードを変更したら必ずnpm run buildを実行して、エラーがないことを確認してから公開する。かんたんに言うと、「公開前に必ず最終チェック」ということです。
失敗4：スマホでの表示確認を忘れる
パソコンだけで見た目を確認して公開すると、スマートフォンでレイアウトがガタガタになっていることがあります。2026年現在、ネットの閲覧の70%以上がスマートフォンからです。
対処法：Chromeのデベロッパーツール（F12キーで開ける）で、スマホサイズ（375px、768px、1024px）の表示を必ず確認する。
よくある質問（FAQ）
プログラミング未経験でもAIでサイトを作れますか？
BoltやLovableのような「ほぼノーコード」のツールを使えば、プログラミング未経験でもシンプルなサイトは作れます。ただし、本格的にカスタマイズしたい場合は、HTML/CSSの基本を知っているとスムーズです。まずは小さなサイトから始めて、少しずつスキルを身につけていくのがおすすめです。
WordPressとAstro、どっちがいいですか？
目的によって変わります。WordPressはプラグイン（拡張機能）が豊富で、ネットショップや会員サイトなど「動きのある機能」が必要なときに向いています。Astroはブログやメディアサイトなど「読み物中心のサイト」に最適で、表示速度が速く、サーバー代も無料〜格安で済みます。
AIで作ったサイトはSEO（検索順位）に不利ではないですか？
Googleは「AIで作ったかどうか」ではなく「コンテンツの品質」で判断すると公式に発表しています。きちんとした説明文の設定、表示速度の最適化、読者に役立つコンテンツがあれば、AIで作ったサイトでもちゃんと検索上位を狙えます。
サイトの保守・運用もAIに任せられますか？
記事の追加やデザインの微調整は、AIに「ここをこう変えて」と伝えるだけで対応できます。ただし、セキュリティのチェックやパフォーマンスの監視は人間が主導して行いましょう。Astroのような静的サイトの場合はセキュリティリスクが非常に低いため、保守の手間は最小限で済みます。
複数サイトを運営する場合のコツはありますか？
同じ技術の組み合わせ（Astro + Tailwind CSSなど）を使うことで、デザインパーツやレイアウトを使い回せます。また、Cloudflare Pagesなら複数サイトを無料でホスティング（公開・維持）できるので、費用を抑えられます。Git（ファイルの変更履歴を管理する仕組み）でしっかり管理することも大切です。
まとめ
AIを使ったWebサイト構築は、2026年現在で最もコスパの良いサイト制作方法です。ポイントを整理すると以下のとおりです。
この記事のまとめ
- 1. 本格的なサイト構築にはClaude Codeがイチオシ
- 2. 企画・設計は人間が主導し、コーディングをAIに任せる
- 3. 一度に全部やらせず、小さく作って確認のくり返し
- 4. AIが作ったものは必ず人間の目でチェックする
- 5. Astro + Tailwind + Cloudflare Pagesなら月額コストほぼゼロ
まずは小さなサイトから始めてみてください。一度やり方を覚えれば、2つ目以降のサイトはもっとサクサク作れるようになります。
