DESIGN.md — 空色と透明感の青春映画公式 LP（Translucent Sky Blue Youth Film LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、クール・先進的
• キーワード: 空色・透明感・斜めカット・手書き欧文・縦書きセリフ・方眼紙
• 地の質感: 空と雲の写真地、方眼紙の薄いグリッド、光のプリズムやボケが乗った写真
• 形: 斜めに切った写真・平行四辺形のボタン、細線のカギ括弧フレーム
• 温度感: やや寒色寄りの爽やかさ。キャラクターごとにピンク・オレンジ・紫の差し色

Colors

• 地は白→淡い空色を交互にし、全体を寒色で統一する
• 濃い青の面は主題歌など1セクションのみに使う
• キャラクターごとにグラデーション帯の色を変える（青・ピンク・ティール・オレンジ・紫）
• 見出しと名前は濃紺、本文は灰がかった紺
• ピンクはキャッチや日付バッジなど小さな差し色に限定
• ボタンは水色〜青のグラデーション＋白文字
• button-primary は文字 #FFFFFF × 背景 #4C8CD4 のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3078C9、4.51:1）を使う。
• sns-panel は文字 #FFFFFF × 背景 #72C4E1 のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#227FA0、4.55:1）を使う。
• date-badge は文字 #FFFFFF × 背景 #D65D9A のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CE3E87、4.5:1）を使う。

Typography

• 見出しは英単語1語を手書き風欧文で中央に置く
• 和文の見出し・名前は明朝で字間を広めに
• 人物のセリフは縦書き明朝で写真横の帯に置く
• 本文は小さめのゴシックで行間を広く
• リンクは手書き欧文＋矢印で表す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅いっぱいに配置し本文は左右16px余白
• セクション間に3枚並びの写真ストリップを挟む
• キャラクターは写真と色帯を左右交互に並べる
• 見出しは中央、本文は左揃え
• コメント文は細線のカギ括弧フレームで囲む

Elevation & Depth

• 基本はフラットで影は使わない
• SNSパネルとボタンだけ右下に濃い青の板状オフセット影
• 写真にプリズム光やボケを重ねて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形＋斜めカット。FVは対角線で複数写真を分割
• セクション境界: 斜めの直線カットと写真ストリップ
• ボタンは平行四辺形に傾ける
• 角丸はほぼ使わない
• フレームは左上と右下だけ細線のL字
• 日付バッジだけ円形グラデーション

Components

• 斜めグラデーションボタン（button-primary）: 平行四辺形の青グラデ地に手書き欧文と丸矢印。右下に濃い青のオフセット影
• SNSリンクパネル（sns-panel）: 傾けた水色パネルの中に白線で区切ったアイコン行とリンク2つ
• 発売日の円形バッジ（date-badge）: 青〜ピンクのグラデ円に白文字で日付と発売告知
• 手書き欧文見出し（section-heading）: 英単語1語を中央に置くだけの簡素な見出し
• キャラクターカード（character-card）: 空背景の人物写真と色グラデの縦書きセリフ帯を左右に並べ、下の方眼地に役名・俳優名とリンク
• コメント枠（comment-frame）: 左上に手書きのラベル、L字の細線2本で本文を囲む
• プロフィールリンク（link-outline）: L字細線2本で挟んだ手書き欧文＋矢印リンク
• 予告動画カルーセル（video-carousel）: 16:9の動画に左右矢印と下部ピンクのドットページャー

Do's and Don'ts

Do - 地は白と淡い空色を基本に、雲や空のテクスチャを薄く敷く - 写真の境目は斜めにカットする - 見出しは手書き欧文、和文は明朝で品を出す - 人物ごとに帯の色を変えて個性を出す - 記号や?!などの立体モチーフを空に浮かべる

Don't - 暖色の大きな面を地に使わない - ボタンを角丸ピル型にしない - 太いゴシックの見出しにしない - 濃い影やボックスシャドウを多用しない - 余白を詰めて情報を密にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（作品の世界観と発売日を伝える）: 複数の人物写真を斜めに分割し縦書き明朝コピーと円形日付バッジを重ねる
2. タイトル・キャスト（作品名と出演者・スタッフを示す）: 白地に明朝ロゴ、水色グラデ地に出演者名を中央揃え
3. SNS・劇場導線（公式SNSと関連ページへ誘導）: 傾いた水色パネルと平行四辺形ボタン
4. 予告動画（映像で興味を引く）: 動画カルーセルとドットページャー
5. イントロダクション（作品概要を短く伝える）: 全幅写真の下に白地で明朝コピーとリード文
6. ストーリー（あらすじを伝える）: 写真ストリップの後、空と雲の地に本文
7. キャラクター（登場人物を紹介）: 方眼紙地に写真＋縦書きセリフ帯のカードを縦に連ねる
8. 主題歌（楽曲とコメントを紹介）: 深海の青い写真地に正方形写真とコメント枠
9. 原作（原作と作者コメントを紹介）: 空色地に書影、コメント枠、外部サイトバナー
10. スタッフ（監督コメントを紹介）: 空色地に明朝の名前とコメント枠
11. シェア・フッター（拡散とクレジット表記）: 細線で囲んだSNSアイコン、小さなクレジット、屋上の柵の写真で締める

Imagery

• 空を背景にした人物写真。逆光気味で彩度は控えめに
• 写真にプリズムの虹色光・レンズフレア・ボケを重ねる
• ?・!・トランプのマークや数字の半透明な青い立体を浮かべる
• 空と雲の写真を淡くして地のテクスチャに使う
• 学校・街の日常シーンを3枚横並びのストリップにする
• フッターに屋上の柵など場面を表す写真を置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで本文幅を約60%に絞る
• PCのFVは横長で写真分割を増やし、日付バッジを右に置く
• 予告動画はPCで2本並べる
• キャラクターはPCで2列＋3列＋1列のグリッド
• 写真ストリップはPCで5〜6枚並べる
• SNSパネルやボタンはPCでも同じサイズ感で中央に置く

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。