"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", hr: "hr", p: "p", pre: "pre", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["本ガイドは、人気ブログの UI 構成を ", _jsx(_components.strong, { children: "Next.js App Router" }), " + ", _jsx(_components.strong, { children: "next-mdx-remote" }), " で実装する際のリファレンスです。\n各セクションのコード例・構成要素・ベストプラクティスをまとめています。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. ページ全体の構成" }), "\n", _jsx(_components.p, { children: "人気ブログのページ構成は、大きく以下のレイアウトで成り立っています。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "┌─────────────────────────────────┐\n│ Header │\n├──────────────────┬──────────────┤\n│ │ │\n│ メインコンテンツ │ サイドバー │\n│ (記事一覧など) │ │\n│ │ │\n├──────────────────┴──────────────┤\n│ Footer │\n└─────────────────────────────────┘\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. ヘッダー" }), "\n", _jsxs(_components.p, { children: ["PC ではナビゲーションをそのまま表示し、モバイルでは ", _jsx(_components.code, { children: "Sheet" }), "（ドロワー）に切り替えます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { Sheet, SheetTrigger, SheetContent } from '@/components/ui/sheet'\n\nexport function Header() {\n return (\n \n

\n {/* ロゴ */}\n

\n MyBlog\n

\n\n {/* PC ナビゲーション */}\n \n\n {/* モバイルハンバーガーメニュー */}\n

\n \n ☰\n \n \n \n \n

\n \n )\n}\n" }) }), "\n", _jsx(_components.h3, { children: "ヘッダーのポイント" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300 mt-2", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "クラス / 実装" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "sticky top-0 z-50" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スクロール時もヘッダーを上部固定にする" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "hidden md:flex" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "PC のみナビを表示・スマホは非表示" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "md:hidden" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スマホのみハンバーガーを表示・PC は非表示" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "SheetContent side=\"right\"" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "右からスライドするドロワーメニュー" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "transition-colors" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ホバー時の色変化をなめらかにする" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "3. トップページ" }), "\n", _jsx(_components.h3, { children: "構成要素" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "セクション" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "内容" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "備考" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ヒーローセクション" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "キャッチコピー・サブコピー・CTAボタン" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "背景画像 or グラデーションで印象づける" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最新記事一覧" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "カード形式でグリッド表示" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "3〜6件を目安に表示" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "人気記事セクション" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アクセス数や閲覧数でランキング表示" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "サイドバーと兼用も可" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "カテゴリー・タグリンク" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "バッジ形式で一覧表示" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "クリックでフィルタリング" })] })] })] }), "\n", _jsx(_components.h3, { children: "ヒーローセクション" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export function HeroSection() {\n return (\n

\n 技術と日常をつなぐブログ\n

\n Next.js・TypeScript・UI設計など、フロントエンド開発の知見を発信しています。\n

\n \n 記事を読む →\n \n

\n )\n}\n" }) }), "\n", _jsx(_components.h3, { children: "記事カード" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import Image from 'next/image'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\n\ntype PostCardProps = {\n title: string\n date: string\n excerpt: string\n category: string\n slug: string\n thumbnail: string\n}\n\nexport function PostCard({ title, date, excerpt, category, slug, thumbnail }: PostCardProps) {\n return (\n \n \n

\n \n

\n \n {category}\n

{title}

{date}

{excerpt}

\n \n \n \n )\n}\n" }) }), "\n", _jsx(_components.h3, { children: "記事一覧グリッドレイアウト" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export function PostGrid({ posts }: { posts: PostCardProps[] }) {\n return (\n

{title}

\n 公開: {date}\n {updated !== date && 更新: {updated}}\n

\n {tags.map((tag) => (\n #{tag}\n ))}\n

\n )\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["6. カテゴリーページ（", _jsx(_components.code, { children: "/category/[slug]" }), "）"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export default function CategoryPage({ params, posts }: CategoryPageProps) {\n return (\n

\n {/* カテゴリータイトル */}\n

カテゴリー

{params.slug}

{posts.length} 件の記事

\n\n {/* 記事一覧 */}\n

\n {posts.map((post) => (\n \n ))}\n

\n )\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "7. フッター" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export function Footer() {\n return (\n \n )\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "8. SEO・メタデータ設定" }), "\n", _jsxs(_components.p, { children: ["Next.js App Router では、各ページの ", _jsx(_components.code, { children: "metadata" }), " を以下のように設定します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/posts/[slug]/page.tsx\nimport type { Metadata } from 'next'\n\nexport async function generateMetadata({ params }: Props): Promise {\n const post = await getPostBySlug(params.slug)\n\n return {\n title: `${post.title} | MyBlog`,\n description: post.description,\n openGraph: {\n title: post.title,\n description: post.description,\n images: [{ url: post.ogImage ?? '/og-image.png' }],\n type: 'article',\n publishedTime: post.date,\n modifiedTime: post.updated,\n },\n twitter: {\n card: 'summary_large_image',\n title: post.title,\n description: post.description,\n images: [post.ogImage ?? '/og-image.png'],\n },\n }\n}\n" }) }), "\n", _jsx(_components.h3, { children: "JSON-LD 構造化データ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export function ArticleJsonLd({ post }: { post: Post }) {\n const jsonLd = {\n '@context': 'https://schema.org',\n '@type': 'Article',\n headline: post.title,\n datePublished: post.date,\n dateModified: post.updated,\n author: {\n '@type': 'Person',\n name: post.author,\n },\n image: post.ogImage ?? '/og-image.png',\n description: post.description,\n }\n\n return (\n \n )\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "9. ベストプラクティス一覧" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "カテゴリー" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "実装内容" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "優先度" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "SEO" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "metadata API でタイトル・description・OGP を設定" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "SEO" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "JSON-LD による Article 構造化データを各記事に追加" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "パフォーマンス" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "next/image で画像を最適化（WebP 変換・遅延読み込み）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "パフォーマンス" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "App Router + SSG（generateStaticParams）で静的生成" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "パフォーマンス" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ISR（revalidate）で更新頻度に応じた再生成を設定" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "UX" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事カードに line-clamp でテキスト省略を適用" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "UX" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "モバイル対応のハンバーガーメニュー（Sheet コンポーネント）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "UX" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ダークモード対応（dark: プレフィックス）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アクセシビリティ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "画像に適切な alt テキストを設定" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アクセシビリティ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "time 要素に dateTime 属性を設定" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "コンテンツ管理" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: ".mdx ファイル + Contentlayer or next-mdx-remote で管理" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "コンテンツ管理" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "プライバシーポリシー・利用規約は固定ページ（/privacy, /terms）で実装" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "分析" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Google Analytics または Vercel Analytics を導入" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "デプロイ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Vercel へデプロイ・Edge Function の活用" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] })] })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

\n 技術と日常をつなぐブログ\n

{title}

最新の記事

人気ブログのUI構成ガイド