--- version: alpha name: Greige Editorial Grid Cosmetics Corporate LP description: グレージュ一色の地に黒の文字と細い罫線だけで組んだ、エディトリアル調の化粧品メーカーサイト。商品写真を手で切ったような多角形に切り抜き、色は写真だけに任せる。縦書きの英字ラベル、括弧付きの番号、画面からはみ出す巨大な英字コピーが先進的な印象を作る。 colors: background: '#DCD9D2' primary: '#141310' text-body: '#151313' line: '#3A3835' secondary: '#3A3835' tint-1: '#DCD9D2' surface: '#FFFFFF' text: '#1A1A19' accent-1: '#ABBFCA' text-muted: '#3D3A36' typography: display: fontFamily: Inter fontSize: 56px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 31px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.65 letterSpacing: 0.02em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 600 lineHeight: 2.3 letterSpacing: 0.04em note: fontFamily: Inter fontSize: 10px fontWeight: 500 lineHeight: 1.5 accent: fontFamily: Inter fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Inter fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Inter fontSize: 15px fontWeight: 500 lineHeight: 2.0 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' link-paren-arrow: textColor: '{colors.primary}' typography: '{typography.label-button}' height: 32px vertical-section-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 200px giant-ticker-text: textColor: '{colors.text}' typography: '{typography.display}' height: 70px brand-card: textColor: '{colors.primary}' typography: '{typography.accent}' height: 330px news-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 370px grid-pattern: height: 120px vertical-side-copy: textColor: '{colors.primary}' typography: '{typography.note}' height: 200px footer-nav: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 400px --- # DESIGN.md — グレージュ地×細罫線の化粧品メーカーLP（Greige Editorial Grid Cosmetics Corporate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: シンプル・ミニマル、クール・先進的、上品・高級 - **キーワード**: グレージュ単色地・細い黒罫線・多角形の切り抜き写真・縦書き英字ラベル・はみ出す巨大英字・括弧付きナンバリング - **地の質感**: 紙のようなマットなグレージュ地。一部に方眼紙のような薄いグリッドを敷き、製図や企画書のような質感を出す。 - **形**: 角丸は使わない。写真だけをいびつな多角形やボトル形に切り抜き、手作業のコラージュ感を出す。 - **温度感**: やや暖かいニュートラル。地は落ち着いた温かみのあるグレー、文字はほぼ黒で冷静に締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#DCD9D2` | ページ全体の地色（グレージュ） | 70% | 画素の実測 | | `primary` | `#141310` | 見出し・ロゴ文字のほぼ黒 | 4% | 画素の実測 | | `text-body` | `#151313` | 本文テキスト | 2% | 画素の実測 | | `line` | `#3A3835` | セクション区切りの細い横罫線 | 0% | 推定 | | `secondary` | `#3A3835` | 縦ラベル脇の縦罫線 | 0% | 推定 | | `tint-1` | `#DCD9D2` | 方眼グリッドの薄い線 | 2% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | お知らせカードのサムネイル面（白） | 3% | 画素の実測 | | `text` | `#1A1A19` | 画面からはみ出す巨大英字コピー | 2% | 画素の実測 | | `accent-1` | `#ABBFCA` | ロゴのボトルシルエットのくすみブルー | 0% | 画素の実測 | | `text-muted` | `#3D3A36` | コピーライト・日付などの小さい文字 | 0% | 画素の実測 | - 地はグレージュ1色だけにする。セクションごとに地色を変えない。 - UIの色はほぼ黒の文字と罫線だけにする。ブランドカラーのボタンは作らない。 - 彩度のある色は商品写真だけに任せ、写真がページの色の役割を担う。 - 白い面はお知らせのサムネイルなど小さな面だけに使う。 - 方眼グリッドは薄いグレーで、巨大英字や見出しの背後に部分的に敷く。 - ロゴのアクセントにくすんだ淡いブルーを1点だけ使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 画面からはみ出す巨大英字コピー | 欧文サンセリフ | Inter | 500 | 56px | 1 | -0.02em | | `headline-lg` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 31px | 1.5 | 0.04em | | `headline-md` | 各セクションのリード見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.65 | 0.02em | | `body-md` | コンセプト文・お知らせのタイトル | ゴシック | Zen Kaku Gothic New | 600 | 15px | 2.3 | 0.04em | | `note` | 日付・カテゴリ名・コピーライト | 欧文サンセリフ | Inter | 500 | 10px | 1.5 | 0em | | `accent` | 縦書きの英字セクションラベルと括弧付き番号 | 欧文サンセリフ | Inter | 500 | 15px | 1.2 | 0.04em | | `label-button` | 下線付きのテキストリンク | 欧文サンセリフ | Inter | 600 | 16px | 1.4 | 0.02em | | `body-lg` | フッターのナビ項目 | 欧文サンセリフ | Inter | 500 | 15px | 2 | 0em | - 和文は太めのゴシック、欧文はグロテスク系サンセリフの2系統だけにする。 - セクション名は英字の大文字にし、先頭に「<」を付けて90度回転させた縦書きにする。 - 英字ラベルの一部の文字を下線付きの別字形にして遊びを入れる。 - 番号は「(001)」のように括弧付き3桁にして、写真の右下に大きく重ねる。 - 巨大英字は括弧や記号を含む数式風の言葉にして、左右にはみ出させる。 - 本文は行間を2倍以上と広く取り、短く改行する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。左に縦ラベル用の細い列（約43px）を罫線で区切る - **本文ブロックの幅**: 画面幅の約 75% - **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算） - 各セクションは上端の横罫線と縦ラベル脇の縦罫線でL字に囲む。 - 本文ブロックは縦ラベル列の右から始め、左端をそろえる。 - 写真は画面幅の約90%で配置し、縦に積む。 - 巨大英字の帯をセクションの間に挟み、区切りにする。 - お知らせはサムネイル・タイトル・日付を縦に積み、横罫線で区切る。 - 採用など一部のセクションは縦ラベルを右側に置き、左右を交互にする。 ## Elevation & Depth - 影は使わずフラットにする。 - 奥行きは写真の切り抜きを重ねることと、方眼グリッドの上に文字を乗せることで出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: いびつな多角形や角を斜めに落とした形で切り抜く。ファーストビューはボトルのシルエット形にする - **セクション境界**: 幅いっぱいの1pxの黒い横罫線と縦罫線でL字に区切る - ボタンも枠も角丸にしない。 - 写真の切り抜きは1枚ごとに形を変え、手で切ったような不ぞろいさを出す。 - 枠線で囲んだボタンは作らない。リンクは括弧と矢印で囲む。 - 方眼グリッドは一部だけに敷き、端を途中で切る。 ## Components - **括弧付きテキストリンク**（`link-paren-arrow`）: 「( 下線付き英字 → )」の形をしたCTA。枠も塗りも使わない - **縦書きセクションラベル**（`vertical-section-label`）: 「<」付きの英字を90度回転させ、右側に縦罫線を引く - **はみ出す巨大英字帯**（`giant-ticker-text`）: 括弧や記号を含む英字コピーを画面幅より大きく置き、背後に方眼グリッドを敷く - **ブランド紹介カード**（`brand-card`）: ロゴ文字、多角形に切り抜いた商品写真、右下の括弧付き番号とカテゴリ名のセット - **お知らせ項目**（`news-item`）: 白地のサムネイル、太字のタイトル3行、日付を縦に積み、下に横罫線を引く - **方眼グリッド装飾**（`grid-pattern`）: 薄いグレーの方眼を部分的に敷き、見出しや巨大英字の背後に置く - **縦書きの英字サブコピー**（`vertical-side-copy`）: ファーストビューの右端に小さな英文を縦に置き、縦罫線を添える - **2列のフッターナビ**（`footer-nav`）: 左に主要ページ、右にブランド一覧を英字で並べ、SNSアイコンは線画にする ## Do's and Don'ts **Do** - 地はグレージュ1色にして、色は写真に任せる。 - 写真は1枚ごとに形の違う多角形に切り抜く。 - セクション名は縦書きの英字ラベルにして、細い罫線とセットで使う。 - CTAは「( 下線付き英字 → )」のテキストリンクにする。 - 巨大英字をはみ出させて、セクションの間にリズムを作る。 - 番号は括弧付き3桁で大きく扱う。 **Don't** - 塗りのあるピル型ボタンや色付きのCTAを置かない。 - 角丸カードやドロップシャドウを使わない。 - セクションごとに背景色を変えない。 - 写真を四角や円でそのまま配置しない。 - 明朝体や丸ゴシックを混ぜない。 - 装飾的なアイコンやイラストを増やさない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢を一言で伝える）: ボトル形に切り抜いた商品写真の下に、太字ゴシックの2行キャッチを置く。右端に縦書きの英字サブコピーを添える 2. **企業紹介**（ものづくりの想いを伝える）: 縦ラベルと罫線のL字枠の中に、行間の広い短文を6行ほど並べる。下に括弧付きリンクと多角形の写真を置く 3. **巨大英字帯**（コンセプトを印象づける区切り）: 数式風の英字を画面からはみ出させ、方眼グリッドを重ねる 4. **ブランド一覧**（取り扱いブランドを紹介する）: リード見出しと補足文の後に、ロゴ・切り抜き写真・括弧付き番号のカードを縦に7つ並べる 5. **お知らせ**（新着情報を伝える）: 縦ラベル列の右に、サムネイル・タイトル・日付の項目を横罫線で区切って3件並べる 6. **採用**（人材を募集する）: 縦ラベルを右に置き、方眼の上に2行の見出しとリンクを置く。手で商品を持つ写真と巨大英字を続ける 7. **お問い合わせ**（問い合わせへ誘導する）: 3行の太字見出しと括弧付きリンクだけのシンプルな構成にする 8. **フッター**（サイト全体へのナビゲーション）: ロゴの下に2列の英字ナビ、SNSアイコン、プライバシーポリシーとコピーライトを並べる ## Imagery - 商品ボトルを斜めに浮かせ、液体のしぶきや泡、原料と一緒に撮った3DCG風の広告ビジュアルを使う。 - 背景は商品ごとに1色（水色・金色・グレー・黄色・くすみピンク）でまとめ、ページの彩りにする。 - 手でボトルを持つ写真は、暖かい斜光と影を活かした温かみのあるトーンにする。 - 写真はすべていびつな多角形に切り抜き、コラージュのように見せる。 - 装飾は方眼グリッドと罫線だけにする。イラストは使わない。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは右上に英字のグローバルナビを縦に並べ、件数を小さな上付き数字で添える。 - PCのブランド一覧は2カラムで、左右の写真を上下にずらして並べる。 - PCの企業紹介・採用セクションは、文章と写真を左右に並べる。 - PCのお知らせは、左にテキスト、右にサムネイルを置く横並びにする。 - 巨大英字はPCでも画面からはみ出させ、1行で長く見せる。 - PCのフッターはロゴとナビを横に並べ、ブランド一覧を2列にする。 ## 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-2bea2cca`（元 LP の URL から採番） - **元 LP**: https://bottleworks.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-18、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。