DESIGN.md — グレー×赤の工業系ツール収納 LP（Industrial Gray Red Tool Product LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 工業系・グレー階調・赤アクセント・寸法表記・番号付き機能紹介
• 地の質感: マットな明るいグレーのグラデーション地。スレートブルー系の暗いグラデーション面も使う
• 形: 直線的な角ばった面と細い点線の区切り。角丸はほとんど使わない
• 温度感: 寒色寄りのニュートラル。赤だけが熱を持つ

Colors

• 地は明るいグレーと白を交互に使い、セクションを分ける
• 赤は見出しの上に添えるリード文と製品パーツだけに使う
• 大見出しは黒の極太ゴシックで、コントラストを最大にする
• ラインナップは暗いスレートのグラデーション地に白文字で見せる
• 番号は淡いグレーの細い数字にして、背景になじませる
• SPEC 見出しは黒い帯に白文字で置く
• weight-badge は文字 #FFFFFF × 背景 #B2BEC5 のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#647884、4.6:1）を使う。

Typography

• 見出しは「赤のリード文 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。