Landing PageJapanPicked 2026.09.26

TOKYOカルチャーデビュー

LPのWebデザイン参考 — 文化事業・こども向け文化体験

出典: tokyo-culture-debut.rekibun.or.jp

Editor's note — 編集部の視点

文化施設のかたい感じを、カラフルな色でゆるめてる。

こどもと文化施設をつなぐ東京のポータル「TOKYOカルチャーデビュー」は、黄・緑・青の植物形シェイプと吹き出し見出しで、敷居の高さをFVでほどいている。

IrisColor & Brand

告知のところだけ黄色い背景で、境目が波みたいにゆれてるのがすき。卵焼きみたいにあったかい黄色だから、お知らせなのに急かされる感じがしないの。

1丸ゴシックの見出しを白い角丸枠で囲み、吹き出しに。行政の告知ではなく、話しかける声として届く
2「#やってみよう」などのハッシュタグが横に流れる。何があるかより先に、やりたい気持ちを動かす
3イベント欄の先頭は「条件からさがす」と今週末・募集中のボタン。眺める段階から、行ける日探しへ一歩で移れる

Color

TOKYOカルチャーデビューの配色

Typography

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

本文・ボタン・日付

Aa あア

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

見出し

Aa あア

使用: Zen Maru Gothic
代替: Zen Maru Gothic

英字ラベル

Aa あア

使用: Nunito
代替: Nunito

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

特大見出しKatapick 型36px · 1.3 · 600
見出しKatapick 型40px · 1.4 · 600
小見出しKatapick 型24px · 1.5 · 600
本文The quick brown fox — 参考を型にする18px · 1.5 · 600
ボタンKatapick 型18px · 1.3 · 600

Structure

ページ構成（上から順）

01
ヘッダー
左上にロゴ、右上に白い円の言語切替ボタンと、濃いグレーの円形メニュー（検索）ボタン。
02
ファーストビュー
黄・緑・青の大きな植物形シェイプを重ねた背景に、白い角丸枠の見出し2行と「TOKYOカルチャーデビューとは」ボタン。下部でハッシュタグのキーワードが横に流れる。
03
イベント
緑の「条件からさがす」、今週末・募集中のイベントボタンを横に並べ、左に大きなメインビジュアル、右にサムネイル付きのイベントリストを置く。
04
特集
インタビューや施設めぐりの記事を、写真に白文字タイトルを重ねた角丸カードで横に並べたカルーセル。左右の矢印とドットで操作する。
05
お知らせ
グレーの角丸パネルの中に、日付・タイトル・サムネイルの行を罫線区切りで並べる。
06
SPECIAL（告知）
黄色の背景に波形の境界を付け、左にイベント名と日程を大きく、右に告知画像を置く。
07
TOKYOカルチャーデビューとは・関連導線
緑から青へ波形で切り替わる背景に、事業紹介、Instagramへの導線、「文化体験の輪をひろげよう」の協力企業向け案内を角丸枠で並べる。
08
フッター
ハッシュタグのマーキーを再度流し、濃いグレーの背景にロゴ、主催者ロゴ、メニュー、ポリシーリンクを置く。

Interaction

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

ハッシュタグの帯は CSS の @keyframes で translateX を繰り返す無限マーキーと思われる。同じ要素を2つ並べて -50% まで流すと切れ目なく再現できる
右下の告知バナーは position: fixed で常駐し、×ボタンで閉じられる。閉じた状態を sessionStorage に保存すると再表示を防げる
特集のカルーセルは左右矢印とドットのページネーションを持つ。Swiper などのスライダーライブラリで再現可能
FVの植物形シェイプはSVGを重ねたものと思われ、ロードやスクロールでわずかに動く演出がある可能性がある（静止画からは断定できない）

スクロールのコマ撮り150–120000ms

検出された技術:WordPressGoogle Fonts

Reproduce

再現するときのポイント

01黄・緑・青の3色を不透明なベタで重ね、重なった部分を濃い色にして切り絵のような奥行きを出す
02見出しは1行ずつ白い角丸枠と細い黒線で囲み、吹き出しのように積む
03背景は純白ではなく #e2e2db 前後の温かいグレーにし、カードやパネルを白や明るいグレーで浮かせる
04セクション境界を波形のSVGで区切り、色面の切り替わりを柔らかくする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

tokyo-culture-debut.katapick.md

1---
2title: "TOKYOカルチャーデビュー 再現用デザイン仕様書"
3source: https://tokyo-culture-debut.rekibun.or.jp/
4katapick: https://katapick.com/sites/tokyo-culture-debut
5category: LP
6region: 国内 (JP)
7tags: [イラスト, ビビッド, 角丸, マーキー, 固定CTA, ライト]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# TOKYOカルチャーデビュー — 再現用デザイン仕様書
17 
18> 文化施設のかたい感じを、カラフルな色でゆるめてる。こどもと文化施設をつなぐ東京のポータル「TOKYOカルチャーデビュー」は、黄・緑・青の植物形シェイプと吹き出し見出しで、敷居の高さをFVでほどいている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22