---
title: "YouTube投稿一覧機能 画面設計書"
---

最終更新: 2026-08-12

## 1. 概要

モーニング娘。公式 YouTube チャンネルおよび OG メンバー個人チャンネルの動画投稿を閲覧する画面群の設計書。
データ基盤（テーブル・型定義・収集ワークフロー）は [youtube-data-design.md](/design/sns/youtube-data-design) を参照。

- 親 Issue: #1097 / UI 実装: #1106

---

## 2. 画面一覧（YouTube 関連）

| 画面名 | URL パターン | レンダリング方式 | 追加バージョン |
| --- | --- | --- | --- |
| YouTube投稿一覧 | `/youtube` | SSR（動的） | v6.5.0 |
| YouTube公式チャンネル | `/youtube/official` | SSR（動的） | v6.5.0 |
| YouTube OGチャンネル | `/youtube/og/[memberId]` | SSR（動的） | v6.5.0 |

---

## 3. YouTube投稿一覧画面（`/youtube`）

### 概要

公式チャンネルページと OG メンバー各チャンネルページへの入口となるハブ画面。

### 表示コンテンツ

| セクション | 内容 |
| --- | --- |
| ヘッダー | 「← ホームへ戻る」リンク・タイトル「YouTube」・説明文・`DisclaimerNote`（「（画像は参考表示：権利は投稿者に帰属しています）」） |
| 公式チャンネル | `/youtube/official` へのリンクカード（チャンネル名＋説明） |
| OGメンバーチャンネル | `youtubeChannel` が設定された OG メンバーのリンクカードをグリッド表示（メンバー名＋ハンドル）。`/youtube/og/[memberId]` へ遷移 |

### データソース

- Vercel Blob のメンバーデータ（`youtubeChannel` フィールドの有無で対象を判定。`sortMembers` 順で表示）

### データなし表示

- 対象 OG メンバーが 0 件の場合は「チャンネル登録済みのOGメンバーがいません。」の glass カードを表示

---

## 4. YouTube公式チャンネル画面（`/youtube/official`）

### 概要

公式チャンネルの動画を 5 件ずつ Embed（`<iframe>`）で表示する。ページ切り替えで過去投稿も閲覧できる。

### 表示コンテンツ

| セクション | 内容 |
| --- | --- |
| ヘッダー | 「← YouTube投稿一覧へ戻る」リンク・タイトル「モーニング娘。公式 YouTube」・`DisclaimerNote`（「（画像は参考表示：権利は投稿者に帰属しています）」） |
| 投稿グリッド | `YoutubePostCard`（Embed＋タイトル＋公開日時 JST）を公開日降順で 5 件表示 |
| ページネーション | 「← 前のページ」「ページ X / Y」「次のページ →」。`?page=` クエリパラメータによるリンク方式（クライアント JS なし） |

### ページネーション仕様

- 1 ページ 5 件、`publishedAt` 降順
- `page` が未指定・不正値（数値以外・0 以下）の場合は 1 ページ目として扱う
- 総ページ数が 1 の場合はナビ自体を非表示
- 先頭ページでは「前のページ」、最終ページでは「次のページ」を非表示

### データソース

- `getOfficialYoutubePosts(page, pageSize)`（Neon `youtube_posts`、`unstable_cache` 30 分）

### データなし表示

- 「投稿データが見つかりませんでした。」の glass カードを表示

---

## 5. YouTube OGチャンネル画面（`/youtube/og/[memberId]`）

### 概要

OG メンバー個人チャンネルの保存済み最新 5 件を Embed で固定表示する（ページ切り替えなし。収集側がメンバーごとに最新 5 件のみ保持するため）。

### 表示コンテンツ

| セクション | 内容 |
| --- | --- |
| ヘッダー | 「← YouTube投稿一覧へ戻る」リンク・タイトル「`{メンバー名}` YouTube」・ハンドル表示・「メンバー詳細へ」リンク・`DisclaimerNote`（「（画像は参考表示：権利は投稿者に帰属しています）」） |
| 投稿グリッド | `YoutubePostCard` を公開日降順で最大 5 件表示 |

### `memberId` が存在しない場合

- メンバーが見つからない、または `youtubeChannel` 未設定の場合は `notFound()`（404）

### データソース

- Vercel Blob のメンバーデータ（メンバー名・ハンドル）
- `getOgYoutubePosts(memberId)`（Neon `youtube_posts`、`unstable_cache` 30 分）

---

## 6. TOPページへの追加（新着投稿セクション）

### YouTube セクション

- `SectionLabel`（color: `#FF0000`（YOUTUBE_COLOR）、label: `YouTube`、href: `/youtube`、取得日時付き）。セクション名が YouTube投稿一覧ページへのリンクになる
- 表示対象: **最新公開日（JST）と同日に公開された投稿**（公式・OG 合算、最大 10 件）。TikTok セクションの「最新投稿日の投稿を表示」と同じ考え方
- カード（`YoutubeNewPostCard`）: ラベル（公式は「モーニング娘。公式」・OG はメンバー名）＋サムネイル（`i.ytimg.com/vi/{videoId}/hqdefault.jpg`、16:9、メディアタグ「YT」、メンバーカラーアクセント）＋タイトル（2 行 clamp）。クリックで YouTube の動画ページを新規タブで開く
- **サムネイル読み込み失敗時**（動画の削除・非公開化など）: タイトルのみの glass リンクカードにフォールバック（TikTok と同パターン）

---

## 7. コンポーネント構成

| コンポーネント | 種別 | 役割 |
| --- | --- | --- |
| `YoutubeEmbed` | Server | `https://www.youtube.com/embed/{videoId}` の `<iframe>`（16:9・lazy load・allowFullScreen） |
| `YoutubePostCard` | Server | `YoutubeEmbed`＋タイトル＋公開日時（JST）の glass カード。公式・OG チャンネルページで使用 |
| `YoutubeNewPostCard` | Client | TOP 新着投稿セクション用サムネイルカード。`onError` でフォールバック表示に切り替えるため Client Component |

---

## 8. クロスリンク設計図

```mermaid
graph LR
  Home["ホーム（新着投稿セクション）"] -->|SectionLabel| List["/youtube"]
  List --> Official["/youtube/official"]
  List --> Og["/youtube/og/[memberId]"]
  Og --> Member["/members/[id]"]
  Official -->|?page=N| Official
```

---

## 改訂履歴

| 版 | 更新日 | 変更内容 |
| --- | --- | --- |
| 1.2 | 2026-08-12 | SNS投稿一覧のルール統一（#1491）: `/youtube` 画面のタイトルを「YouTube投稿一覧」から媒体名のみの「YouTube」に変更。表示順（公式チャンネル→OGメンバーチャンネル）は既に統一ルールに適合済みのため変更なし |
| 1.1 | 2026-07-18 | 実装との乖離是正: Topページの新着投稿カードのYouTube公式ラベル文言（「公式」→「モーニング娘。公式」）、`DisclaimerNote`表示の記載漏れを解消（#1366） |
| 1.0 | 2026-06-12 | 初版作成（#1106） |