DESIGN.md — 淡い水色×ベージュの夏水着ルックブック LP（Airy Pastel Blue Summer Swimwear Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル
• キーワード: ルックブック・パステルブルー・欧文セリフ・楕円フレーム・余白多め・夏
• 地の質感: フラットな淡色の地。FVだけ水色からベージュへ縦にグラデーション。写真はナチュラル光のフィルム調。
• 形: 縦長の楕円・カプセル型の写真、白の細線で二重にしたフレーム、上辺が波打つ写真の切り抜き
• 温度感: 涼しげで少し温かい（水色の地にベージュ系の文字）

Colors

• 地はほぼ全面を淡い水色の単色にし、FVだけ水色からベージュへの縦グラデーションにする
• 大見出しの欧文は水色より濃いくすんだブルーで塗り、白の細いアウトライン文字を重ねる
• 章番号はレモンイエローを差し色にして、使うのは番号だけにする
• 本文はグレーブルーで低コントラストに抑え、黒は使わない
• CTAは見出しと同じくすんだブルーの面に白文字。赤やビビッドな色は使わない
• FVのコピーと番号はベージュブラウンにして、肌や小物の色と合わせる
• page は文字 #A1B0BE × 背景 #D8E6F3 のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#54677A、4.59:1）を使う。
• button-check は文字 #EEFEFF × 背景 #A4BCDB のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4675B2、4.55:1）を使う。

Typography

• 見出しは欧文セリフを主役にする。和文は明朝の大見出しを1か所だけ使う
• 大きな欧文見出しは、1行目を塗り文字、2行目を白い細線のアウトライン文字にして写真に少し重ねる
• 本文は12px前後で行間を2.0と広くとり、中央揃えか右寄せで短い行にする
• 縦組みの欧文見出し（90度回転）を写真の横に置いて変化をつける
• 写真の縁に沿わせて、カーブした小さな欧文キャプションを置く
• 太字は使わない。全体を細めのウェイトでそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右に交互にずらすジグザグ配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真のサイズと位置はあえてそろえず、雑誌のように左右へ散らす
• 商品ブロックは写真を約55%幅にし、残りに商品テキストとCTAを縦に並べて左右交互に配置する
• 章の頭は番号、大きな欧文見出し、横長の写真を重ねて組む
• テキストの段落は短くし、写真の横の余白に置く
• 余白は広めにとり、詰め込まない

Elevation & Depth

• 影はほぼ使わずフラットにする
• 奥行きは写真の外側に白の細線フレームを数px離して付けて出す
• 文字と写真の重なりでレイヤー感を出す

Shapes

• 角丸: 小 0px ／ 中 24px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 縦長の楕円・カプセル型・角丸長方形・上辺が波打つ形を混ぜる。一部は白い細線の二重枠付き
• セクション境界: 区切り線は入れない。地の色を続けたまま余白で区切る
• ボタンは角丸なしの長方形
• 丸い写真には外側に白い1px線のフレームを付ける
• 商品写真の上辺だけゆるいウェーブで切る
• 角のある四角写真には白い細枠を付ける

Components

• CHECKボタン（button-check）: 幅115px前後の小さな長方形。英字と細い矢印を入れる
• 章番号（chapter-number）: 2桁の数字をレモン色の欧文セリフで大きく表示する
• 塗り＋アウトラインの欧文見出し（outline-heading）: 塗り文字と白線のアウトライン文字を2段に組み、写真に重ねる
• 楕円フォトフレーム（oval-photo-frame）: 楕円やカプセル型の写真の外側に白い細線の枠を付ける
• 特徴ラベル（product-tag）: 細いグレーの枠線で囲んだ小さなラベル
• 商品情報ブロック（product-info）: ラベル、商品名2〜3行、価格、カラードット、CTAを縦に並べる
• カラー展開ドット（color-dots）: 直径6px程度の丸を色数ぶん横に並べる
• 章インデックス（index-cards）: 番号、短い横線、英字ラベル、楕円写真を3列で階段状にずらして並べる

Do's and Don'ts

Do - 地は淡い水色の単色にし、余白をたっぷりとる - 写真は楕円・カプセル・波形に切り抜き、白い細線フレームを付ける - 欧文見出しを大きくし、塗り文字とアウトライン文字の2段で写真に重ねる - テキストは短い行の詩的な文にし、低コントラストのグレーブルーで組む - 章ごとに番号、見出し、イメージ写真、コピー、商品の順で構成をそろえる

Don't - 黒の太字や原色の強いCTAを使わない - セール帯や吹き出しなどの訴求型パーツを入れない - 写真を等間隔のグリッドに整列させない - 濃い影やグラデーションのボタンを使わない - 和文の太ゴシック見出しを多用しない

Page Structure

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

1. ファーストビュー（コレクションの世界観を伝える）: 水色からベージュへのグラデーション地に、欧文ロゴ風タイトルを置く。その下に楕円フレームのモデル写真を大きく置き、筆記体の季節名と年号を重ねる
2. コンセプト（ブランドの考え方を伝える）: 英字の小見出し、明朝の2行キャッチ、中央揃えの短文3段落を並べる
3. 章インデックス（3カテゴリを予告する）: 番号、横線、英字名、楕円写真を3列で階段状にずらして並べる
4. カテゴリ1（体型カバー水着の訴求）: 大きな欧文見出しを横長写真に重ね、右寄せの短文を置く。楕円写真3枚を散らして配置する
5. 商品紹介1（購入へ誘導する）: 左に商品情報とCTA、右に上辺を波形にした写真を置く
6. カテゴリ2（インナー水着の訴求）: カプセル型の縦長写真の横に縦組みの欧文見出しを置き、四角写真2枚と中央揃えの短文を添える
7. 商品紹介2（購入へ誘導する）: 左に角を一部丸めた写真、右に商品情報とCTAを置く
8. カテゴリ3（UV対策ウェアの訴求）: 見出しを写真に重ねる。右寄せの短文の下に楕円写真3枚を散らす
9. 商品紹介3（複数商品へ誘導する）: 商品情報、カラードット、CTAを左右交互に2つ並べる
10. エンディング（余韻を残して締める）: 白壁に服を吊るしたスチール写真を横長に置いて終える

Imagery

• 自然光のスタジオかアーチ窓のある白壁の室内で撮る。少し退色したフィルム調にする
• モデルは自然なポーズにし、浮き輪・麦わら帽子・黄色い果物などの夏小物を添える
• 服の色はベージュ・カーキ・黒・ミントなどのくすみ色にそろえる
• 最後に、流木に服を吊るした生活感のある静物写真を置く
• 写真の縁に、カーブした小さな白い欧文キャプションを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため推奨を書く。PCではコンテンツ幅を960px程度にし、地の水色は全幅に敷く
• 商品ブロックは写真とテキストの2カラムのまま、左右交互の配置を保つ
• 散らして配置する楕円写真は、余白を広げて3〜4枚並べる
• 欧文見出しは120px前後まで拡大して写真に重ねる
• 本文の行幅は短いまま保つ

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