トップAIでつくるツール紹介

AIでつくる本文

ウェブサイトツール紹介

使えるAIツールを、用途別に4つに整理しました。チャットAIへの直接コーディング指示、v0・bolt.newのようなAIビルダー、ペライチ・Wixなどの国内ビルダー、WordPress×AIによる継続更新まで、どの場面でどれを選ぶかが分かります。


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

目的は「静的な1枚LPを公開する」ことです。ChatGPTClaudeGemini といったチャット製品に直接HTML/CSSを書かせることが最もシンプルです。1枚のLPを生成する用途では各社に大きな差はないので、使い慣れたものから始めてください。Claudeの場合は、通常のチャットの代わりに「Claude Design」(デザイン専用のプレビュー画面つきモード)を使うと、コードを読まなくても仕上がりを見ながらやり取りできます。GensparkManusのような、リサーチ〜コーディングまで手がけるAIワークスペース/エージェントも同じ用途で使えますが、狙いが「1枚のLPを出力する」ことである以上、格別に優れているわけではありません。

📌 代表的なユースケース

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

💡 指示のコツ

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

AIへのプロンプト例

「経営コンサルタントのプロフィールLPを作りたいです。HTML/CSSだけで動く、モバイル対応(レスポンシブ)の1枚ページにしてください。セクションは自己紹介・実績・支援メニュー・お問い合わせ導線(メールリンク)の4つです。装飾は控えめに、余白を活かした落ち着いたデザインでお願いします。まずは静的なHTMLファイル1つで出力してください。」

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

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

2. AIビルダー(v0bolt.newLovable

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

📌 代表的なユースケース

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

💡 指示のコツ

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

AIへのプロンプト例

「中小企業向けの経営コンサルティングサービスを紹介するランディングページを作りたいです。ターゲットは従業員20名以下の製造業経営者、訴求ポイントは『補助金申請の伴走支援』です。まずヒーローセクション・課題提起・サービス内容・お客様の声・料金・お問い合わせの6セクション構成を提案してください。構成に問題なければ、そこから実装に入ります。」

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

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

3. AI搭載ウェブサイトビルダー

日本の中小企業向けウェブサイトビルダーの定番サービスとして、無料〜月額数千円で使えるペライチWix(AI Website Builder)・ジンドゥー を紹介します。 もともとかんたんにウェブサイトが作れるサービスとして一般的でしたが、近年のAI普及に伴い、AI搭載され便利になりました。いずれも非エンジニアでも使えるツールです。

📌 代表的なユースケース

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

💡 指示のコツ

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

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

  • AIが作った文言をそのまま公開しない: AIが提案する見出し・キャッチコピーは一般論に寄りがちです。事業者本人の言葉・実績数字に置き換える一手間を必ず挟むよう、支援先には伝えてください。ここが抜けると「どこにでもある没個性なLP」になり、成果につながりにくくなります。
  • 独自ドメイン・SSL設定の見落とし: 無料プランのままだとツール側のサブドメイン(例:xxx.peraichi.com)での公開になり、信頼性・SEOの両面で不利になります。まず無料で作って手応えを見たら、独自ドメインを取得し、正しく紐付けるところまでを制作の完了条件にしましょう。

4. WordPress + AI(REST APIでClaudeから直接投稿)

「一度作って終わり」ではなく、お知らせ・ブログ・コラム・採用ページを継続的に足していくサイトなら、CMSの定番であるWordPressが候補になります。WordPressは機能拡張性が高く、自走運用型です。

AIを活用した投稿方法には「WordPress管理画面内でAIプラグインを使う方法」と「ClaudeなどのAIエージェントからREST APIで直接下書き・投稿を行う方法」があります。

特に後者の WordPress REST API (/wp-json/wp/v2/posts) + Application Passwords を活用した構成では、GAS(Google Apps Script)や外部自動化ツールの仲介すら不要になり、Claudeと対話しながらそのままWordPressへダイレクトに投稿・下書き保存まで完了できます。

  • AIによる文章執筆・リライト: Claudeが文体を整え、HTML/Markdownで記事本文を直接生成
  • アイキャッチ・メディアのアップロード: OGP画像や生成画像を REST API (/wp-json/wp/v2/media) でアップロードし、記事(featured_media)へ自動紐付け
  • ワンコマンド・対話投稿: エージェント(Claude Code)のスキルを実行するだけで、タイトル・本文・下書き/公開ステータスを一括反映

📌 代表的なユースケース

  • AI対話からそのままWordPress更新: Claudeと壁打ちしながら執筆した記事を、管理画面を開くことなくそのまま「下書き保存」や「即時公開」する。
  • 更新し続ける会社サイト・ブログ: お知らせ・実績・コラムをAIとの対話で短時間に量産し、コンテンツ運用を大幅に時短する。
  • LPビルダーの枠を超えた拡張: 予約・EC・会員機能など、テンプレートの範囲を超えた機能をプラグインで足しながら、記事投稿はAIエージェントに任せる。

💡 指示のコツ

WordPress側の「ユーザー > プロフィール > アプリケーションパスワード」で専用パスワードを発行し、.env 等に WORDPRESS_API_URL / WORDPRESS_USERNAME / WORDPRESS_APP_PASSWORD を安全に保持しておきます。投稿時は「タイトル」「本文」「下書き/公開」をAIに伝えるだけでスムーズに処理されます。

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

  • アプリケーションパスワードの権限管理: 投稿権限を持つユーザーのアプリケーションパスワードを使用するため、設定ファイル(.env 等)は .gitignore に含め、外部に流出しないよう厳重に管理してください。
  • 自動公開前の確認(下書き推奨): AIから直接 publish(即時公開)することも可能ですが、基本は draft(下書き)で投稿し、人間がWordPress管理画面で最終レイアウトや装飾をチェックしてから公開する運用が安全です。
  • CMSの学習・保守コスト: 一発生成型ビルダーより自由度が高い分、テーマ・プラグインの管理やアップデート・バックアップといった保守が必要です。「作れる」だけでなく「運用し続けられるか」を前提に選んでください。