--- version: alpha name: Warm Orange Flat Illustration B2B Service LP description: 鮮やかなオレンジを主役に、白・クリーム・薄グレーの地を交互に敷いた法人向けデジタルサービスのLP。フラットなイラストと円形モチーフ、ピル型のオレンジボタンで、明るく親しみやすいけれど誠実さもある印象に仕上げている。 colors: primary: '#FF9B01' cta: '#FF8414' on-cta: '#FEF9EA' background: '#FFFFFF' background-alt: '#FAF6EA' tint-1: '#F4F4F4' tint-2: '#FFF2E9' accent-1: '#FAD79E' secondary: '#D17C2F' text: '#333333' text-body: '#555555' accent-2: '#EE9D3F' line: '#D4D6D1' surface: '#FFFFFE' cta-accessible: '#B75700' accent-2-accessible: '#AD640F' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px card-feature: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' circle-usecase: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 170px badge-menu: backgroundColor: '{colors.primary}' typography: '{typography.note}' height: 18px card-case: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' step-row: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 72px cta-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px --- # DESIGN.md — オレンジ×クリームのフラットイラスト法人サービスLP（Warm Orange Flat Illustration B2B Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、親しみ・手作り感、信頼・誠実、情報量多め・訴求型 - **キーワード**: ビタミンオレンジ・フラットイラスト・円形モチーフ・クリーム地のドット・ピル型ボタン・白カード - **地の質感**: 基本は平塗り。クリームの面には細かいドット柄、グレーの面には薄い格子テクスチャを敷く - **形**: 円形のイラスト台座、角丸カード、ピル型ボタン、FVの下端は波形 - **温度感**: 暖色寄りで明るい。グレーの面で温度を少し下げてバランスを取る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF9B01` | ブランドオレンジ（FV背景・見出し強調） | 9% | 画素の実測 | | `cta` | `#FF8414` | 主ボタンの塗り | 2% | 画素の実測 | | `on-cta` | `#FEF9EA` | ボタン上の文字・オレンジ面の上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 48% | 画素の実測 | | `background-alt` | `#FAF6EA` | クリームのドット地（解説・魅力セクション） | 12% | 画素の実測 | | `tint-1` | `#F4F4F4` | 事例・ブログ用の薄グレー地 | 12% | 画素の実測 | | `tint-2` | `#FFF2E9` | ステップの行・イラストの円形台座の淡いピーチ | 2% | 画素の実測 | | `accent-1` | `#FAD79E` | イラストの淡い黄色（円形台座・吹き出し） | 3% | 画素の主要色に補正 | | `secondary` | `#D17C2F` | 濃いオレンジ（グラデーションの影・アイコン枠） | 2% | 画素の主要色に補正 | | `text` | `#333333` | 見出しの文字 | 1% | 推定 | | `text-body` | `#555555` | 本文の文字 | 2% | 推定 | | `accent-2` | `#EE9D3F` | 本文中の強調語・小見出しのオレンジ文字 | 0% | 画素の主要色に補正 | | `line` | `#D4D6D1` | カードの枠・区切りの線 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFE` | テクスチャ地の上に置く白カード | 10% | 画素の実測 | | `cta-accessible` | `#B75700` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#AD640F` | AA を満たす補正値（計算） | | 計算 | - 地は白→クリームのドット→白→薄グレー→白→オレンジの順に切り替え、セクションのまとまりを分ける - オレンジは FV、ボタン、最後の CTA の面に集中させる。本文は濃いグレーの文字にする - 本文中の強調語は太字のオレンジにして 1 文に 1〜2 箇所だけ入れる - イラストはオレンジ・黄・ピーチ系でそろえ、差し色に黒と少量のピンクを使う - テクスチャのある地の上には必ず白のカードを置いて読みやすくする - 主ボタンはオレンジの塗り、サブボタンは白地にオレンジの枠と文字にする - `button-primary` は文字 `#FEF9EA` × 背景 `#FF8414` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B75700`、4.56:1）を使う。 - `button-outline` は文字 `#EE9D3F` × 背景 `#FFFFFF` のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#AD640F`、4.56:1）を使う。 - `step-row` は文字 `#EE9D3F` × 背景 `#FFF2E9` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#AD640F`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（白文字） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.5 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.45 | 0.08em | | `headline-md` | カードの見出し・事例の社名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.05em | | `headline-sm` | イラストの下に添える短い見出し | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.8 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.06em | | `note` | 注釈・日付 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em | | `accent` | イラスト下の英字の飾り文字（白抜きで薄いオレンジの縁取り） | 装飾・ディスプレイ | Montserrat | 800 | 30px | 1.1 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.08em | - 見出しは字間を広めに取った太いゴシックで、中央にそろえる - 見出しの一部の語だけをオレンジにして、2 色の見出しにしてよい - 本文は行間 2.0 程度でゆったり組む - 番号は大きなオレンジの数字にピリオドを付けて、イラストの左上に重ねる - 英字の飾り文字はごく淡い色の縁取りだけにして、主張しすぎないようにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。用途の円は 2 列、理由のアイコンは 2×2、メニューは左に図・右に文 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 18px - 白カードは左右に約 18px の余白を残して置く - カードの中の項目同士は点線で区切る - 各セクションの最後に中央寄せのピル型ボタンを置く - FV の下には余白を広めに取り、大きなイラストへつなぐ ## Elevation & Depth - 白カードには薄くぼかした影（0 2px 8px rgba(0,0,0,.08)）を付ける - ボタンには影を付けず、平らに見せる - FAQ のカードは影を付けず、細い枠線だけにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: イラストは円形や不定形の淡い色の台座の上に置く。写真は使わない - **セクション境界**: FV の下端は白い波形にする。それ以外は背景色を直線で切り替える - ボタンはすべてピル型にする - カードの角丸は 12〜16px - メニューに付けるラベルは角丸なしの小さな四角のバッジにする - 見出しの左にはオレンジの縦棒（角丸）を付ける ## Components - **オレンジのピル型ボタン**（`button-primary`）: 中央寄せで、右端に「>」の矢印を付ける - **枠線のサブボタン**（`button-outline`）: 白地にオレンジの 2px の枠と文字。一覧ページへ誘導する - **魅力をまとめた白カード**（`card-feature`）: 見出しの左にオレンジの縦棒を付ける。中には〇×の吹き出し、イラスト、英字の飾り文字、短い文を縦に並べる - **用途を示す円**（`circle-usecase`）: 白い円の中に淡い色の線画アイコンを置き、その上に太字の用途名を重ねる。2 列で並べる - **メニューのラベル**（`badge-menu`）: オレンジの小さな四角に白文字を入れ、メニュー名の上に置く - **導入事例のカード**（`card-case`）: 上半分はオレンジの斜めの面に白文字の引用、その下に社名と本文 - **FAQ のカード**（`faq-item`）: 枠線付きのカード。オレンジの Q と質問の下に線を引き、A と回答を続ける - **利用ステップの行**（`step-row`）: 左にオレンジの四角に白いアイコン、右に淡いピーチの帯に手順名。行の間に下向きの矢印。最後のステップだけ枠線の箱にする - **最後の CTA パネル**（`cta-panel`）: オレンジの面の上に白カードを置き、枠線のボタンと塗りのボタンを縦に並べる ## Do's and Don'ts **Do** - イラストは同じ暖色系のフラットな絵柄でそろえる - テクスチャのある地の上には白カードを置いて情報をまとめる - 各ブロックの最後にピル型のボタンを置いて回遊させる - 強調語だけをオレンジの太字にする - メリットは〇と×の吹き出しアイコンで直感的に示す **Don't** - 寒色系の色を目立つ場所に使わない - 写真を大きく使ってフラットな世界観を崩さない - 本文をオレンジにしない - 角張ったボタンを使わない - 影を濃くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と速さを伝える）: オレンジの流体グラデーションの上に白い太字のキャッチを置く。スマホの画面と人物のイラストを添え、下端は波形にする 2. **サービスの概要**（何のサービスかを説明する）: 箱から商品があふれるイラストの下に、中央寄せの見出しと本文、ボタンを置く 3. **対応ブランドのロゴ**（選べる幅の広さを示す）: ロゴを 6 列のグリッドに並べ、下に小さな注釈を付ける 4. **仕組みの説明**（流れを 3 段階で理解させる）: クリームのドット地に、番号付きの円形イラストを 1＋2 の配置で並べる 5. **魅力**（贈る側と受け取る側それぞれの利点を示す）: 白カードを 2 枚使い、〇×の吹き出し、イラスト、英字の飾り文字を点線で区切って並べる 6. **利用シーン**（使いどころを想起させる）: 白い円を 2 列で並べ、線画アイコンの上に用途名を重ねる 7. **選ばれる理由**（強みを伝える）: 大きなイラストと見出し、本文を縦に並べた後、小さな理由を 2×2 のアイコンで追加する 8. **メニューとオプション**（提供するプランを紹介する）: 左に円形の台座に載せたイラスト、右にラベル・オレンジの見出し・本文を置く 9. **導入事例**（信頼を補強する）: 薄グレー地にオレンジの斜めの面を持つ事例カードを縦に並べ、最後に枠線のボタンを置く 10. **よくある質問**（不安を解消する）: Q と A を枠線付きのカードで見せ、ボタンで続きへ誘導する 11. **利用ステップ**（導入までの手順を示す）: アイコン付きの帯を矢印でつないで縦に並べる 12. **ブログ・お知らせ**（情報発信を見せる）: 薄グレー地に、タイトル・日付・抜粋の記事リストを点線で区切って並べる 13. **CTA**（問い合わせと資料請求に誘導する）: オレンジの面に右側のドット柄を重ね、白カードの中にボタンを 2 つ置く ## Imagery - 人物は顔を簡略化したフラットなイラストで描く。服はオレンジ、ズボンは黒にする - 商品のアイコンは淡い色の縁取りの円にまとめ、紙吹雪と一緒に散らす - イラストの背景には淡い黄色やピーチの円・不定形の面を敷く - 利用シーンのアイコンは淡いオレンジの太い線画にする - CTA の面には大小の淡いオレンジの円をドット状に並べた装飾を置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せで、本文の幅は約 1000px - FV は PC ではキャッチを左、スマホのイラストを右に配置する - サービスの概要は PC ではイラストと文を左右 2 カラムにする - 仕組みは横 3 列、利用シーンは 4 列×2 段、事例カードは横 3 列にする - メニューは PC では 2 列のグリッドにする - CTA のボタン 2 つは PC では横に並べる ## 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-570d9d3e`（元 LP の URL から採番） - **元 LP**: https://mafin.gift/ - **解析に使った画像**: 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/）からご連絡ください。