--- version: alpha name: Pastel Fluid Shapes Accessory & Nail LP description: くすみブルーグレーの地に、ネイル液のような有機的な流体シェイプと六角形の切り抜き写真を重ねたコレクション告知 LP。細長い高コントラストのセリフ体英字見出しが上品さを出し、商品は 2 列カードと白いカートボタンで淡々と並べる。 colors: background: '#D7E0E7' primary: '#637584' surface: '#FFFFFF' background-alt: '#FCFAE3' tint-1: '#B9D9E6' tint-2: '#EBF0F3' cta: '#B5283A' on-cta: '#FFFFFF' text: '#5B5F62' text-body: '#4A4A4A' line: '#333333' accent-1: '#D1727D' accent-2: '#3E3656' accent-3: '#FCFAE3' typography: display: fontFamily: Italiana fontSize: 52px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.01em headline-lg: fontFamily: Italiana fontSize: 30px fontWeight: 400 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em body-lg: fontFamily: Jost fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.01em accent: fontFamily: Italianno fontSize: 18px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Jost fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 4px md: 14px lg: 80px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cart: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px product-card: textColor: '{colors.text-body}' typography: '{typography.body-lg}' height: 360px item-heading-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px feature-box: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 160px hexagon-feature: backgroundColor: '{colors.accent-3}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 220px arch-carousel: backgroundColor: '{colors.tint-1}' rounded: '{rounded.lg}' height: 300px category-button: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 50px slash-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px fluid-blob: backgroundColor: '{colors.accent-1}' rounded: '{rounded.full}' height: 80px --- # DESIGN.md — くすみブルー×液体シェイプのネイル・アクセ LP（Pastel Fluid Shapes Accessory & Nail LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、クール・先進的、シンプル・ミニマル - **キーワード**: くすみブルー・流体シェイプ・六角形の切り抜き・細身セリフ英字・ジェンダーレス・コレクション告知 - **地の質感**: フラットな単色面にネイル液のしずくのような光沢あるオブジェを散らす。紙質感やノイズはない。 - **形**: 波打つ曲線のセクション境界、上部が大きく丸いアーチ型写真枠、六角形・五角形の写真切り抜き。 - **温度感**: やや寒色寄りで静か。クリーム色とコーラル赤がほのかな温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#D7E0E7` | ページ全体の地色（くすみブルーグレー） | 40% | 画素の実測 | | `primary` | `#637584` | ブランドロゴ・英字大見出しのスモーキーブルー | 2% | 画素の実測 | | `surface` | `#FFFFFF` | カートボタン・カテゴリボタン・白セクション | 18% | 画素の実測 | | `background-alt` | `#FCFAE3` | ヘッダー・フッター・アイテム見出し帯のクリーム | 6% | 画素の実測 | | `tint-1` | `#B9D9E6` | 商品写真背景・六角形の水色 | 9% | 画素の実測 | | `tint-2` | `#EBF0F3` | こだわり説明ボックスの淡いグレー | 3% | 画素の実測 | | `cta` | `#B5283A` | カートボタン文字・アイコンの赤 | 0% | 推定 | | `on-cta` | `#FFFFFF` | カートボタンの白面 | 2% | 画素の実測 | | `text` | `#5B5F62` | セクション英字見出しのグレーブラウン | 1% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文・価格のダークグレー | 2% | 推定 | | `line` | `#333333` | 商品名下・リスト区切りの黒い細線 | 0% | 推定 | | `accent-1` | `#D1727D` | ネイル液しずくのコーラルピンク | 0% | 画素の実測 | | `accent-2` | `#3E3656` | 濃色しずくのダークネイビー | 0% | 推定 | | `accent-3` | `#FCFAE3` | 六角形見出し背景の淡いイエロー | 0% | 画素の実測 | - 地はくすみブルーグレー一色を基本とし、特集ブロックだけ白地に切り替える。 - ヘッダー・フッター・アイテム番号帯はクリーム色で上下を挟む。 - CTA はボタン面を白にし、文字とカートアイコンだけ深い赤で示す。 - コーラル・ネイビー・ミント・水色はネイル液のしずく装飾と商品写真だけに使う。 - 見出し英字はスモーキーブルーかグレーブラウンにし、黒は使わない。 - キャンペーンや連携告知のような外部ブロックだけ、白カードの中に独自色を許す。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | コレクション名・カテゴリ名の大型英字 | 欧文セリフ | Italiana | 400 | 52px | 1.0 | -0.01em | | `headline-lg` | セクション英字見出し | 欧文セリフ | Italiana | 400 | 30px | 1.2 | 0.0em | | `headline-md` | 告知見出し（英字＋和文） | ゴシック | Noto Sans JP | 400 | 20px | 1.4 | 0.04em | | `headline-sm` | 特長の小見出し・ボックス見出し | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.5 | 0.12em | | `body-md` | 本文・告知詳細 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.02em | | `body-lg` | 商品名・価格 | 欧文サンセリフ | Jost | 400 | 14px | 1.5 | 0.01em | | `accent` | アイテム番号の筆記体 | 欧文スクリプト | Italianno | 400 | 18px | 1.0 | 0.02em | | `note` | 注釈・税込価格 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.02em | | `label-button` | Cart・カテゴリボタン | 欧文サンセリフ | Jost | 500 | 13px | 1.0 | 0.02em | - 見出しは字幅の狭い高コントラストのセリフ英字を主役にし、和文は小さく添える。 - アイテム番号は筆記体英字と大見出しを横に並べる。 - 本文は 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 ```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-062b7908`（元 LP の URL から採番） - **元 LP**: https://www.freecus.com/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。