--- version: alpha name: Monochrome Precision Mobility Product LP description: ライトグレーとチャコールを交互に重ね、赤を一点だけ差すモノトーン構成の製品ブランド LP。細いゴシックの広い字間と線のピル型ボタンで、軽さと工業製品の精密さを表現する。 colors: primary: '#D7141A' accent-1: '#AD2A24' background: '#FFFFFF' background-alt: '#F5F5F5' dark-section: '#383838' surface: '#404241' secondary: '#1B1C20' text: '#29292A' on-dark: '#FFFFFF' line: '#29292A' text-muted: '#9A9FA1' cta: '#FFFFFF' on-cta: '#2B2B2A' accent-2: '#A07A2C' typography: display: fontFamily: Kanit fontSize: 34px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.25em headline-lg: fontFamily: Kanit fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.12em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em label-button: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em accent: fontFamily: Kanit fontSize: 64px fontWeight: 200 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px button-cta-white: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px section-label: textColor: '{colors.text}' typography: '{typography.note}' height: 20px product-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 440px model-logo: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px status-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 20px news-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px menu-button: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' height: 45px --- # DESIGN.md — 白黒グレー×赤差し色の精密福祉機器 LP（Monochrome Precision Mobility Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: クール・先進的、シンプル・ミニマル、上品・高級、信頼・誠実 - **キーワード**: モノトーン・赤の一点差し・広い字間・線のピル型ボタン・製品の切り抜き写真・工業的な精密さ - **地の質感**: フラットな面に、うっすら霧のような白いグラデーションや暗い写真をぼかして重ねる。影はほぼ使わない。 - **形**: カードと写真は角丸なしの四角。ボタンだけを細い線のピル型にし、見出しラベルは細い線の四角い枠で囲む。 - **温度感**: クールで無機質。赤だけが熱量を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D7141A` | ブランドの差し色（ロゴ・型番の頭文字） | 0% | 推定 | | `accent-1` | `#AD2A24` | ハンバーガーメニュー・販売終了帯の深い赤 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 白い地 | 16% | 画素の実測 | | `background-alt` | `#F5F5F5` | 製品カード・ニュース帯のライトグレー | 22% | 画素の実測 | | `dark-section` | `#383838` | ブランド紹介セクションのチャコール | 12% | 画素の実測 | | `surface` | `#404241` | お知らせ帯の濃いグレー | 2% | 画素の実測 | | `secondary` | `#1B1C20` | フッターのほぼ黒 | 9% | 画素の実測 | | `text` | `#29292A` | 見出し・本文の濃い文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い面の白文字 | 1% | 画素の主要色に補正 | | `line` | `#29292A` | ボタン枠・区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#9A9FA1` | フッターの補助リンク | 0% | 画素の主要色に補正 | | `cta` | `#FFFFFF` | 問い合わせセクションの白いボタン | 1% | 画素の実測 | | `on-cta` | `#2B2B2A` | 白ボタン上の文字 | 0% | 画素の実測 | | `accent-2` | `#A07A2C` | シリーズ名の金茶色 | 0% | 推定 | - 地はライトグレー、チャコール、白、黒の順に切り替え、セクションごとに明暗の対比をつける。 - 赤はロゴや型番の頭文字、NEW 表示、カテゴリタグ、メニューボタンだけに使う。広い面には使わない。 - ボタンは塗らずに線で描く。明るい地では濃い線、暗い地では白い線にする。 - 問い合わせセクションだけは、グレーのグラデーション地に白く塗ったピル型ボタンを置く。 - 本文は純黒を避けて #333 前後にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ブランド名の英字ロゴ風見出し | 欧文サンセリフ | Kanit | 300 | 34px | 1.2 | 0.25em | | `headline-lg` | セクション英字見出し（News 等） | 欧文サンセリフ | Kanit | 400 | 28px | 1.2 | 0.02em | | `headline-md` | セクションの和文見出し・キャッチ | ゴシック | Zen Kaku Gothic New | 400 | 18px | 1.6 | 0.12em | | `headline-sm` | 製品カードのキャッチ | ゴシック | Zen Kaku Gothic New | 400 | 16px | 1.5 | 0.1em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.1em | | `note` | 製品説明・日付・受付時間 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.08em | | `label-button` | VIEW MORE 等のボタン文字 | 欧文サンセリフ | Montserrat | 500 | 10px | 1.0 | 0.05em | | `accent` | 背景に流す薄い巨大英字 | 欧文サンセリフ | Kanit | 200 | 64px | 1.0 | 0.02em | - 和文は細めから標準の太さにし、字間を 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 ```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-a5186edc`（元 LP の URL から採番） - **元 LP**: https://feel-the-x.hashimoto-eg.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。