AIを使って、ホームページやブログ、LP、Webアプリを作れる時代になってきました。

ChatGPT、Claude Desktop、Claude Code、Codex、Google Antigravityなどを使えば、昔よりもかなり少ない知識でWeb制作に挑戦しやすくなっています。

ただし、AIがあるからといって、

「何も知らなくても全部自動で完成する」
「AIに丸投げすれば売れるサイトができる」
「コードがわからなくても本番公開まで安全にできる」

というわけではありません。

AIはとても便利ですが、使い方を間違えると、途中で迷子になったり、見た目だけのサイトになったり、後から修正できなくなったりすることもあります。

この記事では、AIでWeb制作を始める前に知っておきたいことを、初心者向けにわかりやすくまとめます。

目次
  1. AIでWeb制作は本当にできるのか？
  2. ただし、AIは魔法ではない
  3. 最初に決めるべきこと
  4. 1. 誰に向けたサイトなのか
  5. 2. 何をしてほしいサイトなのか
  6. 3. どんなページが必要なのか
  7. 4. デザインの雰囲気
  8. AIでWeb制作するときに使えるツール
  9. Claude Desktop
  10. Claude Code
  11. ChatGPT
  12. Gemini
  13. Codex・Google Antigravity
  14. 初心者はまず「1ページだけ」作るのがおすすめ
  15. AIにお願いするときのコツ
  16. AIで作ったサイトをそのまま公開しない
  17. デザインだけでなく「導線」も大事
  18. スマホ表示は必ず確認する
  19. セキュリティや個人情報には注意する
  20. Web制作でAIに任せやすいこと
  21. 人間が確認すべきこと
  22. AIでWeb制作を始めるおすすめ手順
  23. 最初に作るなら自己紹介ページがおすすめ
  24. まとめ

AIでWeb制作は本当にできるのか？

結論から言うと、AIでWeb制作はできます。

特に、次のようなものはAIと相性が良いです。

  • 自己紹介ページ
  • サービス紹介ページ
  • お店のホームページ
  • ブログのトップページ
  • LP
  • お問い合わせページ
  • 簡単な管理画面
  • 小さな業務アプリのたたき台

AIに相談すれば、文章、構成、デザイン案、コード、修正方針まで一緒に考えられます。

私自身も、最初はClaude Codeでアプリのデザインだけ作るつもりでした。

でも実際に触っているうちに、

「これ、コードも書けるんじゃないか？」

となり、勤怠管理アプリの形がかなり出来上がりました。

この経験からも、AIを使ったWeb制作やアプリ開発は、かなり現実的になってきていると感じています。

ただし、AIは魔法ではない

AIでWeb制作を始める前に、まず知っておきたいのは、AIは魔法ではないということです。

AIに、

いい感じのホームページを作ってください

とお願いすれば、何かしらは作ってくれます。

でも、その「いい感じ」が自分の思っているものと同じとは限りません。

AIは、こちらが伝えた内容をもとに作業します。

つまり、指示があいまいだと、出てくるものもあいまいになります。

AIをうまく使うには、

  • 誰向けのサイトなのか
  • 何を伝えたいのか
  • どんな雰囲気にしたいのか
  • どんな機能が必要なのか
  • 何を優先するのか

をある程度整理しておく必要があります。

最初に決めるべきこと

AIでWeb制作を始める前に、まず以下を決めておくと進めやすいです。

1. 誰に向けたサイトなのか

最初に決めたいのは、誰に向けたサイトなのかです。

例えば、同じホームページでも、

  • 飲食店向け
  • 美容室向け
  • 個人事業主向け
  • AI初心者向け
  • 企業向け
  • 採用向け
  • ブログ読者向け

では、必要な内容もデザインも変わります。

AIに指示するときも、

初心者向けにしてください

だけではなく、

AIに詳しくない個人事業主向けに、やさしい雰囲気のサービス紹介ページを作ってください

のように伝えると、かなり精度が上がります。

2. 何をしてほしいサイトなのか

次に大事なのは、サイトの目的です。

ホームページは、ただ見た目を作ればいいわけではありません。

例えば、

  • お問い合わせしてほしい
  • 予約してほしい
  • 商品を購入してほしい
  • noteを読んでほしい
  • ココナラに誘導したい
  • メール登録してほしい
  • 店舗に来てほしい
  • 信頼感を持ってほしい

など、目的があります。

目的が決まっていないと、AIも何を優先して作ればいいのかわかりません。

Sato Labの場合なら、

Claude DesktopやClaude Codeに興味がある初心者に、AI活用を始めてもらうためのブログです。
最終的にはnoteやココナラ、SATO Worksへの導線も作りたいです。

のように伝えると、AIも方向性を合わせやすくなります。

3. どんなページが必要なのか

Webサイトを作る前に、必要なページを整理しておくと便利です。

例えば、個人ブログなら、

  • トップページ
  • プロフィール
  • お問い合わせ
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • カテゴリーページ
  • 記事ページ

サービスサイトなら、

  • トップページ
  • サービス内容
  • 料金
  • よくある質問
  • 実績
  • お問い合わせ
  • プライバシーポリシー

お店のサイトなら、

  • トップページ
  • メニュー
  • 店舗情報
  • アクセス
  • 写真
  • 予約・お問い合わせ

などです。

AIにいきなり「サイトを作って」と言うより、先にページ構成を整理してから進める方が失敗しにくいです。

4. デザインの雰囲気

AIでWeb制作をするときは、デザインの雰囲気も伝えた方がいいです。

例えば、

  • シンプル
  • やさしい
  • かわいい
  • 信頼感がある
  • ビジネス向け
  • 高級感がある
  • 初心者向け
  • 親しみやすい
  • 余白多め
  • スマホ重視

などです。

「かっこよくして」だけだと、人によってイメージが違います。

例えば、Sato Labなら、

AI初心者向けなので、難しすぎず、やさしく親しみやすい雰囲気にしてください。
白をベースに、見出しは読みやすく、スマホでも見やすいデザインにしてください。

のように伝えるとよいです。

AIでWeb制作するときに使えるツール

AIでWeb制作をする場合、使うツールはいくつかあります。

初心者向けに分けると、こんな感じです。

Claude Desktop

Claude Desktopは、初心者がAIでWeb制作を始める入口として使いやすいです。

いきなりコードを書かせるというより、

  • どんなサイトを作るか相談する
  • 必要なページを整理する
  • 文章を作る
  • デザインの方向性を決める
  • Claude Codeに渡す指示を作る
  • エラー内容を相談する

といった使い方に向いています。

初心者は、まずClaude DesktopでWeb制作の全体像を整理するのがおすすめです。

Claude Code

Claude Codeは、実際にファイルを作ったり、コードを書いたり、修正したりする段階で使いやすいです。

例えば、

  • HTMLやCSSを作る
  • Reactの画面を作る
  • ボタンやフォームを修正する
  • スマホ表示を調整する
  • エラー原因を探す
  • 既存のプロジェクトを修正する

といった作業に向いています。

ただし、Claude Codeは開発寄りのツールなので、初心者はいきなり使うより、Claude Desktopで作業内容を整理してから使う方が安全です。

ChatGPT

ChatGPTは、文章作成やアイデア整理に使いやすいです。

例えば、

  • サイトのキャッチコピーを考える
  • サービス説明文を作る
  • ブログ記事を書く
  • お問い合わせ文を整える
  • SNS投稿文を作る
  • AIへの指示文を作る

といった使い方ができます。

Web制作の前段階でかなり役立ちます。

Gemini

Geminiは、Google系サービスとの相性が良いので、調べものや情報整理に使いやすいです。

例えば、

  • 競合サイトの調査
  • 記事構成の整理
  • Googleドキュメントとの組み合わせ
  • NotebookLMとの併用
  • 長い資料の要約

などです。

Web制作で調査や情報整理をしたい場合に使いやすいです。

Codex・Google Antigravity

CodexやGoogle Antigravityは、AIを使って開発作業を進めたい人向けのツールです。

Claude Codeと同じように、Web制作やアプリ開発に活用できます。

ただし、初心者が最初から全部使う必要はありません。

まずはClaude DesktopやChatGPTで整理し、Claude Codeなどで小さく作ってみる。

慣れてきたらCodexやGoogle Antigravityも試す、くらいの順番で十分です。

初心者はまず「1ページだけ」作るのがおすすめ

AIでWeb制作を始めるなら、最初から大きなサイトを作ろうとしない方がいいです。

最初は、1ページだけで十分です。

例えば、

  • 自己紹介ページ
  • サービス紹介ページ
  • お問い合わせページ
  • 商品紹介ページ
  • お店の案内ページ
  • 簡単なLP

このくらいから始めると、流れを覚えやすいです。

いきなり、

予約機能つきのサイトを作ってください
会員登録できるWebサービスを作ってください
決済機能つきのECサイトを作ってください

と始めると、かなり難しくなります。

まずは1ページ作る。

次にフォームを追加する。

その次にブログや管理画面を考える。

このように段階を分けるのがおすすめです。

AIにお願いするときのコツ

AIでWeb制作をするときは、お願いの仕方がとても大事です。

例えば、

ホームページを作ってください

だけだと、情報が足りません。

それよりも、次のように伝えるとよいです。

個人向けのAI活用サポートのサービス紹介ページを作りたいです。
読者はAI初心者です。
目的はお問い合わせにつなげることです。
やさしい雰囲気で、スマホでも見やすくしてください。
必要な構成、見出し、文章、デザイン案を出してください。

このように、

  • 何を作るか
  • 誰向けか
  • 目的は何か
  • 雰囲気はどうするか
  • 何を出してほしいか

を伝えると、かなり使いやすい回答になります。

AIで作ったサイトをそのまま公開しない

AIでWeb制作をするときに注意したいのは、AIが作ったものをそのまま公開しないことです。

AIが作った文章やコードは、必ず確認しましょう。

特に確認したいのは、

  • 文章に間違いがないか
  • 誤字脱字がないか
  • 表現が自分らしいか
  • スマホで見やすいか
  • ボタンやリンクが動くか
  • お問い合わせ先が合っているか
  • 個人情報を載せすぎていないか
  • 著作権的に問題がないか
  • セキュリティに問題がないか

です。

見た目がきれいでも、リンクが間違っていたり、古い情報が入っていたりすると困ります。

AIはたたき台を作るのが得意ですが、最終確認は人間がやる必要があります。

デザインだけでなく「導線」も大事

Web制作では、見た目のデザインも大事です。

でも、それ以上に大事なのが導線です。

導線とは、読者に次に何をしてもらうかの流れです。

例えば、

  • 記事を読む
  • 関連記事を見る
  • お問い合わせする
  • noteを見る
  • ココナラを見る
  • サービス内容を見る
  • 申し込む

という流れです。

ただきれいなサイトを作っても、読者が次に何をすればいいかわからなければ、成果につながりにくいです。

Sato Labなら、記事の最後に、

  • 関連記事へ誘導
  • noteへ誘導
  • ココナラサポートへ誘導
  • SATO Worksへの相談導線

を作ることで、ブログ全体の意味が強くなります。

AIにデザインをお願いするときも、

このページを読んだ人が、最後にお問い合わせしやすい導線を考えてください。

のように伝えるとよいです。

スマホ表示は必ず確認する

今のWebサイトは、スマホで見られることが多いです。

そのため、AIで作ったページも必ずスマホ表示を確認しましょう。

パソコンではきれいに見えても、スマホでは、

  • 文字が小さい
  • ボタンが押しにくい
  • 画像が大きすぎる
  • 横にはみ出している
  • 余白が変
  • メニューが見づらい

ということがあります。

AIに最初から、

スマホで見やすいデザインにしてください。
ボタンは押しやすく、文字は読みやすくしてください。

と伝えておくのがおすすめです。

セキュリティや個人情報には注意する

AIでWeb制作をするときは、セキュリティや個人情報にも注意が必要です。

特に、

  • お問い合わせフォーム
  • ログイン機能
  • 会員登録
  • 予約機能
  • 決済機能
  • 管理画面
  • 顧客情報を扱う機能

などを作る場合は慎重に進めましょう。

AIがコードを書けるからといって、そのまま本番で使って安全とは限りません。

最初は、個人情報を扱わない簡単なページから始めるのがおすすめです。

本格的に仕事で使うWebアプリを作る場合は、認証、権限管理、データ保存、バックアップなども考える必要があります。

Web制作でAIに任せやすいこと

AIに任せやすい作業は、次のようなものです。

・サイト構成の案出し
・キャッチコピー作成
・見出し作成
・文章作成
・デザイン案の作成
・HTML/CSSのたたき台作成
・ボタンやカードのデザイン案
・スマホ対応の修正案
・エラー内容の説明
・作業手順の整理

こうした作業は、AIと相性が良いです。

人間が確認すべきこと

逆に、人間が必ず確認すべきこともあります。

・掲載内容が正しいか
・サービス内容に誤りがないか
・料金や条件が合っているか
・個人情報を載せすぎていないか
・お問い合わせ先が正しいか
・リンクが正しく動くか
・スマホで見やすいか
・本番公開して問題ないか
・著作権や規約に問題がないか
・セキュリティ上危ない部分がないか

AIに作ってもらうことと、人間が確認することを分けると、安全に進めやすくなります。

AIでWeb制作を始めるおすすめ手順

初心者がAIでWeb制作を始めるなら、次の順番がおすすめです。

1. Claude DesktopやChatGPTで作りたいサイトを相談する
2. 誰向けのサイトか決める
3. サイトの目的を決める
4. 必要なページを整理する
5. まず1ページだけ作る
6. 文章とデザインを整える
7. スマホ表示を確認する
8. リンクやボタンを確認する
9. 問題がなければ公開する
10. 反応を見ながら改善する

最初から全部完成させようとしなくて大丈夫です。

まずは小さく作り、少しずつ改善していくことが大切です。

最初に作るなら自己紹介ページがおすすめ

初心者がAIでWeb制作を始めるなら、最初は自己紹介ページがおすすめです。

理由は、内容がわかりやすいからです。

自己紹介ページなら、

  • 名前
  • 何をしている人か
  • 好きなこと
  • できること
  • 発信している内容
  • お問い合わせ先

くらいで作れます。

AIにお願いするなら、例えばこうです。

初心者向けに、シンプルな自己紹介ページを作りたいです。
内容は、名前、プロフィール、好きなこと、できること、お問い合わせボタンです。
白をベースに、やさしく親しみやすいデザインにしてください。
スマホでも見やすくしてください。

自己紹介ページを作るだけでも、AIでWeb制作する流れを体験できます。

まとめ

AIを使えば、初心者でもWeb制作に挑戦しやすくなっています。

Claude Desktop、ChatGPT、Claude Codeなどを使えば、サイト構成、文章作成、デザイン案、コード作成、エラー相談まで、かなり幅広く手伝ってもらえます。

ただし、AIは魔法ではありません。

うまく使うには、

  • 誰向けか決める
  • 目的を決める
  • 必要なページを整理する
  • 最初は小さく作る
  • AIに具体的に指示する
  • スマホ表示を確認する
  • 最終確認は人間がやる

ことが大切です。

最初から大きなサイトや複雑なWebアプリを作ろうとしなくて大丈夫です。

まずは1ページだけ作ってみる。

そこでAIの使い方に慣れる。

少しずつ改善していく。

この流れが、初心者には一番わかりやすいと思います。

Sato Labでは、これからもAIを使ったWeb制作やアプリ開発の始め方を、初心者向けにわかりやすく発信していきます。

AI Web制作 AI活用 Claude Code Claude Desktop Web制作
一人で設定するのが不安な方へ

Claude DesktopやClaude Codeは便利ですが、最初の導入や使い方でつまずく方も多いです。

「どこから始めればいいかわからない」
「黒い画面が怖い」
「自分のパソコン環境で合っているか不安」
「AIにどう指示すればいいかわからない」

そんな方向けに、画面共有で一緒に進めるサポートも準備しています。

まずは無料記事で試してみて、難しそうであれば個別サポートも活用してください。

相談する