DESIGN.md — 墨黒×ティールのインスタントカメラ製品LP（Dark Charcoal Teal Hybrid Camera LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、上品・高級、シンプル・ミニマル
• キーワード: チャコール地・ティールアクセント・白フチのプリント写真・クラシックカメラ・影付きの写真カード
• 地の質感: フラットな暗い面。写真カードに柔らかいドロップシャドウを付けて少し浮かせる
• 形: ピル型ボタン、角丸6〜8pxの写真、細線枠の角丸カード
• 温度感: クールで落ち着いている。製品写真の茶や木の暖色が差し色になる

Colors

• 基調は#262626のチャコール。特長は#39393Aの帯を上半分に重ね、2段の濃淡にする
• セクション見出しはティール文字に統一する
• 製品詳細は製品ごとにティール帯とミント帯を交互に使い、上部に暗い地を重ねる
• 暗い地では白文字、ティールやミント地では濃い文字にする
• CTAは明るい帯の上なら黒いピル、暗い地の上ならティールのピルにする
• 黄色はサイトフッターだけに使い、本編では使わない
• button-anchor は文字 #F0F0F0 × 背景 #6FC7CA のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2D787B、4.51:1）を使う。

Typography

• 見出しはどれも太字のゴシックにし、セクション見出しは中央揃えのティールにする
• 製品名とギャラリー見出しは欧文の丸みのあるサンセリフにする
• 特長ブロックは左揃えにする。小さな欧文ラベル→白い見出し→説明文の3段で組む
• 本文も太めのウェイトにし、暗い地の上でも読みやすくする
• 注釈は小さい細字にし、文頭に中黒を付けて並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真は2列のペアで並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長ブロックは明るいグレーの帯を上半分にだけ敷く。写真を下の暗い地にはみ出させる
• 製品詳細は、上部の暗い地にロゴと製品画像を重ねる。下は色帯にする
• プリント写真は横スクロールのカルーセルで画面外まで並べる
• ファーストビュー直下に、目次としてピル型ボタンを3つ横に並べる
• セクションの間は48〜72pxあけ、ゆったりさせる

Elevation & Depth

• 写真カードには下方向にぼかしの強い影を付ける（0 6px 16px rgba(0,0,0,.4)程度）
• プリント写真は白フチ＋薄い影で、紙の厚みを出す
• ボタンとラベルは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸6〜8pxの長方形。製品は背景を抜いた切り抜き。プリントは白フチの縦長
• セクション境界: 直線の色帯で切り替える。上半分だけ色を変える帯の重ねを多用する
• CTAと目次ボタンはすべてピル型にする
• ケース紹介は白い細線の角丸枠で囲む
• フォーマットのタグは白い細線のピル型にする

Components

• 目次ピルボタン（button-anchor）: ティールの塗りに白文字と下向き矢印。3つ横に並べる
• 製品詳細CTA（button-primary）: 明るい帯の上に置く黒いピル。文字は中央、右端に矢印
• 記事一覧ボタン（button-outline）: 暗い地に置く、ティールの細線ピル。文字はティール
• ラインナップ選択ボタン（button-lineup）: ティールとミントのピル。2段の文字（小ラベル＋製品名）
• Feature番号ラベル（feature-label）: 短い横線と欧文の細字ラベル、大きめの番号を組み合わせる
• フォーマットのタグ（tag-format）: 白い細線のピルに白文字。製品ロゴの下に置く
• プリント写真のカルーセル（print-carousel）: 白フチ写真を横に並べる。中央の1枚を拡大し、丸い矢印ボタンで送る
• ケースの枠カード（case-card）: 暗い地に白い1pxの枠。製品画像とカラー名を並べる
• 記事カード（article-card）: 写真の下に紫のカテゴリラベルと太字のタイトル。白い面に置く

Do's and Don'ts

Do - 地はチャコールを基本にし、ティールは見出しとボタンだけに使う - 製品は背景を抜いた切り抜きで大きく見せる - プリント写真は白フチ付きで並べ、アナログらしさを出す - 特長は番号ラベル＋見出し＋説明文＋写真2枚の型でそろえる - 色帯の上半分に暗い地を重ねる二段構成で、メリハリを付ける

Don't - 暖色の原色やグラデーションを本編に入れない - ボタンを角張った四角にしない（マガジン導線を除く） - 白い地を広くとり、暗いトーンを崩さない - 見出しに明朝や手書きの書体を使わない - 写真に強い装飾枠やイラストを重ねない

Page Structure

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

1. ファーストビュー（シリーズの世界観と製品群を示す）: モノクロの人物写真の上にティールの大きな欧文タイトルとサブコピーを置き、下に製品を3台並べる
2. 導入文・目次（コンセプトを伝え、各セクションへ誘導する）: 中央揃えの白い太字4行と、ティールのピル型ボタン3つ
3. プリント写真の帯（作例で雰囲気を伝える）: 白フチ写真を横一列に並べ、画面外まで続ける
4. 特長（機能の価値を3つ説明する）: グレー帯にFeature番号・白い見出し・説明文を置き、写真2枚か大きな合成写真を添える
5. 製品ラインアップ（2機種の違いを比べる）: 寸法線付きのプリントと製品画像を2列に並べ、下にティールとミントのピルボタンを置く
6. 使い方・楽しみ方（記事コンテンツへ誘導する）: 中央を大きく見せる写真カルーセルとラベル付きの記事タイトル。下にアウトラインボタンを2つ
7. 製品詳細（機種ごと）（機種ごとの特徴と作例を見せる）: 暗い地のロゴ・タグ・製品画像からティール（またはミント）帯へ続け、箇条書き・ギャラリー・黒いCTAを置く
8. 専用アクセサリー（関連商品を見せる）: 白い細線の枠カードにカラー違いの製品を並べ、カラー名を添える。下に注釈を置く
9. Webマガジン導線（関連記事へ回遊させる）: ライトグレーの地に手書き風ロゴ、記事カードのスライダー、黒い四角ボタン、バナーのカルーセル
10. フッター（サイト内の導線とSNS）: 黄色の地にSNSアイコンと、アイコン付きのリンク一覧。下は白い地にコピーライト

Imagery

• 製品は正面からの切り抜き。光沢と革の質感がわかるライティングにする
• 人物写真は都会や自然の中で手元を写し、少し落ち着いた色調にする
• 作例のプリントは白フチの縦長／横長で、フィルムらしい色味にする
• メインの写真の上に、製品を一部はみ出させて重ねる合成を使う
• サイズ比較には細い寸法線とmm表記を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで幅約80%。特長ブロックはラベル＋見出しを左、写真を右に並べる
• PCの製品詳細は、暗い角丸パネルの中に製品画像と箇条書きを横並びにする
• ファーストビューはPCで人物・タイトル・製品を横一列に配置する
• 記事カードはPCで4列のグリッド、ケースカードは2つ横並びにする
• ヘッダーはSPでハンバーガー、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 行書くと起動時に読み込まれる。