DESIGN.md — ネオンピンク×淡水色の邦画公式サイト LP（Neon Pink Urban Drama Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、上品・高級、クール・先進的
• キーワード: 映画公式・マゼンタピンク・淡い水色・明朝欧文見出し・手書きスクリプト・斜めコピー
• 地の質感: フィルム調で彩度高めの写真に、白いぼかしと淡い水色の透けを重ねる
• 形: 角丸なしの四角い写真、ピル型ボタン、写真の内側に細い二色線の枠
• 温度感: ネオンの暖色ピンクと冷たい水色を対比させる

Colors

• 地は白。上映情報エリアだけ淡い水色の写真を透かした背景にする
• ボタン・タグ・SNSアイコンはマゼンタピンクで統一する。2つ目の導線だけ青を使う
• 購入ボタンは外部サービスの赤や黄緑をそのまま使い、ブランド色と分ける
• 欧文の章見出しは章ごとに色を変え、下に同じ色の短い線を引く
• 斜めの大きなキャッチはマゼンタで目立たせる
• 本文は白文字に黒い影をつけ、白地からにじみ出るように見せる
• button-pill-primary は文字 #FFFFFF × 背景 #D54289 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D33882、4.51:1）を使う。
• tag-profile は文字 #FFFFFF × 背景 #D54289 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D33882、4.51:1）を使う。
• video-link-grid は文字 #D54289 × 背景 #FFFFFF のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D33882、4.51:1）を使う。
• sns-circle は文字 #FFFFFF × 背景 #D54289 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D33882、4.51:1）を使う。

Typography

• 章見出しは欧文セリフを中央に置き、下に章ごとの色の短い線を引く
• キャストの役名は小さめ、俳優名は大きめの明朝にして斜線で区切る
• キャッチは太いゴシックで少し傾け、ダッシュ線を添える
• 本文は白文字に黒い影をつけ、写真の上でも読めるようにする
• 日本語の縦書きコピーを写真の端に置いてよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画リンクだけ 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面の端から端まで裁ち落として並べる
• キャストカードは幅82%で中央寄せし、カード同士は約60px空ける
• ボタンは幅約78%で中央に縦積みする
• スタッフブロックは右と下に水色のL字線を引いて囲む
• ニュースは日付と見出しを2行にし、細い線で区切る

Elevation & Depth

• 基本は影なしで平らに見せる
• チケットカードだけ白地に薄い枠と弱い影をつける
• 本文の文字には黒の柔らかい影をつける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。キャスト写真は内側に青→金のグラデーションの細い枠を重ねる
• セクション境界: 直線で切り替える。写真の上下は白へのぼかしでつなぐ
• 主ボタンとSNSアイコンは完全な丸かピル型にする
• タグボタンは角丸なしの小さな長方形にする
• 動画リンクは白地にピンクの細い枠の長方形にする

Components

• ピンクのピル型ボタン（button-pill-primary）: 上映館などへの主導線。欧文セリフを白文字で中央に置く
• 青のピル型ボタン（button-pill-secondary）: メディア情報などのサブ導線
• チケット購入カード（ticket-card）: 券種・枚数の選択と合計金額、赤い購入ボタンをまとめた白いカード
• 欧文章見出し＋下線（section-heading）: 中央の欧文セリフと、同じ色の短い横線
• キャストカード（cast-card）: 二色枠を重ねた横長の写真、役名と俳優名、小さなピンクのタグ
• プロフィールタグ（tag-profile）: 「＋」がついた小さなピンクの長方形ボタン
• 予告動画の切替リスト（video-link-grid）: 選択中はピンクの塗り、それ以外は白地にピンク枠の2列グリッド
• ニュース一覧（news-list）: ピンクの日付と黒い見出しを線で区切って並べる
• SNS丸アイコン（sns-circle）: ピンクの丸に白いアイコン

Do's and Don'ts

Do - メインの写真はネオン色の髪や服が映える、彩度高めの街の写真にする - タイトルにはピンクの手書きスクリプトを重ねる - 章見出しの色を変えて、章ごとの雰囲気を変える - 写真は裁ち落としでコラージュのように並べる - ボタンの色はピンクを主にし、色数を絞る

Don't - カードや写真に大きな角丸をつけない - 濃い色の面を多用しない（暗い面は写真帯だけ） - 本文を細い黒文字だけで組まない - ピンク以外の派手な色でボタンを増やさない - 見出しを日本語の太ゴシックだけにしない

Page Structure

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

1. ファーストビュー（作品の世界観とタイトルを一目で伝える）: 斜めに切ったメイン写真と小さな写真2枚のコラージュ。縦書きコピーとスクリプト付きのタイトル、色付きのサブコピー
2. 上映情報・受賞（上映中であること、受賞歴、出演者を伝える）: 淡い水色の写真背景に、月桂樹の装飾つきのピンクの受賞表記、明朝のクレジット
3. 導線・チケット（上映館の確認と前売り券の購入へ導く）: SNSの丸アイコン、ピンクと青のピル型ボタン、白いチケットカード、バナーを縦に並べる
4. ニュース（最新のお知らせを出す）: 線で区切ったリストと、ピンクのView Moreボタン
5. 予告動画（予告映像を見てもらう）: 埋め込み動画と、その下に2列の切替ボタン
6. イントロダクション（作品の背景と見どころを伝える）: 花のイメージ写真から白へのぼかし、金の見出し、影付きの白文字本文、写真のコラージュ
7. ストーリー（あらすじを伝え、問いかけで感情を揺さぶる）: 斜めのマゼンタのキャッチで本文を挟み、横長の場面写真の帯を置く
8. キャスト（出演者を紹介する）: 枠つきの写真カードを縦に並べ、役名・俳優名とピンクのタグを添える
9. スタッフ（監督や主題歌の担当者を紹介する）: 縦長の写真をモノクロ寄りにし、水色のL字線で囲む
10. フッター（シェアとクレジットを載せる）: 裁ち落としの写真、ピンクのシェアアイコン、細かいクレジット、右下に丸いメニューボタン

Imagery

• 夜の街のネオンや蛍光灯の下で撮った、彩度高めの人物写真
• 笑顔と緊張感のある表情を交互に見せる場面写真
• 写真の端を白へぼかし、セクションをやわらかくつなぐ
• スクリプト体の手書き線をタイトルに重ねる
• 受賞表記には月桂樹のイラストを左右に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では上部にグローバルナビを横一列に置き、SNSアイコンを右上に置く
• PC のファーストビューは横長のコラージュにし、受賞表記と上映中の告知を左右に分ける
• PC のチケットカードは横長にし、券種と購入ボタンを並べる
• PC のキャストは主役1人、次に3列、その下に4列のグリッドにする
• PC のストーリーは写真の上に本文とキャッチを重ねる
• PC のスタッフは写真と名前を横に並べ、L字線で囲む

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 行書くと起動時に読み込まれる。