ウェブサイト基本

情報この章の要点

会社の顔になる1〜数ページのサイトを、早くきれいに公開するのが本章です。フォーム処理や独自データベースを持つ業務ツールのように「育てていく」ものはアプリ（バイブコーディング）の領域です。

そもそも、いま作るべきか

手を動かす前に、1つだけ決めてください。このページを見た人に、何をしてもらいたいかです。

会社の信用を確かめてもらう（会社案内・プロフィール）
問い合わせ・予約・申込みをしてもらう（LP）
求人に応募してもらう（採用ページ）

答えが1つに絞れないうちは、まだ作るタイミングではありません。目的が複数あると、AIへの指示も構成もぼやけ、どの相手にも刺さらないページになります。まず1目的・1ページから始めて、必要になったら増やしてください。

すでにサイトがある場合も同じです。全面リニューアルをAIに頼む前に、「いまのサイトは目的の行動につながっているか」を先に点検するほうが、たいてい安上がりです。

AIで、どこまで作れるか

構成案・文章のたたき台・デザイン・コードまで、公開できる水準のものが一式そろいます。かつて制作会社に数十万円で頼んでいた内容の6〜8割は、AIとの対話だけで形になります。

ただし、AIが作れないものが2つあります。

あなたの事業の中身：強み・実績の数字・お客様の声・写真。ここを渡さないと、AIはどこにでもある一般論でページを埋めます
公開後の運用：誰がどう更新していくか。作って終わりのサイトは、数か月で「触れない古いページ」になります

言い換えると、AIに任せるのは「組み立て」で、材料と目的は人間の仕事です。この分担さえ守れば、ウェブサイトはAIでつくるジャンルの中でも費用対効果が高い部類に入ります。

どのツールから始めるか

ホームページやLPの制作は「誰が・何を目的に・その後どう更新するか」で選ぶツールがまったく変わります。まず以下の表で自分の状況を確認しましょう。

こういうときは	おすすめツール
Claudeで構成からデザインまで一気通貫にしたい、または自由度重視でコードを直接書きたい	1. ChatGPT／Claude／Gemini 直書き（Claude Designも含む）
とにかく早く形にしたい（プロトタイプ・提案資料の仮サイト等）	2. AIビルダー（v0・bolt.new・Lovable）
中小企業の会社サイトを自分で更新したい（非エンジニアが自走更新）	3. 国内AI搭載LPビルダー（ペライチ・Wix・ジンドゥー）
ブログ・お知らせを継続的に足していきたい（拡張性・保守込みで自走）	4. WordPress＋AI
リサーチも一緒に頼みたい（調査から一気通貫でサイト化）	5. Genspark
要望を伝えるだけで自律的に一式作ってほしい（Webアプリ・モバイルアプリへの拡張も視野）	6. Manus

迷ったら、テンプレートの範囲内で手離れよく更新したいなら3、拡張性も欲しいなら4、まず形を見たいだけなら1、と覚えておけば大きく外しません。各ツールの具体的な使い方とプロンプト例は事例集にまとめています。

「サーバー」への向き合い方も、ツールによって大きく違います。ペライチ・Wix・ジンドゥーはサーバーごとツールに含まれているので、公開のために別途何かを用意する必要はありません。v0・bolt.new・Lovableは生成したその場でワンクリック公開まで面倒を見てくれます。一方、ClaudeやChatGPTに直接コードを書かせた場合は、Netlify・Vercel・GitHub Pagesのような無料ホスティングサービスへ自分でアップロードする一手間が入ります。WordPressだけは毛色が違い、レンタルサーバーの契約（またはWordPress.comのようなホスティング込みプランの利用）が前提になります。

公開までの最短ルート

どのツールを選んでも、進め方は同じ5手順です。

目的と相手を1行で書く：「誰に・何をしてもらうページか」。これが全指示の土台になります
材料を書き出す：事業内容・強み・実績の数字・お客様の声・使いたい写真。箇条書きの雑なメモで構いません
AIに構成案から作らせる：いきなり完成品を求めず、まずセクション構成を提案させて、順番と過不足を自分で判断します
文章を自分の言葉に差し替える：AIの文言はたたき台です。とくにキャッチコピーと実績は、必ず自分の言葉と実数に置き換えます
公開前チェックをして出す：独自ドメイン・SSL・タイトルタグの3点確認

このうち、AIが手を動かして作るのは3だけです。1・2・4は人間の仕事ですが、AIが無関係というわけではありません。材料の整理や言葉の言い換えの壁打ち相手として、補佐的に使うことはできます。ただし最終的な判断（何を目的にするか、何を材料として渡すか、AIの文言をどう自分の言葉に直すか）は必ず自分で下してください。1・2・4に時間をかけるほど、仕上がりは良くなります。

実例｜当サイトの制作過程

いまあなたが読んでいるこのサイト自体が、私がAIと作ったウェブサイトです。デザインの参照イメージを言葉で伝え、構成・コード・細部の調整まで、すべてAIとの対話で組み上げました。外注はしていません。

進め方は本章の5手順そのままでした。「誰に・何をしてもらうページか」を先に1行で決め（AI活用を学ぶ人に、順路を示す）、材料（原稿・図解）は自分で用意し、AIには組み立てを任せる。デザインの気に入らない箇所は対話で直していく——この往復が実務の中心です。

なお、このサイトは読了スタンプやパスワード保護まで持つ「育てていく」タイプなので、厳密にはアプリの領域に半歩入っているかもしれません。1〜数ページの会社案内やLPなら、ここまでの作り込みは不要です。同じ進め方のまま、もっと短時間で公開まで行けます。

全体の心構え

「1ページ・1目的」から始める
- 複数の目的（採用・商品紹介・お問い合わせ・ブログ）を1つのサイトに全部詰め込もうとすると、AIへの指示も構成もぼやけます。まずは「このページで何をしてもらいたいか」を1つに絞り、そこから広げましょう。
公開前に独自ドメイン・SSL・SEOの基本を確認する
- どのツールを使っても、「ツールのサブドメインのまま公開していないか」「https://になっているか（多くのツールは自動対応ですが、独自ドメインの紐付けは手動作業が必要な場合があります）」「タイトルタグ・メタディスクリプションが空欄のままになっていないか」の3点は公開前に必ず確認してください。ここを飛ばすと、せっかく作ったサイトが検索にもSNSシェアにも弱いまま公開されてしまいます。
「誰が更新するか」を制作前に決めておく
- AIビルダーで作った凝ったサイトを、事業者本人が日常的に更新できるとは限りません。制作段階で「今後の更新は誰が・どのツールで行うか」を決めておくと、公開後に「触れないサイト」になる事態を防げます。特に支援先に提案する場合は、この観点を先に伝えることが信頼につながります。

実践｜最初の一歩

例コピペで試す：材料整理から構成案まで

「1ページのWebサイト（LP）を作る準備を手伝ってください。私の事業は［業種・サービス内容］、ページの目的は［問い合わせ獲得など］、相手は［ターゲット］です。まず、①このページに載せるべき材料のリスト（私が用意するもの）と、②セクション構成のたたき台を出してください。制作はまだ始めないでください。」

材料リストが出たら、埋められるところを埋めて次の対話に進む。それだけで、事例集のどのツールに持ち込んでも通用する「指示の土台」ができあがります。

具体的なツール別の作り方は事例集へ。