ウェブサイト 事例集

1. ChatGPT / Claude / Gemini に直接HTML/CSSを書かせる

事例集の「ダッシュボード」の項目と近い作り方ですが、目的は業務ツールではなく「静的な1枚LPを公開する」ことです。ノーコードツールを挟まず、ChatGPT・Claude・Gemini といったチャット製品に直接HTML/CSSを書かせ、それをそのまま公開します。1枚のLPをコードごと出力する用途では各社に大きな差はないので、使い慣れたものから始めてください。Genspark・Manusのような、リサーチ〜コーディングまで手がけるAIワークスペース／エージェントも同じ用途で使えますが、狙いが「1枚のLPを出力する」ことである以上、格別に優れているわけではありません。

📌 代表的なユースケース

• セミナー・キャンペーンの短命LP: 開催期間が終われば役目を終える告知ページ。ツールの操作を覚えるより、コードをそのままもらって公開する方が速い場合。
• 自分の情報発信の名刺代わりのページ: プロフィール・実績・お問い合わせ先だけをまとめた、更新頻度の低い1枚サイト。
• ノーコードツールの制約を超えたい場面: 既製ツールでは実現しづらい細かいレイアウト・動きを、直接コードで指定したい場合。

💡 指示のコツ

まずは静的な1枚HTMLで完成イメージを固めてから、必要であれば画像やお問い合わせフォームの接続を追加していくのがスムーズです。

⚠️ つまずきやすいポイント

• 「作れる」と「公開できる」は別の話: コードができても、それをインターネット上に公開する作業（ホスティング）が別途必要です。Netlify・Vercel・GitHub Pagesなどの無料ホスティングサービスにファイルをアップロードする手順を、コードと合わせてAIに聞いておきましょう。
• 独自ドメインとSSLは公開時にセットで検討する: 無料ホスティングのままだと発行されるURLが xxxx.netlify.app のような無機質な文字列になります。名刺やSNSに載せる前提なら、独自ドメインの取得とSSL（https://）化まで済ませてから案内するのが最低限のマナーです。多くのホスティングサービスはSSLを自動発行しますが、独自ドメインの紐付け設定は手動で行う必要があります。
• フォームの送信先がない: 静的HTMLだけでは「お問い合わせフォーム」は見た目だけで、送信先の処理がありません。Googleフォームへのリンクに差し替える、またはFormspreeのような外部フォームサービスと連携するなど、送信先を別途用意する必要があります。

2. AIビルダー（v0・bolt.new・Lovable）

プロンプト1つで、デザインからコードまで一式を生成してくれるツール群です。Vercel社の「v0」、StackBlitz社の「bolt.new」、「Lovable」が代表格で、いずれもチャット欄に要望を書くと、動くWebサイト（またはWebアプリ）のコードとプレビューがその場に立ち上がります。

📌 代表的なユースケース

• 提案書に載せる仮サイトのモック: クライアントへの提案時に「イメージはこんな感じです」と見せるための試作サイトを、打ち合わせの合間の数分で作る。
• サービス紹介LPのたたき台: 新サービスのコンセプトを伝えると、ヒーローセクション・特徴紹介・料金表・お問い合わせフォームまでを一式で生成し、そこから文言や配色を直していく。
• 社内向け簡易ツールの導入: LPだけでなく、フォーム入力→一覧表示のような簡単なWebアプリのたたき台も同じ流れで作れる（ここから先を育てたい場合はアプリ（バイブコーディング）の領域に近づく）。

💡 指示のコツ

最初から完成形を求めず、「まずページ構成（セクション）を提案して」→「その構成でヒーローセクションだけ作って」と、段階を分けると、狙った仕上がりに近づきやすくなります。

⚠️ つまずきやすいポイント

• クレジット（生成回数）の消費: v0・bolt.new・Lovableともに無料枠は少なく、1回の生成・修正指示ごとにクレジットを消費します。無料枠だけで完成形まで持っていくのは難しいと考えておいた方が安全です（2026年7月時点。料金体系は各社とも改定が続いているため、着手前に最新の料金ページを確認してください）。
• 公開後の運用は別問題: これらのツールは「生成」と「デプロイ（公開）」までは速いものの、その後の文言修正・画像差し替えを誰が担当するかは別途決めておく必要があります。エンジニアでない担当者が日常的に更新する前提なら、後述の「国内AI搭載LPビルダー」や「WordPress＋AI」の方が向いていることが多いです。

3. 国内中小企業向けAI搭載LPビルダー

診断士・経営コンサルタントが支援先の中小企業・個人事業主にサイト制作を薦める場面では、このカテゴリが最も実務に直結します。ペライチ・Wix（AI Website Builder）・ジンドゥーAIビルダーは、いずれも「質問に答える」「キーワードを入力する」だけでAIが構成・文章・配色までたたき台を作ってくれる、日本の中小企業で定番の非エンジニア向けツールです（ペライチは国産、ジンドゥーはドイツ発・日本語対応が充実、Wixは海外製・日本語UIあり）。

📌 代表的なユースケース

• 開業直後の1枚LP: 業種・サービス内容・ターゲットを入力すると、見出し・本文・画像構成まで含めたたたき台を数分〜十数分で生成できる（ペライチのAIアシスタント機能等）。開業したての事業者が、自力で「ないよりまし」を超えたサイトを持てる状態を作る。
• 会社紹介サイトの自走運用: 事業者自身が採用ページ・お知らせ欄などを継続的に更新していく前提の会社サイト。専門知識がなくてもテンプレートの範囲内で安全に更新できることが選定理由になる。
• 国内決済・LINE連携込みの申込ページ: インボイス対応や国内決済代行、LINE公式アカウントとの連携が必要な場面では、海外発のツールより国産ツール（ペライチ等）に分がある。

💡 指示のコツ

このカテゴリは「プロンプトを工夫する」より「入力フォームに何を書くか」が結果を左右します。業種・ターゲット・強み・実績を曖昧にせず、できるだけ具体的な言葉で埋めることが、AIが作る文言の質に直結します。

⚠️ つまずきやすいポイント

• 国内ツールか海外ツールかの選び分け: 日本語サポート・国内決済・インボイス対応を重視するならペライチ、英語UIやAI機能の先進性を許容できるならWixが選ばれる傾向にあります（2026年7月時点の一般的な傾向。事業者ごとの優先順位で判断してください）。
• AIが作った文言をそのまま公開しない: AIが提案する見出し・キャッチコピーは一般論に寄りがちです。事業者本人の言葉・実績数字に置き換える一手間を必ず挟むよう、支援先には伝えてください。ここが抜けると「どこにでもある没個性なLP」になり、成果につながりにくくなります。
• 独自ドメイン・SSL設定の見落とし: 無料プランのままだとツール側のサブドメイン（例：xxx.peraichi.com）での公開になり、信頼性・SEOの両面で不利になります。独自ドメインを取得し、正しく紐付けるところまでを制作の完了条件にしましょう。

4. WordPress ＋ AI（継続運用・拡張を見据えるなら）

「一度作って終わり」ではなく、お知らせ・ブログ・採用ページを継続的に足していく会社サイトなら、CMSの定番であるWordPressが候補になります。ここまでの一発生成型（ペライチ・Wix等）と違い、WordPressは「作る過程をAIが助ける」拡張・自走運用型です。

2026年5月20日に正式リリースされた WordPress 7.0 から、標準機能として 「AIコネクター（AI Connectors）」 が加わりました。管理画面の「設定 → Connectors」で OpenAI（ChatGPT）／Google（Gemini）／Anthropic（Claude） のいずれかをAPIキーで接続し（キーはデータベースに暗号化保存）、投稿画面から次のようなAI機能を使えます。

• タイトルの自動生成／本文の要約・抜粋の作成
• アイキャッチ画像の自動生成
• AIレビュー（文章の論理構成・改善点の指摘）

プロバイダーを差し替えられるので、用途に応じて安価なモデルへ乗り換える運用がしやすいのも利点です。

📌 代表的なユースケース

• 更新し続ける会社サイト・ブログ: お知らせ・実績・コラムを自分たちで足していく前提のサイト。AIで下書き・要約・アイキャッチまで時短する。
• 既存WordPressサイトのAI強化: すでにWordPressで運用しているなら、7.0へ更新してコネクターを設定するだけで、記事制作にAIを組み込める。
• LPビルダーの枠を超えた拡張: 予約・EC・会員機能など、テンプレートの範囲を超えた機能をプラグインで足したいとき。

💡 指示のコツ

標準のAIコネクターは「タイトル・要約・画像・レビュー」など編集補助が中心です。サイトの構成やデザインそのものをAIに一気に作らせたい場合は、①のチャット直書きやAIビルダーで骨子を作り、仕上げと日々の運用をWordPressに載せる、という組み合わせが現実的です。

⚠️ つまずきやすいポイント

• AI利用は従量課金: AIコネクターは接続先AIのAPIキーを使うため、利用量に応じて各AIサービスの料金が発生します（WordPress本体とは別課金）。
• まだ実験的（Experiments）段階: 7.0時点の実装は実験的機能の位置づけで、AIレビューの回答が英語のみなど、仕様が今後変わる可能性があります。着手前に最新版の挙動を確認してください。
• CMSの学習・保守コスト: 一発生成型より自由度が高い分、テーマ・プラグインの管理やアップデート・バックアップといった保守が必要です。「作れる」だけでなく「運用し続けられるか」を前提に選んでください。