ダッシュボード / Module 5

Module 5 : HP制作 プロフェッショナル

Next.js + TypeScript + Tailwind CSS + microCMS のモダンスタックで、
コーポレート / サービスサイトを要件定義から公開・運用まで一気通貫で構築します。
修了時には、法人案件にも対応できる本物のWeb制作者になります。

⏱ 所要時間: 約12時間 📚 12レッスン 🎯 難易度: 中上級 🏗 実案件レベル

5.1 HP制作の全体像と進め方の哲学

⏱ 所要: 約20分 📖 形式: 読み物 🔰 前提: Module 4 完了

🎯 このレッスンの到達目標

  • Webサイト制作の全工程（要件定義〜運用改善）を俯瞰できる
  • 初心者が陥りやすい3つの罠を認識できる
  • 「動くものを早く出す」等の3つの進め方哲学を理解する

Module 4 で LP を1本作りました。ここから先は、複数ページからなるコーポレートサイト / サービスサイトを、要件定義から公開・運用まで一気通貫で作れる力を身につけます。使う技術は Next.js + TypeScript + Tailwind CSS + microCMS という、2026年の現場スタンダード構成です。

Webサイト制作の全工程

コードを書く工程だけを切り出して語られがちですが、実際のプロセスは次のように長く、実装はプロジェクト全体の3分の1程度に過ぎません。

[要件定義] → [情報設計] → [デザイン] → [環境構築]
  → [実装] → [プレビュー] → [本番デプロイ] → [運用・改善]

⏱ 工程別の所要時間目安

要件定義: 20%
設計: 15%
デザイン: 15%
実装: 30%
テスト・公開: 10%
運用設計: 10%

🎯 成功するプロジェクトの特徴

前段の準備工程（要件・設計）の質がサイト全体の成否を決める。実装は「設計図通りに組み立てる」作業。

初心者が陥りやすい3つの罠

⚠️ 罠1: いきなりコーディングを始めてしまう

目的・ターゲット・ゴールが定まらないまま作り始めると、途中で「このボタンは誰のためにあるのか？」という根本疑問が浮上し、何度もレイアウトをやり直すことに。1日のヒアリングで、後の1週間の手戻りを防げる。

⚠️ 罠2: 1ページに全情報を詰め込む

「会社紹介・サービス・料金・事例・FAQ・問合せ」をトップに全部載せると、ユーザーは3秒で離脱。1ページ・1メッセージ・1CTAが鉄則。現代のWebユーザーはスキャン読みが基本で、自分向けだと判断できなければ即ブラウザバック。

⚠️ 罠3: デザインから入ってしまう

Figmaで美しいモックを作った後、実装段階で「このフォントはWebで表示できない」「このアニメはスマホで重い」と発覚して差し戻し。正しい順序は「情報設計（IA）→ ワイヤーフレーム → デザイン → 実装」。

進め方の3つの哲学

① 動くものを早く出す

完璧な計画書より、動くプレビューURL。関係者は文字の仕様書は読めないが、動くサイトがあれば具体的なフィードバックをくれる。MVP → 磨き込みのサイクルが最速。

② コピーを恐れない

Web制作の定型コード（boilerplate）は、テンプレート流用が当たり前。ゼロから書くことが偉いわけではなく、「なぜそう書くか」を理解できていれば十分。

③ 公式ドキュメントを一次情報に

個人ブログは古い情報を含みがち。特に Next.js は年2-3回大型更新があり、半年前の記事がすでに非推奨なことも。Next.js / Tailwind / Vercel / MDN 公式を最初に確認する習慣を。

💡 Claude Code との相性

Claude Code はこれらの公式ドキュメントを学習済み。「Next.js の App Router で○○したい」と聞けば、最新の正しい書き方を提示してくれる。

✏️ MINI QUIZ

Webサイト制作プロジェクトで、もっとも時間をかけるべき工程は？

  • Aデザインの細部作り込み
  • B要件定義・情報設計などの「前段」の準備工程
  • CHTML/CSSのコーディング
✅ 正解！ 実装は全体の30%程度。前段の質が成否の8割を決めます。
💡 30秒で復習

AI×HP制作の哲学は「①小さく作って早く出す ②AIに任せて人は判断 ③公開後も育てる」。完璧主義より公開主義。3日で出せるものを3週間磨くより、3日で出して3週間運用改善する方が速い。

5.2 事前準備（アカウント・ツール）

⏱ 所要: 約40分 🛠 形式: 準備 🔰 前提: 5.1

🎯 このレッスンの到達目標

  • 本格HP制作に必要な7種類のアカウントを把握する
  • Google アカウントを個人Gmailで統一する理由を理解する
  • ドメイン取得サービスの選び方を知る

実装に入る前に、必要となる外部サービスのアカウントと、ローカルツールを揃えます。個人の学習用途と違い、チーム運用を前提としたアカウント設計を最初に行うのがプロ。5〜10種類のサービスを組み合わせる現代のWeb制作で、アカウント整理が甘いと「担当者が退職してAPIキーを更新できない」「カード失効でドメインが失効」などの致命的事故を招きます。

用意するアカウント一覧

サービス 用途 料金
GitHubソースコード管理 + 自動デプロイの起点無料
Vercelホスティング + 自動デプロイ無料 (Hobby)
GoogleアカウントGmail / スプシ / GAS / Search Console / Analytics無料
microCMSお知らせ / ブログのヘッドレスCMS無料 (Hobby)
ドメイン取得サービス独自ドメイン（example.com 等）年1,000〜3,000円
Figmaデザインモック無料
Supabase (任意)問合せ履歴などのDB無料プラン
⚠️ 最重要つまずきポイント: Google アカウント

Google Workspace のグループアドレス（info@your-company.com 等の複数人受信）は SMTP 認証ができません。問合せフォームの自動メール送信で「535 Authentication Failed」に詰まり、結局作り直すことに。

最初からサイト管理専用の個人Gmailアカウント（例: yoursite.admin@gmail.com）を1つ作り、Vercel・microCMS・GAS・Search Console・Analytics をすべてそのアカウントで揃える。送信元は個人、見かけ上の返信先（Reply-To）をグループアドレスに設定する分離設計が定石。

Google アカウント作成時のポリシー

  • サイト運用専用のGmailアカウントを新規作成
  • 2段階認証を最初に有効化（パスワード漏洩時の被害を最小化）
  • 復旧用の電話番号と予備メールを登録（ロックアウト対策）
  • パスワードは 1Password / Bitwarden 等で管理

ドメイン取得サービスの選び方

年額1,000〜3,000円のドメインですが、業者選びには落とし穴があります。選定基準は3つ:

  1. Whois情報の代理公開が無料か: 個人情報が公開されないようにする機能
  2. 更新時の自動課金トラブル率: 取得は安いが更新で数倍、という価格設定に注意
  3. DNS編集画面の使いやすさ: 編集頻度は意外と高い

お名前.com

国内最大手だが営業メールが多い

ムームードメイン

GMOグループ、UI簡素

Cloudflare Registrar ⭐

原価提供・更新時も値上げなし。英語UIだが高機能。本研修推奨

Value Domain

老舗、細かい設定が可能

✏️ MINI QUIZ

お問い合わせフォームの自動メール送信で「535 Authentication Failed」を避けるために、最初にやっておくべきことは？

  • A会社のグループアドレス（info@～）で全サービスを登録する
  • Bサイト管理専用の個人Gmailアカウントを作り、全サービスをそれに統一する
  • C自分の私用メールを使い回す
✅ 正解！ グループアドレスは SMTP 認証不可。最初に専用アカウントを作り、Reply-To だけグループアドレスにするのが定石。
💡 30秒で復習

事前準備は ①GitHub アカウント ②Vercel アカウント ③Cloudflare（独自ドメイン管理） ④Figma（デザインカンプ用） ⑤お名前.com等でドメイン取得。すべて無料 or 数千円で揃う。

5.3 要件定義・ペルソナ・情報設計 (IA)

⏱ 所要: 約60分 🧭 形式: 設計ワーク 🔰 前提: 5.2

🎯 このレッスンの到達目標

  • 要件定義書の必須8項目をすべて埋められる
  • ペルソナを具体的に1〜3人描ける
  • サイトマップ / IA をツリー図で表現できる

「何のために、誰のために、何ができるサイトを作るのか」を言語化し、関係者全員が同じイメージを共有できる状態を作ります。ここを飛ばすと、デザインのフィードバックが「なんとなく好き/嫌い」の主観論争になり永遠に決まりません。

💡 なぜ要件定義が「プロジェクト成否の8割」を決めるのか

Webサイト制作は「コードを書く仕事」ではなく、「顧客の課題を翻訳する仕事」。「カッコいいサイトにしてほしい」の裏には「採用応募を増やしたい」「取引先からの信頼を高めたい」などの本当の目的が隠れている。これを深堀りせずに作ると、見た目は綺麗でも業績に貢献しないサイトができる。

ヒアリング必須項目

📋 基本項目

・目的（問合せ/ブランディング/採用/EC）
・数値目標（KGI/KPI）
・メインターゲット（ペルソナ）
・競合サイト（参考3-5 / 避けたい1-2）
・既存サイトの有無
・公開希望日
・予算（制作 + 運用含む）
・誰が更新するか

🎨 素材・コンテンツ

・ロゴ（AI/SVG/PNG、カラー）
・写真・動画（既存/新規/フリー）
・コピー（既存流用/新規作成）
・法的表記の雛形の有無

⚙️ 機能要件

・問合せフォーム
・予約機能
・SNS連携
・多言語対応
・会員登録
・ブログ/お知らせ（CMSが必要か）

📄 アウトプット

A4一枚にまとめてクライアント承認をメールで取得。承認後のスコープ追加は別見積もりにする線引きが事故を防ぐ。

ペルソナ設計

ペルソナとは「ターゲット顧客の代表例を1〜3人、実在の人物のように描く」手法。年齢・職業だけでなく、シーンと価値観まで具体化します。

【ペルソナ例】
田中 翔平（37歳 / 男性 / 東京都練馬区在住）
職業: 都内 IT 企業のマーケティング課長 / 年収650万円
家族: 妻と5歳の子どもとの3人家族
閲覧デバイス: 主にスマホ（通勤中・昼休み）、自宅では時々PC
知識: Web広告の基礎はあるが、MAやデータ分析は弱い

課題:
- 社内向け新規事業の発表資料を月1本作成する必要がある
- スライド作成に毎回2日かかっており効率化したい
- AI活用には興味があるが、どれから手を付けるべきか迷っている

情報収集の方法:
- Twitter (X) で海外のAIアップデートを毎朝チェック
- 通勤中（電車30分）にVoicyや Youtube で学習
- 土日にNotionで自分のノートをまとめる時間を作りたいが実行できていない

サイトマップ / 情報設計（IA）

サイト全体のページ構成と、ページ間のつながりを設計します。ツリー図で可視化:

/ (トップ)
├─ /about       会社紹介
├─ /services    サービス一覧
│   ├─ /services/web-dev    Web開発
│   └─ /services/consult    コンサルティング
├─ /works       実績
├─ /news        お知らせ (microCMS)
├─ /recruit     採用情報
└─ /contact     お問い合わせ
💡 Claude Code の活用

ヒアリングメモを Claude に投入し、「この内容から要件定義書を A4 1枚にまとめて。ペルソナ3人と IA ツリーも提案して」と依頼すると、叩き台が数分で出ます。そこから人間が磨き込む流れが最速。

✏️ MINI QUIZ

クライアントに要件定義書の承認をもらった後、追加の要望が出てきた場合の正しい対応は？

  • Aスコープに追加して同じ予算でこなす
  • B別見積もりにする線引きをする
  • C断る
✅ 正解！ 事故防止の鉄則。最初の承認が「線」になる。
💡 30秒で復習

要件定義は「①誰に ②何を ③どう変える」をA4 1枚に。ペルソナは年齢/職業/悩み/情報源を具体化。IA（情報設計）はサイトマップ＋導線図で「何ページ・どう繋ぐか」を可視化。

5.4 開発環境のセットアップ

⏱ 所要: 約30分 💻 形式: ハンズオン 🔰 前提: Module 3 完了

🎯 このレッスンの到達目標

  • Node.js v20 LTS 以上がインストールされていることを確認
  • VSCode + 拡張機能の推奨構成を整える
  • GitHub CLI + Vercel CLI でターミナルから操作できる

Module 3 で Claude Code を動かすのに必要な基盤は整っていますが、Next.js 開発に追加で必要なものを確認します。

ツール 用途 バージョン目安
Node.jsJavaScript実行環境v20 LTS 以上
npm / pnpmパッケージマネージャnpm 10+ or pnpm 9+
Gitバージョン管理2.40+
GitHub CLI (gh)ターミナルから GitHub 操作最新
Vercel CLIターミナルから Vercel 操作最新
VSCodeエディタ最新

Claude Code に一括依頼

この Mac の開発環境を Next.js 開発向けに整えてください。

確認・導入してほしい項目:
1. Node.js v20 以上（バージョン確認）
2. pnpm の導入（npm より速くストレージも節約）
3. GitHub CLI (gh) の導入と gh auth login 手順案内
4. Vercel CLI の導入と vercel login 手順案内
5. VSCode の推奨拡張機能リスト提示
   - ESLint / Prettier / Tailwind CSS IntelliSense
   - GitHub Copilot (任意)
   - Error Lens

既に入っているものはスキップして、追加が必要なものだけ案内してください。

VSCode 推奨拡張

🔧 必須

・ESLint: 静的解析
・Prettier: コード整形
・Tailwind CSS IntelliSense: クラス補完
・Error Lens: エラーを行末表示

🚀 あると便利

・GitLens: Gitログ可視化
・Thunder Client: API テスト
・TODO Highlight: TODO コメント強調
・Auto Rename Tag: タグの対応リネーム

Node.js のバージョン管理

複数のプロジェクトで異なる Node バージョンを使う場合は、fnm または nvm でのバージョン管理が便利。Claude Code に「プロジェクト単位で Node 20 を固定したい」と依頼すれば .nvmrc ファイルを作成してくれます。

✏️ MINI QUIZ

Tailwind CSS を書くときにクラス名の補完が効くと開発速度が飛躍的に上がる。必要な VSCode 拡張は？

  • APrettier
  • BTailwind CSS IntelliSense
  • CError Lens
✅ 正解！ 公式拡張で、クラス名の候補表示とホバーでの CSS 確認ができます。
💡 30秒で復習

開発環境は VS Code + Claude Code + Git + Node.js v20。Cursor派は Cursor + Claude モデル選択。最低限「保存→ブラウザ再読込」のループが30秒以内で回る環境を作る。

5.5 Next.js プロジェクトの初期化

⏱ 所要: 約40分 🚀 形式: ハンズオン 🔰 前提: 5.4

🎯 このレッスンの到達目標

  • Next.js のなぜを理解する（WordPress 等との比較）
  • create-next-app でプロジェクトを生成できる
  • App Router の基本構成を把握する

なぜ Next.js なのか

① ハイブリッドレンダリング

SSG / SSR / ISR をページ単位で使い分け。CMS連携サイトに最適。

② App Router の直感性

フォルダ＝URL のシンプル設計。初心者にも理解しやすい。

③ Server Components

サーバー側でHTML変換 → 初期表示が速くSEO評価も高い。

④ 画像・フォントの自動最適化

next/image で WebP 変換、next/font で CLS 防止。ほぼゼロ設定。

⑤ Vercel との完全統合

設定ゼロで CDN 配信 / 画像最適化 / プレビュー環境。

⑥ 学習リソースの充実

Stack Overflow / 生成AI の学習データが他より充実。

WordPress との比較

観点 WordPress Next.js + Vercel
表示速度遅（PHP + DB）数倍速い
セキュリティ脆弱性頻発大幅に低リスク
月額運用費500〜3,000円0円〜
メンテ本体 + プラグインの定期更新ほぼ不要
学習コスト中中〜高（応用利きやすい）

プロジェクト作成

npx create-next-app@latest my-site \
  --typescript --tailwind --app --src-dir --eslint \
  --turbopack --use-pnpm

cd my-site
pnpm dev
# → http://localhost:3000 で起動確認

ディレクトリ構成（最小）

my-site/
├── src/
│   ├── app/
│   │   ├── layout.tsx      ← 全ページ共通レイアウト
│   │   ├── page.tsx        ← トップ (/)
│   │   ├── globals.css     ← グローバルCSS + Tailwind
│   │   └── about/
│   │       └── page.tsx    ← /about
│   ├── components/         ← 共通コンポーネント
│   └── lib/                ← ユーティリティ
├── public/                 ← 静的ファイル (画像等)
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json
💡 Claude Code での流れ

「このフォルダで Next.js プロジェクトを初期化して。TypeScript + Tailwind + App Router + src/ 構成で、pnpm を使って。初期化後に pnpm dev を起動して表示確認まで」と依頼すると、一連の流れを代行してくれます。

✏️ MINI QUIZ

Next.js App Router で「URL の構造」と一致するのは？

  • Anext.config.ts の routes 設定
  • Bapp/ 配下のフォルダ構造
  • Cpages.json ファイル
✅ 正解！ フォルダ＝URL というシンプルな設計が App Router の魅力。
💡 30秒で復習

Next.js 初期化は npx create-next-app@latest。TypeScript + App Router + Tailwind を全部Yesで開始。初回 npm run dev で http://localhost:3000 が表示されれば成功。

5.6 ページとコンポーネントの実装

⏱ 所要: 約90分 🏗 形式: 実装 🔰 前提: 5.5

🎯 このレッスンの到達目標

  • 複数ページを App Router で作成できる
  • 共通コンポーネント（Header/Footer）を切り出せる
  • Server / Client Components の使い分けが分かる

ページを追加する

App Router では app/ 配下にフォルダを作って page.tsx を置くだけで URL が生える。

// src/app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>会社概要</h1>
      <p>私たちは...</p>
    </main>
  );
}

これで http://localhost:3000/about にアクセス可能になります。

共通レイアウト (layout.tsx)

Header / Footer のような全ページ共通の要素は app/layout.tsx に置きます。

// src/app/layout.tsx
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import "./globals.css";

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

コンポーネントの切り出し

// src/components/Header.tsx
import Link from "next/link";

export default function Header() {
  return (
    <header>
      <Link href="/">ロゴ</Link>
      <nav>
        <Link href="/about">会社概要</Link>
        <Link href="/services">サービス</Link>
        <Link href="/contact">お問い合わせ</Link>
      </nav>
    </header>
  );
}

Server vs Client Components

🖥 Server Component（デフォルト）

サーバー側で HTML に変換して配信。
・初期表示が速い
・SEO に強い
・DB / API に直接アクセス可
・useState / onClick 等は使えない

💻 Client Component

ブラウザで実行。
・状態・イベント扱い可
・ファイル先頭に "use client" を書く
・フォーム・モーダル・アニメ等で使う

使い分けの原則

  • デフォルトは Server Component。パフォーマンスとSEOで有利
  • 状態・イベントが必要な箇所だけ Client。葉っぱレベルで最小化
  • 両者は混在させる: Server Component から Client Component を呼び出せる
💡 Claude Code への指示例

「Header コンポーネントを作って。スマホではハンバーガーメニューに変換する。ハンバーガーは状態管理が必要だから適切に Client Component として分離して」

✏️ MINI QUIZ

Next.js で「ボタンクリックでモーダルを開く」機能を実装する場合、そのコンポーネントに必要な宣言は？

  • A何もいらない
  • Bファイル先頭に "use client"
  • Cファイル拡張子を .jsx にする
✅ 正解！ useState や onClick を使うには Client Component が必要。
💡 30秒で復習

ページ実装は app/page.tsx がトップ、app/about/page.tsx が /about。コンポーネントは components/ フォルダに分割。ヘッダー/フッター/ヒーローは共通化、各ページ固有部分のみ書く。

5.7 Tailwind CSS でデザイン実装

⏱ 所要: 約90分 🎨 形式: 実装 🔰 前提: 5.6

🎯 このレッスンの到達目標

  • Tailwind CSS のユーティリティクラス思想を理解する
  • レスポンシブブレークポイントを使いこなせる
  • ダークモード / ホバー等の状態バリアントを扱える

Tailwind CSS は、「あらかじめ用意された細かい CSS クラス」を HTML に直接書くアプローチ。初めて見ると HTML が汚く感じますが、慣れると圧倒的な開発速度と、プロジェクトごとに CSS が肥大化しない利点が得られます。

ユーティリティクラスの基本

<div class="bg-white p-8 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-900 mb-4">
    見出し
  </h2>
  <p class="text-gray-600 leading-relaxed">
    本文
  </p>
</div>

頻出クラスの早見表

やりたいこと Tailwind
中央寄せflex items-center justify-center
横3カラムgrid grid-cols-3 gap-4
角丸rounded-lg
影shadow-md
ホバーで色変更hover:bg-gray-100
アニメーションtransition-all duration-300

レスポンシブ（モバイルファースト）

デフォルトがモバイル用、md: 以降でタブレット / PC 用を指定するのが Tailwind の流儀。

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 md:p-8">
  <!-- スマホは1カラム・padding 16px、
       768px以降は3カラム・padding 32px -->
</div>

📱 ブレークポイント

sm: 640px〜
md: 768px〜
lg: 1024px〜
xl: 1280px〜
2xl: 1536px〜

🎭 状態バリアント

hover: ホバー時
focus: フォーカス時
active: アクティブ時
disabled: 無効時
dark: ダークモード

デザインシステムの設計

プロジェクト固有の色・フォント・間隔は tailwind.config.ts に定義:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "#0f172a",
          accent: "#2563eb",
        },
      },
      fontFamily: {
        sans: ["Noto Sans JP", "sans-serif"],
      },
    },
  },
};

これで bg-brand-primary / text-brand-accent / font-sans のようなクラスが使えます。

💡 Claude Code と Tailwind

「Hero セクションを作って。ネイビー背景、白文字、CTAボタンはオレンジ、スマホでは高さを画面80%に調整」のように日本語で依頼すると、Tailwind のクラスで適切に実装してくれます。色コードで指示するより「雰囲気」で伝える方が早い。

✏️ MINI QUIZ

Tailwind で「スマホでは1カラム、PCでは3カラム」のグリッドを実装するクラスは？

  • Agrid-cols-3
  • Bgrid grid-cols-1 md:grid-cols-3
  • Cgrid-responsive
✅ 正解！ モバイルファーストで、md: 以降で上書きするのが定石。
💡 30秒で復習

Tailwind は class名で直接スタイル指定。カラーパレットは tailwind.config.ts で定義。レスポンシブは sm:/md:/lg: プレフィックス。デザイントークン化で統一感UP。

5.8 Vercel デプロイと独自ドメイン

⏱ 所要: 約60分 🌐 形式: ハンズオン 🔰 前提: 5.7

🎯 このレッスンの到達目標

  • GitHub push → Vercel 自動デプロイの流れを構築できる
  • 独自ドメインを設定して HTTPS まで自動発行される
  • プレビュー環境と本番環境の使い分けを理解する

GitHub へ push

gh repo create my-site --private --source=. --remote=origin --push
# または手動で
# git init
# gh repo create my-site --private
# git remote add origin https://github.com/you/my-site.git
# git push -u origin main

Vercel へインポート

  1. vercel.com/new を開く
  2. GitHub リポジトリを選択
  3. Framework Preset が Next.js になっていることを確認
  4. 環境変数（まだあれば）を入力
  5. Deploy ボタン
  6. 2〜3分で my-site-xyz.vercel.app のURLが発行される

プレビュー環境の仕組み

main 以外のブランチを push したり、Pull Request を作ると、Vercel がブランチ毎の独自プレビューURLを自動生成。クライアントに「このURLを見てフィードバックください」と共有できる。

独自ドメインの設定

  1. Vercel の Project → Settings → Domains で yoursite.com を追加
  2. 表示された DNS レコード（通常 A または CNAME）をドメイン管理画面でコピー
  3. DNS 反映を待つ（数分〜数時間）
  4. Vercel が自動で Let's Encrypt から SSL 証明書を発行（HTTPS で公開される）

www の統一

ドメインは yoursite.com と www.yoursite.com が別物扱い。Vercel ではどちらかをメインに設定し、もう一方をリダイレクトにする。SEO 観点で重要。

💡 Cloudflare Registrar を使うメリット

Cloudflare で買ったドメインは、Cloudflare のネームサーバーを使うとDNSキャッシュが速く、独自ドメインの反映が10分程度で完了します。他社だと数時間かかることも。

✏️ MINI QUIZ

Vercel のプレビュー環境が最も活躍するのはどのシーン？

  • A本番公開後のアクセス解析
  • Bクライアントに変更内容を事前確認してもらうとき
  • Cデータベースの移行
✅ 正解！ PR単位のURLは、デザイン確認・コンテンツ確認で絶大な威力を発揮します。
💡 30秒で復習

Vercel デプロイは GitHub 連携で git push 即公開。独自ドメインはCloudflareで管理→VercelにCNAME設定→自動SSL。本番環境変数は Vercel Dashboard で設定。

5.9 お問い合わせフォーム（GAS + メール通知）

⏱ 所要: 約90分 📩 形式: 実装 🔰 前提: 5.8

🎯 このレッスンの到達目標

  • Next.js のフォーム → Google Apps Script → スプレッドシート / Gmail の連携が組める
  • Gmail SMTP で自動返信メールを送信できる
  • リレーショナルDB を使わない「サーバーレス」運用の感覚を身につける

目指すフロー

[LP/HP のフォーム送信]
     ↓ HTTP POST
[Google Apps Script (Web アプリ)]
     ├─ Googleスプレッドシートに追記
     ├─ 自分に新規問い合わせ通知メール
     └─ 申込者に自動返信メール

Step 1: GAS でエンドポイント作成

Googleスプレッドシートを作成し、拡張機能 → Apps Script を開く:

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  // スプシに追記
  sheet.appendRow([
    new Date(),
    data.name,
    data.email,
    data.message,
  ]);

  // 自分に通知
  MailApp.sendEmail({
    to: "you@gmail.com",
    subject: `【新規問合せ】${data.name} 様`,
    body: `${data.name} (${data.email})\n\n${data.message}`,
  });

  // 自動返信
  MailApp.sendEmail({
    to: data.email,
    subject: "お問い合わせありがとうございます",
    body: `${data.name} 様\n\nお問い合わせを承りました。1営業日以内に担当者よりご連絡いたします。`,
  });

  return ContentService.createTextOutput(JSON.stringify({ ok: true }))
    .setMimeType(ContentService.MimeType.JSON);
}

「デプロイ」→「新しいデプロイ」→ ウェブアプリ → 匿名で実行可能 → URLをコピー。

Step 2: Next.js でフォーム実装

// src/app/contact/page.tsx
"use client";
import { useState } from "react";

export default function ContactPage() {
  const [sending, setSending] = useState(false);
  const [done, setDone] = useState(false);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSending(true);
    const form = e.currentTarget;
    const data = {
      name: form.name.value,
      email: form.email.value,
      message: form.message.value,
    };
    await fetch("https://script.google.com/macros/s/XXXX/exec", {
      method: "POST",
      body: JSON.stringify(data),
    });
    setDone(true);
    setSending(false);
  }

  if (done) return <p>送信ありがとうございました</p>;
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" required placeholder="お名前" />
      <input name="email" type="email" required placeholder="メール" />
      <textarea name="message" required placeholder="ご相談内容" />
      <button disabled={sending}>{sending ? "送信中..." : "送信"}</button>
    </form>
  );
}

この構成の魅力

💰 コストゼロ

スプシ・GAS・Gmail すべて無料枠内で動く

🔧 運用が楽

非エンジニアもスプシで一覧・検索できる

📨 メールもGmail

送信ログがGmailで確認できる

⚠️ 制約

Gmail 1日100通の送信上限。大規模サイトでは SendGrid 等が必要。

✏️ MINI QUIZ

このフォーム構成で、小規模HP の問い合わせを無料で受けられる理由は？

  • AVercel が問い合わせ処理を代行してくれる
  • BGoogle Apps Script + Gmail + スプシすべてが無料枠内で動くから
  • C有料の SendGrid を裏で使っている
✅ 正解！ 個人・小規模企業のHPなら十分な規模まで無料で運用できます。
💡 30秒で復習

問合せフォームは ①Google Apps Script(GAS)で受信→スプレッドシート保存→メール送信 ②Resend/SendGrid のAPIで自動返信。スパム対策はreCAPTCHA v3+ハニーポット。

5.10 microCMS で運用自立化（ヘッドレスCMS）

⏱ 所要: 約60分 📝 形式: 実装 🔰 前提: 5.9

🎯 このレッスンの到達目標

  • ヘッドレスCMSが従来CMSと何が違うか説明できる
  • microCMS にAPI スキーマを定義し、Next.js から呼び出せる
  • クライアント自身が管理画面から記事を更新できる状態を作れる

ヘッドレスCMSとは

従来のCMS（WordPress 等）は「管理画面 + DB + 表示画面」が一体。対してヘッドレスCMSは管理画面とAPIのみ担当し、表示画面は Next.js 等で自由に作る構造。

✅ 表示が高速

APIからデータ取得→静的生成。WordPressより圧倒的に速い。

✅ セキュリティが高い

管理画面と表示サイトが分離。管理画面への侵入が表示サイトに波及しない。

✅ デザインが自由

Next.js で好きに作れる。テーマの制約がない。

✅ 運用コスト低

月 $0〜数百円で運用可能。

Step 1: microCMS にサービス作成

  1. microcms.io でアカウント作成
  2. 新規サービス → サービス ID を決める（URLに使われる）
  3. API 作成: 例「news（お知らせ）」
  4. スキーマ定義:
    • title: テキストフィールド・必須
    • publishedAt: 日時
    • body: リッチエディタ
    • category: セレクト（お知らせ / 事例 / プレス）
  5. API キーを Service settings から取得（読取専用を推奨）

Step 2: Next.js から取得

// src/lib/microcms.ts
export async function getNewsList() {
  const res = await fetch(
    `https://${process.env.MICROCMS_SERVICE_DOMAIN}.microcms.io/api/v1/news?limit=20`,
    {
      headers: { "X-MICROCMS-API-KEY": process.env.MICROCMS_API_KEY! },
      next: { revalidate: 60 }, // 60秒キャッシュ
    }
  );
  return (await res.json()).contents;
}

// src/app/news/page.tsx
import { getNewsList } from "@/lib/microcms";

export default async function NewsPage() {
  const news = await getNewsList();
  return (
    <ul>
      {news.map((n) => (
        <li key={n.id}>
          <a href={`/news/${n.id}`}>{n.title}</a>
          <time>{n.publishedAt}</time>
        </li>
      ))}
    </ul>
  );
}

Step 3: 環境変数を Vercel に登録

Vercel → Project → Settings → Environment Variables で:

  • MICROCMS_SERVICE_DOMAIN: 例 mycompany
  • MICROCMS_API_KEY: microCMSで発行した鍵

ISR（Incremental Static Regeneration）

next: { revalidate: 60 } を指定すると、60秒ごとに裏でページを再生成。CMS 更新が1分で反映され、かつ表示はキャッシュから配信されるため高速。

💡 クライアントへの引き渡し

microCMS の管理画面は直感的な日本語UI。「記事の追加・編集はこの管理画面から」と渡すだけで、エンジニア不要の運用が可能に。この運用自立化こそが HP 制作の高付加価値ポイント。

✏️ MINI QUIZ

microCMS を使う最大のメリットは？

  • Aコードを書かずに Web サイトが作れる
  • Bクライアント自身が記事を更新でき、エンジニアの手を離せる
  • CSEO が自動で最適化される
✅ 正解！ 運用フェーズで都度エンジニアに依頼しなくてよいのが最大の価値です。
💡 30秒で復習

microCMS は管理画面でブログ・お知らせを更新できるヘッドレスCMS。月10件まで無料、API経由でNext.jsから取得→ISR（Incremental Static Regeneration）で高速表示。

5.11 SEO / AIO / コンテンツ設計

⏱ 所要: 約90分 🔎 形式: 読み物 + 実装 🔰 前提: 5.10

🎯 このレッスンの到達目標

  • SEO と AIO（AI最適化）の違いと相互関係を理解する
  • テクニカルSEOの必須3点セット（メタ / OGP / 構造化データ）を設定できる
  • 検索評価されるコンテンツの作り方を知る

現代の Web サイトは、Google 検索だけでなく ChatGPT / Gemini / Perplexity といった AI にも引用される設計が標準になりつつあります。「AIO（AI Overview Optimization）」は2024年以降に登場した新しい概念で、SEOの延長線上にあります。

📈 AIO が急速に重要になった背景

2023年以降、ChatGPT / Perplexity の普及で「検索 → クリック → 訪問」ではなく「AI に質問 → AI が要約」という情報取得が主流に。Google も「AI Overview」を検索結果上部に展開。AI に引用されるサイトかどうかが新しい集客軸に。

SEO の3つの柱

  1. テクニカルSEO: クロール・インデックスされやすい技術構造（本章の中心）
  2. コンテンツSEO: 検索意図に応える質の高い内容
  3. 外部SEO: 他サイトからの被リンク・引用

Step 1: メタデータの設定

// 各ページで
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "ページの主題（30文字以内）",
  description: "何を提供しているかを80〜120文字で説明",
  alternates: { canonical: "https://example.com/page-url" },
};

Step 2: OGP（SNSシェア時の見た目）

export const metadata: Metadata = {
  title: "〇〇",
  description: "△△",
  openGraph: {
    title: "〇〇",
    description: "△△",
    images: ["https://example.com/og-image.jpg"],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
  },
};

Step 3: 構造化データ（JSON-LD）

AI が理解しやすい形でページの意味を明示。

// src/app/page.tsx
export default function Home() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: "株式会社〇〇",
    url: "https://example.com",
    logo: "https://example.com/logo.png",
  };
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      {/* ... */}
    </>
  );
}

sitemap.xml / robots.txt

// src/app/sitemap.ts
export default async function sitemap() {
  return [
    { url: "https://example.com", lastModified: new Date() },
    { url: "https://example.com/about" },
    { url: "https://example.com/services" },
  ];
}

// src/app/robots.ts
export default function robots() {
  return {
    rules: [{ userAgent: "*", allow: "/" }],
    sitemap: "https://example.com/sitemap.xml",
  };
}

AIO（AI最適化）のポイント

✅ 構造化された見出し

h1 → h2 → h3 の階層を守り、AIが要点を抽出しやすく。

✅ 箇条書き・表の活用

AI が要約しやすい形式。長文より構造化された情報が好まれる。

✅ FAQ 形式

Q&A 構造はAIの引用源として強い。FAQPage の構造化データも。

✅ 権威性の明示

著者名・更新日・出典を明示。信頼度指標として重要。

コンテンツの作り方（評価される記事）

  • 検索意図への応答: タイトルで約束したことを本文で必ず達成
  • 具体例と数字: 「効果がある」ではなく「3ヶ月で CVR 2.3倍」
  • 体験談: AI では書けない独自の1次情報
  • 網羅性と深さ: テーマを多角的に、しかし冗長にしない
  • E-E-A-T: 経験・専門性・権威性・信頼性（Googleが重視する要素）
✏️ MINI QUIZ

AI が回答に引用しやすいコンテンツ構造として、もっとも効果的なのは？

  • A1段落で情報を全部まとめる
  • B見出しで構造化し、箇条書き・表・FAQ を適切に使う
  • Cできるだけ長い文章にする
✅ 正解！ AIは構造化された情報を要約しやすく、その部分が引用されやすくなります。
💡 30秒で復習

SEO は title/description/OGP の基本3点+ schema.org構造化データ。AIO（AI Optimization）は要点を冒頭に置き、Q&A形式で書くとAI検索（ChatGPT/Perplexity）に拾われやすい。

5.12 公開前チェック + スパム対策 + 運用改善

⏱ 所要: 約60分 🛡 形式: チェック + 実装 🔰 前提: 5.11

🎯 このレッスンの到達目標

  • 本番公開前のチェックリストを消化できる
  • reCAPTCHA / ハニーポット等のスパム対策を実装できる
  • 公開後の運用サイクル（計測 → 改善）をイメージできる

公開前チェックリスト

スパム対策の3点セット

① reCAPTCHA v3

Google が提供する、ユーザーに負担をかけないスパム判定（スコアリング方式）。

// クライアント側
<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY" />

grecaptcha.execute(SITE_KEY, { action: 'submit' })
  .then(token => {
    // トークンをサーバーに送る
  });

// サーバー側で検証（score が 0.5 以上なら人間と判定）

② ハニーポット

人間には見えない隠しフィールドを入れ、ボットが入力したら拒否するシンプルな対策。

<input
  type="text"
  name="website"
  tabIndex={-1}
  autoComplete="off"
  style={{ position: 'absolute', left: '-9999px' }}
/>
{/* サーバーで website が空でなければスパム判定 */}

③ レート制限

同じ IP からの連続送信を制限。GAS 側で判定するか、Vercel の Edge Middleware で実装。

公開後の運用サイクル

📊 計測

・GA4 でトラフィック
・Search Console で検索流入
・Vercel Analytics で Core Web Vitals
・フォーム送信数

💡 仮説

「このページの離脱が多い」
「CTAボタンが押されていない」
「検索流入の伸び悩み」

🛠 改善

ヒーローの書き換え / CTA の色・位置変更 / コンテンツ追加

📈 検証

2週間計測 → 効果あり採用 / なしロールバック

🎓 Module 5 修了チェック

🎊 HP制作プロフェッショナルの完成！

Module 5 を修了したあなたは、要件定義 → 実装 → 運用まで一気通貫で対応できるWeb制作者です。
これは2026年の市場で個人で月60万円〜の案件を受けられるスキルセット。法人研修でも高単価で提案できる武器になります。
次の Module 6 からは、制作の先にあるAI エージェント運用 → 自動化 → SaaS化の応用領域へ。

✏️ FINAL QUIZ

HP公開後の運用で、もっとも重要なマインドセットは？

  • A一度完成したら触らない
  • B計測 → 仮説 → 改善 → 検証を継続的に回す
  • C定期的にデザインを刷新する
✅ 正解！ HPは「作って終わり」ではなく「運用しながら磨く」もの。データに基づく改善が成果を最大化します。
💡 30秒で復習

公開前チェック：①全リンク確認 ②モバイル表示 ③問合せフォーム実機テスト ④Lighthouse 90点以上 ⑤OGP表示確認 ⑥Search Console登録 ⑦GA4設置 ⑧スパム対策動作確認。