DESIGN.md — 紺×淡青の企業グッズ通販 LP（Corporate Navy Goods Store LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 信頼・誠実、清潔・爽やか、親しみ・手作り感、シンプル・ミニマル
• キーワード: 濃紺・淡い水色・角張った枠ボタン・斜線つき英字ラベル・黄色のホットスポット・手描きマスコット
• 地の質感: 基本はフラットな単色面。紹介セクションだけ和紙のようなグレーの紙質感を敷く
• 形: 写真やボタンは角丸なしの四角。円は商品サムネイルとホットスポットだけに使う
• 温度感: 紺で落ち着かせつつ、黄色とイラストで温かみを足したやや涼しめのトーン

Colors

• 地色は白・淡水色・オフホワイト・紙質グレー・紺の順に切り替え、セクションの区切りをはっきりさせる
• 見出しの文字は紺に統一する。黒は商品名と本文だけに使う
• サブボタンは白地に紺の枠と紺の文字。主ボタンは紺の塗りに白文字
• 黄色は写真上のホットスポットと商品の差し色だけにとどめる
• 紺のセクションでは文字・線・枠ボタンをすべて白にする
• 王冠は1位から3位を金・銀・銅、4位以降を紺で塗る

Typography

• 見出しは中央揃えの紺の太い丸ゴシック。2行に改行してリズムを作る
• 見出しの上には「\ 英字 /」の形で小さな英字ラベルを置く
• 本文は字間を広めに取り、行間は2.0にする
• 価格は「¥ 数字」の後ろに小さく税込表記を付ける
• 全体に字間を0.04〜0.12em空けて、ゆったり見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ランキングと Instagram は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右12px程度の余白を残してほぼ全幅に置く
• セクションは英字ラベル→見出し→枠ボタン→写真→商品行の順に積む
• 商品行は左に小さな画像、右に商品名と価格を並べる
• アコーディオンは区切り線で項目を分ける
• フッターは2列のカテゴリリストの下に、縦並びのリンクを置く

Elevation & Depth

• 影はほぼ使わずフラットにする
• ファーストビューの写真だけ、わずかに角丸と薄い影を付ける
• 円形サムネイルの背景に淡いグレーの円を敷いて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角のまま切り抜く。商品サムネイルだけ正円にする
• セクション境界: 直線で色を切り替える
• ボタンは角丸なしの長方形
• 主ボタンの上辺中央に小さな三角を付ける形もある
• Instagram のタイルは紺の太枠で囲む
• ホットスポットは黄色い丸に半透明の黄色い輪を重ねる

Components

• 枠線ボタン（button-outline）: 白地に紺の1.5px枠と紺文字。見出しの直下に中央揃えで置く
• 紺塗りボタン（button-primary）: 幅約240pxの紺の長方形に白文字。ランキングの下や紹介セクションに置く
• 斜線ラベル（eyebrow-label）: 英字の小見出しを左右の斜線で挟んで飾る
• 商品ホットスポット（hotspot）: 写真上の商品の位置に置く、黄色の丸と半透明の輪
• 商品行（product-row）: 左に小さな商品画像、右に商品名と価格・税込表記を並べる
• 紺地アコーディオン（accordion）: 白文字の見出しと開閉矢印。開いた項目には本文と白枠の矢印ボタンを表示する
• 王冠つきランキングカード（ranking-card）: 左上に順位の数字入りの王冠、下に商品画像・名前・価格を置く
• 円形カテゴリサムネイル（circle-thumb）: 淡いグレーの円の中に商品を置き、横スクロールで並べる

Do's and Don'ts

Do - 見出しは紺の丸ゴシックで中央揃えにし、斜線つきの英字ラベルを添える - セクションごとに地色を切り替える - 写真は明るいオフィスや机上の自然光で撮った物撮りにする - ボタンは角丸なしの長方形で統一する - 商品の価格は税込表記と一緒に載せる

Don't - ピル型ボタンやグラデーションは使わない - 紺以外の色を見出しに使わない - 黄色を広い面積で使わない - 強い影や立体的な装飾は付けない - 本文の行間を詰めない

Page Structure

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

1. ヘッダー（ナビゲーションとカートへの導線）: 紺の帯の左にメニュー、中央にロゴ、右に検索とカートのアイコン
2. ファーストビュー（ストアの価値を伝える）: 淡い水色の地に、チーム写真・ラベルつき見出し・商品画像・枠ボタンを縦に積む
3. カテゴリサムネイル（商品ジャンルを一覧で見せる）: オフホワイトの帯に円形サムネイルを横スクロールで並べる
4. 利用シーン別の提案×3（使い方ごとに商品を提案する）: ラベル→2行見出し→枠ボタン→ホットスポット付き写真→商品行。この型を3回くり返す
5. 学び方ガイド（活用方法を案内する）: 紺地に白文字のアコーディオンを置き、その下に写真を入れる
6. 人気ランキング（売れ筋を見せる）: オフホワイトの地に王冠つきカードのカルーセルと紺塗りボタン
7. SNS紹介（日々の活動を発信する）: ハッシュタグ見出しと、紺枠の正方形画像の横スクロール
8. ストア紹介（運営の思いを伝える）: 紙質感グレーの地に本文、手描きマスコット、紺ボタン
9. フッター（サイト内リンクの一覧）: 紺地にロゴとカテゴリの2列リスト、縦並びのリンク、コピーライト

Imagery

• 明るいオフィスで笑顔の社員が集まる自然なチーム写真
• 木の机の上に冊子・カード・ノートPCを置いた俯瞰の物撮り
• 撮影していない商品は白背景の単品カットにする
• 手描きの線画マスコットを白フチで切り抜いて置く
• 写真上の黄色い丸で商品の位置を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではヘッダーにメニューを横並びで出し、上部にお知らせ帯を加える
• PC のファーストビューは左にテキスト、右に写真の2カラム
• PC の提案セクションは写真と商品カードを左右に並べ、左右の配置を交互に入れ替える。下にページネーションのバーを置く
• PC のアコーディオンは左に項目、右に写真
• PC のフッターは4列にする

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 行書くと起動時に読み込まれる。