DESIGN.md — コバルトブルー×白の感情で選ぶギフト雑貨 LP（Cobalt Blue Emotion Gift Catalog LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ポップ・元気、クール・先進的、情報量多め・訴求型
• キーワード: コバルトブルー一色・流れる巨大欧文・感情タグ・絵文字アイコン・フィルム調写真・商品カタログ
• 地の質感: フラットな青ベタ。写真は粒子感のあるフィルム調で、少しくすんだ色にする
• 形: 角丸 12〜20px のパネル、タブ状に欠けた角、点線で区切った表
• 温度感: ややクールだがにぎやか。青のベタと絵文字のカラフルさで対比を作る

Colors

• ページ全体の地は青ベタ。コンテンツは白い角丸パネルに載せる
• 白地の上の文字は見出しも本文も価格も、すべてブランドの青にする。黒文字は使わない
• 青地の上の文字は白にする。読ませる詩的な文だけ淡い青灰にする
• 色数は青と白の 2 色に絞る。彩りは絵文字アイコンと商品写真に任せる
• ピンクはギフトラッピングなど特別な訴求バナー 1 か所だけに使う
• 写真はくすんだフィルム調にして、ベタの青と対比させる

Typography

• 欧文の大見出しは幾何学的な太いサンセリフにする。画面からはみ出す大きさで横に流す
• 和文はゴシック体だけで組む。明朝体は使わない
• 詩的な本文は短い文で改行し、字間を広めにとる
• 商品説明は 3〜4 行に収め、末尾に価格を太字で置く
• 価格の後ろに極小の税込表記を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は商品を 2 カラム、PC は 4 カラム＋左に感情フィルタ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 画面の両端に約 10px の青い縁を残し、白パネルを内側に載せる
• 感情タグの表は 2 列×4 行。行を点線で区切る
• 商品カードは画像の枠、タグ、説明、価格の順に縦に積む
• スクロール中は、選択中の感情を示す白いピル型バーを上部に固定する
• カード同士の縦の間隔は約 32px にする

Elevation & Depth

• 影はほぼ使わず、フラットに組む
• 動画ボタンだけ、斜めにずらした淡い青の板で立体感を出す
• カードは薄いグレー枠だけで区切る

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の矩形。縦長の短冊を並べる
• セクション境界: 直線で区切る。白パネルの上辺を角丸にする
• 感情タグはカード画像の左下に重ね、右上だけ角丸にしたタブ状にする
• ロゴやキャプションは、写真の角を欠いて作ったタブ型の青帯に置く
• 表は青線＋角丸 16px。内側の区切りは点線にする
• ボタンは青か白のピルにし、右に丸い矢印アイコンを付ける

Components

• 流れる欧文帯（marquee-logo）: 巨大な欧文スローガンを横に流し続ける帯
• 感情タグ表（emotion-table）: 絵文字＋カタカナの感情語を 2 列×4 行に並べる。点線で区切る
• 流れる感情タグ列（emotion-marquee）: 小さな商品画像と感情語を交互に横へ流す
• 商品カード（product-card）: グレー枠の角丸画像枠、左下の感情タブ、青の説明文、価格で構成する
• 固定フィルタバー（sticky-filter）: 選択中の感情を表示する白いピル。右端に丸い青の開閉ボタンを付ける
• 動画再生ボタン（button-movie）: 白い矩形に再生アイコンと太字の欧文を入れ、背後に淡い青の板をずらして重ねる
• もっと見るボタン（button-primary）: 青ピルに白文字。右に白丸のプラスアイコンを付ける
• ラッピング訴求バナー（wrapping-banner）: ピンク地にギフト写真、円形の価格バッジ、白ピルのボタンを置く

Do's and Don'ts

Do - 地は青ベタにし、白パネルの角丸で区切る - 白地の文字はすべてブランドの青で統一する - 感情語には必ず絵文字アイコンを添える - 大きな欧文を画面からはみ出させて横に流す - 写真はフィルム調の粒子感と淡いくすみで統一する

Don't - 黒やグレーの本文色を使わない - 青以外の色を、ボタンや見出しの面に多用しない - カードに強いドロップシャドウを付けない - 明朝体や手書き体を混ぜない - 商品説明を長文にしない

Page Structure

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

1. ファーストビュー（世界観と感情のテーマを伝える）: 青の縁取りの中に人物写真を大きく置く。角のタブにロゴとストアボタン、下のタブにキャッチを入れる
2. 流れるロゴ帯＋動画導線（キャンペーン名を印象づけ、動画へ誘導する）: 白の巨大欧文を横に流す。右に立体風の動画ボタンを置く
3. コンセプト文（売り場の情景で共感を生む）: 縦長の写真の上に、淡い青灰の短い詩文を重ねる。締めの一文は大きく太くする
4. コレクション導入（感情で選ぶ仕組みを説明する）: 白パネルの上端に青の巨大欧文を流し、3 行のリード文と流れる感情タグを続ける
5. 感情フィルタ（感情別に商品を絞り込ませる）: 絵文字付き 2×4 の点線の表。スクロール後は固定ピルバーにする
6. 商品一覧（ギフト候補を大量に見せる）: 2 カラムのカード。感情タブ・短い説明・価格を載せ、最後にもっと見るボタンを置く
7. ラッピング訴求（無料ラッピングで購入を後押しする）: 青地にピンクの角丸バナーを置き、円形バッジとギフト選択ボタンを付ける
8. フッター（シェアとページトップへの導線）: 青地に白の丸い SNS アイコン、コピーライト、ページトップへのリンクを置く

Imagery

• 人物写真は店内で商品を手にした自然な笑顔。被写体に寄り、浅い被写界深度で撮る
• フィルム粒子と淡いシアン寄りのくすみを加える
• 商品写真は白背景の切り抜き。枠の中央に小さめに置き、余白を広くとる
• 感情の装飾は標準的なカラー絵文字を使う
• 写真を縦長の短冊に分割して並べるコラージュ表現を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は人物写真を横長にし、ロゴ帯の下に全幅の写真を置いて、その上にコンセプト文を重ねる
• PC の商品一覧は 4 カラム。感情フィルタは左の縦長リストに変える
• PC ではカードの文字を小さくし、情報量を増やす
• 両端の青い縁と、白パネルの角丸は 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 行書くと起動時に読み込まれる。