--- version: alpha name: Friendly Line-Illustration Business Support LP description: 白とクリーム色の地に、ゆるい波形の雲模様を重ねた法人向けデジタル化支援 LP。黒い線の白抜きカードと、紺・黄・青の線画イラストで、堅すぎない信頼感を出している。CTA は紺のピル型ボタンで統一し、問い合わせだけを緑にして目立たせる。 colors: primary: '#282F89' on-primary: '#EFF4FF' background: '#FFFBF0' background-alt: '#FFFBF0' surface: '#FDFDFD' line: '#111111' text: '#020102' text-muted: '#7A7771' accent-1: '#F2C230' accent-2: '#EE9A2A' accent-3: '#1E6BB8' tint-1: '#9FD6E3' cta: '#327C24' on-cta: '#FFFFFF' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Roboto fontSize: 46px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-tabs: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 28px label-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 20px problem-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 110px slash-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 32px big-number: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 48px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px case-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px tool-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px button-contact: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px --- # DESIGN.md — 紺×黄の線画イラスト法人支援 LP（Friendly Line-Illustration Business Support LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、親しみ・手作り感、シンプル・ミニマル - **キーワード**: 線画イラスト・黒枠カード・クリーム地の波形・紺のピルボタン・黄色の大きな番号・法人向けBtoB - **地の質感**: フラットな単色。影やグラデーションはほぼ使わず、黒の細い線と淡い有機的な波形で質感を出す - **形**: 角丸 8px 前後の黒枠カード、ピル型ボタン、ゆるい雲のような曲線の背景面 - **温度感**: 温かめの中間。クリーム地と黄色で柔らかさを出し、紺で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#282F89` | ブランド紺（ボタン・事例バー） | 5% | 画素の実測 | | `on-primary` | `#EFF4FF` | 紺ボタン上の白文字 | 0% | 画素の実測 | | `background` | `#FFFBF0` | 基本の白地 | 41% | 画素の実測 | | `background-alt` | `#FFFBF0` | クリームの波形背景 | 31% | 画素の実測 | | `surface` | `#FDFDFD` | カードの面 | 12% | 画素の実測 | | `line` | `#111111` | カードの黒枠 | 1% | 推定 | | `text` | `#020102` | 見出し・本文の黒 | 3% | 画素の実測 | | `text-muted` | `#7A7771` | 注釈のグレー | 1% | 画素の実測 | | `accent-1` | `#F2C230` | 強み番号の黄色 | 1% | 推定 | | `accent-2` | `#EE9A2A` | ステップ番号のオレンジ | 0% | 推定 | | `accent-3` | `#1E6BB8` | イラストの青 | 2% | 推定 | | `tint-1` | `#9FD6E3` | アイコン背景の水色円・ヘッダー波 | 2% | 推定 | | `cta` | `#327C24` | 問い合わせボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 緑ボタン上の白文字 | 0% | 画素の主要色に補正 | - 地は白とクリーム色の波形を交互に重ね、面ではっきり区切らない - ボタンと事例リストは紺で統一し、ブランドの軸にする - 問い合わせ CTA だけを緑にして、ほかのボタンと区別する - 黄・オレンジは番号やイラストの差し色に限る - カードは白地＋黒の 1.5px 枠。淡い色で塗らない - 見出しの社名部分を紺、強調語を緑で塗り分けてもよい ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のサービス名 | ゴシック | Zen Kaku Gothic New | 900 | 32px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.4 | 0.02em | | `headline-sm` | カード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `body-md` | 黒丸付きの箇条書き・本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `accent` | 強みの大きな番号 01〜03 | 欧文サンセリフ | Roboto | 900 | 46px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.02em | - 見出しは極太ゴシックで中央揃え、黒 - 箇条書きは先頭を黒丸「●」にし、太めの 500 で書く - 注釈は「※」付きの小さいグレー文字で項目の直下に置く - 番号は欧文の極太数字を黄色で大きく見せる - 本文は左揃え。中央揃えは見出しとボタンに限る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。支援の流れだけ左に画像、右にテキストの 2 分割 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは縦に 8px 間隔で積む - 道具紹介カードは幅 70% で中央に寄せ、ロゴ枠・説明・ボタンの順に並べる - 強みの項目は点線の区切り線で分ける - 支援の流れは細いグレーの線で区切る - 見出しの下に 24px ほど空けてから内容を置く ## Elevation & Depth - 基本は影なし。枠線で面を区切る - 事例の紺バーにだけ右下へグレーのずらし影（4px）を付ける - ロゴ枠は薄いグレーの 1px 線で囲む ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は使わない。線画イラストを切り抜きで置き、アイコンは水色の円の上に載せる - **セクション境界**: 直線では区切らず、クリーム色の雲のような波形の面を背景に重ねて切り替える - カードは角丸 8px＋黒 1.5px 枠 - 主要ボタンはピル型 - 事例バーは角丸 4px の長方形 - ステップ番号はオレンジの正円 ## Components - **ページ内ナビのタブ**（`nav-tabs`）: 白地にグレーの細い枠の小さなボタンを横に並べる - **FV のラベル帯**（`label-badge`）: 紺の角丸帯に白文字。キャッチの上に置く - **悩みのカード**（`problem-card`）: 黒枠カード。左に見出しと●箇条書き、右に水色円のアイコン - **斜線で挟む見出し**（`slash-heading`）: 見出しの左右に斜線を置き、社名を紺・強調語を緑で塗る - **強みの大きな番号**（`big-number`）: 黄色の極太数字をイラストの上に重ねる - **白抜きのサブボタン**（`button-outline`）: 白地に黒枠のピル型。詳細ページへのリンク - **事例リストのバー**（`case-bar`）: 紺の横長バー。左に CASE 番号、続けて事例名。ずらし影付き - **ツール紹介カード**（`tool-card`）: 黒枠カードに分類名、ロゴ枠、2〜3 行の説明、紺ピルボタンを縦に並べる - **紺の詳細ボタン**（`button-primary`）: カード幅いっぱいの紺ピル型に白い太字 - **問い合わせ CTA**（`button-contact`）: 緑の面に吹き出しアイコンと白文字。下部の固定帯と、角丸 4px のボタンで使う ## Do's and Don'ts **Do** - イラストは黒線＋紺・黄・青のフラットな塗りで統一する - カードはすべて白地＋黒枠＋角丸 8px にそろえる - 箇条書きは●で始め、短い文で 2〜3 個に絞る - クリームの波形の背景はセクションの途中にまたがるように置く - 問い合わせだけを緑にする **Don't** - 写真やグラデーションを使わない - カードに濃い影を付けない - 紺・緑以外の色をボタンに使わない - 黄色を本文の文字色にしない - 背景を直線の帯で区切らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドの提示とページ内の移動）: 左上に水色の波形、中央にロゴ、その下にタブ型のナビを 5 個並べる 2. **ファーストビュー**（サービスの一言紹介）: 紺のラベル帯、極太の 2 行見出し、書類の山に悩む人々の大きな線画。周りに課題語を縦書きの手書き風で散らす 3. **悩みの提起**（業務の課題に共感してもらう）: 中央の見出しの下に黒枠カードを 4 枚。各カードに分野名、●の悩み 2 つ、水色円のアイコン 4. **支援内容**（解決できる範囲を示す）: グレーの下向き三角のあと、斜線で挟んだ見出し。3 分野のカードに見出し・小見出し・●の支援項目 5. **3つの強み**（選ばれる理由）: クリーム地の波形の上に、黄色の大きな番号とイラスト、太字の見出し、●の根拠を並べ、点線で区切る。白抜きのボタンを添える 6. **支援の流れ**（進め方を 3 段階で示す）: オレンジの番号円とイラストを左、見出しと●2 つを右に置き、細い線で区切る 7. **支援実績**（事例への入口）: 紺の事例バーを 4 本縦に積み、その下に握手する人々の大きな線画 8. **ツール紹介**（連携サービスを一覧で見せる）: ロゴ枠付きの黒枠カードを縦に並べ、それぞれに紺の詳細ボタン 9. **CTA**（相談を促す）: 白地の中央に極太の見出しと緑の問い合わせボタン。画面下には緑の固定帯 10. **フッター**（法定表示）: 小さい太字で会社情報を中央揃え、その下にコピーライト ## Imagery - 人物は黒の均一な線で描き、スーツを紺・青、シャツや髪を黄・オレンジで塗る - オフィスの机や書類の山はアイソメトリックの線画にする - アイコンは水色の円の上に小さな線画を置く - キラキラの十字や汗マークなど、漫画的な効果線を添える - 地図などの図形は青のベタ塗り＋黒い太線 - ロゴは白地に薄いグレー枠の中へ中央配置する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を 2 カラム（左に見出し、右にイラスト）、ナビは右上に横並び - 悩みは 4 列、支援内容とツール紹介は 3 列のカードグリッド - 強み・流れは 3 列で横に並べ、流れには背景に大きな黄色の矢印を敷く - 事例は紺の正円を 4 つ横に並べる形に変える - 問い合わせは右下に浮かぶ緑の円形ボタンになる ## 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-3f5aa487`（元 LP の URL から採番） - **元 LP**: https://www.fukuibank.co.jp/lp/itsupport/ - **解析に使った画像**: 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/）からご連絡ください。