--- version: alpha name: Airy Pastel Blue Summer Swimwear Lookbook LP description: 淡い水色の地に、細身の欧文セリフと楕円・波形に切り抜いた写真を散りばめた、雑誌風の水着コレクション LP。カテゴリを番号付きで 3 章に分け、各章は大きな欧文見出し、イメージ写真、短い詩的コピー、商品カードの順に並べる。 colors: background: '#D8E6F3' primary: '#A3BAD5' cta: '#A4BCDB' on-cta: '#EEFEFF' accent-1: '#FEFABE' secondary: '#CCB7A1' text-body: '#A1B0BE' text-muted: '#9AAAB9' surface: '#EBF0F0' background-alt: '#EAE7E1' tint-1: '#C2DCEE' line: '#A2B2C0' text-body-accessible: '#54677A' cta-accessible: '#4675B2' typography: display: fontFamily: Playfair Display fontSize: 46px fontWeight: 500 lineHeight: 1.0 headline-lg: fontFamily: Playfair Display fontSize: 52px fontWeight: 600 lineHeight: 0.95 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.25em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.0 headline-sm: fontFamily: Cormorant Garamond fontSize: 13px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em label-button: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 0px md: 24px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-check: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 24px chapter-number: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 40px outline-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px oval-photo-frame: rounded: '{rounded.full}' height: 290px product-tag: textColor: '{colors.text-muted}' height: 18px product-info: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 160px color-dots: rounded: '{rounded.full}' height: 8px index-cards: textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 300px --- # DESIGN.md — 淡い水色×ベージュの夏水着ルックブック LP（Airy Pastel Blue Summer Swimwear Lookbook LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: ルックブック・パステルブルー・欧文セリフ・楕円フレーム・余白多め・夏 - **地の質感**: フラットな淡色の地。FVだけ水色からベージュへ縦にグラデーション。写真はナチュラル光のフィルム調。 - **形**: 縦長の楕円・カプセル型の写真、白の細線で二重にしたフレーム、上辺が波打つ写真の切り抜き - **温度感**: 涼しげで少し温かい（水色の地にベージュ系の文字） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#D8E6F3` | ページ全体の地の色 | 55% | 画素の実測 | | `primary` | `#A3BAD5` | 大きな欧文見出しとCTAボタンの面 | 3% | 画素の実測 | | `cta` | `#A4BCDB` | CHECKボタンの面 | 1% | 画素の実測 | | `on-cta` | `#EEFEFF` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#FEFABE` | 章番号やFVロゴのレモンイエロー | 0% | 画素の実測 | | `secondary` | `#CCB7A1` | FVコピーと番号のベージュブラウン | 1% | 画素の主要色に補正 | | `text-body` | `#A1B0BE` | 本文や商品名のグレーブルー | 2% | 画素の実測 | | `text-muted` | `#9AAAB9` | 価格・注釈のグレー | 0% | 画素の実測 | | `surface` | `#EBF0F0` | 写真の周りの白い細線フレーム | 1% | 画素の主要色に補正 | | `background-alt` | `#EAE7E1` | FVグラデーション下部のベージュ | 4% | 画素の実測 | | `tint-1` | `#C2DCEE` | FV上部の水色 | 4% | 画素の実測 | | `line` | `#A2B2C0` | ラベル枠や番号下の短い横線 | 0% | 画素の実測 | | `text-body-accessible` | `#54677A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#4675B2` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全面を淡い水色の単色にし、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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風タイトル（大文字と細いイタリックの混植） | 欧文セリフ | Playfair Display | 500 | 46px | 1.0 | 0.0em | | `headline-lg` | 章の大きな欧文見出し（塗りとアウトラインの2段） | 欧文セリフ | Playfair Display | 600 | 52px | 0.95 | 0.02em | | `headline-md` | FVの和文キャッチ | 明朝 | Shippori Mincho | 500 | 24px | 1.6 | 0.25em | | `accent` | 写真に添える筆記体や章番号 | 欧文スクリプト | Great Vibes | 400 | 40px | 1.0 | 0.0em | | `headline-sm` | 英字の小見出し・目次ラベル | 欧文セリフ | Cormorant Garamond | 500 | 13px | 1.3 | 0.05em | | `body-md` | 詩的な短文・商品名 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.1em | | `body-lg` | 価格 | 欧文サンセリフ | Noto Sans JP | 500 | 14px | 1.4 | 0.03em | | `label-button` | CHECKボタン | 欧文サンセリフ | Montserrat | 400 | 10px | 1.0 | 0.08em | - 見出しは欧文セリフを主役にする。和文は明朝の大見出しを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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-69592f70`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/f/swimstyle_2026/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。