特典ページの作成とデプロイ
このモジュールで学ぶこと
- 特典ページの2つの形式（Webページ / PDF）
- Webページ形式の作成手順（content/gifts/*.md）
- GitHub Pushとデプロイの流れ
- PDF形式の作成とGoogle Drive共有
学習目標
このモジュールを終えると、以下のことができるようになります：
- Webページ形式の特典ページをMarkdownで作成できる
- GitHubにPushしてVercelでデプロイできる
- PDF形式の特典をCanvaで作成し、配布リンクを発行できる
目次
- セクション1: 特典ページの2つの形式
- セクション2: Webページ形式の作成
- セクション3: デプロイ（GitHub Push → Vercel）
- セクション4: PDF形式の作成
- トラブルシューティング
- まとめ
- よくある質問
事前準備
必要なもの
| 項目 | 説明 |
|---|---|
| VS Code | Markdown編集用 |
| Git | バージョン管理 |
| GitHub アカウント | リポジトリ管理 |
| Vercel アカウント | デプロイ用（GitHub連携済み） |
| Canva アカウント | PDF作成用（任意） |
前提知識
- Markdownの基本構文
- Gitの基本操作（add, commit, push）
セクション1: 特典ページの2つの形式
形式の比較
| 項目 | Webページ形式 | PDF形式 |
|---|---|---|
| 配置場所 | /gift/{slug} | Google Drive |
| 更新 | 容易（Markdown編集） | やや手間（再作成） |
| アナリティクス | Vercelで取得可能 | Bitly等で計測 |
| オフライン閲覧 | 不可 | 可能 |
| 見た目 | サイトと統一 | デザイン自由 |
推奨の使い分け
Webページ形式（推奨）:
・テキスト中心のガイド
・頻繁に更新する可能性がある
・アナリティクスを取りたい
PDF形式:
・ダウンロードして保存してほしい
・オフラインで使ってほしい
・デザイン重視のコンテンツ
チェックポイント
- 2つの形式の違いを理解した
- どちらの形式を使うか判断できる
セクション2: Webページ形式の作成
特典ページの仕様
| 項目 | 仕様 |
|---|---|
| URL | /gift/{slug} |
| 配置先 | content/gifts/{slug}.md |
| ヘッダー | なし（離脱防止） |
| フッター | なし（離脱防止） |
| ナビゲーション | なし |
| 外部リンク | 最小限 |
Step 1: ファイルを作成
content/gifts/ディレクトリに新しいMarkdownファイルを作成します。
content/
└── gifts/
├── sample-chatgpt-canvas.md ← サンプル（既存）
└── your-new-gift.md ← 新規作成
ファイル名がslugになります：
- ファイル名:
chatgpt-canvas-guide.md - URL:
/gift/chatgpt-canvas-guide
Step 2: 基本構造を記述
以下のテンプレートをコピーして使用します：
# タイトル
---
## このガイドで学べること
- ポイント1
- ポイント2
- ポイント3
---
## 目次
- [セクション1: 〇〇](#セクション1-〇〇)
- [セクション2: △△](#セクション2-△△)
- [セクション3: □□](#セクション3-□□)
- [まとめ](#まとめ)
---
## セクション1: 〇〇
（内容を記述）
### チェックポイント
- [ ] 確認項目1
- [ ] 確認項目2
---
## セクション2: △△
（内容を記述）
### チェックポイント
- [ ] 確認項目1
- [ ] 確認項目2
---
## セクション3: □□
（内容を記述）
### チェックポイント
- [ ] 確認項目1
- [ ] 確認項目2
---
## まとめ
### このガイドで学んだこと
- 学んだこと1
- 学んだこと2
- 学んだこと3
### 次にやること
1. アクション1
2. アクション2
3. アクション3
---
## よくある質問
**Q: 質問1**
A: 回答1
**Q: 質問2**
A: 回答2
**Q: 質問3**
A: 回答3
Step 3: コンテンツを記述
AIで生成したコンテンツを元に、各セクションを埋めていきます。
サンプル: content/gifts/sample-chatgpt-canvas.mdを参照
Step 4: ローカルで確認
開発サーバーで表示を確認します：
npm run dev
ブラウザでhttp://localhost:3000/gift/{slug}にアクセス。
チェックポイント
-
content/gifts/にMarkdownファイルを作成した - テンプレートに沿ってコンテンツを記述した
- ローカルで表示を確認した
セクション3: デプロイ（GitHub Push → Vercel）
Step 1: 変更をステージング
git add content/gifts/your-new-gift.md
Step 2: コミット
git commit -m "feat: 特典ページ your-new-gift を追加"
Step 3: プッシュ
git push origin master
Step 4: Vercelで自動デプロイ
GitHub Pushをトリガーに、Vercelが自動でビルド・デプロイします。
Push → Vercel検知 → ビルド（1-2分）→ デプロイ完了
Step 5: 本番URLを確認
デプロイ完了後、本番URLで表示を確認：
https://your-domain.vercel.app/gift/{slug}
チェックポイント
- GitHubにPushした
- Vercelでデプロイが完了した
- 本番URLで表示を確認した
セクション4: PDF形式の作成
Webページ形式ではなくPDFで配布する場合の手順です。
Step 1: Canvaでデザイン
- Canvaにアクセス
- 検索バーに「checklist」「guide」「ebook」などを入力
- テンプレートを選択してカスタマイズ
おすすめ検索ワード:
| 特典タイプ | 検索ワード |
|---|---|
| チェックリスト | checklist, to-do list |
| ステップガイド | guide, how-to, tutorial |
| リスト系 | list, tips |
Step 2: コンテンツを入力
- AIで生成したコンテンツをコピー&ペースト
- ブランドカラーに合わせて色を調整
- ロゴやSNSアカウント名を追加
Step 3: PDFでダウンロード
- 右上の「共有」→「ダウンロード」
- ファイル形式を「PDF（標準）」に設定
- 「ダウンロード」をクリック
Step 4: Google Driveで共有
- Google Driveにアクセス
- 「＋新規」→「ファイルのアップロード」
- PDFをアップロード
- 右クリック→「共有」→「リンクを知っている全員」に変更
- 「リンクをコピー」
Step 5: 短縮URL（任意）
Bitlyでリンクを短縮すると、クリック数を計測できます。
チェックポイント
- CanvaでPDFを作成した
- Google Driveにアップロードした
- 共有リンクを発行した
トラブルシューティング
特典ページが404になる
症状: /gift/{slug}にアクセスすると404エラー
原因: ファイルパスが間違っている、またはビルドが完了していない
解決方法:
- ファイルが
content/gifts/に配置されているか確認 - ファイル名に拡張子
.mdが付いているか確認 - Vercelのデプロイログを確認
Markdownが正しく表示されない
症状: 見出しやリストが崩れる
原因: Markdown構文エラー
解決方法:
- 見出し（
#）の後にスペースがあるか確認 - リスト（
-）の後にスペースがあるか確認 - コードブロック（```）が正しく閉じられているか確認
まとめ
このモジュールで学んだこと
- 特典ページの2つの形式（Webページ / PDF）
- Webページ形式の作成手順（content/gifts/*.md）
- GitHub Push → Vercelデプロイの流れ
- PDF形式の作成とGoogle Drive共有
次のステップ
Module 04でGASセットアップを行い、スプレッドシートで特典付き投稿を管理します。
よくある質問
Q: 特典ページにアナリティクスは入りますか？ A: Vercelのアナリティクスを使用すれば、アクセス数を計測できます。Vercel Analytics（無料枠あり）を有効にしてください。
Q: 特典ページを非公開にできますか？
A: いいえ。URLを知っている人は誰でもアクセスできます。ただし、URLを推測しにくいslugにする（例: chatgpt-canvas-2025-12）ことで、実質的な非公開にできます。
Q: 画像を入れたい場合はどうすればいいですか？
A: public/gifts/ディレクトリに画像を配置し、Markdownで参照します。例: 
Q: 既存の特典ページを更新したらURLは変わりますか？ A: ファイル名（slug）を変更しなければ、URLは変わりません。内容の更新だけなら同じURLで最新版が表示されます。
Q: PDF形式とWebページ形式を両方用意する必要がありますか？ A: いいえ。どちらか一方で十分です。運用のしやすさを考えるとWebページ形式を推奨しますが、ダウンロード配布が必要な場合はPDF形式も用意してください。