AIでWebサイトは初心者でも作れる？公開までの手順と1週間の目安

こんにちは、Kredo Blog編集部です！

AIを使えば、初心者でもWebサイトは作れます。構成を決めてAIに書かせ、直して公開するまで、1週間が1つの目安です。

ただし、AIが出したものをそのまま公開すると、内容の誤りや画像の権利でつまずきます。料金や無料枠は、2026年10月時点で各社の公式ページを開いて確認できた範囲だけを載せました。

この記事でわかること

先に結論：AIでWebサイトは作れる。作り方は3種類から選ぶ

作り方は大きく3種類あります。数ページの自己紹介やお店の案内なら、どの方法でも1週間で公開まで進められます。ただし1週間は目安で、ページ数や原稿の準備具合で変わります。下の表で、自分に近い行を選んでください。

AIでWebサイトを作る3つの方法を比較

3つの方法は、AIに任せる範囲が違います。迷ったら②から始めると、Webサイトの仕組みと公開の流れを両方つかめます。それぞれの特徴を見ていきます。

①AIサイトビルダー：文章で伝えると形になる

AIサイトビルダーは、作りたいサイトを文章で伝えると、デザインと文章が入ったサイトを用意してくれるサービスです。たとえばWixの公式ページには、作りたい内容を説明するとAIがサイトを作ると書かれています。無料で始められるとも案内されています。

一方で、Wixでは独自ドメインの接続やオンライン決済にプレミアムプランが要ります（2026年10月時点・公式で確認）。独自ドメインとは、「自分の名前.com」のような自分専用のアドレスのことです。最新は公式で確認してください。

②ChatGPT・ClaudeにHTMLを書かせて公開する

ChatGPTやClaudeに「こんなページのHTMLを書いて」と頼み、受け取ったファイルを公開先に置く方法です。HTMLは、Webページの見出しや文章を書くための言葉です。Claudeには、作ったものを画面で確かめられる「アーティファクト」という機能があります。公式ヘルプでは、1ページのWebサイトも作れる対象に挙げられ、Freeプランでも使えると案内されています。

受け取るHTMLは、短ければ次のような形です。これを「index.html」という名前で保存すると、ブラウザで開けます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>山田花子のポートフォリオ</title>
</head>
<body>
  <h1>山田花子のポートフォリオ</h1>
  <p>Webデザインを勉強中です。作ったものをここに載せていきます。</p>
</body>
</html>

③Claude Code・Codexに作業ごと任せる

Claude CodeとCodexは、コーディングエージェントと呼ばれる道具です。ファイルを読み、書きかえ、コマンドを実行するところまで進めます。Claude Codeはターミナルやデスクトップアプリ、ブラウザで使えます。

Claude CodeはProプラン（月払いで月20ドル）から使えます（2026年10月時点）。Freeプランには含まれていません。CodexはChatGPTのFreeプランにも含まれますが、Freeは簡単なコーディング作業を試す範囲と案内されています。Plusプランは月20ドルです（2026年10月時点）。どちらも最新は公式で確認してください。

公開先4つの無料枠を比較（2026年10月時点）

作ったHTMLは、インターネット上の置き場所に置いて初めて人に見てもらえます。HTMLだけのサイトなら、4つとも無料枠で公開できます。

HTML・CSS・画像だけでできたサイトを静的サイトと呼びます。初心者の最初の1本はこの形で足ります。

GitHub Pages：HTMLをそのまま公開できる

GitHub Pagesは、GitHubのリポジトリ（ファイルの保管場所）に置いたHTML・CSS・JavaScriptを公開するサービスです。アドレスは「ユーザー名.github.io」の形になります。GitHub Freeでは公開リポジトリで使えます。

公式の説明では、ネットショップなど商取引を主な目的とするサイトの無料の置き場所としては使えません。パスワードやクレジットカード番号を送る用途にも使わないよう書かれています。

Netlify：フォルダを置くだけで公開できる

Netlifyには「Netlify Drop」という入口があります。HTMLの入ったフォルダを画面にドラッグすると公開されます。Freeプランは月300クレジットで、本番公開1回に15クレジット使います。転送量は1GBあたり20クレジットです。使い切ると買い足しはできず、サイトが一時停止します。直しはまとめてから公開しましょう。

Vercel：無料枠は個人の非商用のみ

VercelのHobbyプランは無料で、個人のプロジェクト向けです。Hobbyプランは個人の非商用利用に限られ、商用にはProプラン以上が要ります。公式は、商品やサービスの販売の宣伝、広告の掲載、制作の対価を受け取ることを商用の例に挙げています。

Cloudflare Pages：ファイル数に上限がある

Cloudflare Pagesは、zipファイルかフォルダをドラッグして公開できます。ドラッグで上げられるのは1,000ファイルまでです。アドレスは「プロジェクト名.pages.dev」になります。なお、公式ページは新しいプロジェクトをWorkersで始めるよう案内しています。

公開までの1週間の進め方（目安）

ここでは②の方法で、3〜5ページのサイトを作る場合の進め方を紹介します。1日1〜2時間を使い、7日目に公開する流れが1つの目安です。

1〜2日目：AIに頼む前に構成と原稿を決める

AIはデザインやHTMLは書けますが、あなたの経歴やお店の情報は知りません。先に次の5つをメモにまとめておくと、あとの直しが減ります。

3〜5日目：AIに書かせて、1か所ずつ直す

3日目はトップページだけを作ります。保存したファイルをブラウザで開き、気になる所を1か所ずつAIに伝えます。「見出しの文字を大きく」のように具体的に伝えます。5日目は、スマホの幅で表示が崩れないかを見ます。

6〜7日目：公開して点検する

6日目に公開先へファイルを置きます。サイトをインターネットに公開する作業をデプロイと呼びます。この時点では、URLを人に知らせなくてかまいません。7日目に、後で紹介する確認リストで点検してから知らせます。

そのまま使えるプロンプト例3つ

プロンプトは、AIへの指示文のことです。目的・ページ構成・条件の3つを書くと、直しの回数が減ります。【 】の中を自分の内容に書きかえて使ってください。

例1：構成を決める（1日目）

あなたはWebサイトの設計担当です。
【フリーランスのデザイナー】の【自己紹介サイト】を作ります。
読んでほしい人は【仕事を依頼したい会社の担当者】です。
必要なページと、各ページに載せる見出しを表にしてください。
足りない情報があれば、作る前に私に質問してください。

例2：HTMLを書かせる（3日目）

次の構成で、トップページのHTMLを1つのファイルで書いてください。
・ファイル名は index.html
・CSSは同じファイルの中に書く
・スマホでも読みやすい幅にする
・外部の画像やフォントは使わない
・画像を入れる場所は、コメントで目印だけ入れる
構成：【ここに1日目の構成メモを貼る】
原稿：【ここに原稿を貼る】

例3：直してもらう（5日目）

このHTMLを次の3点だけ直してください。ほかの部分は変えないでください。
1. スマホで見たとき、見出しが2行に収まるようにする
2. お問い合わせボタンを、ページの上と下の2か所に置く
3. 色を【落ち着いた紺色】を中心にそろえる
直した所を、最後に箇条書きで教えてください。
【ここに今のHTMLを貼る】

初心者がつまずく4つの所

HTMLを作る所まではAIが助けてくれます。つまずきやすいのは、公開・独自ドメイン・フォーム・画像の権利の4つです。順に見ていきます。

公開：ファイル名と置く場所

よくあるのは、公開したのにページが出ないケースです。次の順で確かめます。

独自ドメイン：取得と設定は別の作業

独自ドメインは、ドメインを扱う事業者から取得します。そのうえで、公開先のサービスにつなぐ設定をします。料金は事業者やドメインの種類で違い、設定の方法も公開先ごとに違います。たとえばCloudflare Pagesでは、サブドメインはCNAMEレコードで向けます。「example.com」のような頭に何も付かないドメインは、Cloudflareのネームサーバーに切り替える手順です。最初は無料のアドレスで公開してもかまいません。

フォーム：HTMLだけでは届かない

お問い合わせフォームは、見た目をHTMLで作っても、それだけでは送信内容がどこにも届きません。受け取る仕組みが別に要ります。Netlifyには「Netlify Forms」があり、formタグに属性を1つ足すと受け取れます。画面側でフォーム検出を有効にする設定も要ります。フォーム送信は、クレジット制のプランではクレジットを使いません（2026年10月時点）。

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name">
  <button type="submit">送信</button>
</form>

フォームで名前やメールアドレスを集めるなら、何に使うかをページに書いておきます。

画像の権利：ネットの画像をそのまま使わない

検索で見つけた写真やイラストには、作った人の権利があります。自分で撮った写真を使うか、素材サイトの利用規約を読んでから使います。AIで作った画像も、使ったサービスの利用規約で商用利用の扱いを確認します。人が写っている写真は、本人に載せてよいかを聞いてからにしましょう。

公開前の確認リスト

公開前に、個人情報・著作権・表示の3つを自分の目で点検します。AIが書いた文章には、事実と違う内容が混ざることがあります。経歴・料金・営業時間などは、1つずつ読み直してください。

もう1つ、作る途中の注意があります。AIに頼むときは、他人の個人情報や社外に出せない資料を貼らないでください。

AIでの制作を人から学ぶ選択肢：KredoのAI留学

ここまでの内容は独学で進められます。人に聞きながら学びたい人には、留学という選択肢もあります。

Kredoは、フィリピン・セブ島のITパークにあるIT留学・AI留学のスクールです。2016年に開講し、卒業生は3,000名以上です。AI留学は1か月のプログラムで、午前に英語のマンツーマン授業が4コマあります。午後はAIのグループ授業が4コマです。授業は1コマ50分・平日で、ChatGPT・Claude Code・Codexを使います。定価は413,000円（税込）です（2026年10月時点。最新は公式で確認を）。

あわせて読みたい記事

AIでアプリは作れる？ノーコードの作り方と初心者が最初の1本を作る手順

2026-10-01

Claude Code vs Cursor どっちで開発する？Xの本音16選

2026-10-03

HTML・CSSの勉強方法｜独学で何から・どこまで？難しい所と勉強時間

2023-04-20

よくある質問

プログラミングの知識がなくても作れますか？

作れます。HTMLはAIが書くので、最初は読めなくても進められます。ただし、直したい所をAIに伝えるために、見出し・段落・リンクといった基本の言葉は覚えておくと楽です。

無料で公開できますか？

HTMLだけの小さなサイトなら、この記事で紹介した4つの公開先の無料枠で公開できます（2026年10月時点）。ただし条件はそれぞれ違います。VercelのHobbyプランは個人の非商用利用のみで、GitHub Pagesは商取引が主目的のサイトに使えません。独自ドメインを使う場合は、ドメインの料金が別にかかります。

ChatGPTとClaudeはどちらを使えばよいですか？

どちらもHTMLを書けるので、すでに使い慣れているほうで始めてかまいません。Claudeにはアーティファクトという機能があり、作ったページを画面で確かめられます。複数のページを作って直し続けるなら、Claude CodeやCodexのようにファイルの編集まで任せられる道具が向いています。

本当に1週間でできますか？

1週間は、3〜5ページの小さなサイトを1日1〜2時間で作る場合の目安です。原稿や写真がそろっていれば、もっと早く進みます。ページが多い場合や、フォーム・独自ドメインまで入れる場合は、もう少し長く見ておきましょう。

まとめ：構成を決めてAIに書かせ、直して公開する

AIを使えば、初心者でもWebサイトは作れます。大事なのは、AIに頼む前に構成と原稿を自分で決めておくことです。作り方は、AIサイトビルダー、ChatGPTやClaudeにHTMLを書かせる方法、Claude CodeやCodexに作業ごと任せる方法の3種類です。公開先の無料枠は条件が違うので、公式で確認して選びます。公開前には、個人情報・著作権・表示の3つを自分の目で点検しましょう。AIを人から学ぶ道も知りたい人は、AI留学とは？留学でAI（人工知能）を学ぶ方法・費用・向く人もあわせて読んでみてください。

参考にした公式情報

料金・無料枠・機能は2026年10月時点の内容です。変わることがあるため、最新は各公式ページで確認してください。

英語でIT・AIを学べるKredo

英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？

当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？

＼ セブ島で英語×AIを学ぶ ／AI留学の無料相談をする