# WordPress保守講座 DESIGN.md

## 位置づけ

TOFUラボ資料内の4つ目ページ。  
4つ目のLPを、**ナオミさんのWordPress保守講座LP**として設計する。

目的は「かっこいいデモ」ではなく、WordPressの更新・バックアップ・復旧に不安がある人から講座申込/相談を取ること。

## 参考サイト

- `https://oto-01-motion-showcase.netlify.app/`

## 参考から借りる原則

- 黒背景と青い発光で、仕組みが中央に浮く見せ方
- 固定ヘッダー + 左側チャプターナビ
- 大きな英字ヒーローと短い日本語コピー
- スクロールに合わせた緩いスキャン/粒子/文字の変化
- Routine / Tools / Class / Apply のようなプロダクトショーケース構造
- 料金・持ち帰るもの・対象者を早めに見せる

## コピーしないもの

- OTOのロゴ、名前、ヘッドフォン、コピー
- 「SILENCE, REDESIGNED.」などの固有見出し
- 同じ分解図・同じ構図・同じ演出タイミング
- WordPress公式ロゴの模写

## LPコンセプト

**Naomi WP Care Class — WordPress保守講座**

WordPress保守を「更新ボタンを押す作業」ではなく、
制作後のサイトを壊さず、止めず、説明できる状態にする実務として見せる。

## 主要CTA

- ヘッダー: 講座案内を受け取る
- ヒーロー: 講座案内を受け取る
- プランカード: 相談する / 案内を受け取る / 見積もる
- 最終フォーム: 講座案内を申し込む

## セクション構成

1. INTRO
   - `WORDPRESS, MAINTAINED.`
   - 更新で壊さない。止まっても、あわてない。
   - 中央にima2-gen加工のナオミさん写真を黒/青の保守ダッシュボード風カードとして配置
2. TRUST STRIP
   - Backups / Updates / Security / Uptime / Reports / Recovery
3. ROUTINE
   - 保守は、気合いではなく手順。
   - バックアップ、更新確認、セキュリティ、月次レポート
4. PHILOSOPHY
   - サイトは、作った日より、守り続ける日の方が長い。
5. TOOLS
   - 更新前の不安を、手順に変える。
   - 右側は棒グラフではなく、12項目チェック/復旧判断/レポート雛形の実務ツールカードとして見せる
6. CLASS
   - 講座中に一緒に点検する → 12項目チェック表にする → 毎月同じ順番で守る
   - 英語の数式風帯ではなく、3ステップカードと「受講後に残るもの」で直感的に見せる
   - 無料相談 / 実務講座 / 保守設計
   - 3カードのボタン文言は「講座案内を受け取る」に統一する
7. APPLY
   - 名前、メール、サイトの状態、相談したい内容、相談内容
   - ima2-gen加工の不安な表情の2枚目写真を添えて「更新前の不安」を視覚化

## モーション方針

ユーザー指摘: 前回の桜演出は風情がなく、背景が早く、桜が雑だった。  
今回は花びらや和紙演出を撤去し、OTO風の静かな保守ダッシュボード/スキャン演出に寄せる。

- 背景粒子は非常に遅く、装飾ではなく奥行きとして使う
- ヒーローのスキャン線はゆっくり動く
- 中央写真/ビジュアルはわずかに拡大/上昇するだけ
- 申込エリアの2枚目写真は静止画として使い、フォームの邪魔をしない
- 文字演出はPHILOSOPHYに限定。TOOLS見出しは読みやすさ優先で静止表示
- `prefers-reduced-motion` ではCanvasと変形を停止

## 本番投入時の未接続箇所

静的プレビューでは外部送信を行わない。実公開前に以下を接続する。

- フォーム送信先: CRM / LINE / メール / Google Sheetsなど
- サンクスページまたは自動返信
- GA4 / Meta Pixel / LINEタグ
- 利用規約・プライバシーポリシー
- 実際の開催日・受講形式・講師プロフィール

## NG

- セミナー用デモ感をページ本文に出す
- WordPress公式のロゴ/商標を公式講座のように扱う
- 「更新するだけで簡単です」と軽く見せすぎる
- 料金や持ち帰るものを隠して、問い合わせしか選べないLPにする
- 背景演出が速すぎて読む邪魔になる