--- version: alpha name: Comic Illustration Blue Red Auto Shop LP description: 青と赤で画面を二分し、太い紺の線で描いた劇画風イラストを主役にした地域の自動車整備・販売店向け LP。淡いグレーの地に白い角丸パネルを互い違いに重ね、道路標識風のラベルで各セクションを案内する。 colors: primary: '#1EACE8' secondary: '#178EC6' accent-1: '#E5000B' background: '#EAEFF2' surface: '#FFFFFF' text: '#284254' text-body: '#555555' accent-2: '#E5000B' line: '#E1E5E6' tint-1: '#FFFFFF' cta: '#E30213' on-cta: '#FFFFFF' accent-3: '#22B530' dark-section: '#284254' accent-3-accessible: '#1A8824' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 48px fontWeight: 800 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 120px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' sign-label: backgroundColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 40px hero-split: backgroundColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 400px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px service-pill-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 300px promise-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 160px tel-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 110px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-line: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-sub: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px --- # DESIGN.md — 青×赤の劇画イラスト自動車整備店 LP（Comic Illustration Blue Red Auto Shop LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 力強い・インパクト、信頼・誠実、ポップ・元気、親しみ・手作り感 - **キーワード**: 劇画イラスト・青赤ツートン・道路標識ラベル・紺の太枠線・白い角丸パネル・地域密着 - **地の質感**: 平塗りのベタとハーフトーン網点。紙の質感は入れず、白い面とグレーの地をくっきり分ける - **形**: 紺の太線で縁取った角丸の枠、半円の端を持つ白パネル、縦長ピル型カード、円形の切り抜き - **温度感**: 青と赤の対比で元気さを出しつつ、グレー地と紺の文字で落ち着かせた中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1EACE8` | ブランドの青。FV左半分やラベルに使う | 5% | 画素の主要色に補正 | | `secondary` | `#178EC6` | 濃い青。標識ラベルや写真の青ベタ | 5% | 画素の主要色に補正 | | `accent-1` | `#E5000B` | ブランドの赤。FV右半分や帯 | 7% | 画素の主要色に補正 | | `background` | `#EAEFF2` | ページの地のグレー | 37% | 画素の実測 | | `surface` | `#FFFFFF` | 白い角丸の本文パネル | 20% | 画素の実測 | | `text` | `#284254` | 見出しと太枠線の紺 | 9% | 画素の主要色に補正 | | `text-body` | `#555555` | 本文のグレー | 2% | 推定 | | `accent-2` | `#E5000B` | 見出しの赤文字 | 0% | 画素の主要色に補正 | | `line` | `#E1E5E6` | 表の区切り線や薄い装飾 | 3% | 画素の主要色に補正 | | `tint-1` | `#FFFFFF` | 背景の巨大英字や車アイコンの薄色 | 3% | 画素の実測 | | `cta` | `#E30213` | メール問い合わせボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-3` | `#22B530` | LINE ボタンの緑 | 0% | 推定 | | `dark-section` | `#284254` | 電話番号パネルの紺見出し部分 | 0% | 画素の主要色に補正 | | `accent-3-accessible` | `#1A8824` | AA を満たす補正値（計算） | | 計算 | - 地はグレーにし、本文は白い角丸パネルにのせる - 青と赤は面で二分して使う。混ぜて紫系にしない - 線と見出しはすべて紺。純黒は使わない - 赤い文字はサービス名の小見出しに限る - 背景の巨大英字は地より少し明るい白系にして目立たせない - CTA は赤（メール）と緑（LINE）の2色で並べる - `button-line` は文字 `#FFFFFF` × 背景 `#22B530` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#1A8824`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのブランド英字ロゴ | 欧文サンセリフ | Montserrat | 900 | 56px | 1.0 | 0.0em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.4 | 0.05em | | `headline-md` | サービス名などの小見出し（赤や青） | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `accent` | 背景の巨大英字や英語ラベル | 欧文サンセリフ | Montserrat | 800 | 48px | 1.0 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 標識ラベル下の英字や注記 | 欧文サンセリフ | Montserrat | 600 | 10px | 1.4 | 0.1em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - 見出しは極太ゴシックの紺で短く言い切る - 英語ラベルは和文見出しに小さく添える - 電話番号は大きい欧文太字で中央に置く - 本文は小さめにし、行間を広く取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。サービスカードは SP で 2 列にしてもよい - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは左右どちらかの画面端まで伸ばし、反対側の端を大きく丸める - イラストとテキストは左右交互に置く - セクション冒頭には標識風ラベルを置く - 標識の支柱を縦に通して、セクション同士をつなぐ ## Elevation & Depth - 影はほぼ使わない。紺の太い線で奥行きを出す - パネルは塗り分けと重なりで前後を見せる ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 120px。ボタンはピル型。 - **写真の切り抜き**: サービスは円形、FV は紺の太枠付きの角丸長方形、プロフィールは円形バッジ - **セクション境界**: 直線で切らず、半円の端を持つ白パネルとグレー地の切り替えで区切る - サービスカードは縦長のピル型 - ラベルとボタンには紺の2px枠を付ける - 大きいパネルの角は100px以上丸める ## Components - **道路標識風ラベル**（`sign-label`）: 青地に白文字、白い内枠と下向き矢印の付いた案内標識。下に英字を小さく添え、支柱を伸ばす - **青赤二分割ヒーロー**（`hero-split`）: 紺の太枠付き角丸パネルを青と赤で左右に塗り分け、中央に人物イラストと巨大な英字ロゴを置く - **吹き出し**（`speech-bubble`）: 白地に紺の枠線を付け、人物のひと言を短く2行で入れる - **縦長ピル型サービスカード**（`service-pill-card`）: 白いピル型の上部に円形イラストを置き、その下に赤い小見出しと本文 - **約束チェックリストカード**（`promise-card`）: 白いカードに赤い見出し帯と赤のチェック付きリストを並べる - **電話問い合わせパネル**（`tel-panel`）: 上部が紺帯の白い角丸パネル。大きい電話番号と受付時間を入れる - **メール問い合わせボタン**（`button-primary`）: 赤いピル型に白文字と紺の枠 - **LINE問い合わせボタン**（`button-line`）: 緑のピル型に白文字 - **小さなアウトラインボタン**（`button-sub`）: 白地に紺の細枠。地図リンクや前へ・次へに使う ## Do's and Don'ts **Do** - 人物や車はベタ塗りの劇画イラストで統一する - 青と赤は大きい面で対比させる - 標識ラベルと支柱を道案内のモチーフとして繰り返す - 背景に薄色の巨大英字を流して奥行きを出す - 枠線は紺の太線にそろえる **Don't** - 写真とイラストを混ぜない - グラデーションやドロップシャドウを多用しない - 純黒の文字や線を使わない - パステル調の色を足さない - 角の鋭い四角カードを並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビと問い合わせへの導線）: 左に円形ロゴ、右に英字メニュー、SNSアイコン、青いピル型の問い合わせボタン 2. **ファーストビュー**（親しみやすさと技術力を一目で伝える）: 青赤二分割の枠の中央に腕組みした整備士のイラスト、巨大な英字ロゴ、キャッチ、吹き出し、車のイラスト 3. **会社紹介**（姿勢と強みを伝える）: 標識ラベルの下に白パネル。左に見出しと本文、右に整備中のイラスト 4. **SNS・お約束**（SNSへの誘導と誠実さの約束）: 流れる巨大英字、円形の受付スタッフのイラスト、SNSアイコン、チェックリストカード 5. **主要サービス**（販売とメンテナンスを訴求する）: 青ベタと赤ベタの横長イラスト帯に白パネルを重ね、赤い見出しと本文を入れる 6. **サービス一覧**（対応メニューを並べる）: 縦長ピル型カードを3列×2段。円形イラストと赤い見出しを入れる 7. **店舗案内・地図**（所在地とアクセスを伝える）: 標識ラベルと支柱、青い店舗イラスト、紺枠の地図、住所 8. **ギャラリー**（設備の雰囲気を見せる）: 半円端の白パネルにラベル、説明、前へ・次へボタン 9. **会社概要**（基本情報を示す）: 円形の代表者バッジと、細線で区切った2列の表 10. **問い合わせ・フッター**（電話・メール・LINEで問い合わせてもらう）: 青赤二分割の帯に整備士のイラストと吹き出し、電話パネル、赤と緑のボタン、ロゴ、SNS、トップへ戻るボタン ## Imagery - 紺の太い主線で描く劇画調の人物イラスト。作業着姿の整備士を主役にする - 背景は青か赤の単色ベタにハーフトーン網点を重ね、建物や車を線画で描く - 車は白ボディに紺線のイラストにする - 円形の切り抜きの中にサービス場面を1カット入れる - 車のシルエットや工具を、薄色の線のアイコンとして背景に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP の FV は青赤の二分割を上下か斜めに変え、イラストを中央に大きく置く - 左右交互のパネルは SP で縦積みにし、イラストを先に出す - サービスカードは PC 3列、SP は1〜2列 - 巨大英字は SP で 40px 前後に縮めて横に流す - 問い合わせ帯は SP で電話パネルとボタンを縦に並べ、ボタンは全幅にする ## 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-3b8c9f41`（元 LP の URL から採番） - **元 LP**: https://maruyoshi-car.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（4/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。