DESIGN.md — テラコッタ×白のアーチ写真で見せるくつろぎメガネLP（Soft Terracotta Relax Eyewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、かわいい
• キーワード: アーチ型写真・テラコッタ・細明朝・筆記体ポイント・手描き線画・余白多め
• 地の質感: フラットな白地と柔らかい自然光の写真。淡いベージュ地のブロックを少しだけ使う
• 形: 上が半円のアーチ、正円、ピル型ボタン。カードは角丸なしかごく小さい角丸
• 温度感: 暖かく穏やか。くすんだブラウンとベージュ寄り

Colors

• 地は白が基本。ブラウンはFV上部の帯、ロゴ、CTAボタンだけに絞る
• 商品を並べる後半だけ淡いベージュの地にし、白いカードを浮かせる
• 見出しは濃いグレー、リード文やサブ見出しはブラウン系で温度を出す
• ポイント番号の筆記体は、ポイントごとに淡い色（緑・水色・藤色・ピンク）を変える
• 写真の上の線画は必ず白一色にする
• label-tag は文字 #A56E4F × 背景 #FFFFFF のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9E694C、4.59:1）を使う。

Typography

• 見出しは細い明朝体で、太字にしない
• 筆記体の欧文を見出しの左上に少し重ねて置く
• 本文はやや小さめのゴシックで、行間を広めにとる
• リード文は中央揃えの明朝体で、ブラウン系の小さい文字にする
• キーワードには淡いマーカーを下半分だけ引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCはポイントを写真と文の左右交互2カラム、商品は2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 大きいアーチ写真は横幅いっぱい近くに置き、その下に見出しと本文を左揃えで置く
• 補足の円形写真は右寄りに置いて、左右の動きを出す
• セクションの間は余白を大きくとる
• 商品画像は白地の中央に大きく置き、品番を中央に添える

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる
• 商品画像の下に薄い映り込みの影だけ付ける
• カードは淡いベージュの地との色差で浮かせる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 上が半円のアーチ型と正円。FVは3つのアーチを横に並べる
• セクション境界: 直線で区切る。FVのブラウン帯は写真の途中で水平に切れる
• メイン写真は上が半円のアーチ型にする
• 補足のディテール写真は正円で切り抜く
• ボタンはピル型にするか、上下の細線だけで作る

Components

• アーチ写真のFV（hero-arches）: ブラウン帯の上に、アーチ型写真を中央に大きく1枚、左右に小さく2枚並べ、下にロゴと筆記体を重ねる
• ポイントブロック（point-block）: アーチ写真、筆記体の番号、明朝見出し、本文、右寄せの円形写真の順に縦に並べる
• 筆記体ポイント番号（script-number）: 淡い色の筆記体で書く番号。見出しの左上に重ねる
• 購入ピルボタン（button-primary）: ブラウンで塗ったピル型ボタン。白い太字の文字と右端の矢印を入れる
• 上下線リンクボタン（button-line）: 上下に細線を引き、中央に明朝の文字を置く。上にスラッシュで挟んだ短い誘導文を添える
• 仕様ラベル（label-tag）: ブラウンの細い枠で囲んだ小さなラベル。右に品番と価格を並べる
• 商品セットカード（product-card）: 白いカードの中に商品画像、ラベル2段、購入ボタン、下線付きテキストリンクを縦に並べる
• 細枠ボタン（outline-button）: グレーの細い枠で囲んだ白い四角ボタン。関連記事への誘導に使う

Do's and Don'ts

Do - 写真はアーチか正円で切り抜き、白地に余白をたっぷりとって置く - 写真の上に白い手描きのメガネ線画を重ねて、遊び心を出す - 見出しは細い明朝体にし、欧文の筆記体を添える - ブラウンはCTAとロゴに絞って使う - 商品は白地に切り抜き画像で置き、品番を小さく添える

Don't - 原色や彩度の高い強調色を使わない - 太いゴシックの大見出しや、派手なバッジを置かない - 写真を四角いまま並べ続けない - ボタンに強い影やグラデーションを付けない - 要素を詰め込まない

Page Structure

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

1. ファーストビュー（くつろぎの世界観とブランドを印象づける）: ブラウン帯の上にアーチ写真を3枚並べ、縦書き風の手書きコピーとロゴ、筆記体を重ねる
2. コンセプト（商品の立ち位置を短く伝える）: ブラウンの明朝のサブキャッチに、中央揃えの小さなリード文とマーカーを添える
3. おすすめ理由の導入（特長パートが始まることを示す）: 明朝で書いた中央揃えの見出しを1行だけ置く
4. 特長（4ポイント）（機能とデザインの利点を伝える）: アーチ写真、筆記体の番号、見出し、本文、右寄せの円形写真を4回繰り返す
5. サイズ展開（2タイプの違いを説明して選んでもらう）: ロゴの下に見出しを置き、線画イラスト、タイプ名、説明、商品画像2点の順に並べる
6. 商品一覧への誘導（一覧ページへ送る）: スラッシュで挟んだ誘導文と、上下線のボタンを置く
7. セット購入（レンズとのセット購入を促す）: 淡いベージュ地に白いカードを置き、商品ごとにラベル、価格、ブラウンのピルボタンを並べる
8. 関連機能の紹介（レンズの機能を補足する）: 白枠付きの写真の下に、ブラウンの小さい文字と下線リンクを置く
9. 関連コラム（読み物へ送る）: 線画イラストを枠で囲み、ロゴ、短い文、細枠ボタンを中央に置く

Imagery

• 猫や小物を、柔らかい自然光で浅い被写界深度で撮る
• 色は白、ベージュ、木の茶系にまとめ、くすんだ暖色にする
• 写真の上に白い手描きのメガネ線画や小さな文字の落書きを重ねる
• 説明用には黒い細線の猫や人物のイラストを使い、色はごく淡くだけ入れる
• 商品は白背景の切り抜きで、斜め前から撮って下に映り込みを付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではポイントを、アーチ写真と淡い色地のアーチ型テキストパネルの左右交互配置にする
• PCでは円形写真を2つのアーチの間に重ねて置く
• サイズ展開はPCでイラストと説明を横並びにし、商品を2列にする
• セット購入カードはPCで2列×2段にする
• 関連コラムはPCでイラストと文を左右2カラムにする

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