DESIGN.md — 白黒グレー×赤差し色の精密福祉機器 LP（Monochrome Precision Mobility Product LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: クール・先進的、シンプル・ミニマル、上品・高級、信頼・誠実
• キーワード: モノトーン・赤の一点差し・広い字間・線のピル型ボタン・製品の切り抜き写真・工業的な精密さ
• 地の質感: フラットな面に、うっすら霧のような白いグラデーションや暗い写真をぼかして重ねる。影はほぼ使わない。
• 形: カードと写真は角丸なしの四角。ボタンだけを細い線のピル型にし、見出しラベルは細い線の四角い枠で囲む。
• 温度感: クールで無機質。赤だけが熱量を足す。

Colors

• 地はライトグレー、チャコール、白、黒の順に切り替え、セクションごとに明暗の対比をつける。
• 赤はロゴや型番の頭文字、NEW 表示、カテゴリタグ、メニューボタンだけに使う。広い面には使わない。
• ボタンは塗らずに線で描く。明るい地では濃い線、暗い地では白い線にする。
• 問い合わせセクションだけは、グレーのグラデーション地に白く塗ったピル型ボタンを置く。
• 本文は純黒を避けて #333 前後にする。

Typography

• 和文は細めから標準の太さにし、字間を 0.1em 前後と広めにとる。
• 英字の見出しは細めのジオメトリック系にし、ロゴ風の見出しは字間を大きく開ける。
• 太字で押さず、サイズの差と余白で階層を作る。
• 見出しは中央揃え。長い本文だけ左揃えにする。
• 日付・電話番号は英字書体で表示する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、Instagram だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 製品カードは左右に約 20px の余白をとったグレー面で、間隔 8px で縦に積む。
• カードの中は型番ロゴ、製品写真、キャッチ、説明、ボタンの順に中央揃えで並べる。
• セクションの頭に、小さな枠付きラベルと見出しを縦に重ねる。
• ニュースは細い区切り線のリストにし、右端に矢印を置く。
• セクションの境目に、薄い巨大英字を画面幅からはみ出させて流す。

Elevation & Depth

• 影は基本的に使わず、面の明暗差で区切る。
• ブランド紹介では写真を 3 枚ずらして重ね、奥行きを出す。
• チャットボットのバナーだけ、画面下に固定して浮かせる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 製品は白背景の切り抜き写真。人物やシーンの写真は角丸なしの四角に裁ち落とす。
• セクション境界: 直線で地の色を切り替える。境目に薄い巨大英字を置く。
• ボタンは 1px 線のピル型にし、右端に細い矢印を置く。
• ラベルは 2px 線の角丸なしの四角い枠。
• カテゴリタグは赤い細線の小さなピル型。
• カードや写真には角丸をつけない。

Components

• 線のピル型ボタン（button-outline）: 幅約 180px。1px 線、中央に英字、右端に細い矢印。
• 白い塗りの問い合わせボタン（button-cta-white）: グラデーション地の上に置く幅広の白いピル型ボタン。右端に矢印。
• 枠付きセクションラベル（section-label）: 小さな和文を細線の四角い枠で囲む。暗い地では白線にする。
• 製品カード（product-card）: グレー面に型番ロゴ、切り抜き写真、キャッチ、説明、ボタンを中央揃えで縦に並べる。
• 型番ロゴ見出し（model-logo）: 頭文字だけ赤の極太英字に、下線と小さなサブ英字を添える。
• 販売終了の帯（status-ribbon）: 製品写真の上に重ねる深い赤の横長の帯。白文字。
• ニュースのリスト行（news-row）: 日付、赤い線のタグ、タイトル、NEW 表示を並べ、右端に矢印、下に細い区切り線を引く。
• 赤いメニューボタン（menu-button）: 右上に固定する正方形の赤ボタン。白い三本線。

Do's and Don'ts

Do - 面はグレーの明暗の段階で構成し、赤は一点の差し色に留める。 - ボタンは線のピル型と矢印で統一する。 - 製品は白背景の切り抜き写真にし、余白を大きくとる。 - 和文の字間を広めにとり、静かに見せる。 - 暗いセクションと明るいセクションを交互に置く。

Don't - 赤を背景の大きな面やグラデーションに使わない。 - カードに角丸や強いドロップシャドウをつけない。 - 太い和文ゴシックで叫ぶような見出しにしない。 - パステル調や暖色の多色使いをしない。 - 塗りの派手なボタンを並べない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（主力製品とコンセプトを一目で伝える）: 霧のような白グレーのグラデーション地に、型番ロゴ、切り抜き製品写真、2 行のキャッチ、線ボタンを置く。右端にスライドのドット。
2. お知らせ帯（最新のお知らせを 1 件示す）: 濃いグレーの帯に、日付とタイトルを白文字で入れる。
3. ブランド紹介（シリーズの価値を伝える）: チャコール地に枠付きラベルを置き、写真 3 枚をずらして重ねる。その下に字間の広い英字ロゴ、2 行の見出し、本文、白線ボタン。
4. 製品一覧（各モデルを比較して選ばせる）: 白地に枠付きラベルと見出しを置き、グレーの製品カードを縦に積む。
5. 特別モデルの紹介（競技用モデルを印象づける）: 暗いスポーツ写真を全面に敷き、白い型番ロゴ、キャッチ、白線ボタンを重ねる。
6. ニュース（活動や更新を見せて信頼を得る）: 上に薄い巨大英字を置き、グレー地にアイコン付きの英字見出しと区切り線のリストを並べる。
7. Instagram（SNS での活動を見せる）: 白地に正方形サムネイルを 2 カラムで並べ、アカウント名の線ボタンを置く。
8. 問い合わせ（購入相談と販売店の案内）: 中央が明るいグレーのグラデーション地に、薄い英字ラベル、見出し、白いピル型ボタン 2 つ、大きな電話番号を置く。
9. フッター（会社情報とナビゲーション）: ほぼ黒の地に、会社ロゴ、ブランドロゴ、住所、区切り線、リンク、SNS アイコンを中央揃えで並べる。

Imagery

• 製品は白からライトグレーの背景で撮り、斜め前から全体を写して床に柔らかい影を落とす。
• シーン写真は彩度を落としたモノクロ寄りにし、暗めにして文字を重ねる。
• 背景に白い羽や霧のような柔らかい質感を薄く敷き、軽さを示す。
• 人物は競技や作業の場面を写し、顔は主役にしない。
• アイコンは細い線のシンプルなものを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部にロゴ、横並びのナビ、赤いピル型の問い合わせボタンを置き、ファーストビューは左にテキスト、右に製品写真を配置する。
• PC のブランド紹介は、左に重ねた写真、右にテキストの 2 カラムにする。
• PC の製品一覧は、主力を横長カード、続く 2 製品を 2 カラム、特別モデルを横長の写真バナーにする。
• PC では左端に縦書きの薄い英字セクション名と縦線を添える。
• PC の Instagram は 5 カラムのグリッドにする。

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 行書くと起動時に読み込まれる。