--- version: alpha name: Coral and Teal Handwritten Lifestyle E-Bike LP description: コーラルピンクとくすみティールの地色を交互に敷き、手書き風の見出しと白いノート風カードを重ねた生活雑貨っぽいEC商品LP。ネイビーの線画イラストやオレンジの吹き出しで、比較・機能説明をやわらかく見せる。 colors: primary: '#6DA3AD' background: '#FFFFFF' secondary: '#F08A80' background-alt: '#FFE3D9' text: '#203343' cta: '#F08A3C' on-cta: '#FFFFFF' accent-1: '#DD827D' marker: '#F5E66A' tint-1: '#C7E5C7' surface: '#FEFEFE' dark-section: '#203343' text-muted: '#8A8A8A' line: '#203343' cta-accessible: '#BD5A0F' accent-1-accessible: '#CD4840' typography: display: fontFamily: Yomogi fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Klee One fontSize: 22px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-brush: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 48px point-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px voice-card: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px caption-balloon: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px notebook-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 240px ng-ok-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 360px award-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 52px flow-step: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — コーラル×くすみティールの手書き風電動自転車LP（Coral and Teal Handwritten Lifestyle E-Bike LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型、ナチュラル - **キーワード**: 手書き見出し・ノート風カード・コーラル×ティール・ネイビー線画・マーカー強調・比較表 - **地の質感**: 紙っぽいマットな面。方眼紙・ドット・斜線ストライプをワンポイントで敷く - **形**: 角丸小さめの白カード、二重線の手帳枠、丸いバッジ、ブラシ風の帯 - **温度感**: 暖色の地と寒色の地を交互に使い、全体は温かみ寄り ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6DA3AD` | ブランドのくすみティール地 | 20% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 27% | 画素の主要色に補正 | | `secondary` | `#F08A80` | コーラルピンクのFV・帯地 | 5% | 推定 | | `background-alt` | `#FFE3D9` | 淡いピーチ地 | 10% | 画素の実測 | | `text` | `#203343` | 見出し・本文のネイビー | 3% | 画素の主要色に補正 | | `cta` | `#F08A3C` | 強調オレンジ（吹き出し・ラベル） | 2% | 推定 | | `on-cta` | `#FFFFFF` | オレンジ上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#DD827D` | ローズ系ラベル・VOICE枠 | 2% | 画素の実測 | | `marker` | `#F5E66A` | 黄色マーカー・数字強調 | 2% | 推定 | | `tint-1` | `#C7E5C7` | ミントグリーンのカラバリ地 | 5% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 薄グレーの情報ボックス地 | 5% | 画素の実測 | | `dark-section` | `#203343` | 比較表の濃紺ヘッダー | 2% | 画素の主要色に補正 | | `text-muted` | `#8A8A8A` | 注釈グレー | 0% | 推定 | | `line` | `#203343` | 枠線・点線のネイビー | 1% | 画素の主要色に補正 | | `cta-accessible` | `#BD5A0F` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CD4840` | AA を満たす補正値（計算） | | 計算 | - セクション地はコーラル/ピーチ→白→ティール→ミントの順で切替え、内側に白カードを重ねる - 文字はほぼネイビー1色。黒は使わない - 強調は黄色マーカー下線かオレンジ文字に限定 - 悪い例は淡ピンク・薄紫地、良い例は白地とブランド色で対比する - 比較表は自社列を白、他社列をグレー＋濃紺ヘッダーにする - オレンジ吹き出しはシーン写真のキャプションに使う - `caption-balloon` は文字 `#FFFFFF` × 背景 `#F08A3C` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BD5A0F`、4.53:1）を使う。 - `award-badge` は文字 `#FFFFFF` × 背景 `#DD827D` のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CD4840`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（手書き風） | 手書き・筆 | Yomogi | 700 | 32px | 1.3 | 0.05em | | `headline-lg` | 太い角ゴ見出し・数字訴求 | ゴシック | Dela Gothic One | 400 | 30px | 1.3 | 0.03em | | `headline-md` | カード見出し・小見出し | 手書き・筆 | Klee One | 600 | 22px | 1.4 | 0.05em | | `headline-sm` | ラベル付き小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `accent` | 英字飾り（POINT・VOICE・Smile等） | 欧文セリフ | Playfair Display | 700 | 20px | 1.2 | 0.08em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ラベル・吹き出し文字 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.4 | 0.03em | - 大見出しは手書き書体で、ブラシ帯や枠に1行ずつ載せる - 数字（％・kg・冠数）は大きく太く、単位は小さく - 本文は中央揃え、短く改行する - 英字の飾りはスクリプト風を見出しの左上に斜めに重ねる - 強調語は太字＋黄色マーカー下線 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較や機能は 2 カラムのカードで並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 色地の上に白カードを左右6%ほど余白をとって置く - 写真は横いっぱい、またはカード幅で角丸小 - POINT番号は丸バッジで見出しの右か左に配置 - 機能一覧は写真とテキストを左右交互にずらし、点線でつなぐ - 悪い例→良い例をイラスト＋人物アイコン吹き出しの順で並べる ## Elevation & Depth - カードは基本フラット。ネイビーの細線＋ずらした影線で手帳風にする - 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.08)） - バッジや吹き出しは影なし ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸小さめの長方形。拡大部分は円形に切り抜く - **セクション境界**: 大きく波打つ曲線や手でちぎったようなギザギザの境界、ティールの縁取り - 見出し帯は筆で塗ったような帯や二重線の枠 - 番号・POINTは円形バッジ - 吹き出しは角丸長方形に尻尾を付ける - 点線の曲線で要素の流れを示す ## Components - **手書きブラシ帯見出し**（`heading-brush`）: 白地の帯に手書き書体の見出しを1行ずつ置き、下に影線を付ける - **POINT丸バッジ**（`point-badge`）: 白い円に英字POINTと黄色の大きな2桁番号 - **お客様の声カード**（`voice-card`）: ティールかローズ地のカードに手書きVOICEラベルと人物線画アイコン - **シーン吹き出し**（`caption-balloon`）: 写真の角に重ねる、オレンジ地に白文字の手書き調キャプション - **比較表**（`compare-table`）: ティールの項目列、白の自社列（◎）、グレーの他社列（△×） - **ノート風カード**（`notebook-card`）: ネイビーの二重線枠の白カード。罫線を点線で入れる - **悪い例・良い例パネル**（`ng-ok-panel`）: 淡色地に線画イラスト、ネイビーの吹き出しバッジ、人物アイコン付きコメント枠 - **受賞メダル**（`award-badge`）: えんじ色のギザ縁メダルを5列で並べる - **配送フロー円**（`flow-step`）: ティールの円に白文字のステップを3つ横に並べる ## Do's and Don'ts **Do** - 見出しは手書き書体と帯・枠を組み合わせる - 暖色地と寒色地を交互に使い、セクションの切替えをはっきりさせる - 強調には黄色マーカーとオレンジを使う - 機能説明はネイビーの線画イラストと写真を併用する - キラキラ・雲・ドットなど小さな手描き装飾を余白に散らす **Don't** - 純黒の文字や彩度の高い原色ベタを使わない - 直線的で硬いコーポレート風の見出しにしない - 強調色を3色以上同時に並べない - 写真に強い影や光沢エフェクトを付けない - 大きな角丸のピルボタンを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品イメージと実績を一目で伝える）: コーラル枠に人物乗車写真、左上に受賞メダル、手書きキャッチと白帯ラベル 2. **メディア掲載・満足度**（権威付けと信頼）: 誌面画像と黒帯見出し、マーカー強調の引用文、大きな％数字と星評価 3. **改善事例**（声を反映した改良点を示す）: VOICE番号ラベル付き白カードを左右交互に並べ、改善丸バッジと写真 4. **利用シーン**（生活の中の使い方を想像させる）: 写真にスクリプト英字とオレンジ吹き出しを重ね、背景に有機的な色面 5. **ブランド紹介・受賞**（ショップの姿勢と実績）: ノート風罫線カード、ピンク地に月桂樹と多数のメダル 6. **特長POINT**（機能を順に解説する）: ティール地に白い紙面、POINT丸バッジ、図解、VOICEカード 7. **他製品との比較**（悪い例と良い例の対比）: 警告アイコンと方眼紙見出し、線画のNGパネル、写真のOKパネル 8. **比較表**（一覧で優位性を示す）: ティール見出し列と◎△×の表 9. **機能紹介**（装備の細部を伝える）: 番号付き写真カードを点線でつなぎ、黄色の縦帯ラベル 10. **サポート体制**（購入後の安心）: Point付き手書きラベルと白カード、自転車の線画で区切る 11. **配送の流れ・組立**（届くまでの不安を減らす）: グレーボックスにアイコンとティール円のフロー、ピーチ地に組立図解 12. **カラーバリエーション・付属品**（選択肢と同梱物の提示）: ミント斜線地に白カード、セリフ英字見出し、グレー地の付属品グリッド 13. **お客様の声**（最後のひと押し）: ティール地に英字小見出しと手書き大見出し、黄色帯のリード ## Imagery - 自然光の屋外で、女性や親子が乗る生活感のある写真 - 背景はレンガ壁・街路樹・ガラス窓などの明るい都市の風景 - 商品単体は白背景の切り抜きで斜めの構図 - 図解はネイビー単色の太い線画イラスト - 人物アイコンは線画の似顔絵を丸枠に入れる - 星・雲・ドット・斜線などの手描き装飾を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では 375〜480px 幅の SP カラムを中央に置き、左右を地色で埋める - 2 カラムの比較カードは PC でも並びを変えない - 写真は最大幅を 640px 程度に抑える - 手書き見出しは PC で 1.2 倍程度に拡大する ## 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-f4d15176`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/lifeassiststore/26inch_01/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（4/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。