こんにちは、Web春のマサトです。
メルマガ登録ありがとうございます。約束どおり、特典の教科書をお渡しします。
AIでWebサイトを作るための基礎知識って、実は全部ネットに転がっています。ただ、散らばりすぎていて集めると丸一日かかる。しかも半分は古い情報です。
なので、「これだけ知っていれば手が動く」という基礎だけを1ページに詰め込みました。上から順に読めば、道具の選定から公開までの全体像がつながるようにしてあります。ブックマークして、作りながら何度でも戻ってきてください。
全体像｜AI時代のWeb制作は6工程
まず地図から。
AIが来ても、Web制作の工程そのものは昔から変わっていません。変わったのは各工程にかかる時間と、一人でカバーできる範囲です。昔なら4〜5人のチームでやっていた範囲を、今は一人で持てます。
ここで一つだけ覚えておいてほしいのは、①の目的整理だけはAIに任せないということ。「誰に・何のためのサイトか」を決めるのはあなたの仕事です。ここが曖昧なまま進むと、AIはそれっぽいが誰にも刺さらないサイトを量産します。逆にここさえ固まれば、②以降はAIがゴリゴリ進めてくれます。
AIの選定｜何をどれに任せるか
「どのAIが一番いいですか？」とよく聞かれますが、質問の立て方を変えましょう。正しくは「どの作業をどのAIに割り当てるか」です。
覚え方はシンプルで、コードを書く作業は全部Claude、画像はChatGPT、調べ物はGemini。これだけです。
全部に課金する必要はありません。最初に課金するならClaude一択です。理由は単純で、サイト制作では「コードを書ける・直せる」ことがそのまま成果になるから。僕も制作の主力は完全にClaudeです。
そしてここが重要なんですが、ブラウザのチャット画面にコードを貼ってもらう方式は、ファイルが増えた瞬間に破綻します。コピペ地獄になる。そこで使うのがClaude Code——手元のフォルダを直接読み書きしてくれるツールです。「サイト一式を作る・直す」ならこれ以外の選択肢はほぼありません。
Claude Codeの入れ方
Claude Codeは、基本はターミナル（あの黒い画面）で動きます。
「ターミナルは怖い」——わかります。先に言っておくと、いまはClaude Codeのデスクトップアプリ（Mac / Windows）があるので、黒い画面が苦手な人はアプリから始めるのが便利です。普通のアプリの見た目で操作できて、中身は同じClaude Code。claude.aiのダウンロードページから入れられます。
ここではターミナル版の手順を書いておきます。どちらで始めても、頼み方は変わりません。
手順1｜プランを用意する。Claudeのアカウントを作って、有料プラン（Pro）に加入します。Claude Codeはプランに含まれているので、追加の従量課金なしで使い始められます。毎日ガッツリ使うようになってから上位プラン（Max）を検討する、の順で十分。
手順2｜インストールする。Macならアプリ「ターミナル」を開いて、下のコマンドを1行貼り付けて実行。
curl -fsSL https://claude.ai/install.sh | bash
WindowsならPowerShellでこちら。
irm https://claude.ai/install.ps1 | iex
手順3｜起動してログインする。作業用フォルダを作って移動し、claudeと打つだけ。初回はブラウザが開くので、手順1のアカウントでログインすれば準備完了です。
mkdir mysite cd mysite claude
あとは日本語で頼むだけ。最初の一言はこれでいきましょう↓
「このフォルダに、会社案内の1ページサイトを作って」
数分後、目の前でサイトが生まれます。この瞬間を一度体験すると、もう戻れません。
公開先はCloudflare一択
作ったサイトを世界に公開する場所（ホスティング）は、Cloudflareを使ってください。僕はWebflow時代からずっと使い込んでいますが、高性能なのに無料すぎて心配になるレベルです。
推す理由は3つ↓
- 無料枠が実用レベル。静的なサイトなら無料枠のまま本番運用できます。転送量課金がないので、アクセスが増えても請求に怯えなくていい
- 速い。世界中に配信網があって、日本からのアクセスも高速
- あとから拡張できる。フォーム・データベース・画像置き場（Workers/D1/R2）まで同じ場所に足せる。サイトが育っても引っ越し不要
細かい画面操作は変わることがあるので、幹だけ覚えてください。アカウントを作る → npx wrangler deploy → 発行されたURLで確認 → 独自ドメインを割り当てる。以上です。
手順どおりに進まないときの裏技を教えます。エラー文をそのままClaude Codeに貼って「Cloudflareに公開したい。このエラーを直して」と頼む。これが最短です。設定ファイルの作成からデプロイまで、全部AIが代行してくれます。
工程ごとのAIへの頼み方
道具が揃ったら、第1章の工程に沿って進めます。各工程で「頼み方の型」を1つずつ持っておくと迷いが消えるので、コピペで使える形で置いておきます。
サイトマップを作る↓
業種と目的を伝えるので、必要なページの一覧を提案して。 「〇〇業。目的は問い合わせ獲得。想定読者は△△」 多すぎる構成は削って、最小構成とその理由も教えて。
デザイン案を出させる↓
トップページのデザイン案を、雰囲気の違う3案HTMLで作って。 参考にしたいサイトのURLは〇〇。 色は会社のロゴに合わせて、フォントは日本語で読みやすいものを。
デザインのコツは、ゼロから言葉で説明しないこと。3案出させて、1案選んで、「この案をベースにここだけ変えて」と往復する。見て選ぶほうが、語るより10倍早く良いものに着地します。
実装させる↓
選んだデザインで全ページを実装して。 ・スマホ表示を必ず確認しながら進めて ・画像は仮でよいので枠を用意して ・ページ間のリンクを貼って
うまくいかないときの原則も置いておきます。長い指示を1回で伝えるより、短い指示で回数を回す。そして「なんかダサい」ではなく「余白が狭い」「色が強すぎる」まで具体語で言う。AIは曖昧な不満は直せませんが、具体的な不満は一瞬で直します。
公開前の検品チェックリスト
ここ、飛ばす人が多いんですが——AI制作の品質を分けるのは構築ではなく検品です。プロと素人の差が一番出る工程と言ってもいい。
公開前に最低限、下のリストを回してください。そのままClaude Codeに貼って「全部チェックして」と頼める形にしてあります。
- スマホ（幅375px）・タブレット・PCの3サイズで崩れがないか
- 全ページのリンクをクリックして、切れているものがないか
- 画像が重すぎないか（1枚500KBを超えていたら圧縮）
- ページタイトルと説明文（title / meta description）が全ページに入っているか
- SNSでシェアしたときの画像（OGP）が設定されているか
- 会社名・住所・電話番号の表記が全ページで揃っているか
- Lighthouseでパフォーマンスとアクセシビリティを測ったか
最後のLighthouseはChromeに内蔵されている無料の採点ツールです。ページを開いて右クリック→「検証」→「Lighthouse」タブで実行できます。90点台に乗っていれば十分な水準。
公開後の運用｜更新・メール・計測
サイトは公開した日がスタートです。放置されたサイトは、無いのと同じ。運用で必要になるのは次の3つの仕組みです。
① 更新の仕組み（CMS）。お知らせやブログを毎回コードで書き足すのは、断言しますが続きません。記事を管理画面から更新できる仕組み＝CMSを入れましょう。AI制作のサイトには、AIと組み合わせて使える軽いCMSが向いています。うちでは、AI時代向けに設計したヘッドレスCMS「ハルCMS」を作って提供しています（無料から使えます）。
② 連絡の仕組み（メール）。問い合わせフォームの通知や読者へのメール配信も運用の柱です。メール配信には「HaruMail」のような配信サービスを使うと、自動返信から一斉配信まで管理できます。
③ 計測の仕組み（GA4）。Google Analytics 4（無料）を入れると、どのページが読まれているか・問い合わせが何件あったかを数字で追えます。導入はClaude Codeに「GA4のタグを全ページに入れて。測定IDは〇〇」と頼めば数分。ポイントは公開初日に入れることです。あとから入れても、過去の数字は戻ってきません。
つまずき用語ミニ辞典
作業中に知らない単語が出てきたら、ここに戻ってきてください。
| ドメイン | サイトの住所（例: webharu.com）。年額1,000〜2,000円程度で借りる |
|---|---|
| DNS | ドメインと実際のサーバーを結びつける電話帳。ドメイン設定でいじる場所 |
| ホスティング | サイトのファイルを置いて公開してくれる場所。この教科書ではCloudflare |
| デプロイ | 手元で作ったサイトを公開環境に反映すること |
| Git / GitHub | ファイルの変更履歴を保存する仕組みと、その置き場。事故ってもいつでも巻き戻せる保険 |
| 静的サイト | あらかじめ作ったHTMLをそのまま配る方式。速い・安い・壊れにくい。まずはこれで十分 |
| CMS | 記事やお知らせを管理画面から更新できる仕組み |
| レスポンシブ | 画面幅に合わせてレイアウトが変わる作り。スマホ対応のこと |
| meta / OGP | 検索結果やSNSシェアに出るタイトル・説明・画像の設定 |
| SSL（https） | 通信の暗号化。Cloudflareなら自動で有効になる |
| Lighthouse | Chrome内蔵のサイト採点ツール。速度・アクセシビリティ・SEOを100点満点で測る |
| GA4 | Googleの無料アクセス解析。訪問数・流入元・成果を計測する |
次の一歩
ここまでが「調べれば出てくるけど、調べると丸一日かかる」基礎の地図です。
で、ここから先——実際の法人案件でどう使っているか、何で失敗して何が通用したか、SaaSをどう作ってどう売っているか——は、メルマガ本編とWeb春の発信で毎回見せていきます。教科書の続きは、現場です。
- メルマガ本編: マサト｜Web春（この特典の続きが届きます）
- ブログ: Web春の制作ノート（SEO・AI活用の実測データ）
- 法人のサイト制作のご相談: お問い合わせ
それでは、良い制作を。
Web春のマサトでした。