--- version: alpha name: Industrial Gray Red Tool Product LP description: 明るいグレー地に黒い太ゴシック見出しを置き、赤を小見出しと製品のアクセントに絞った工具収納の商品 LP。大きな番号と寸法入りの製品写真を並べ、機能を順に見せていく。 colors: primary: '#000000' on-primary: '#FFFFFF' accent-1: '#D7262E' background: '#F7F8FA' surface: '#FEFEFE' dark-section: '#62686D' text: '#000001' text-body: '#62686D' text-muted: '#D5D9DE' accent-2: '#1F4E9A' line: '#B2B8BF' tint-1: '#B2BEC5' tint-1-accessible: '#647884' typography: display: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 56px fontWeight: 200 lineHeight: 1.0 headline-md: fontFamily: Montserrat fontSize: 20px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' numbered-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px spec-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 32px lineup-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 60px caution-note: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 80px weight-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 60px banner-link: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px spec-label: textColor: '{colors.text}' typography: '{typography.note}' height: 16px --- # DESIGN.md — グレー×赤の工業系ツール収納 LP（Industrial Gray Red Tool Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: 力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: 工業系・グレー階調・赤アクセント・寸法表記・番号付き機能紹介 - **地の質感**: マットな明るいグレーのグラデーション地。スレートブルー系の暗いグラデーション面も使う - **形**: 直線的な角ばった面と細い点線の区切り。角丸はほとんど使わない - **温度感**: 寒色寄りのニュートラル。赤だけが熱を持つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | 見出し・SPEC帯の黒 | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | 黒帯の上の白文字 | 1% | 画素の実測 | | `accent-1` | `#D7262E` | 見出し上の赤い小見出し | 1% | 推定 | | `background` | `#F7F8FA` | 基本の明るいグレー地 | 35% | 画素の実測 | | `surface` | `#FEFEFE` | 白い面 | 17% | 画素の実測 | | `dark-section` | `#62686D` | ラインナップのスレート地 | 10% | 画素の主要色に補正 | | `text` | `#000001` | 見出しの黒文字 | 2% | 画素の実測 | | `text-body` | `#62686D` | 本文の灰色文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#D5D9DE` | 大きな番号の淡いグレー | 1% | 画素の主要色に補正 | | `accent-2` | `#1F4E9A` | サイズ名の青 | 0% | 推定 | | `line` | `#B2B8BF` | 点線の区切り線 | 0% | 画素の主要色に補正 | | `tint-1` | `#B2BEC5` | 注意アイコンの丸背景 | 0% | 画素の実測 | | `tint-1-accessible` | `#647884` | AA を満たす補正値（計算） | | 計算 | - 地は明るいグレーと白を交互に使い、セクションを分ける - 赤は見出しの上に添えるリード文と製品パーツだけに使う - 大見出しは黒の極太ゴシックで、コントラストを最大にする - ラインナップは暗いスレートのグラデーション地に白文字で見せる - 番号は淡いグレーの細い数字にして、背景になじませる - SPEC 見出しは黒い帯に白文字で置く - `weight-badge` は文字 `#FFFFFF` × 背景 `#B2BEC5` のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#647884`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ | ゴシック | Noto Sans JP | 900 | 28px | 1.35 | 0.05em | | `headline-lg` | 機能見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.03em | | `accent` | 大きな番号 | 欧文サンセリフ | Montserrat | 200 | 56px | 1.0 | 0.0em | | `headline-md` | 英字のセクション名・サイズ名 | 欧文サンセリフ | Montserrat | 600 | 20px | 1.2 | 0.1em | | `headline-sm` | 赤いリード文・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 写真注釈・寸法 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 見出しは「赤のリード文 1 行＋黒の極太見出し 1 行」の 2 段で組む - 番号は見出しの左に淡いグレーの極細数字で大きく置く - 英字ラベルはワイドなサンセリフで字間を広げる - 寸法は製品写真の上に白い細字で直接書き込む - 注釈は写真の右下に小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真の比較は 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 機能ごとに番号付きのセクションを置く - テキストと製品写真は左右に分けて配置し、SP では縦に積む - 2 枚の比較写真は横に並べ、下にラベルを付ける - 区切りには点線の横罫を使う - 写真は全幅で大きく見せる ## Elevation & Depth - 影はほぼ使わず、平面で構成する - 製品の切り抜き写真に薄い接地影を付ける程度にする ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角ばった矩形か製品の切り抜き。補足写真だけ円形にする - **セクション境界**: 背景色を直線で切り替える。セクション内は点線で区切る - 見出し帯・写真は角丸なしにする - 注意アイコンと重量バッジは円形にする - バナーリンクには小さめの角丸を付けてよい ## Components - **番号付き機能見出し**（`numbered-heading`）: 淡い大番号の上に、赤のリード文と黒の極太見出しを重ねる - **SPEC 黒帯見出し**（`spec-bar`）: 全幅の黒帯に白い英字を中央揃えで置く - **サイズ別ラベル**（`lineup-label`）: 英字のサイズ名、小さな三角付きの種類名、色見本の丸を縦に並べ、点線で製品とつなぐ - **注意書きボックス**（`caution-note`）: 丸い注意アイコンと 2 行の注意文、右に荷重の図解 - **重量バッジ**（`weight-badge`）: グレーの円に小ラベルと大きな数値を入れる - **関連商品バナー**（`banner-link`）: 左にテキスト、右に写真と赤い矢印を置いた横長のリンクバナー - **赤四角付き図ラベル**（`spec-label`）: 小さな赤い四角に続けて、面の名前を書く ## Do's and Don'ts **Do** - 赤は少しだけ使い、要所を締める - 寸法を写真に直接書き込み、実用性を伝える - 機能は番号順に一つずつ見せる - グレーの階調で面の奥行きを出す **Don't** - 暖色やパステルの背景を使わない - 角丸の大きいポップなボタンにしない - 赤を本文や広い面に使わない - 丸ゴシックや手書き系の書体にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使用シーンと主な価値を伝える）: 左に現場で使う人物写真、右に 2 行の極太キャッチと製品の切り抜き写真 2. **シリーズラインナップ**（サイズ展開と組み合わせを示す）: スレート系グラデーション地に、積み重ねた製品と点線でつないだサイズラベル 3. **機能 01**（開閉の仕組みを訴求する）: 番号見出しの下に開閉の図解を 2 枚、使用写真を 2 枚並べる 4. **機能の補足**（小さな利点を補う）: 白地に短い見出しと説明文、右に製品の図。点線で区切る 5. **機能 02**（収納量を示す）: 収納例の写真と寸法入りの内部写真を 2 列で比較し、注意書きを添える 6. **機能 03**（小物収納を説明する）: 寸法入りの大きな上面写真と円形の補足写真、下に 2 列の写真カード 7. **機能 04・動画**（積み重ねと運搬を見せる）: 番号見出しの下に動画埋め込みと、全幅の車載シーン写真 8. **関連商品誘導**（オプション品へ送る）: 中央揃えのリードと横長のバナーリンク 9. **スペック**（寸法と重量を示す）: 黒帯見出しの下に寸法入りの製品図を 2 列グリッドで並べ、重量バッジを置く ## Imagery - 製品は白背景かグレー背景の切り抜きで、真正面か斜め上から撮る - 使用シーンは工場・倉庫・車両まわりで、作業着の人物を写す - 寸法線は白の細い点線と数値で写真に重ねる - 開閉の動きは半透明の残像と黄色い矢印で表す - 収納物（ネジ・工具）を色ごとに詰めた俯瞰写真を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 1040px 幅の画像主体で、テキストと写真を左右に配置する - SP では左右配置を縦積みにし、テキストを先に置く - 2 列の比較写真は SP でも 2 列を保ち、ラベルを小さくする - 番号の数字は SP で 56px 程度に縮める - スペックの図は SP では 1 列も可 ## 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-d9bb1d0e`（元 LP の URL から採番） - **元 LP**: https://direct.sanwa.co.jp/ItemPage/200-TBOXL001DGY - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。