ファネルAi - Google統合型 AIネイティブCRM/SFA/MAツール
機能 イベント お役立ち お知らせ
無料デモ お問い合わせ
📅 2026年2月15日 ⏱️ 12分で読めます

Webサイト制作を内製化する手順｜AIエージェント × Vercel × Xserverで作る自社運営サイト

執筆小林 編集ファネルAi編集部 監修ファネルAi監修チーム 最終更新2026年4月26日
Webサイト制作を内製化する手順｜AIエージェント × Vercel × Xserverで作る自社運営サイト

「Webサイトを内製化したいが、コードもサーバーも分からない」「外注費を毎月払い続けるのが負担」――そんな中小企業のWeb担当・経営者の方に向けて、AIエージェント（Claude Code / Cursor）でコードを書き、Vercelで公開し、Xserverのカスタムドメインを当てる、現時点で最も低コスト・低学習コストな内製化ルートを、実画面・実設定値レベルで解説します。

結論として、Xserverドメイン（年¥1,500前後）+ Vercel無料枠（月¥0）+ AIエージェント1つ（月¥0〜¥3,000程度）の3点セットで、初期構築は半日〜2日、月次運用は1〜2時間で完結します。Web制作の選択肢全体の比較は ウェブサイト構築の教科書 を、内製と外注の判断軸そのものは SaaSか自作かで迷ったら を併読してください。

Webサイト内製化の構成図：Xserverドメイン、AIエージェント、GitHub、Vercelデプロイ、カスタムドメイン接続の流れを示した図
Webサイト制作の内製化は、Xserverドメイン取得 → AIエージェントで実装 → GitHub → Vercel自動デプロイ → DNSでカスタムドメイン接続 の5ステップで完結します。

本記事のポイント

  1. Webサイト制作の内製化は、Xserverドメイン + Vercel無料枠 + AIエージェント1つの3点セットで初期費用 年¥1,500前後＋月¥0から始められます。
  2. AIエージェントの主軸はClaude Codeで、Next.js + Tailwind CSSの雛形・修正・画像差し替えまで自然言語で指示できます。
  3. Xserver側のDNSは「Aレコード 76.76.21.21」と「CNAME cname.vercel-dns.com」の2行を入れるだけで、Vercel側のSSLは自動発行されます。

この記事で扱うテーマ

関連キーワード

  • Webサイト 内製化
  • ホームページ 内製 AI
  • Vercel Xserver カスタムドメイン
  • AIエージェント Webサイト 作り方
  • Next.js Vercel デプロイ 手順

このページで答える質問

  • Webサイト制作を内製化するには、最低限どんなツールとアカウントが必要か？
  • AIエージェントでWebサイトを作るとき、具体的にどんなプロンプトを使えばよいか？
  • VercelとXserverのカスタムドメイン接続は、どのDNSレコードをどこに設定すればよいか？
  • 内製化したサイトを公開した後、運用・更新・SEOはどう回せばよいか？

準備するもの｜アカウントと初期費用

着手前に揃えるアカウントは4つだけです。順番に取得しても所要は1〜2時間程度です。

項目用途費用目安所要
Xserverドメイン独自ドメインの取得・DNS管理年¥1,500前後（.com / .jp で変動）10〜15分
GitHubアカウントコードの保管とVercel連携無料（個人 / 小規模チーム）5分
Vercelアカウントサイトの公開と自動デプロイHobbyプラン無料（商用は要Pro）5分（GitHub連携）
AIエージェントコードの生成・修正・運用補助Claude Code Pro月¥3,000前後 / 無料枠あり10分

Xserverを推奨する理由は、(1) 国内事業者で日本語サポートと電話窓口がある、(2) ドメイン更新通知が見やすく解約・移管トラブルが少ない、(3) DNSのGUI管理画面が直感的でAレコード・CNAMEの追加で迷わない、の3点です。お名前.comでも構築は可能ですが、追加サービスのオプトアウト操作が多く、初心者には Xserver の方が事故率が低くなります。

手順① Xserverでドメインを取得する

「Xserverドメイン」（xdomain.ne.jp）にアクセスし、希望のドメイン名で空き状況を検索します。会社サイトであれば .com または .co.jp、ブランドサイトであれば .jp や .tokyo も選択肢に入ります。.co.jp は登記情報が必要で取得まで数日かかるため、急ぎなら .com または .jp を推奨します。

申込画面では3点だけ確認します。1点目は「Whois情報公開代理」を有効化すること。これを切ると登録者の個人情報がWhois検索で誰でも見える状態になり、迷惑メールや営業電話が増えます。2点目は「自動更新設定」を有効化すること。年1回の更新を忘れるとサイトが落ちます。3点目は「ネームサーバー」を Xserver の標準（ns1.xdomain.ne.jp 〜 ns5.xdomain.ne.jp）のままにすること。Vercel接続時にAレコードとCNAMEだけ追加するため、ネームサーバーを変更する必要はありません。

支払いはクレジットカードまたは銀行振込で、決済後5〜10分でアカウント管理画面の「ドメイン一覧」に取得済みのドメインが表示されます。この時点ではまだサイトは存在しないため、ブラウザでアクセスしてもエラーになりますが正常です。

手順② Vercelアカウントを作成しGitHubと連携する

Vercel（vercel.com）の右上「Sign Up」から、GitHubアカウントでサインインします。Vercelに「リポジトリへのアクセス権」を許可する画面が出るので、最初は「All repositories」ではなく「Only select repositories」を選び、後でプロジェクトごとに付与するのが安全です。

料金プランは個人・小規模事業の検証段階であれば「Hobby」（無料）で十分です。月100GB帯域・無制限の自動デプロイ・SSL自動発行・プレビュー環境までカバーされます。商用サイトを長期運用する場合や、フォームのサーバーサイド処理を増やす場合は「Pro」（月$20）に上げます。Hobbyでも独自ドメインは無制限に接続できるため、検証段階で課金は不要です。

手順③ AIエージェントでサイトを実装する

AIエージェントの主軸は Claude Code を推奨します。理由は (1) ローカル環境のファイル全体を把握した上でコードを書ける、(2) Next.js / Tailwind CSS / TypeScript の知識が広く、自然言語の指示から完成度の高い雛形を出力できる、(3) 修正指示を会話形式で重ねられるため、デザインの微調整が早い、の3点です。Cursor は補助として、エディタ上で部分的な修正を素早くかけたいときに使い分けます。

実装の流れは「雛形生成 → デザイン調整 → 文章差し替え」の3ステップです。Claude Code を起動したら、新規ディレクトリで以下のように指示します。

Next.js 14 + TypeScript + Tailwind CSSで、以下の構成のコーポレートサイト雛形を作ってください。
        - ページ構成: トップ / 会社概要 / サービス / お問い合わせ
        - ヘッダー: ロゴ + ナビゲーション4項目、モバイルはハンバーガーメニュー
        - フッター: 会社情報、コピーライト、SNSリンク3つ
        - トップページ: ヒーロー + サービス紹介3カラム + お客様の声 + CTA
        - 配色: ネイビー(#0F172A) ベース、アクセントにティール(#0D9488)
        - フォント: Noto Sans JP (Google Fonts)
        - 画像はpublic/imagesから読み込む想定で、placeholder画像のパスだけ仮置き

1〜2分で雛形ファイルが出力されます。そのままターミナルで npm install → npm run dev を実行すると、localhost:3000 で動作確認できます。デザイン調整は次のように指示します。

トップページのヒーローを、左に見出し+サブコピー+CTAボタン2つ、右にイラスト1枚の2カラムに変更してください。スマホでは縦積みに切り替わるよう、Tailwindのmd:ブレークポイントで分岐させてください。

文章差し替えはAIエージェントに任せず、Markdownや原稿ファイルに先に書き、AIに「以下の原稿を該当セクションに反映してください」と渡すと、改変リスクが下がります。画像はChatGPT画像生成や Vertex AI で作るか、Unsplash・写真AC等のフリー素材を public/images/ に置きます。実装で迷ったら、AIエージェントの実務適用については AIエージェントによる業務自動化 も参考になります。

手順④ GitHubにpushしてVercelで自動デプロイする

ローカルで動作確認できたら、GitHubのプロフィール画面から「New repository」で空のリポジトリを作成します（Privateで構いません）。ターミナルでプロジェクトディレクトリに移動し、次のコマンドを実行します。

git init
        git add .
        git commit -m "initial commit"
        git remote add origin https://github.com/USERNAME/REPO.git
        git branch -M main
        git push -u origin main

Vercelの管理画面に戻り「Add New… → Project」から該当リポジトリを選択します。Framework Preset は自動で「Next.js」が認識され、Build / Output 設定もそのままで問題ありません。「Deploy」ボタンを押すと、1〜3分で your-project.vercel.app 形式の暫定URLが発行され、HTTPSで即座にアクセスできます。以降、git push するたびに自動でビルド・デプロイが走ります。

手順⑤ Xserverドメインを Vercel のカスタムドメインとして接続する

Vercelの該当プロジェクト画面で「Settings → Domains → Add Domain」を選び、Xserverで取得したドメイン（例：example.com）を入力します。Vercelが「以下のDNSレコードを追加してください」という指示を表示します。これをXserver側に反映する流れです。

Xserver管理画面（xdomain.ne.jp）にログインし、対象ドメインの「DNSレコード設定」を開きます。既存のレコードはAレコード1件 + MXレコード等が並んでいますが、メールを別事業者で使っているならMXは触らず、以下の2行のみ追加します。

ホスト名種別内容優先度
@（または空欄）A76.76.21.210
wwwCNAMEcname.vercel-dns.com0

既に @ のAレコードがXserver側に残っている場合は、Vercel側の 76.76.21.21 に書き換えます。MXレコード（メール用）はそのまま残してください。設定後、5分〜数時間でDNSが伝播し、Vercel管理画面の Domain ステータスが「Valid」に変わります。SSL証明書は Let's Encrypt で自動発行されるため、HTTPS化のための作業は不要です。https://example.com でアクセスでき、鍵マークが表示されれば完了です。

手順⑥ 公開後の運用｜更新・解析・SEO

更新フローは「ローカルで AIエージェントに修正指示 → git push → Vercelが自動デプロイ」のシンプルな1本道です。Wordpressのような管理画面は不要で、軽微な文言変更なら3〜5分で反映できます。アクセス解析は Vercel Analytics（Hobbyは無料枠あり）か、Google Analytics 4 の <script> タグを app/layout.tsx に追加します。

SEOの最低ラインは、(1) <title> と <meta name="description"> をページ単位で設定、(2) sitemap.xml と robots.txt を生成、(3) Google Search Console にドメインを登録、の3点です。AI検索（Gemini / Claude / ChatGPT検索）に引用されやすい構造の作り方は、AI検索に引用される企業サイト設計チェックリスト に25項目で整理してあります。

よくある詰まりポイントと対処

内製化の現場で詰まりやすいのは、(1) DNS反映待ちで「サイトが見えない」と焦る、(2) next.config.js の画像最適化設定でデプロイが落ちる、(3) GitHubに .env をうっかりpushして秘密情報が露出、の3つです。DNSは反映に最大72時間かかる仕様なので、24時間は待つ前提で計画してください。next.config.js のエラーは Vercel のビルドログに英語で出るので、エラーメッセージをそのまま Claude Code に貼り付けて「このエラーを直して」と指示すれば9割は自動で解決します。.env は .gitignore に最初から入れ、環境変数は Vercel の Settings → Environment Variables で管理する運用に統一します。

よくある質問

コードを書いた経験ゼロでも本当にできますか？

はい。AIエージェントが雛形・修正・エラー対応の9割を肩代わりするため、必要なのは「指示の出し方」と「ターミナルで3〜4個のコマンドを実行する操作」だけです。所要時間は初回構築で半日〜2日、2回目以降は新規サイト1本あたり数時間まで短縮できます。

WordPressから移行する場合、何が変わりますか？

管理画面が消え、更新は git push 経由になります。ブログ機能はNext.jsのMDX対応かheadless CMS（microCMS等）の併用で代替できます。WordPressのプラグイン依存（フォーム、SEO、キャッシュ等）が外れるため、月次のセキュリティ更新作業はほぼゼロになります。

Xserverレンタルサーバー（共用ホスティング）は使わないのですか？

本構成では使いません。サイトのホスティングは Vercel が担当し、Xserverは「ドメインの取得とDNS管理」のみを担います。共用ホスティングは静的サイトには過剰スペックで、CDN・SSL・自動デプロイの利便性で Vercel が大きく上回ります。

AIエージェントが書いたコードに問題はありませんか？

雛形と一般的な実装は十分な品質ですが、決済・個人情報の取得・問い合わせフォームの裏側など「動作保証が必須な箇所」は、外部サービス（Stripe、Formspree、reCAPTCHA等）に委ねるのが安全です。AIに全てを書かせず、責任のある処理は実績のある SaaS に任せる切り分けが事故防止になります。

関連ページと関連記事

Webサイト制作の内製化を「無理なく定着」させたい方へ

「内製化を進めたいが、初期構築の壁・社内のIT知識・運用の継続性に不安がある」――そんな方向けに、ファネルAi編集部・監修チームが、AIエージェント運用設計、Vercel・GitHub環境構築、社内向けの更新マニュアル整備までフラットに伴走します。外注の継続コストを見直したい段階でご相談ください。

ファネルAiに相談する

メディア一覧へ戻る