Phase 2 ベースラインで何ができるか

公開日: 2026-05-11

これは /lab/<product>/ 配下に置く商品 MVP ページの 書き味と組版を 1 件分通しで確認する ためのサンプル記事です。Phase 4 以降に追加する記事は、このページと同じ構造（page.mdx の YAML frontmatter + 本文 + 必要な React コンポーネント）で書きます。

サンプル商品（demo）

Back10 Sample Product

¥9,800

公式サイトで購入する

できるようになったこと

.mdx ファイル先頭の YAML frontmatter で <title> と <meta description> が設定できる
本文中で Markdown 構文 と 任意の React コンポーネント を混在させられる
output: "export" の静的ビルドで out/lab/sample/index.html まで吐かれる
trailingSlash: true の効果で /lab/sample/ がそのまま 200 で返る

サンプル：複数の Callout

Callout コンポーネントは mdx-components.tsx でグローバル登録しているので、MDX 上部での import 無しで使えます。

次にやること

このページは 構造確認 のためのもので、内容そのものに価値はありません。Phase 4 に入ったら、ここの構造をベースに：

商品ごとの /lab/<product>/page.mdx
共通レイアウト（ヘッダー・パンくず・関連商品など）
集計用の slug / metadata 拾い上げ

を整備していきます。

よくある質問

このサンプル記事の商品は実在しますか？

いいえ、構造確認のためのダミーです。実際の商品リンクは Phase 4 で個別記事として整備します。

アフィリエイトリンクはどう動きますか？

AffiliateButton は target="_blank" + rel="sponsored nofollow noopener" を必ず付け、クリック時に GA4 へ affiliate_click イベント（product_slug / asp_name / link_position）を送信します。Phase 6 で DB に永続化する予定。

FAQ を追加するにはどうすればいいですか？

MDX 本文中で <FAQ items={[{q, a}, ...]} /> を呼ぶだけ。コンポーネントは mdx-components.tsx で global 登録済みなので import は不要です。