--- version: alpha name: Dark Cinematic Fantasy Movie LP description: 黒い地にキービジュアルを全面で敷き、金色の明朝見出しと煙・火の粉のグラデーションでファンタジー映画の壮大さを出す。バナーを縦に積む告知型で、作品紹介は斜めに切った場面写真と中央揃えの明朝本文で物語らしく見せる。 colors: background: '#000000' primary: '#B9A384' accent-1: '#DE9751' dark-section: '#313131' secondary: '#2D3846' on-dark: '#FFFFFF' surface: '#FEFEFE' cta: '#E3141B' on-cta: '#FDFCFB' background-alt: '#EAEAEA' text: '#323132' line: '#8A8A8A' text-muted: '#A6A6A6' background-accessible: '#999999' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 800 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-md: fontFamily: Cinzel fontSize: 18px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.03em accent: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-keyvisual: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 530px banner-stack: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 150px award-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 130px purchase-widget: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 250px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px button-secondary: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 26px ribbon-heading: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 130px slant-gallery: height: 340px credit-list: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 380px footer-social: backgroundColor: '{colors.dark-section}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 290px --- # DESIGN.md — 漆黒×金とスモークの映画告知 LP（Dark Cinematic Fantasy Movie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、上品・高級 - **キーワード**: 漆黒・金色の明朝・煙のグラデーション・火の粉・斜め切りの場面写真・バナーを縦に積む - **地の質感**: 石・煙・炎の写真の質感。地は単色の黒、作品紹介は青と橙の夕景グラデーション - **形**: 四角いバナーに細い枠線。場面写真は平行四辺形に切る。角に組紐模様の飾り - **温度感**: 暗く冷たい青黒を地にして、金色と橙で熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの地（黒） | 30% | 画素の実測 | | `primary` | `#B9A384` | 金色の見出し・ロゴ系の色 | 6% | 画素の主要色に補正 | | `accent-1` | `#DE9751` | 帯見出し・強調語の橙金 | 3% | 画素の実測 | | `dark-section` | `#313131` | フッター・タイトル帯の濃灰 | 9% | 画素の実測 | | `secondary` | `#2D3846` | 作品紹介背景の青鉄色 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の本文・見出し | 3% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 購入ウィジェット・白バナー | 6% | 画素の実測 | | `cta` | `#E3141B` | 購入ボタンの赤 | 1% | 推定 | | `on-cta` | `#FDFCFB` | 購入ボタン上の文字 | 0% | 画素の実測 | | `background-alt` | `#EAEAEA` | サブボタンの薄灰 | 0% | 画素の実測 | | `text` | `#323132` | 白地上の文字 | 0% | 画素の主要色に補正 | | `line` | `#8A8A8A` | バナーの細枠 | 0% | 推定 | | `text-muted` | `#A6A6A6` | コピーライト・フッターリンク | 0% | 推定 | | `background-accessible` | `#999999` | AA を満たす補正値（計算） | | 計算 | - 地は黒を基本にし、作品紹介だけ青鉄色と橙のグラデーションに切り替える - 見出しは金色系で、強調語は橙金にする - 赤は購入ボタンだけに使う - 白は購入ウィジェットや外部提携バナーなど、情報を読ませる面に絞る - セクションのつなぎは黒から白い煙へのグラデーション写真で自然につなぐ - フッターは濃灰で本編と分ける - `page` は文字 `#323132` × 背景 `#000000` のコントラスト比が 1.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#999999`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャッチの大見出し（斜体ぎみの金色明朝） | 明朝 | Shippori Mincho | 800 | 36px | 1.2 | 0.0em | | `headline-lg` | FVの縦書きコピー | 明朝 | Shippori Mincho | 700 | 40px | 1.1 | 0.05em | | `headline-md` | 英字セクション見出し（ABOUT・STORYなど） | 欧文セリフ | Cinzel | 600 | 18px | 1.3 | 0.12em | | `headline-sm` | ストーリーのリード文・スタッフの役職名 | 明朝 | Noto Serif JP | 700 | 17px | 1.6 | 0.04em | | `body-md` | 中央揃えのあらすじ本文 | 明朝 | Noto Serif JP | 500 | 13px | 2.0 | 0.03em | | `accent` | キャッチ上の橙金の帯見出し | 明朝 | Noto Serif JP | 700 | 14px | 1.4 | 0.08em | | `label-button` | 購入ボタン・サブボタン | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.0em | | `note` | コピーライト・調査出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 見出しと本文は明朝でそろえ、映画らしい格調を出す - 英字見出しは大文字のセリフ体で字間を広くとる - 黒地の見出しには弱い外側の光（グロー）をつける - 本文は中央揃えにして短く改行する - ゴシックは購入UIと注記だけに使う - FVのコピーは縦書きで左右の端に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も 1 カラムで写真を全幅に敷く - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - キービジュアル・作品紹介の写真は全幅で敷く - 告知バナーは左右に約25pxの余白をとり、10px間隔で縦に積む - 購入ウィジェットは幅約55%の白いカードを中央に置く - 場面写真は3枚を左・右・右と互い違いにずらす - クレジットは役職と名前のペアを中央揃えで縦に並べる ## Elevation & Depth - 購入ウィジェットは影なしの白カード。黒地との明暗差で浮かせる - 見出しは文字のグローで発光させる - TOPへ戻るボタンは半透明の黒い角丸タイルを右下に固定する ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: FVと作品紹介は全幅の矩形。場面写真は約15度の平行四辺形に切る - **セクション境界**: 直線では切らず、煙・雲のグラデーション写真で溶かしてつなぐ。黒セクションの角に組紐の飾り - 告知バナーは角丸なしで、細いグレー枠をつける - 購入ボタンは角丸4px程度の横長 - キャストのセクションは四隅に装飾フレームを置く - SNSアイコンは白の単色でそろえる ## Components - **全面キービジュアル**（`hero-keyvisual`）: 迫力のある写真を全幅に置く。左右の端に縦書きの明朝コピー、下部に作品ロゴと上映形式ロゴを並べる - **告知バナー**（`banner-stack`）: 石の質感の暗いバナーに金色の明朝見出しを載せ、細い枠で囲む。キャンペーンやコラボを縦に積む - **ランキング実績バナー**（`award-banner`）: 白地の左右に月桂樹を置き、中央に順位を大きな明朝で。下に出典を小さく添える - **前売券の購入カード**（`purchase-widget`）: 白カードに券種・枚数のプルダウン・合計金額を並べ、赤い購入ボタンと灰色のサブボタンを重ねて置く - **購入ボタン**（`button-primary`）: 赤い横長ボタンに白抜きの2段ラベルを置く - **サブリンクボタン**（`button-secondary`）: 薄灰の面に濃灰の文字 - **帯見出しとキャッチ**（`ribbon-heading`）: 橙金の細い線で上下を挟んだ一行の帯の下に、金色グラデーションで太い斜体明朝のキャッチを2行で置く - **斜め切りの場面写真**（`slant-gallery`）: 平行四辺形の写真3枚をずらして重ね、動きを出す - **キャスト・スタッフ一覧**（`credit-list`）: 役職を太字に、名前を通常の太さにして中央揃えで並べる。四隅に組紐の装飾 - **SNSアイコンのフッター**（`footer-social`）: 濃灰の地に白いSNSアイコンを横に並べ、シェアボタン・配給ロゴ・規約リンクを続ける ## Do's and Don'ts **Do** - 黒を地にして、写真と金色の文字だけで華やかさを出す - 見出しは明朝にして、金色のグラデーションかグローをつける - セクションの境目は煙や雲の写真で溶かす - 告知はバナー画像として縦に積み、1枚に1つの話題を載せる - 強い色は購入ボタンの赤だけにする - 本文は中央揃えにして、行間を2.0とたっぷりとる **Don't** - パステルや明るい単色の背景を広く使わない - 丸ゴシックやポップな書体を見出しに使わない - 大きな角丸やピル型のボタンにしない - セクションをはっきりした直線で切らない - 本文を左揃えで長く詰めない - 赤を購入ボタン以外に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観を一瞬で伝える）: 全幅の迫力ある写真に縦書きの明朝コピーを置き、下部にロゴ・公開状況・上映形式ロゴを並べる 2. **実績バナー**（評判の高さで信頼を出す）: 白地の月桂樹付きバナーに順位を大きく載せる 3. **告知・キャンペーンバナー**（コラボ・投稿企画・特典を知らせる）: 石の質感や金色の地のバナーを縦に積み、金色の明朝見出しを載せる 4. **関連商品バナー**（原作本などに誘導する）: 赤地に白い太字と手描きのイラストを載せたバナー 5. **前売券の購入**（チケット購入のCV）: 黒地の中央に白い購入カードを置き、赤い購入ボタンを添える 6. **作品紹介**（体験の価値を伝える）: 煙からつながる全幅写真に、帯見出し・金色の大キャッチ・英字見出し・中央揃えの本文を重ねる 7. **場面写真**（映像の魅力を見せる）: 平行四辺形の写真3枚をずらして配置する 8. **ストーリー**（あらすじで興味を引く）: 火の粉の舞う橙と青のグラデーションの上に、太字のリードと明朝の本文を中央揃えで置く 9. **キャスト・スタッフ**（制作陣と出演者を示す）: 黒地の四隅に組紐の飾りを置き、役職と名前を中央揃えで並べる 10. **フッター**（SNSへの誘導と権利表記）: 濃灰の地にSNSアイコン・シェアボタン・ロゴ・リンクを並べる ## Imagery - 暗い空と雲、炎の光で劇的なコントラストをつけたファンタジーの写真 - 煙や霧の写真を、黒から白へ移る境界に使う - 暖色（橙）と寒色（青鉄）を左右で分けた夕景グラデーション - 画面の下部に火の粉・残り火を散らす - 黒地の四隅に、ケルト風の組紐模様を銀灰の線で描く - 見出しのロゴには金属や石を彫ったような質感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは上部に英字の固定ナビを置き、右端にSNSアイコンを並べる - PCのFVは横長にし、ロゴを左上、縦書きコピーを右端に置く。告知バナーは小さくしてFVの下部に重ねる - PCの購入カードは横長の1段にまとめ、購入ボタンを右に置く - PCの作品紹介は写真を全幅にし、本文を右寄せの段落にする - PCの場面写真は3枚を横一列に並べる ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d68799ca`（元 LP の URL から採番） - **元 LP**: https://hic-dragon-movie.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。