--- version: alpha name: Graph Paper Pop Scene Eyewear LP description: 白い方眼紙の地に、ライム・ペールブルー・サーモンの色ブロックと黒い細線フレームを重ねたスタイリッシュな雑誌風 LP。シーン別にメガネのスタイリングを提案し、後半は水彩風の黄色地で保証内容をタイムライン図で説明する。 colors: background: '#FEFEFE' surface: '#FEFEFE' primary: '#EDF253' secondary: '#95D1E5' accent-1: '#EB9D79' text: '#241A19' text-body: '#262121' background-alt: '#FDF39B' tint-1: '#CBE3E6' tint-2: '#EFD2C4' cta: '#231816' on-cta: '#E9E4E2' line: '#F1F0F2' accent-2: '#D9483B' secondary-accessible: '#267F9C' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Dancing Script fontSize: 20px fontWeight: 500 lineHeight: 1.1 label-button: fontFamily: Montserrat fontSize: 14px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 2px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px button-small: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 28px scene-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 60px speech-box: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px scene-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 300px number-flag: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 48px timeline-bar: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.body-md}' height: 24px price-block: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 140px --- # DESIGN.md — 方眼紙×ネオンイエローのメガネ店 LP（Graph Paper Pop Scene Eyewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: ポップ・元気、クール・先進的、情報量多め・訴求型 - **キーワード**: 方眼紙・雑誌コラージュ・細線フレーム・斜めカット・筆記体ラベル・シーン提案 - **地の質感**: 薄いグレーの方眼グリッド背景に、フラットな色面と切り抜き人物写真を重ねる。後半は黄色の水彩にじみ地。 - **形**: 斜めに傾けた色帯と四角い写真枠。黒の細線でかぎ括弧状のフレームを描き、角に短い斜線を足す。 - **温度感**: 明るくニュートラル。ライムとサーモンで軽い温かさを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | 方眼紙のページ地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | シーンカード・保証パネルの白 | 30% | 画素の実測 | | `primary` | `#EDF253` | ライムイエローのアクセント色面・吹き出し | 4% | 画素の実測 | | `secondary` | `#95D1E5` | ペールブルーの価格数字・吹き出し・帯 | 6% | 画素の実測 | | `accent-1` | `#EB9D79` | サーモンの色ブロック・U-18保証の帯 | 3% | 画素の実測 | | `text` | `#241A19` | 見出し・黒ラベル帯・番号バッジ | 5% | 画素の実測 | | `text-body` | `#262121` | 本文 | 2% | 画素の主要色に補正 | | `background-alt` | `#FDF39B` | 保証セクションの黄色水彩地 | 12% | 画素の実測 | | `tint-1` | `#CBE3E6` | タイムライン無料帯の淡いブルー | 1% | 画素の実測 | | `tint-2` | `#EFD2C4` | U-18タイムライン帯の淡いサーモン | 1% | 画素の実測 | | `cta` | `#231816` | 店舗検索ボタン | 0% | 画素の実測 | | `on-cta` | `#E9E4E2` | ボタン上の白文字 | 0% | 画素の実測 | | `line` | `#F1F0F2` | 方眼線・区切り点線 | 1% | 画素の主要色に補正 | | `accent-2` | `#D9483B` | タイムラインの赤い日付ラベル | 0% | 推定 | | `secondary-accessible` | `#267F9C` | AA を満たす補正値（計算） | | 計算 | - 地は方眼グレー、情報の面は白で統一する。 - シーンごとにライム・ブルー・サーモン・グレーの1色を割り当て、吹き出しと色帯に使う。 - 黒は細線フレーム・ラベル帯・番号バッジ・主ボタンに限定する。 - 保証セクションのみ黄色水彩地に切り替え、雰囲気を変える。 - タイムライン図は通常保証を淡ブルー、U-18は淡サーモンで色分けする。 - 価格数字はブルーの塗りに黒フチで大きく見せる。 - `price-block` は文字 `#95D1E5` × 背景 `#FEFEFE` のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#267F9C`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大コピー・価格数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 32px | 1.3 | 0.04em | | `headline-lg` | セクション大見出し（白抜き黒フチ・黄フチ） | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.3 | 0.05em | | `headline-md` | 保証項目タイトル・吹き出しコピー | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.5 | 0.04em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 注釈・商品型番 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | シーン名の筆記体ラベル | 欧文スクリプト | Dancing Script | 500 | 20px | 1.1 | 0.0em | | `label-button` | ボタン・SCENE番号ラベル | 欧文サンセリフ | Montserrat | 600 | 14px | 1.2 | 0.15em | - 大見出しは丸ゴシック極太で、白文字に黒フチや色の影をつけて立体感を出す。 - キーワード1語だけを手書き風にして色を変える。 - シーン名は筆記体の英字と太字の SCENE＋斜体数字を組み合わせる。 - 本文は細めのゴシックで行間を広くとる。 - 保証の期間・回数は【】付きの短い行で並べ、数字だけ太字にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。シーンカードは写真を上、テキストを下に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - シーンカードは左右交互に写真とテキストを入れ替える。 - カードの外に全身の人物切り抜きを少しはみ出させる。 - カード同士は下向きのシェブロン矢印でつなぐ。 - 保証は白パネル内で点線区切りの縦並びにする。 - セクション間は縦の点線で導線を描く。 ## Elevation & Depth - 影はほぼ使わず、フラットに作る。 - 奥行きは色帯と写真の重なり、細線フレームのずれで表す。 - 吹き出しは黒線＋色面を少しずらして重ねる。 ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角の切り抜き、または斜めの平行四辺形の色帯の上に人物を切り抜いて置く - **セクション境界**: 直線を基本とし、サポート見出しの前だけゆるい弧の水色帯と下向き三角を入れる - カード枠は黒の細線で、角を延長した短い斜線を足す。 - 吹き出しは四角に小さな三角のしっぽをつける。 - 番号バッジは黒の旗型（下が V 字にカット）。 - タイムラインの帯は右端を矢印状にとがらせる。 ## Components - **主ボタン**（`button-primary`）: 黒地に白文字、右端に小さな三角矢印がつく角丸長方形 - **サブボタン**（`button-secondary`）: 白地に黒枠線、英字を字間広めに入れる - **商品リンクボタン**（`button-small`）: シーンカード内の細枠小ボタン - **シーンラベル**（`scene-label`）: 筆記体英字＋SCENE＋大きな斜体番号を斜線で区切る - **色面吹き出し**（`speech-box`）: シーン色で塗った四角に黒枠をずらして重ね、短いコピーを入れる - **シーンカード**（`scene-card`）: 写真2枚＋説明文＋全身人物を黒細線フレームで囲む - **保証番号バッジ**（`number-flag`）: 黒い旗型に白で小さな見出しと大きな番号 - **保証期間タイムライン**（`timeline-bar`）: 開始と終了に縦線、間を矢印型の淡色帯で塗り、中央にラベル - **価格ブロック**（`price-block`）: 黒帯の見出し＋細枠の中にブルーの巨大数字 ## Do's and Don'ts **Do** - 方眼背景を全体に敷き、文具やノートのような空気を保つ。 - シーンごとに色を1つ決め、吹き出しと色帯でそろえる。 - 黒い細線フレームの角に斜線を足して手描き感を出す。 - 人物はカードからはみ出す全身切り抜きで動きを出す。 - 保証の条件はタイムライン図で見せる。 **Don't** - 濃いドロップシャドウやグラデーションボタンを使わない。 - ピル型の丸いボタンにしない。 - 1つのシーンに複数のアクセント色を混ぜない。 - 本文を太字で詰め込まない。 - 写真を円形に切り抜かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（スタイルを変える楽しさを伝える）: 男女4人の顔写真を斜めの色帯で区切って並べ、白い斜め帯に大コピーと筆記体ラベルを重ねる 2. **価格訴求**（手頃な価格を伝える）: 黒帯見出し＋細枠内にブルーの巨大数字、まわりにメガネ写真と色ブロックを散らす 3. **導入文**（コンセプトを短く伝える）: 中央揃えの2行の本文 4. **シーン導入見出し**（シーン提案へ誘導）: グレー帯の左右に人物、中央に丸ゴシックの見出しとメガネアイコン、下に点線 5. **シーン別提案（4種）**（気分ごとのフレームとコーデを提案）: シーン色の吹き出し、筆記体ラベル、写真2枚、説明、商品ボタンを交互配置し、矢印でつなぐ 6. **サポート見出し**（保証へ話題を切り替える）: 弧形の水色帯に白抜き黒フチの大見出しと集中線、右に笑顔の人物 7. **安心保証**（保証内容で不安を払う）: 黄色水彩地に白パネル、王冠アイコン付き見出し、旗型番号とタイムライン図を縦に並べる 8. **CTA**（店舗・通販へ送る）: 黒の主ボタンと白枠のサブボタンを縦に2つ並べる ## Imagery - 白〜淡色の背景で、メガネをかけた20〜30代男女の明るい笑顔のバストアップを撮る。 - 全身の切り抜き人物でファッションコーデを見せる。 - メガネ単体の切り抜きを斜めにして装飾として散らす。 - 手書き風の短い線、集中線、点線、王冠アイコンなど線画の装飾を添える。 - 保証セクションの背景は黄色の水彩にじみテクスチャ。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 480px 相当の固定幅で組み、左右は方眼地を延ばす。 - SP ではシーンカードの写真2枚を横並びにし、説明文は下に置く。 - 全身人物は SP では縮小してカードの角に重ねる。 - タイムラインは横幅いっぱいに広げ、注釈は 10px 以上を保つ。 - CTA ボタンは SP で幅 80% 程度にする。 ## 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-50c079d9`（元 LP の URL から採番） - **元 LP**: https://www.aigan.co.jp/feature/set_megane/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。