情報発信メディア「info.h3incover.com」の新規構築における技術選定と実装ログ

新規構築の背景

H3 Incoverのブランドサイトとは別に、日々の知見や研究結果をアウトプットする拠点として、今回ブログメディア info.h3incover.com を立ち上げました。

このメディアは、以下のような要件を満たす必要がありました。

表示速度の速さ（SEOおよびユーザー体験のため）
運用の軽さ（DBや管理画面を置かず、エンジニアがGit管理で手軽に更新できること）
拡張性の高さ（将来的にヘッドレスCMS等の導入時にも構造を崩さないこと）
ブランドに合わせたミニマルなデザイン

これらを満たすため、今回は Next.js (App Router) と Tailwind CSS を採用した静的ジェネレート（SSGベース）の構成を選定しました。

技術スタックの選定理由

1. Next.js (TypeScript)

Next.js は、Reactベースの強力なフレームワークであり、App Router を活用することで高効率なサーバーコンポーネント（React Server Components = RSC）の恩恵を受けることができます。また、TypeScriptによってデータのやり取りやコンポーネント間のインターフェースを厳格に定義できるため、後々のバグを防ぎ、スムーズな拡張を可能にします。

2. Tailwind CSS

スタイルシート（CSS）の容量を最小限に抑えつつ、一貫したデザインシステムを構築するために採用しました。 H3 Incoverのアイデンティティである「白ベース、余白多め、読みやすい、落ち着いたトーン」を効率的に実現するため、テーマカラーや余白のルール（ユーティリティクラス）をデザインに合わせて最適化しています。

3. Markdown/MDX + gray-matter

初期段階では記事データをデータベースではなく、プロジェクト内の src/content/posts/ に格納するMarkdown形式で管理します。 gray-matter を使用して記事のメタデータ（タイトル、投稿日、カテゴリ等）をパースし、marked でHTMLにレンダリングします。これにより、将来的にコンテンツをヘッドレスCMS（microCMS等）へ移行する際も、パース部分の差し替えだけで済み、表示コンポーネントの修正を最小限に留めることができます。

実装のポイント

OGPとSEOメタデータの共通化

Next.js の Metadata API を活用し、各ページでのメタ情報（タイトル、ディスクリプション、OGP画像）の設定を自動化・共通化しました。記事詳細ページでは、記事データから動的に生成し、構造化データ（JSON-LD）も同時に挿入されるよう実装しています。

シンプルな目次（TOC）抽出

Markdownの内容を解析して見出し（h2, h3）を抽出し、記事詳細ページに自動で目次を生成する仕組みを実装しました。これにより、長い記事でもスクロールせずに全体像を把握できるようになり、情報設計の思想を体現しています。

課題と今後のロードマップ

今回の第1フェーズでは、まずは記事の投稿・一覧表示・カテゴリ別フィルタといった基本機能を最速でリリースすることに注力しました。今後は以下のような改善を予定しています。

画像の自動最適化 (next/image) のフル活用
記事の検索機能の追加
お問い合わせフォームの設置
アフィリエイト導線の検証とCTAの最適化