Landing PageJapanPicked 2026.09.28

Pococha GoTo10周年カウントダウンサイト

LPのWebデザイン参考 — ライブ配信アプリ・周年企画

サイトを見るgoto10th.pococha.com

goto10th.pococha.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

10周年までの残り日数を、めくり式の数字で見せる。

DeNAのライブ配信アプリPocochaのGoTo10周年カウントダウンサイトは、540px幅のカラムに日数と挨拶を通し、左に目次、右にキャラとバナーを置いた。

BrunoStructure & IA

Generationsの分け方が効いてるんだよね。ライバーをデビュー年でOrigins・Titans・Risingsの3世代に分けて、色も変えてる。古参も新人も、自分がどこにいるかをひと目で見つけられる。

1「10」の数字を扇形や四角の積み木で組み、キャラが部品を抱えて運ぶ。周年ロゴが工作のように組み上がる
2左の余白にTOPからCONTENTSまでの目次を常駐。6つの企画名が、どこまで読んでも視界に残る
3地域別イベントは都道府県ごとにラベルの色を変え、地図のピンと同じ色に。自分の地域をすぐ探せる

Color

Pococha GoTo10周年カウントダウンサイトの配色

Typography

使用フォントと無料の代替

本文・ナビのカナ・イベントリスト

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字ナビ（TOP・NEWS・PICK UP EVENT）

Aa あア

使用: League Spartan
代替: League Spartan

矢印などのアイコン

Aa あア

使用: Material Icons
代替: Material Symbols

実測タイプスケール1440px幅 · 2026-09-27 計測

本文The quick brown fox — 参考を型にする16px · 1.6 · 600
ボタンKatapick 型16px · 1 · 400

Structure

ページ構成（上から順）

01
カラム外（左）
「GoTo10周年」のロゴ、縦書きの「OFFICIAL」とSNSアイコン4つ、TOP・NEWS・PICK UP EVENT・CONTENTSのナビ。CONTENTSの下に「Pococha甲子園 2026」から「地域別イベント」まで6項目を並べ、周りに積み木とキャラクターを散らす。
02
カラム外（右）
扇形や積み木を抱えたキャラクターの間に、「あなたと、みんなと、つくる道。」のコピーと「花火大会 2026」のバナーを置く。
03
FV・カウントダウン
積み木で組んだ「10」とキャラクター、「Pococha GoTo10周年」のロゴ。その下に濃いグレーのタイル3枚で「あと104日」（掲載時の確認時点）と残り日数を出す。
04
メッセージカード
少し傾けた罫線のカードに「あなたと、はじめましてのあの日から。」から始まる挨拶文を中央揃えで。「なんと、もうすぐ10周年！」だけ赤字にする。
05
最新ニュース・コンテンツ入口
珊瑚色の見出し帯のニュース枠（2026.09.11 の花火大会の告知）の下に、Pococha甲子園 2026・POCOLAND 10周年祭の2バナーと、Generations・Product・Eventの3ボタンを並べる。
06
PICK UP EVENT
斜めに流れる「PICK UP EVENT」の帯見出しと、エントリー条件のバッジ付きのイベントサムネイルを、黒い丸矢印で送るカルーセル。
07
企画紹介（甲子園・POCOLAND・Generations）
放射状の線を敷いたカードで企画を1つずつ紹介する。Generationsはライバーをデビュー年でOrigins（2017〜2019）・Titans（2020〜2022）・Risings（2023〜2025）の3色に分ける。
08
PRODUCT
2026.06「ぽこナイト改善」、2026.04「POCO AWARD 2026」をサムネイル付きで並べ、「もっと見る」ボタン。
09
EVENT（地域別イベント）・フッター
水色の地に、都道府県ごとの色ピンを立てた日本地図。その下に北海道・宮城・東京・神奈川・愛知などのラベルごとに、日付とイベント名のリストを積み、フッターで締める。

Interaction

アニメーション・インタラクション

左の目次と右のバナーはスクロールしても同じ位置に残る（フルページキャプチャの各所に写り込んでいる）。調査時の計測では position: fixed ではなかったため、sticky などで追従させていると思われる
PICK UP EVENT は左右の丸い矢印ボタンで送るカルーセル
左ナビの CONTENTS は横の▲で開閉するアコーディオンと思われる
SPでは右上の丸いメニューボタンにナビをまとめ、花火大会のバナーを右下に×ボタン付きで浮かせる
STUDIO で構築されており、残り日数は日付から計算して表示していると思われる

スクロールのコマ撮り300–782000ms

Pococha GoTo10周年カウントダウンサイトをスクロールしたときのフレーム1 — 01

Pococha GoTo10周年カウントダウンサイトをスクロールしたときのフレーム2 — 02

Pococha GoTo10周年カウントダウンサイトをスクロールしたときのフレーム3 — 03

Pococha GoTo10周年カウントダウンサイトをスクロールしたときのフレーム4 — 04

Pococha GoTo10周年カウントダウンサイトをスクロールしたときのフレーム5 — 05

Pococha GoTo10周年カウントダウンサイトをスクロールしたときのフレーム6 — 06

検出された技術:STUDIONuxtGoogle Fonts

Reproduce

再現するときのポイント

01PCでは幅540pxの白いカラムを影付きで中央に置き、左に目次、右にキャラクターとバナーを配置する
02カウントダウンは濃いグレーのタイルに1桁ずつ数字を入れ、「あと」「日」で挟む
03セクションごとに背景色（珊瑚・オレンジ・水色など）を切り替え、カードの下に放射状の線を敷いてにぎやかさを出す
04地域ラベルと地図のピンの色をそろえ、都道府県ごとのリストを縦に積む

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

pococha-10th.katapick.md

1---
2title: "Pococha GoTo10周年 カウントダウンサイト デザイン分析書"
3source: https://goto10th.pococha.com/
4katapick: https://katapick.com/sites/pococha-10th
5category: LP
6region: 国内 (JP)
7tags: [イラスト, ビビッド, カウントダウン, 周年, 固定ナビ, カルーセル]
8launched: 2026-04
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# Pococha GoTo10周年 カウントダウンサイト — デザイン分析書
16 
17> 10周年までの残り日数を、めくり式の数字で見せる。DeNAのライブ配信アプリPocochaのGoTo10周年カウントダウンサイトは、540px幅のカラムに日数と挨拶を通し、左に目次、右にキャラとバナーを置いた。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22