--- version: alpha name: Cool Gray Minimal Stationery Product LP description: 青みグレーの地に大きな幾何学系欧文見出しを置いた、文具・学習用品の LP。写真を大きく使い、細い数字・線アイコン・下線つき和文見出しで特長を淡々と並べる、静かで知的なトーン。 colors: primary: '#C8CDD1' background: '#FFFFFF' background-alt: '#E6E7EB' secondary: '#456489' surface: '#74808C' text: '#000002' text-muted: '#636E78' line: '#202126' accent-1: '#3D72C0' on-primary: '#F8FEFF' dark-section: '#515254' typography: display: fontFamily: Jost fontSize: 56px fontWeight: 500 lineHeight: 1.0 headline-lg: fontFamily: Jost fontSize: 72px fontWeight: 200 lineHeight: 1.0 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em accent: fontFamily: Jost fontSize: 18px fontWeight: 300 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.8 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.text}' typography: '{typography.display}' height: 110px scene-box: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 240px point-number: textColor: '{colors.text-muted}' typography: '{typography.headline-lg}' height: 80px icon-label: textColor: '{colors.text-muted}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 56px underline-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px side-index: textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 400px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' height: 40px item-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 450px color-chip: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px --- # DESIGN.md — クールグレー×欧文見出しの文具 LP（Cool Gray Minimal Stationery Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: シンプル・ミニマル、クール・先進的、清潔・爽やか - **キーワード**: 青みグレー・幾何学欧文見出し・斜線ラベル・細い数字・線アイコン・大判写真 - **地の質感**: フラットな単色面。影やグラデーションはほぼ使わず、写真の質感で奥行きを出す。 - **形**: 角丸なしの四角が基本。アイコン枠だけ小さな角丸。斜めスラッシュが装飾。 - **温度感**: やや冷たく落ち着いた中間トーン。写真の木目で温かみを少し足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C8CDD1` | 特長セクションの地色（青みグレー） | 35% | 画素の実測 | | `background` | `#FFFFFF` | 基本背景（白） | 20% | 画素の実測 | | `background-alt` | `#E6E7EB` | 他商品セクションの淡グレー地 | 9% | 画素の実測 | | `secondary` | `#456489` | シーン説明ボックスの紺青 | 2% | 画素の実測 | | `surface` | `#74808C` | シーン説明ボックスのスレートグレー | 2% | 画素の実測 | | `text` | `#000002` | 見出し・本文の黒 | 3% | 画素の実測 | | `text-muted` | `#636E78` | 番号数字と英字サブ見出し | 2% | 画素の実測 | | `line` | `#202126` | 見出し下線・ボタン枠 | 1% | 画素の実測 | | `accent-1` | `#3D72C0` | 商品の差し色ブルー | 2% | 推定 | | `on-primary` | `#F8FEFF` | 色ボックス上の白文字 | 1% | 画素の実測 | | `dark-section` | `#515254` | ヘッダーの丸ボタン・トップへ戻る | 1% | 画素の実測 | - 地色は白と青みグレーを交互に切り替え、セクションの区切りに使う。 - 強い色は商品写真の青に任せ、UI に彩度の高い色は使わない。 - シーン説明は紺青・スレートの半透明風ボックスに白文字。 - 番号と英字サブ見出しは本文より薄いグレーで階層を下げる。 - ボタンは塗りなしの黒線枠。色付き CTA は置かない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Jost | 500 | 56px | 1.0 | 0.0em | | `headline-lg` | 特長の番号数字（極細） | 欧文サンセリフ | Jost | 200 | 72px | 1.0 | 0.0em | | `headline-md` | 特長の和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.3 | 0.04em | | `headline-sm` | シーンボックス見出し・他商品名 | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.06em | | `accent` | 英字の特長ラベル | 欧文サンセリフ | Jost | 300 | 18px | 1.3 | 0.0em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em | | `note` | 注意事項・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.0em | | `label-button` | 線枠ボタンの文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.0 | 0.04em | - セクション見出しは大きな英字＋斜線＋小さな和文訳の 2 段。 - 番号は極細の大きな数字で、見出しより先に置く。 - 和文見出しは太字で、下に全幅の細い黒線を引く。 - 英字ラベルは細字のグレーで線アイコンの右に添える。 - 本文は短く改行し、1 行 20 字前後に収める。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、他商品のみ 2 カラムグリッド - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算） - 左揃えを基本とし、左余白は約 13px と狭い。 - 特長ブロックは右側に縦の目次ナビを固定表示する。 - シーン写真は全幅、説明ボックスを写真下端に重ねる。 - 特長は番号→アイコン＋英字→写真→見出し→本文の順で繰り返す。 ## Elevation & Depth - 影はほぼ使わずフラットに保つ。 - 奥行きは写真への色ボックスの重なりで表現する。 - トップへ戻るボタンだけ濃色の丸で浮かせる。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。シーン写真は全幅、特長写真はコンテンツ幅。 - **セクション境界**: 直線で地色を切り替える。 - ボタン・カードは角丸なし。 - 線アイコンは角丸 8px 程度の正方形枠に入れる。 - 斜めスラッシュを見出し装飾に使う。 - 色名ラベルだけ小さなピル型。 ## Components - **英字大見出し＋斜線訳**（`section-title`）: 大きな幾何学欧文の下に斜線と小さな和文訳を添える。 - **シーン説明ボックス**（`scene-box`）: 写真に重ねる紺青やスレートの矩形。白の見出しと本文を入れる。 - **特長番号**（`point-number`）: 01〜08 の極細の大きな数字。グレーで表示。 - **線アイコン＋英字ラベル**（`icon-label`）: 角丸の枠に入れた線アイコンの右に、細字の英語の特長名を置く。 - **下線つき和文見出し**（`underline-heading`）: 太い和文見出しの下に黒の細線を引く。 - **縦目次ナビ**（`side-index`）: 右端に固定する、丸数字と白い短いラベルの縦並び。 - **線枠ボタン**（`button-outline`）: 黒の細い線枠に左寄せのテキストと右向きの長い矢印。 - **他商品カード**（`item-card`）: 淡グレーの 2 カラムカード。写真、商品名、短い説明、線枠ボタンの順。 - **色名ラベル**（`color-chip`）: カラバリ写真の下に置く小さなピル型の色名タグ。 ## Do's and Don'ts **Do** - 英字見出し・番号・アイコンの型を全特長で同じにする。 - 地色は白と青みグレーの 2 トーンに絞る。 - 写真は大きく、余白は広く取る。 - 差し色は商品色の青だけにする。 - 本文は短く改行し、左揃えにする。 **Don't** - 赤やオレンジなど派手な CTA ボタンを置かない。 - ボタンやカードを角丸にしない。 - ドロップシャドウやグラデーションを使わない。 - 装飾的な手書き書体やポップな飾りを入れない。 - 番号を太字にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の形と機能を一目で伝える）: コンクリート調の背景に商品を俯瞰で撮った写真。ロゴ、斜めの白帯のキャッチ、英単語の注記矢印、価格帯を重ねる。 2. **利用シーン**（誰がどう使うかを想像させる）: 白地に英字見出し。全幅の写真の下端に、紺青やスレートの説明ボックスを左右交互に重ねる。 3. **特長**（機能を 8 つに分けて説明する）: 青みグレー地。番号、アイコン＋英字、写真、下線見出し、本文を繰り返す。右端に縦目次。 4. **使い方動画**（操作を動画で見せる）: 白地に英字見出し。全幅の動画サムネイルに斜めの白帯タイトルと再生ボタンを重ねる。 5. **商品詳細**（外観とカラバリを見せる）: 全幅の木目写真にロゴを白抜きで重ねる。下に白地で 3 色を斜めに並べ、色名ラベルを付ける。 6. **関連商品**（シリーズの他商品へ誘導する）: 淡グレー地の 2 カラムカード。各カードに線枠ボタンを置く。 7. **注意事項・フッター**（注意書きとブランド情報を載せる）: 青みグレー地に黒丸付きの小さな注意事項。ロゴ、SNS アイコン、企業ロゴ、コピーライトを中央に揃える。 ## Imagery - 白〜淡グレー背景で、商品を明るく柔らかい自然光で撮る。 - 手元のクローズアップで使い方を見せる。顔は写さない。 - シーン写真は木目の机やノート、ペンで生活感を出す。 - ファーストビューは俯瞰構図にし、英単語の手書き風注記と矢印を添える。 - アイコンは単色グレーの細い線画で、角丸の枠に入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は英字見出しと和文訳を横並びにする。 - PC の特長は写真を右、テキストを左に置く 2 カラム。 - PC のシーン説明ボックスは写真の左右に小さく重ねる。 - 他商品カードは PC で 4 カラムにする。 - PC のヘッダーは横並びのナビとロゴにする。 ## 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-48b0427f`（元 LP の URL から採番） - **元 LP**: https://www.kingjim.co.jp/sp/twip/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。