「テック系メディアの記事詳細ページ」を、コンポーネント分割で一から作った構築デモです。特定サイトのデザイン模倣ではなく、情報の並び順とブロックの役割（構成）を設計し、Next.js（App Router）＋ Tailwind CSS で実装しました。
何を作ったか
- ヘッダー／グローバルナビ、記事ヘッダー（連載名・第N回・シェアボタン）
- ページ内ページャー（記事を複数ページに分割、上下2箇所）
- 本文：アイキャッチ＋キャプション／リード文／画像／YouTube埋め込み
- 厚い回遊導線：この連載の記事・編集部オススメ・カテゴリ別ランキング・タイアップ枠
- 多段フッター、フルレスポンシブ（スマホは1カラム／カード縦積み）
技術
Next.js App Router / TypeScript / Tailwind CSS。記事データはJSONで外出しし、各コンポーネントに props で注入。セマンティックHTML（article / nav / aside / footer）・画像の遅延読み込み・連番ページャー（/記事ID/2/）に対応しています。
※ 記事内容・画像はすべてダミーです。レイアウトと情報設計（構成）を確認するためのデモページです。