DESIGN.md — クリーム地×水色線の透明感ある眼鏡カフェ LP（Pale Cream Aqua Line Lens Cafe LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル、ナチュラル
• キーワード: 透明感・淡いクリーム・水色の細線・楕円写真・余白たっぷり・字間広め
• 地の質感: フラットで影はない。淡い写真の白とびと、薄いクリーム地で空気感を出す
• 形: 楕円・正円の写真、ピル型アウトラインボタン、円形の小ボタン、波線の区切り
• 温度感: やや涼しげ。クリーム地でほんのり暖かさを足す

Colors

• 地はクリーム #FFFFE2 を広く使い、ヒーローとフッターだけ白にする
• 文字・線・ボタンは水色一色でそろえ、黒い文字は使わない
• 塗りのボタンは作らず、水色の線と白地で構成する
• 濃い水色の塗りは最下部の細い帯だけに使う
• ピンク・ミント・黄などはロゴやバッジの小さな差し色にとどめる
• 写真は白っぽく淡い水色寄りに統一する
• page は文字 #4FA9C6 × 背景 #FFFFE1 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#317E97、4.53:1）を使う。
• button-outline-pill は文字 #2EB6D8 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1D819A、4.51:1）を使う。
• button-circle は文字 #2EB6D8 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1D819A、4.51:1）を使う。
• heading-wave-badge は文字 #2EB6D8 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1D819A、4.51:1）を使う。
• news-card は文字 #2EB6D8 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1D819A、4.51:1）を使う。
• floor-map は文字 #2EB6D8 × 背景 #FFFFE1 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1D819A、4.55:1）を使う。
• info-table は文字 #2EB6D8 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1D819A、4.51:1）を使う。

Typography

• 文字はすべて水色。太字はほとんど使わず、500 までにする
• 字間を広め（0.1〜0.2em）に取り、静かな印象にする
• 見出しの上に小さな英字ラベルを置く
• 大見出しは 1 行 2〜4 文字で改行して縦に積む
• 本文は行間 2.0 前後でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章を左右交互に置く 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 88px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション間は大きく空けて、余白を見せる
• 写真と文章は左右交互にずらして置く
• 見出しの横から細線を伸ばして写真へつなぐ
• 楕円写真は画面の端からはみ出すように置いてよい
• 体験紹介は PC で 2 列カード、SP で 1 列にする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の重なりと白い面の切り替えで出す
• ニュース枠は白い角丸面をクリーム地の上に浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 施設写真は横長の楕円、コンセプト写真は正円、体験写真は角丸なしの長方形
• セクション境界: 直線でクリーム地と白地を切り替え、見出し下に水色の波線を引く
• ボタンは 1px 水色線のピル型
• 『こちら』系の補助リンクは小さな円形アウトライン
• 見出しラベルは白い楕円に入れて波線の上に重ねる
• 角ばった太い枠は使わない

Components

• ピル型アウトラインボタン（button-outline-pill）: 1px 水色線のピル。左に矢印線を付け、文字も水色
• 円形の予約リンク（button-circle）: 直径約 64px の水色線の円に、2 行の短い誘導文を入れる
• 楕円の見出しと波線（heading-wave-badge）: 白い楕円の中に縦に積んだ大見出しを入れ、横に水色の波線と英字を添える
• 英字ラベル付き見出しと細線（heading-label-line）: 小さな英字の下に和文見出しを置き、下に細線を写真まで伸ばす
• 楕円写真スライダー（photo-ellipse-slider）: 横長の楕円に切り抜いた写真。下に小さなドットのページ送りを付ける
• お知らせカード（news-card）: 白い角丸の大きな面に、縦に積んだ見出しと写真付きの記事を横に並べる。ミント色の小バッジと日付を付ける
• 線画フロアマップ（floor-map）: 水色の線だけで描いた館内図に、階数の大きな英数字と施設名ラベルを置く
• 営業情報表（info-table）: 英字の項目名と値を 2 列で並べ、見出しの横に細線を引く

Do's and Don'ts

Do - 文字・線・アイコンはすべて水色でそろえる - 写真は楕円や正円に切り抜き、余白を大きく取る - 見出しには小さな英字ラベルを添える - ボタンは線だけのピル型か円形にする - 写真は明るく白とび気味に撮り、淡い青みでそろえる

Don't - 黒や濃いグレーの太い文字を使わない - 赤やオレンジの塗りボタンを置かない - 影・グラデーションボタン・太い枠を使わない - 余白を詰めて情報を密に並べない - 派手なアイコンや吹き出しを多用しない

Page Structure

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

1. ファーストビュー（施設の世界観とテーマを伝える）: 左に淡い写真とロゴ・短いテーマ文、右に別の写真とナビとお知らせを置く。白地の非対称レイアウト
2. あいさつ（施設を短く紹介する）: 白地の中央に 2 行の見出しと英字の小見出しを置く
3. 外観写真（建物の雰囲気を見せる）: 空の写る外観写真を全幅で入れる
4. コンセプト（成り立ちと想いを伝える）: クリーム地に見出しと本文、右側に正円写真を 2 枚重ねる
5. 商品の紹介（主力商品の価値を伝える）: 左に大きな写真、右に見出しと本文、ピルボタンと円形リンクを置く
6. フロアガイド（館内でできることを示す）: 中央見出しの下に、階ごとの水色線画マップを横に並べる
7. 施設紹介（展示・店舗・カフェ・テラスを紹介する）: 楕円写真と文章を左右交互に 4 段並べ、見出しから細線を伸ばす
8. 体験メニュー（オーダーやワークショップに誘導する）: 波線見出しの下に写真カードを 2 列、その下に全幅写真と横並びの説明を置く
9. お知らせ（最新情報を伝える）: 白い角丸の面に縦組み見出しと記事カード 3 枚を並べる
10. 雰囲気写真（余韻を残す）: 淡くぼかした全幅写真を入れる
11. 店舗情報・アクセス（営業時間と行き方を伝える）: 白地にロゴ、営業情報表、アクセス情報を置き、最下部に水色の帯

Imagery

• 自然光で白とび気味に撮った、明るく淡い写真
• ガラス・レンズ・透明な素材の重なりや映り込み
• 白い器や水色の小物を使ったシンプルなカフェの静物
• スタッフや客の自然な作業風景を、白い室内で撮る
• 館内図や装飾は水色の細い線画で描く
• ロゴは多色の手書き風線画で遊びを持たせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左右交互の 2 カラム、SP は写真のあとに文章を置く 1 カラムにする
• 楕円写真は SP で画面幅の約 85% にし、片側に寄せる
• 体験カードは PC で 2 列、SP で 1 列にする
• 縦に積む大見出しは SP でも同じ組み方で中央に置く
• ニュースは SP で横スクロールのカードにする
• SP では上部ナビをハンバーガーメニューにまとめる

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