コンテンツへスキップ

AIだけでWebサイト制作に挑戦してみた｜コーディング不要はどこまで本当か？実際に試して分かった3つの注意点

AIだけで本当にWebサイトは作れるのか。ChatGPTで構想設計し、AIでデザイン、ノーコードで公開、SEOまで実際に試しました。コーディング不要でどこまで成立するのか、その過程で見えた「やる前に知っておくべき注意点」を体験談ベースで解説します。

ステップ1｜構想・目的設計（誰に何を届けるか）

ホームページ制作やリニューアル、DX・IT導入支援の成功は、初期段階で定めるべき「構想と目的」がどれだけ明確かにかかっています。この段階では、サイトの使命や届けたい相手、そして他と明確に違う価値を言語化することが最も重要です。ここが曖昧だと、その後のページ構成やコンテンツ制作、SEO 対策など、すべての工程がぶれてしまいます。

この段階は、Web サイトの戦略設計そのものです。AI への入力（プロンプト）を工夫することで、サイト目的・ペルソナ・価値提案・ページ構成案まで一気に抽出できます。
プロンプトは具体的にするほど、AI からの出力精度が上がります。プロンプトの書き方自体が重要であることを意識してください。

主用途：コンセプト、ターゲット、価値提案

  • ChatGPT
    → 最適解。
    サイトの目的、ペルソナ、訴求軸、ページ構成案まで一気に出せる。
    ここを雑にすると、後工程すべてが崩れる。
人間が考えるのは「事業意図」だけでよい。構造化はAIに丸投げする

まず、

  • このサイトは何のために作るのか
  • 誰に向けたサイトなのか
  • 読了後にどうなってほしいのか

この3点だけを明確にすることに集中しました。
構造化や言語化は、すべてAIに任せます。

使用ツール

※このステップでは他のツールは不要です。

実際にやった操作手順

  1. ChatGPTを開く
  2. いきなり「サイト構成」や「ページ案」を聞かない
  3. 事業・目的・前提条件だけを一気に投げる
  4. 出てきた回答を「修正」ではなく「再定義」させる

ここで人間がやるのは判断だけ。
文章を直そうとすると、逆に精度が落ちます。

決定版プロンプト（そのまま使えます）

あなたはWebマーケティングと情報設計の専門家です。

これから「AIだけでWebサイト制作に挑戦した体験談ブログ」を作ります。
コーディング不要・AI活用がテーマです。

以下の前提条件をもとに、
1. サイトの目的
2. 想定読者（具体的な人物像）
3. 読者がこのサイトを読み終えたときの理想状態
を整理してください。

【前提条件】
・目的：AIだけでWebサイトがどこまで作れるかを実体験として共有する
・読者：Web制作に興味はあるが、コードは書きたくない人
・ゴール：自分でも試してみようと思わせること

抽象論ではなく、実際のWebサイト制作を前提に具体的に書いてください。

このステップで得られるアウトプット・成果物

  • サイト全体の軸（ブレない判断基準）
  • 次ステップ（サイトマップ・構成）に進むための前提条件
  • 「このサイトは何のために存在するのか」の一文説明

実際、このアウトプットがあったおかげで、
後工程（デザイン・ツール選定・SEO）で迷う回数が激減しました。

注意点

ChatGPTに答えを出させるのではなく、整理させるのが正解
ここを5分で済ませると、後で5時間迷う
「かっこいいサイトを作りたい」は構想ではない

ステップ2｜サイトマップ・情報設計

次にやるべきはページを並べること……と思いがちですが、
実際にAIだけでWebサイト制作を試してみて分かったのは、
サイトマップは“作業”ではなく“検証工程”だということでした。

従来のWeb制作では、

  • トップ
  • サービス
  • 会社概要
  • お問い合わせ

といったお決まり構成を当てはめるケースがほとんどです。
しかし今回は「AIだけで作れるのか」を検証する体験談サイト。
テンプレ構成を使った瞬間に、検証としての価値が下がると感じました。

そこで私は、
「どんなページが必要か？」ではなく、
「読者の思考は、どんな順番で進むのか？」
という問いに切り替えました。

ここで初めて、
AIの得意分野──
論理展開・情報の抜け漏れチェック・矛盾の指摘
が最大限に活きてきます。

主用途：ページ構成、導線設計、階層構造

  • NotebookLM
    → ChatGPTで出した構成を投げると、論理破綻のチェックに強い
  • ChatGPT
    → 単体でも十分だが、長文構造はNotebookLM併用が合理的
サイトマップは「矛盾を潰す工程」。NotebookLMは検証役として優秀

使用ツール

※結論から言うと、
**ChatGPTだけでも可。NotebookLMは“精度を上げたい人向け”**です。

私の使い分け（体験談）

  • ChatGPT
    → 一気に全体構成を出すため
  • NotebookLM
    → 構成の矛盾・抜け・論理破綻を見つけるため

人間は「違和感」を感じるだけ。
言語化と修正案はAIに任せるのが最も速かったです。

実際にやった操作手順（ChatGPT編）

  1. ステップ1で作った「目的・読者・ゴール」をコピペ
  2. 「サイトマップを作って」とは言わない
  3. 読者の思考プロセスから逆算させる
  4. ページ数を一度“多め”に出させる
  5. 不要なものを削る判断だけ人間が行う

決定版プロンプト①（サイト構成生成）

あなたはWebサイトの情報設計を専門とするUX設計者です。

以下の前提条件をもとに、
「AIだけでWebサイト制作に挑戦した体験談ブログ」の
最適なサイトマップ案を作ってください。

【前提条件】
・目的：AIだけでWebサイトがどこまで作れるかを体験談として共有
・読者：Web制作に興味はあるが、コードは書きたくない人
・ゴール：自分でも試してみようと思わせること

【条件】
・読者の理解が自然に深まる順番でページを配置すること
・各ページの役割を一言で説明すること
・一般的な企業サイト構成に引っ張られないこと

NotebookLMを使った追加検証（任意）

ChatGPTで出したサイトマップ案を、
そのままNotebookLMに貼り付けました。

実際の使い方

  1. NotebookLMを開く
  2. 新しいノートを作成
  3. ChatGPTの出力を貼り付け
  4. 次の質問を投げる

決定版プロンプト②（構成チェック用）

このサイトマップ案を読者視点で評価してください。

・理解しづらい流れはないか
・情報が重複しているページはないか
・順番を入れ替えた方がよい箇所はないか
・読者が途中で離脱しそうなポイントはどこか

改善案があれば、理由付きで提案してください。

NotebookLMはダメ出し役として非常に優秀でした。
人間がやると感情が入りますが、AIは容赦なく論理で切ってきます。

このステップで得られるアウトプット

  • 読者導線ベースのサイトマップ
  • 各ページの役割定義（後工程で迷わない）
  • デザイン・SEOに進むための構造的前提

正直な注意点（体験談）

AIの案を正解扱いしないこと。判断は人間の仕事

サイトマップを早く確定させすぎると失敗する

ページ数は「少なすぎ」より「多すぎ」から削る方が楽

ステップ3｜ワイヤーフレーム（構図）

デザインを始める前に「失敗しない配置」をAIで確定させる

ステップ2でサイトマップを作った段階で、「もうデザインしてもいいのでは？」という誘惑が来ます。
しかし実際にAIだけでWebサイト制作をやってみて、ここで一気に失敗する人が多い理由が分かりました。
構図が決まっていないままデザインに入ると、後工程がすべて手戻りになるからです。

重要なのは、
「きれいな見た目」ではなく、
読者の視線がどう流れ、どこで理解し、どこで行動するか。

ワイヤーフレームは、
デザインの下書きではなく、
情報の優先順位を決める作業でした。

私はこの段階で、
・色
・フォント
・装飾
を一切考えていません。
文字だけで、構図をAIに決めさせることに集中しました。

主用途：各ページの情報配置

  • ChatGPT
    → 「ファーストビュー／CTA／情報順」でテキストワイヤーを生成
  • Whimsical
    → 図解にしたい場合のみ
この段階で“デザイン”は考えない。文字だけで十分。

使用ツール

結論から言うと、
ChatGPTだけで十分です。
Whimsicalは「図で見たい人」向けの補助ツールに過ぎません。

なぜワイヤーフレームをAIに任せたのか（体験談）

人間が構図を考えると、
無意識に「よくあるWebサイト」に寄せてしまいます。

一方AIは、

  • 情報量
  • 読者の理解順
  • CTAの位置

を論理だけで並べるため、
結果として「地味だが成果が出やすい構図」になりました。

実際、この構図は
後のCanvaデザイン工程でほぼ修正不要でした。

実際にやった操作手順

  1. ChatGPTにステップ2のサイトマップを貼る
  2. 「ワイヤーフレームを作って」とは言わない
  3. ページ単位で情報の並びを言語化させる
  4. ファーストビューだけは必ず詳細に出させる
  5. 判断するのは「削る」「順番を変える」だけ

決定版プロンプト①（トップページ構図）

あなたはWebサイトのUX設計を専門とする情報設計者です。

以下のサイトマップを前提に、
トップページのワイヤーフレームを
「文字だけ」で作成してください。

【条件】
・上から下へ読む前提で構成する
・各ブロックの役割を明確にする
・ファーストビューは特に詳細に書く
・装飾や色の指示は不要

【出力形式】
1. セクション名
2. そのセクションで伝える目的
3. 掲載する主な要素（箇条書き可）

決定版プロンプト②（下層ページ構図）

以下の各ページについて、
読者が迷わず理解できる構図案を作ってください。

・ページのゴール
・読む順番
・省いてもよい情報
・必ず入れるべき要素

デザインではなく、
「情報の流れ」に集中して設計してください。

Whimsicalを使う場合の手順（任意）

  1. ChatGPTのワイヤーフレーム文章をコピー
  2. Whimsicalで縦長フレームを作成
  3. テキストを箱として配置
  4. サイズ感だけ調整

ここでも装飾は不要です。

このステップで得られるアウトプット

  • ページごとの情報優先順位
  • ファーストビューの勝ちパターン
  • デザイン工程で迷わない「骨組み」

この構図があることで、
次のCanva工程は「選ぶだけ」になります。

正直な注意点（体験談）

AIに全部決めさせない。判断基準は人間側に残す

ワイヤーフレームを軽視すると必ずやり直す

「かっこいい構図」は後からいくらでも作れる

ステップ4｜カンプ（ビジュアルデザイン）

このステップの役割は、デザインを完成させることではありません。
ここで行うのは、「このWebサイトは、どういう見た目の方向性で進めるか」を一度で決め切ることです。

ステップ3までで、

  • 情報の順番
  • 伝える内容
  • 各ページの役割

はすでに言語化されています。
つまりこの時点で必要なのは、それを壊さない見た目を最短で得ることです。

その目的に対して、私は Canva を選びました。
理由は単純で、CanvaのAIは
「Webサイトとして破綻しない平均点以上のデザイン」を
思考を挟まず、即座に複数案出してくれるからです。

Figmaのように細部を詰めるツールは、
・最終デザインを作るとき
・ブランドサイトを作るとき
には有効ですが、
今回のような検証目的・AI主体の制作では、明らかに過剰でした。

この工程を終えた時点での理想状態は、
「この雰囲気で、この構成のサイトを作る」という共通認識が自分の中で固まっていること。
そうなっていれば、次のノーコード工程では、迷いなくAIに指示を出せるようになります。

主用途：見た目の完成イメージ

  • Canva（推奨）
    → AIデザイン＋Web公開前提テンプレが強い
  • Figma
    → 本格派だが、今回はオーバースペック
「速く試す」ならCanva一択。Figmaは検証フェーズでは作業量が重荷になる

手順（実際にやったこと）

  1. Canvaにログインし、「Webサイト」を新規作成する
  2. テンプレート検索は使わず、AIデザイン機能（Magic Design）を選択する
  3. ステップ3で作成したトップページのワイヤーフレーム文章を、そのまま入力する
  4. サイトの目的とトーンを補足する短い説明文を追加する
  5. AIが生成した複数のデザイン案を一覧で確認する
  6. ワイヤーフレームの情報順を最も崩していない案を1つ選ぶ
  7. 配色や装飾は触らず、「全体の雰囲気」だけを確認して確定する

Canvaに渡した実際のプロンプト例

このWebサイトは、 AIだけでWebサイト制作に挑戦した体験談をまとめる検証ブログです。 ターゲットは、 Web制作に興味はあるが、コーディングはしたくない人です。 ・情報が上から順に理解できること ・派手すぎず、信頼感のあるトーン ・読みやすさを重視したWebサイトデザイン この内容をもとに、 Webサイトとして成立するデザイン案を作成してください。

ステップ5｜サイト生成（ノーコード × AI）

AIだけでWebサイトが公開までできるのか
という問いに、実際のアウトプットで答える段階です。

これまでのステップで、

  • 何を伝えるか
  • どんな構成か
  • どんな見た目か

をAIと整理してきました。
ここでは、その情報をノーコードツールに渡して、Webサイトとして成立させることが目的です。

候補として検討したのは、

  • Wix
  • Jimdo
  • Studio

でした。

Wixは無料プランがあり、初心者でも手を動かす負担が少ない点が強みです。
Jimdoも無料で始められるノーコードツールですが、AI生成の流れがややテンプレ寄りで修正が必要な箇所が増えました。
Studioはデザイン自由度が最も高く、美しいサイトが作りやすい反面、AIを主体に「テキストだけで完成させる」という今回の検証テーマには、判断・修正ポイントが多すぎるという実感がありました。

この比較を踏まえ、
無料で・AI主体で・公開まで持っていけるという観点で、私は Wixを本検証の主要ツールとして採用しました。

主用途：実際のWebサイトを作る

  • Wix
    → テキスト指示だけでサイト生成可（ADIが優秀）
  • Framer
    → AI生成の完成度はWixより高い場合あり
  • Webflow
    → ノーコードだが学習コスト高（今回は非推奨）
「検証ブログ」ならWixで十分。完成度より再現性を取ろう

手順（実際にやったこと）

  1. Wixに無料アカウントでログインし、「AIでサイトを作成」を選ぶ
  2. サイトの種類は「ブログ／情報サイト」を指定する
  3. ステップ1～4で決めた目的・構成・トップページ要素を文章で渡す
  4. 下層ページのタイトルや構成案をそのまま入力する
  5. AIが提示したサイト案をプレビューで一通り確認する
  6. 構成や文章が設計通りなら、そのまま確定する
  7. 公開前にモバイル表示だけ確認して公開する

Wixに渡した実際のプロンプト例

このWebサイトは、
AIだけでWebサイト制作に挑戦した体験談をまとめるブログです。

ターゲットは、
Web制作に興味はあるが、コーディングなしでサイトを作りたい人です。

・体験談ベースの記事構成
・情報の流れが分かりやすいトップページ
・信頼感ある色とフォント
・ブログ更新できる構造

これらを基準に、
Webサイトとして成立する構成を自動生成してください。

主要ノーコードツールの比較した体験談

Wix（無料）
テキスト入力だけで、サイト生成まで一気に進む。
判断ポイントが少なく、AI主体で完結しやすい。

Jimdo（無料）
テンプレベースが強いが、AI生成はやや指示が必要で、修正コストが上がる。

Studio（無料/有料）
デザイン表現は自由度が高いが、AIだけでサイト完成まで持っていくには、
細かい判断・手動の調整が多い。

実際にやってみて分かったこと（ポイント）

AIはサイト構成・初期デザイン案・ナビゲーション構成まで出してくれますが、
判断基準を持つことが最後に効くという体感がありました。

つまり、
AIが出したものを「修正する」のではなく、
設計どおりかどうかで取捨選択することが、最短の道でした。

このステップを終えた時点の状態

  • Webサイトが実際にURLを持って存在している
  • AIだけで作ったと言っても違和感の少ない完成度
  • あとは記事更新やSEO・改善を考える段階

ここまで来て初めて、
「AIだけでWebサイト制作は現実的だ」
という回答が出せる状態になりました。

ステップ6｜コピー・文章生成

このステップでやることは、
いわゆる「うまいコピーを書く」ことではありません。

目的はただ一つ、
トップコピー・説明文・CTAを“使える状態”で一気に揃えることです。

検証フェーズにおいて、
コピーに人間のセンスを持ち込むと、ほぼ確実に時間を浪費します。
言い回しに悩み、比較し、修正し、結局どれが良いのか分からなくなるからです。

今回のテーマは
「AIだけでWebサイト制作はどこまで成立するか」。
つまりここで必要なのは、
平均点以上で、誰が読んでも違和感のないコピーです。

この条件を最も満たしていたのが ChatGPT でした。
理由は明確で、
ペルソナ・目的・文字数を指定すれば、
トップコピーからCTAまで一気に揃うからです。

ChatGPTとJasperの使い分けについて

商用コピー特化AIとして Jasper も検討しました。
Jasperは確かに、
・広告
・セールス
・LP用コピー
には強いと感じます。

ただし今回は、

  • 日本語メイン
  • 検証ブログ
  • 情報提供型サイト

という前提のため、
ChatGPT単体の方が判断・調整コストが低いという結論になりました。

結論として、
日本語サイトの検証フェーズではChatGPTで十分です。

この工程で決めること／決めないこと

このステップで決めるのは、
「何を書くか」「どのくらいの長さか」だけです。

逆に、

  • 言葉のニュアンス
  • キャッチーさ
  • 独自性

は、この段階では不要です。
それらは公開後に、数字を見てから調整すべき要素だからです。

主用途：トップコピー、説明文、CTA

  • ChatGPT
    → ペルソナ指定＋文字数指定で即完成
  • Jasper
    → 商用コピー特化（英語向き）
コピーに人間の“センス”は不要。検証フェーズではAIの平均値が最適

手順（実際にやったこと）

  1. ChatGPTを開く
  2. ステップ1で作成したペルソナを貼り付ける
  3. トップコピー用、説明文用、CTA用に分けて指示する
  4. 文字数を必ず指定する
  5. 出力された文章を「修正せず」に採用する
  6. 違和感があれば、書き直しではなく再生成する

決定版プロンプト（トップコピー・説明文・CTA）

あなたはWebサイトのコピーライターです。

以下の条件で、
Webサイト用のコピーを作成してください。

【サイト概要】
AIだけでWebサイト制作に挑戦した体験談をまとめるブログ

【ターゲット】
Web制作に興味はあるが、コーディングはしたくない人

【作成するコピー】
・トップページのメインコピー（30文字以内）
・サイト全体の説明文（120文字前後）
・CTA文言（20文字以内）

【条件】
・誇張しすぎない
・初心者にも分かりやすい
・信頼感を重視する

このプロンプトだけで、
そのまま使える文章セットが揃いました。

実際にやってみて分かったこと（要点）

コピー生成において重要なのは、
「良い文章を出すこと」ではなく、
迷わないことでした。

AIの出力を

  • 直そうとしない
  • 比較しすぎない
  • センスを足さない

この割り切りができると、
コピー作成は数分で終わります。

このステップを終えた時点の状態

  • トップページのコピーがすべて埋まっている
  • 下層ページの説明文もAIで統一されている
  • CTAが「仮」ではなく「確定」している

この状態になれば、
Webサイトは「完成」に限りなく近づきます。

ステップ7｜SEO設計

このステップでは、検索流入を得るための最低限のSEO設計をAIで行う。対象はキーワード設計、見出し構造、タイトル・ディスクリプションなどのメタ情報であり、目的は「検索に乗る状態で素早く公開すること」である。

この段階でSEOを完璧にしようとすると、ほぼ確実に公開が遅れる。
競合調査、キーワード精査、網羅性の追求を始めると、検証記事であるにもかかわらず「作り込むフェーズ」に入ってしまうからだ。

今回のテーマは、
AIだけでWebサイト制作は成立するのかという検証であり、
SEOは成果を最大化する工程ではなく、検索に引っかかる状態を作る工程に過ぎない。

その目的に対しては ChatGPT で十分だった。
ChatGPTは、
・検索意図を踏まえたキーワード抽出
・記事構成に沿った見出し設計
・タイトルやディスクリプションの生成

を一気に処理でき、初期SEOとして必要な要素を漏れなく揃えてくれる。

一方、Surfer SEO は、
競合比較や網羅性チェックには非常に強力だが、
今回のような「まず出す」フェーズでは、
分析過多になりやすいという印象だった。

結論として、初期SEOの正解は明確で、
完璧を目指さず、検索意図に合った形で即公開すること。
この条件下では、ChatGPT単体が最も合理的だった。

主用途：検索流入を取るための最低限SEO

  • ChatGPT
    → キーワード抽出／見出し構造／メタ情報
  • Surfer SEO
    → 本気なら併用
初期SEOは「完璧」より「公開速度」。ChatGPTで十分。

手順

  1. ChatGPTを開く
  2. 記事テーマと想定読者を入力する
  3. 狙うべき検索キーワードを複数案出させる
  4. メインキーワードを1つ決める
  5. そのキーワード前提で見出し構造を生成させる
  6. SEOタイトルとメタディスクリプションを作成させる
  7. 過不足がなければ、そのまま採用する

使用したプロンプト

あなたはSEOに強いWeb編集者です。

以下の条件で、
この記事のSEO設計を行ってください。

【記事テーマ】
AIだけでWebサイト制作に挑戦した体験談

【想定読者】
Web制作に興味はあるが、コーディングはしたくない人

【やってほしいこと】
・狙うべき検索キーワードの候補を出す
・メインキーワードを1つ決める
・そのキーワードを前提にした見出し構造を作る
・SEOタイトル（60文字以内）を作る
・メタディスクリプション（160文字以内）を作る

【条件】
初心者向け
誇張しすぎない
体験談記事として自然な表現にする

このステップを終えた時点で、
記事は「検索対象として成立している」状態になる。

ここから先は、
順位を上げるための改善フェーズであり、
検証としてのWebサイト制作はすでに完結している。

ステップ8｜公開・改善

このステップでは、Webサイトを公開したあとに発生する修正・改善を行う。主用途はアクセス状況の把握、ユーザー行動の確認、そして「直すべきか・放置すべきか」の判断である。

AIだけでWebサイト制作を進めてきたが、唯一AIでは代替できない前提がある。
それは、公開されていないサイトにはデータが一切存在しないという事実だ。

どれだけ構想やSEOを考えても、
公開しなければ改善点は仮説のままで終わる。
AI時代のWeb制作で最も重要な判断は、
「まず出す」ことだった。

この工程で使ったのが Google Analytics と Hotjar である。
どちらも「分析ツール」だが、現在はAI的な補助機能を内包している。

Google Analytics（GA4）は、
単なる数値表示ではなく、
**自動インサイト（要約・異常検知・傾向提示）**を行う仕組みになっている。
完全な生成AIではないが、
「どこを見るべきか」をAIが示してくれる段階には入っている。

Hotjarも同様で、
ヒートマップや録画データを
AIが要約・分類する機能が追加されており、
人間がすべての行動ログを見る必要はない。

ここで重要なのは、
改善とは「直す作業」ではなく
判断の作業だということだ。

AIは
・どこで離脱しているか
・どこが読まれていないか
を提示する。
直すかどうかを決めるのは、人間の役割になる。

主用途：公開後の修正

  • Google Analytics
  • Hotjar
AI時代の正解は「作ってから考える」。未公開サイトに価値なし

手順

  1. Webサイトを公開する
  2. Google Analytics（GA4）を設定する
  3. 最低限の計測期間（数日〜1週間）を置く
  4. アクセス数、流入元、滞在時間を確認する
  5. 離脱が多いページを把握する
  6. Hotjarを導入し、ユーザー行動を可視化する
  7. 明らかに読まれていない箇所だけを修正対象にする
  8. 仮説だけの改善は行わない

改善フェーズでの体験談

公開後にやりたくなるのは、
・文章を直す
・デザインを変える
・構成をいじる
といった行為だが、
データなしでの改善は、ほぼ自己満足で終わる。

AI時代の正解は明確で、
作ってから考える。
未公開のサイトに、価値はない。

このステップを終えた時点で、

  • Webサイトは実在し
  • AIだけで作られ
  • 改善判断の材料も揃っている

という状態になる。

これで
「AIだけでWebサイト制作は成立するのか？」
という検証は、一通り完結する。

Top