--- version: alpha name: Soft Pastel Photo Memory Campaign LP description: FV は写真コラージュの中央に黄色い大きな円を置き、ピンクの数字とリボン帯で懸賞を打ち出す。本文は生成りと白の地に細めのゴシックをゆったり組み、コーラルピンクのピル型ボタンとくすんだ黄・サーモン・グレーグリーンのずらし矩形で写真に柔らかさを出す。 colors: primary: '#E8559A' secondary: '#FFF67F' cta: '#F17E7E' on-cta: '#FFEEEE' background: '#FFFFFF' background-alt: '#F8F9F4' surface: '#F2F2F2' dark-section: '#E9EFEF' text: '#262625' accent-1: '#EBDCB3' accent-2: '#F3C5B2' accent-3: '#C7D7D6' accent-1-pink: '#EA529A' cta-accessible: '#DA1818' primary-accessible: '#D21C71' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.1 accent: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.3 rounded: sm: 0px md: 8px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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.full}' height: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px hero-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.full}' height: 420px photo-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 18px product-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 480px prize-row: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 170px step-frame: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 160px offset-photo: backgroundColor: '{colors.accent-2}' height: 180px contact-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 115px --- # DESIGN.md — 黄×ピンクのやさしい写真プリント懸賞 LP（Soft Pastel Photo Memory Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: やさしい・柔らかい、ポップ・元気、ナチュラル、シンプル・ミニマル - **キーワード**: 写真コラージュ・黄色い大円・ピンクの大数字・生成りの地・ずらし矩形・余白多め - **地の質感**: フラットな単色面。体験談の背景にだけ、淡い黄・ピンク・グレーの円形グラデーションのぼかしを敷く - **形**: FV は大円とリボン帯。本文は角丸なしの矩形カード、ボタンはピル型、ステップ枠は角を斜めに切り欠いた線の枠 - **温度感**: 暖かめ。白と生成りを基調に、ピンクと黄で季節の明るさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E8559A` | 賞金額・STEP・期間ラベルのピンク | 2% | 推定 | | `secondary` | `#FFF67F` | FV の大円の黄 | 4% | 画素の実測 | | `cta` | `#F17E7E` | 商品カードのボタン（コーラル） | 2% | 画素の実測 | | `on-cta` | `#FFEEEE` | ボタンの文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地 | 38% | 画素の実測 | | `background-alt` | `#F8F9F4` | 商品カード・体験談・応募方法の生成り地 | 28% | 画素の実測 | | `surface` | `#F2F2F2` | 規約スクロール枠の薄グレー | 2% | 画素の実測 | | `dark-section` | `#E9EFEF` | お問い合わせ帯のブルーグレー | 6% | 画素の実測 | | `text` | `#262625` | 見出し・本文の濃グレー | 3% | 画素の実測 | | `accent-1` | `#EBDCB3` | 写真ラベル・ずらし矩形のくすみ黄 | 2% | 画素の実測 | | `accent-2` | `#F3C5B2` | ずらし矩形のサーモン | 2% | 推定 | | `accent-3` | `#C7D7D6` | ずらし矩形のグレーグリーン | 2% | 画素の実測 | | `accent-1-pink` | `#EA529A` | FV の期間帯のマゼンタ | 1% | 画素の実測 | | `cta-accessible` | `#DA1818` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D21C71` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成り（#F8F8F3）をセクションごとに交互に使う - ピンクは賞金の数字・STEP・期間ラベルなど、数字の強調だけに使う - 黄は FV の大円だけ。本文では面に使わない - ボタンは塗りのコーラルピンクと、白地にピンクの線の 2 種類 - 写真の後ろに敷くずらし矩形は、カテゴリごとにくすみ黄・サーモン・グレーグリーンを割り当てる - お問い合わせ帯は淡いブルーグレーにして、ページの終わりを示す - `button-primary` は文字 `#FFEEEE` × 背景 `#F17E7E` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA1818`、4.54:1）を使う。 - `button-outline` は文字 `#F17E7E` × 背景 `#FFFFFF` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA1818`、4.52:1）を使う。 - `hero-circle` は文字 `#E8559A` × 背景 `#FFF67F` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D21C71`、4.52:1）を使う。 - `prize-row` は文字 `#E8559A` × 背景 `#FFFFFF` のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D21C71`、4.57:1）を使う。 - `step-frame` は文字 `#E8559A` × 背景 `#FFFFFF` のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D21C71`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と賞品の大きな金額数字 | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.1 | 0.0em | | `accent` | FV の季節のタイトル（明朝風の装飾文字） | 明朝 | Shippori Mincho | 700 | 34px | 1.2 | 0.05em | | `headline-lg` | セクション見出し（左右に横線を付ける） | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.1em | | `headline-md` | リード見出し・体験談のタイトル | ゴシック | Noto Sans JP | 500 | 18px | 1.8 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 2.2 | 0.06em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.08em | | `headline-sm` | ハッシュタグの白抜き文字（帯） | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.3 | 0.0em | - 本文は行間 2 以上、字間はやや広め - 数字は太く大きく、「円分」「名様」などの単位は小さくする - セクション見出しは中央に置き、左右に短い横線を付ける - 体験談の本文は短い行で改行し、詩のように組む - 末尾のハッシュタグは斜体風の白抜き文字にし、線は黒で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。本文ブロックは中央寄せの細い幅 - **本文ブロックの幅**: 画面幅の約 57% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 本文は画面幅の約 55〜60% に絞り、左右の余白を大きく取る - 商品カードは写真が上、説明が下で、下端にボタンを置く - 写真は左右どちらかに寄せ、片側に色矩形を斜め下へずらして敷く - 賞品は 1 行の横線で区切って縦に並べる - STEP は番号、枠の画像、説明文の順に並べ、間に V 字矢印を入れる ## Elevation & Depth - 影はほぼ使わず、フラットにする - 写真ラベルにだけ、色をずらした影風の重ねを付ける - 奥行きは、色矩形を写真の後ろにずらして重ねることで出す ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。FV は写真のグリッドコラージュ - **セクション境界**: 直線で地色を切り替える（波や斜めの境界は使わない） - カード・写真は角丸 0 - ボタンはすべてピル型 - ステップ枠は細い黒線にし、四隅のうち 2 か所を切り欠く - お問い合わせの枠は角丸 8px で黒線 ## Components - **塗りのピルボタン**（`button-primary`）: 商品カードの下に置く申込ボタン。コーラルの塗りに白文字 - **線のピルボタン**（`button-outline`）: 白地にピンクの線と文字。右端に「>」を付ける - **FV の大円バッジ**（`hero-circle`）: 写真コラージュの中央に黄色い円を置き、弧に沿った見出し・季節のタイトル・金額を載せる。下にマゼンタのリボン帯 - **写真のタグラベル**（`photo-label`）: 写真の角にかぶせる小さな色帯。白文字で、カテゴリごとに色を変える - **商品カード**（`product-card`）: 生成り地に、写真・ロゴ・説明・注釈・ボタンを縦に並べる - **賞品の行**（`prize-row`）: ピンクの賞ランク、条件、賞品名、大きな金額の順に並べ、下に横線を引く - **ステップ枠**（`step-frame`）: ピンクの STEP 番号の下に、角を切り欠いた線の枠と説明図を置く - **ずらし矩形の写真**（`offset-photo`）: 体験談の写真の後ろに、くすみ色の矩形を右下へずらして敷く - **問い合わせ枠**（`contact-box`）: 白地に黒線・角丸の枠。電話番号を大きく入れる ## Do's and Don'ts **Do** - 余白を大きく取り、本文は細めの幅で中央に置く - 数字の強調はピンク 1 色に揃える - 写真は家族・ペット・旅行の自然光の写真を使う - ずらし矩形の色は、カテゴリと対応させて統一する - ボタンはピル型の塗りと線の 2 段階で使い分ける **Don't** - 濃い影やグラデーションのボタンを使わない - 黄色を本文エリアの面に多用しない - カードや写真に角丸を付けない - 原色の赤や黒い太帯で、強い訴求に寄せすぎない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンと賞品の大きさを一目で伝える）: 写真グリッドの上に黄色い大円を置き、ピンクの金額とマゼンタの期間帯を載せる 2. **対象商品の一覧**（対象になる商品を示す）: 見出しの下にロゴを 2×2 で並べ、注釈を添える 3. **ブランドメッセージ**（写真を形に残す価値に共感してもらう）: 短い改行の見出しと本文を置き、タグラベル付きの写真 3 枚を左右交互に並べる 4. **商品紹介**（各商品の特長と注文への導線）: 生成りのカードを縦に並べ、写真・説明・コーラルボタンを入れる 5. **賞品**（当選内容と応募条件）: 斜線で挟んだ見出しとイラストの後に、賞ごとの行を横線で区切る。最後に線ボタン 2 つ 6. **応募方法**（手順を 3 ステップで示す）: STEP 番号・線の枠の図・説明を V 字矢印でつなぎ、最後に白いカードで応募条件を補足する 7. **キャンペーン期間**（注文期間と応募期間を明示する）: ピンクのラベルの下に大きな日付を置き、曜日は黒丸で囲む 8. **お客様の声**（体験談で利用の場面を想像させる）: 淡いぼかしの背景に、タイトル・色の短い線・詩のような本文・ずらし矩形の写真を置く 9. **応募規約**（法的な注意事項）: 薄グレーの枠に入れ、中をスクロールさせる 10. **お問い合わせ**（事務局の連絡先）: ブルーグレーの帯に、角丸線の枠と大きな電話番号を置く 11. **フッタービジュアル**（余韻とブランドの世界観）: 白抜きのハッシュタグ文字を写真の帯に重ねる ## Imagery - 自然光の、柔らかく明るい家族・子ども・ペット・旅行の写真 - フィルム調で、やや低めの彩度 - 商品は生活シーンの中で手に持っている・飾っている構図にする - 賞品は都市名所のシルエットを単色で描いたフラットなイラスト - 背景装飾は淡い黄・ピンク・グレーの大きな円形ぼかし - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は写真コラージュを横に広げ、大円を中央に縮めて置く - PC の商品カードは 4 列で横に並べる - PC の賞品は円バッジ付きの 2+1 配置にする - PC の応募 STEP は 3 列横並びにし、矢印は「>」にする - PC の体験談は写真とテキストを左右交互の 2 カラムにする - PC の期間は、ラベルと日付を縦線で区切った横並びにする ## 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-287615a0`（元 LP の URL から採番） - **元 LP**: https://fujicolor.fujifilm.com/jp/ja/special/campaign-spring-2502/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。