DESIGN.md — 紺の波紋×焼き色ベージュの菓子アイス LP（Royal Blue Wave and Biscuit Gold Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい
• キーワード: 紺の波柄・焼き色ベージュ・欧文スクリプト見出し・引き出し線の成分図解・手描き水彩・弧形の区切り
• 地の質感: 紺地には濃淡2色の波（青海波風）パターンを敷く。ベージュ地は上から下へ淡くなるグラデーションにする。
• 形: セクションの境界は大きな弧形のカーブにする。ボタンとラベルは角張った矩形にし、人物写真は円形に切り抜く。
• 温度感: 前半は寒色の紺でアイスの冷たさを、後半は暖色のベージュでビスケットの温かみを表し、温度差でコントラストをつける。

Colors

• 前半の商品紹介は紺地＋波柄にし、文字は白で載せる。
• 後半の開発秘話はベージュのグラデーション地にし、文字は濃紺で載せる。
• 金ベージュはラベルやボタンの枠など、小さな面だけに使う。
• 黒は使わず、文字は濃紺で統一する。
• セクションの切り替えでは紺とベージュを弧形で交互に重ねる。

Typography

• 欧文スクリプトの見出しの直下に、小さな日本語のサブ見出しを添える。
• 大見出しは明朝の極太にする。重要な語は紺の下線で強調し、一回り大きくする。
• リード文は明朝で中央揃えにし、行間を広く取る。
• 長い本文はゴシックで左揃えにし、行間は2.0にする。
• 見出しの中で 1 行目を小さく、2〜3 行目を大きくして強弱をつける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は本文とイラストの 2 カラムを左右交互に並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 大きな商品画像は画面幅の 90% ほどで中央に配置する。
• 成分図解は写真を中央に置き、ラベルを左右にずらして配置する。
• 本文の左右余白は 10〜12px と狭めに取る。
• 見出しと本文の間は 24px 程度空ける。
• 各トピックの後にイラストを 1 点挟む。

Elevation & Depth

• 影はほとんど使わない。
• 商品写真は切り抜きで地に直接置き、パッケージにだけ薄い落ち影をつける。
• バナーは白地にし、角を少し丸める程度にとどめる。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 9999px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きにし、人物は円形に切り抜く。動画は角丸なしの 16:9 で置く。
• セクション境界: 画面幅を超える大きな弧形のカーブにする（上に凸・下に凸の両方を使う）。
• ボタンとラベルは角丸なしの矩形にする。
• 引き出し線は細い直角の線にし、先端に紺の丸ドットをつける。
• フッター前のバナーだけ 8px の角丸にする。

Components

• 詳細リンクボタン（button-detail）: 紺地に金ベージュの細枠をつけた横長の矩形ボタン。文字は 2 行で、右端に「＞」矢印を置く。
• 欧文スクリプト見出し（script-heading）: 白または濃紺の筆記体の英単語の下に、小さな日本語を中央揃えで添える。
• 成分ラベル（ingredient-label）: 金色の小見出しの下に、金ベージュ地に濃紺明朝のラベルを置く。下線と引き出し線で写真の各層とつなぐ。
• 引き出し線＋ドット（leader-line）: 白い細線を直角に折り曲げ、写真上の紺の丸ドットで終わらせる。
• 下線付き大見出し（underline-heading）: 明朝の極太で、強調語に紺の下線を引く。補足の語は小さめにする。
• 社員の円形写真（staff-avatar）: 白い円の中に人物を置き、下に所属・氏名を小さく入れる。2 人並べる。
• CM動画の埋め込み（video-embed）: 紺地の上に 16:9 の動画を置き、下に白文字でタイトルと出演者を中央揃えで入れる。
• ブランドサイトへのバナー（brand-banner）: 白系のバナー。左に人物写真、右に紺の太字の見出しと「▶」付きのリンク文を置く。

Do's and Don'ts

Do - 紺の波柄地とベージュ地を弧形のカーブで切り替える。 - セクション見出しは欧文スクリプトと小さな日本語を組み合わせる。 - 商品の断面写真に引き出し線を引き、ラベルで成分を説明する。 - 開発秘話には手描き水彩のイラストを挟む。 - 文字色は濃紺と白の 2 系統に絞る。

Don't - 原色の赤や黄でセール感を出さない。 - ボタンをピル型にしたり、派手なグラデーションをかけたりしない。 - 黒の文字や黒地は使わない。 - セクションを直線で区切ったり、細かく区切ったりしない。 - ラベルに角丸や影をつけない。

Page Structure

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

1. ファーストビュー（人物と商品で第一印象を作る。）: 空色の背景に人物と商品を手に持った写真を置き、縦書きの金色キャッチ、ロゴ、パッケージを重ねる。下端は弧形にする。
2. CM情報（広告動画を見てもらう。）: 紺の波柄地に白のゴシック見出しを置き、動画を埋め込む。下に白文字のキャプションを入れる。
3. 商品紹介（商品の全体像とコンセプトを伝える。）: 欧文スクリプト見出し、ロゴ、大きなパッケージ画像の順に並べる。その下に明朝のリード文を中央揃えで置く。
4. 成分図解（3 層の構造とそれぞれのこだわりを示す。）: 断面写真に引き出し線と 3 つの金ラベルを配置する。
5. 詳細リンク（栄養成分ページへ誘導する。）: 金枠付きの紺ボタンを中央に置く。
6. 開発秘話の導入（作り手を紹介し、信頼感を出す。）: ベージュ地へ弧形で切り替え、濃紺の欧文スクリプト見出しと導入文を置く。円形の社員写真を 2 つ並べる。
7. 技術のこだわり（自社技術を活かしていることを伝える。）: 下線付きの明朝大見出し、ゴシック本文、水彩イラストの順に並べる。
8. 苦労話（開発のストーリーで共感を得る。）: 同じ型で組み、イラストとして放射線を背負ったパッケージを置く。
9. 形状のこだわり（食べやすさと見た目の美しさを訴求する。）: かぎ括弧付きの見出しに続けて本文を置き、きらめき装飾付きのイラストを添える。下端は紺の弧形にする。
10. 関連リンク・フッター（ブランドサイトへ誘導し、ページを締める。）: クリーム地に角丸のバナーを置き、その下に白いフッター、規約リンク、ページトップボタンを並べる。

Imagery

• 商品は高精細な切り抜き写真にし、断面の層がはっきり見える角度で撮る。
• イラストは手描きの水彩風にし、濃紺の輪郭線と柔らかい陰影をつける。
• 周りに小さなきらめき（四芒星）を線画で添える。
• 人物は明るい自然光で撮り、白い円形に切り抜いて使う。
• 背景の波柄は 2 色の紺を交互に重ねた和の波文様にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを幅 700px 程度で中央寄せにし、左右には波柄の背景を広げる。
• PC の開発秘話は、左に本文、右にイラストの 2 カラムにする。
• PC の社員写真は小さめの円で横に並べる。
• PC の成分図解は写真を右に寄せ、ラベルを左右に配置する。
• 弧形のセクション区切りは 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 行書くと起動時に読み込まれる。