Skip to main content

新規ページ作成ガイド

このドキュメントは、rilii.devサイトで新規ページを作成する際の完全なガイドです。

📋 作業チェックリスト​

必須作業​

  • 記事ファイルの作成
  • frontmatterの設定
  • 画像ファイルの配置
  • OG画像の生成確認
  • ビルドテスト

任意作業​

  • アドベントカレンダー情報の追加
  • 特別なタグの設定

🎯 アナリティクス機能について​

自動対応ページ​

✅ 対応済み（設定不要）

  • ブログ記事ページ（/article/配下）
  • 以下のイベントが自動追跡されます：
    • スクロール深度（25%, 50%, 75%, 90%, 100%）
    • 外部リンククリック
    • コードブロックコピー

未対応ページ​

❌ 手動設定が必要

  • docsページ（/docs/配下）
  • カスタムページ（/src/pages/配下）
  • 静的ページ

📝 ブログ記事の作成手順​

1. 記事フォルダの作成​

mkdir article/{記事のslug}
cd article/{記事のslug}

2. 記事ファイルの作成​

ファイル名：{記事のslug}.md

---
slug: 記事のslug
title: 記事のタイトル
authors: rilii
date: 2024-01-01
tags: [tag1, tag2, tag3]
image: /img/og/{記事のslug}.png
---

記事の内容をここに書く...

3. frontmatterフィールド詳細​

必須フィールド​

slug: string         # URL用識別子（英数字、ハイフン）
title: string        # 記事タイトル
authors: rilii       # 著者ID（authors.ymlで定義済み）
date: YYYY-MM-DD     # 公開日（ISO形式）

任意フィールド​

tags: [string]       # タグ配列
image: string        # OG画像パス（自動生成時は省略可）

アドベントカレンダー用フィールド​

advent_calendar_title: string   # カレンダー名
advent_calendar_url: string     # カレンダーURL
advent_calendar_number: number  # 日付番号

4. 画像ファイルの配置​

# 記事フォルダ内に画像を配置
article/{記事のslug}/
├── {記事のslug}.md
├── image1.png
├── image2.png
└── diagram.png

画像の参照方法：

![説明テキスト](image1.png)

5. OG画像の生成​

OG画像は自動生成されます。

自動生成の条件：

  • npm run build実行時
  • 記事のタイトルから自動生成
  • 保存場所：/static/img/og/{記事のslug}.png

手動生成：

npm run generate-og

6. ビルドとテスト​

# OG画像生成を含む完全ビルド
npm run build

# 高速ビルド（OG画像生成をスキップ）
npm run build:fast

# 開発サーバーでテスト
npm run start

🔧 その他のページタイプ​

docsページの作成​

# docsフォルダに作成
docs/新しいページ.md

注意： docsページはアナリティクス機能が未対応です。

カスタムページの作成​

# src/pagesフォルダに作成
src/pages/カスタムページ.tsx

注意： カスタムページはアナリティクス機能が未対応です。

🚨 よくある問題と対処法​

OG画像が生成されない​

  1. frontmatterのtitleが設定されているか確認
  2. npm run generate-ogを手動実行
  3. /static/img/og/フォルダの存在確認

アナリティクスが動作しない​

  1. ブログ記事ページ（/article/配下）であることを確認
  2. 本番環境でのみ動作（開発環境では無効）
  3. GTMの設定が正しく公開されているか確認

画像が表示されない​

  1. 画像ファイルが記事フォルダ内にあることを確認
  2. 相対パスで参照されているか確認
  3. ファイル名に日本語や特殊文字が含まれていないか確認

Mermaidダイアグラム（図）がダークテーマで見にくい​

問題： ダークテーマ時にMermaidダイアグラムの文字が見にくくなる場合があります。

対策： CSSによる自動修正が適用されています（custom.css）

  • ダークテーマ時でも、Mermaidダイアグラムは白背景に黒文字で表示されます
  • ライトテーマと同じ見た目を維持し、常に読みやすい表示が保たれます

Mermaidダイアグラム作成時の推奨設定：

  • 上記の設定を追加することで、テーマに関わらずライトテーマのスタイルを維持できます
  • スタイル設定時はcolor:#000を明示的に指定することを推奨します

📊 SEO最適化チェックリスト​

必須項目​

  • titleタグの設定（frontmatter）
  • meta descriptionの設定（記事の最初の段落）
  • OG画像の生成確認
  • 適切なタグの設定

推奨項目​

  • 記事内の見出し構造（H2, H3の適切な使用）
  • 外部リンクの適切な設定
  • 画像のalt属性の設定

🔄 デプロイ後の確認​

1. ページの表示確認​

  • 記事ページの表示
  • OG画像の表示
  • 画像の表示

2. アナリティクスの動作確認​

  • GA4リアルタイムレポートでイベント確認
  • スクロール、リンククリック、コードコピーのテスト

3. SEO確認​

  • Google Search Consoleでのインデックス確認
  • OGP画像の正しい表示確認

📞 サポート​

問題が発生した場合は、以下を確認してください：

  1. ビルドエラー：frontmatterの形式確認
  2. 画像表示エラー：ファイルパスと拡張子確認
  3. アナリティクス問題：本番環境での動作確認

このガイドに従って作成することで、SEO最適化とアナリティクス追跡が自動的に設定された高品質なページを作成できます。

目次