DESIGN.md — 紺×金の明朝で魅せる眼鏡専門店サービス LP（Navy and Gold Craftsman Optical Service LP）

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

Overview

• 業種: その他 ／ 雰囲気: 信頼・誠実、上品・高級、シンプル・ミニマル
• キーワード: 紺と金・明朝体・欧文セリフの大見出し・細い縦グリッド線・職人・老舗・実写スタッフ写真
• 地の質感: 白地にごく淡いグレーの縦線を等間隔に通す。全体はフラットで影はほぼ使わない
• 形: 四角い写真と帯ラベルが中心。番号は細線の正円バッジ、ボタンは角丸小さめ
• 温度感: やや寒色寄りで落ち着いた印象。金色と人物の笑顔で温かさを足す

Colors

• 地は白が基本。章の切り替えに紺の全幅ブロックを挟んでリズムを作る
• 金は頭文字・数字・詳細ボタンだけに使い、面積は全体の2%以内にする
• ラベルや小見出しは紺地に白文字の帯で統一する
• インタビュー部分だけ薄グレー地に白カードを重ねる
• 主CTA（店舗検索）は紺地に白文字、二重線の枠で格上げする
• 本文は真っ黒にせず、やや温かみのあるグレー黒を使う
• button-detail は文字 #FFFFFF × 背景 #BCA34F のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#887534、4.52:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで役割を分ける
• 欧文大見出しの頭文字1字だけを金色にする
• 和文見出しも頭文字1字を大きくして紺にする
• 理念コピーは縦書きの明朝で余白を大きく取る
• 数字は欧文セリフで、左右に金の小さなドットを添える
• 字間は広め（0.06〜0.1em）に取って品よく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約16px。写真は片側を画面端まで裁ち落とす
• 欧文大見出しを写真に重ねて奥行きを作る
• 工程は番号バッジ・ラベル・見出し・本文・写真の順に繰り返す
• 本文は見出しより一段インデントする
• 背景に約94px間隔の細い縦線を通す

Elevation & Depth

• 影は基本使わず、フラットに見せる
• インタビューカードは薄グレー地に白を重ね、色の差で浮かせる
• PC の右下に紺の丸いトップ戻りボタンを置く

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長4:3前後で、片側は画面端まで
• セクション境界: 直線で切り替える。紺ブロックと白地を水平に分ける
• 番号は細い紺線の正円で、POINT と FLOW を上下に入れる
• 帯ラベルは角なしの紺の矩形
• 区切り線の中央に小さな白丸を2つ並べる
• 斜めの細線から水平線へつなぐ見出し装飾を使う

Components

• 店舗検索の主CTA（button-primary）: 紺地に内側の白細線を二重に入れ、眼鏡アイコンと右の細い山形矢印を置く
• 金の詳細ボタン（button-detail）: 金の面に白文字を左寄せし、右端に細い山形矢印
• 欧文大見出し（heading-en-display）: 細い欧文セリフの大文字。頭文字だけ金。写真に一部重ねる。上に下線付きの小さな番号
• 紺の帯ラベル（label-band）: 和文見出しを1行ずつ紺の帯に白文字で載せる
• 工程番号バッジ（step-badge）: 細線の正円に POINT・大きな数字・FLOW を入れ、右に紺の角丸タグを並べる
• 箇条の番号付き区切り（numbered-rule）: 細い横線に白丸2つ。下に金ドット付き番号、明朝の1文、薄い欧文キャプション
• 悩みイラスト（worry-illust）: 紺の円の前に線画の人物。下に紺の三角マークと短い悩みの言葉
• インタビューカード（interview-card）: 白カードの上に写真を重ね、肩書き・明朝の氏名・欧文名・紺タグ・見出し・長文を入れる。右上に金の縦書き欧文

Do's and Don'ts

Do - 紺・白・金の3色で構成し、写真以外に色を増やさない - 大きな欧文セリフ見出しと明朝の和文を組み合わせる - スタッフが接客している自然な実写真を大きく使う - 工程は番号つきの同じ型で揃えて繰り返す - 余白を広く取り、本文は短い段落でまとめる

Don't - ピル型ボタンやポップな丸ゴシックは使わない - 金を広い面積に塗らない - 濃い影やグラデーションの装飾は避ける - 原色の赤や黄で強調しない - 写真に角丸をつけない

Page Structure

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

1. ファーストビュー（老舗の信頼と個別の提案を伝える）: 接客写真を全面に敷き、左下に白い明朝の2行コピー。年数の数字だけ金で大きくし、サービス名と小さな欧文を添える
2. 企業理念（使命と歴史を伝える）: 濃紺地に縦書きの明朝コピー、横線の上に見出し、白い本文。下に細線の大きな数字を眼鏡の形に重ねる
3. 専門スタッフ紹介（独自の認定スタッフを示す）: 小さな英字ラベルと見出しのあと、番号と欧文大見出しを写真に重ね、紺の帯ラベルと本文
4. 3か条（スタッフの強みを3点で示す）: 白丸付きの区切り線ごとに金ドット番号と明朝の1文を置く
5. 資格者紹介（国家資格による技術力を示す）: 紺の全幅ブロックに白い欧文大見出しと写真、黒帯の資格名、本文と金の詳細ボタン
6. 悩みの提起（眼鏡選びの不安に共感する）: 紺の大きな欧文見出しとタグ、左に縦線のある問いかけ、紺丸のイラスト3つに短い悩み
7. サービスの流れ（接客から加工、アフターまで7工程を見せる）: 円の番号バッジ・紺タグ・頭文字を大きくした見出し・本文・写真を繰り返し、最後に金ボタン
8. スタッフインタビュー（人柄と姿勢で信頼を高める）: 薄グレー地に紺の欧文大見出し、写真を重ねた白カードに氏名・資格タグ・長文
9. CTA（店舗検索へ誘導する）: 全幅の紺ボタンに二重線、眼鏡アイコンと矢印

Imagery

• 店内で接客するスタッフの実写。明るく自然な笑顔をとらえる
• 背景に眼鏡棚が並ぶ店舗らしいカットにする
• 測定・加工は手元のクローズアップで職人性を見せる
• 人物イラストは細い黒線画に紺の円を背景に敷く
• 大きな数字や眼鏡の形をごく細い白線の装飾として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真とテキストを左右2カラムに並べ、工程は左に縦の細線でつなぐ
• PC の3か条は横3列に並べる
• FV は PC で横長写真にし、理念部分は写真の上に半透明を重ねる
• 欧文大見出しは PC で約1.5倍に大きくし、写真に重ねる構図は保つ
• インタビューは PC で本文カードを左、写真を右に重ねる
• CTA は PC で幅60%程度の中央寄せにする

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