DESIGN.md — くすみブルー×液体シェイプのネイル・アクセ LP（Pastel Fluid Shapes Accessory & Nail LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、クール・先進的、シンプル・ミニマル
• キーワード: くすみブルー・流体シェイプ・六角形の切り抜き・細身セリフ英字・ジェンダーレス・コレクション告知
• 地の質感: フラットな単色面にネイル液のしずくのような光沢あるオブジェを散らす。紙質感やノイズはない。
• 形: 波打つ曲線のセクション境界、上部が大きく丸いアーチ型写真枠、六角形・五角形の写真切り抜き。
• 温度感: やや寒色寄りで静か。クリーム色とコーラル赤がほのかな温かみを足す。

Colors

• 地はくすみブルーグレー一色を基本とし、特集ブロックだけ白地に切り替える。
• ヘッダー・フッター・アイテム番号帯はクリーム色で上下を挟む。
• CTA はボタン面を白にし、文字とカートアイコンだけ深い赤で示す。
• コーラル・ネイビー・ミント・水色はネイル液のしずく装飾と商品写真だけに使う。
• 見出し英字はスモーキーブルーかグレーブラウンにし、黒は使わない。
• キャンペーンや連携告知のような外部ブロックだけ、白カードの中に独自色を許す。

Typography

• 見出しは字幅の狭い高コントラストのセリフ英字を主役にし、和文は小さく添える。
• アイテム番号は筆記体英字と大見出しを横に並べる。
• 本文は 12px 前後と小さめで、中央揃えか左揃えで静かに組む。
• 商品名と価格は幾何学的なサンセリフで、税込表記はさらに小さくする。
• 和文小見出しは字間を広めにとり、太字でも控えめな色にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は 2 列カードのカルーセル、カテゴリは 2×2 グリッド。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 16px。白ボックスは画面幅の 92% にする。
• 写真の枠や流体シェイプは画面端からはみ出させてよい。
• 商品カードは画像、商品名、細線、仕様と価格、カートボタンの順で縦に積む。
• カルーセルの左右には細い山括弧の矢印を置き、中央にドットかページ数を置く。
• セクション間は 60〜100px ほど広く空ける。

Elevation & Depth

• カートボタンとカテゴリボタンには、ごく薄いドロップシャドウ（0 2px 6px rgba(0,0,0,.08)）を付ける。
• 説明ボックスや白カードは影なしのフラットにする。
• 立体感はネイル液しずくのオブジェの光沢だけで出す。

Shapes

• 角丸: 小 4px ／ 中 14px ／ 大 80px。ボタンは角丸の長方形。
• 写真の切り抜き: 上部を大きく丸めたアーチ型・角丸の大きいスタジアム型、六角形と五角形の多角形切り抜き、斜めに重ねた多角形の背景
• セクション境界: ゆるやかに波打つ有機曲線で地色を切り替える
• カートボタンは角丸 4px の長方形にする。
• カテゴリボタンは角丸 14px にする。
• 六角形写真には外側にずらした白い細線の六角形を重ねる。
• 流体のしずく形を画面端に部分的に見せる。

Components

• カートボタン（button-cart）: 白い長方形の左に赤い英字、右端に赤いカートアイコン。2 列カードの幅いっぱいに置く。
• 商品カード（product-card）: 背景なしの商品画像の下に、中央揃えの商品名、黒い細線、仕様と価格を並べる。
• アイテム番号見出し帯（item-heading-band）: クリーム色の帯に、筆記体の番号とセリフ英字のカテゴリ名を横に並べる。
• こだわり説明ボックス（feature-box）: 淡いグレーの面に中央見出しを置き、上下を細線で区切ったアイコン付きの項目と詳細リンクを並べる。
• 六角形写真と特長（hexagon-feature）: 右に六角形に切り抜いた写真、左に淡い黄色の六角形を敷いた小見出しと 2 行の説明を置く。
• アーチ型写真カルーセル（arch-carousel）: 上部を大きく丸めた写真を中央に置き、隣の写真を左右に少しだけ見せる。端には丸い白矢印ボタンを置く。
• カテゴリボタン（category-button）: 白い角丸ボタンを 2×2 で並べ、英字ラベルを中央に置く。
• 斜線挟み見出し（slash-heading）: 告知見出しの左右を、ハの字の斜線で挟む。
• 液体しずく装飾（fluid-blob）: 光沢のあるネイル液のしずくのような形を、セクションの端に半分見切れる形で置く。

Do's and Don'ts

Do - 地色はくすみブルーグレーで統一し、特集の切り替えは波形の白面で行う。 - 英字見出しは細身セリフ体を大きく使い、和文は小さく添える。 - 写真はアーチ型・六角形・多角形で切り抜き、四角のまま並べない。 - ネイル液のしずく装飾を各セクションの端に 1 つずつ散らす。 - CTA の赤はカートボタンの文字とアイコンだけにとどめる。

Don't - 真っ赤な塗りボタンや大きな影を付けたボタンにしない。 - 太いゴシック体の和文大見出しで訴求しない。 - 原色や蛍光色を地色に使わない（外部連携ブロックを除く）。 - セクションの境界を直線の区切り線で硬くしない。 - 本文を大きくして情報を詰め込まない。

Page Structure

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

1. ヘッダー（ナビとブランドの提示）: クリーム色の帯の中央にロゴ、左にアカウントとカート、右に言語切替とメニューを置く。
2. ファーストビュー（モデルの世界観とブランドの提示）: 全幅のモデル写真の下端を波形で切り、多色のセリフロゴとブランド説明の英字、コンセプトへの誘導矢印を置く。
3. ブランドコンセプト（人物の魅力を見せる）: 角丸の大きい写真枠の背後にクリーム色の多角形を配置する。
4. ポップアップ告知（期間限定イベントと特典を知らせる）: 斜線で挟んだ見出しの下に、中央揃えの小さな本文で日時・場所・特典・注釈を並べる。
5. コレクションビジュアル（新作を印象づける）: 水色の多角形を重ねた商品写真の上に、大きなセリフ英字のコレクション名を重ねる。
6. 商品一覧（カテゴリ別）（購入導線）: クリーム色の番号見出し帯、短い説明、2 列商品カードのカルーセル、こだわり説明ボックスの順に置く。
7. 特集（白地）（素材や想いを深掘りする）: 波形の白面に、アーチ型カルーセル、六角形写真と特長、商品カードの順で置く。
8. インタビュー動画（作り手の言葉で共感を得る）: アーチ型の動画サムネイルと再生ボタン、冒頭本文、MORE で開く折りたたみを置く。
9. コーディネート（着用イメージを見せる）: 幅いっぱいの着用写真のカルーセルにドットを付ける。
10. その他商品・カテゴリ（回遊させる）: 商品カルーセルの下に、2×2 の白いカテゴリボタンを置く。
11. 会員連携・過去コレクション（継続利用とアーカイブへの誘導）: 白カードに 3 つのアイコンで利点を並べる。過去作は写真バナーに英字を重ね、円形の矢印を付ける。
12. フッター（SNS・ガイド・検索）: 波形で切り替えたクリーム地に、SNS アイコン、下線付きリンク、検索欄、送料の注記、大きなロゴを置く。

Imagery

• モデル写真は淡い水色の背景で、パステルのシャツを着たモデルが重なり合う、静かな表情のポートレートにする。
• 商品は水色の背景に水色の多角形の紙を重ね、アクセとボトルを散らして俯瞰で撮る。
• 単品の商品写真は白抜きで影を薄く残し、地色の上に直接置く。
• ネイル液が流れ落ちる・こぼれる瞬間を入れて、液体の質感を見せる。
• 装飾は光沢のあるネイル液のしずく形で、コーラル・ネイビー・ミント・水色・クリームにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 1000〜1100px に制限し、地色は全幅に敷く。
• 商品カードは PC で 3〜4 列に増やす。
• ファーストビューは PC で写真とロゴを左右に分けて配置する。
• アーチ型カルーセルは PC で隣の写真を広く見せる。
• 英字の大見出しは PC で 80px 前後まで拡大する。

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