--- version: alpha name: Turquoise Friendly BtoB SaaS LP description: 鮮やかなターコイズを主役に、白とライトグレーの地で区切る法人向けSaaSのLP。オレンジのグラデーションCTAとマーカー強調で目を引く。線画にターコイズを差したイラストで、親しみと信頼を両立させている。 colors: primary: '#0CE2D8' cta: '#FE7D03' on-cta: '#FEFBEC' background: '#FFFFFF' background-alt: '#F5F5F5' tint-1: '#E7F9F9' tint-2: '#C0EAE6' marker: '#FDEAC4' accent-1: '#E76E1B' text: '#4A4A4A' secondary: '#08BAAE' text-muted: '#8F8F8F' accent-2: '#5916E4' dark-section: '#233D3A' cta-accessible: '#B65901' secondary-accessible: '#06847C' text-muted-accessible: '#757575' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.08em accent: fontFamily: Roboto fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 56px badge-pill: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px heading-circle: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 28px card-problem: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 160px badge-reason: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 20px card-flow: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 340px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 140px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 390px form-card: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 560px --- # DESIGN.md — ターコイズ×オレンジの線画イラスト社内ツールSaaS LP（Turquoise Friendly BtoB SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、信頼・誠実、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: ターコイズ・線画イラスト・オレンジマーカー・カード型・ミントの淡色面 - **地の質感**: フラットな単色面。FVとCTA帯だけ淡い斜め光の帯で奥行きを出す - **形**: 角丸カードとピル型のボタン・バッジ。セクションの境目に浅いV字の切り込み - **温度感**: 明るく爽やかで、やや暖かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0CE2D8` | ブランド面・FV・CTA帯 | 12% | 画素の実測 | | `cta` | `#FE7D03` | 主CTAボタン（オレンジのグラデーション） | 1% | 画素の実測 | | `on-cta` | `#FEFBEC` | CTA上の文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地 | 32% | 画素の実測 | | `background-alt` | `#F5F5F5` | セクション交互のグレー地 | 16% | 画素の実測 | | `tint-1` | `#E7F9F9` | 理由・フローカードの淡ミント面 | 13% | 画素の実測 | | `tint-2` | `#C0EAE6` | 見出し強調の円背景・淡い帯 | 5% | 画素の主要色に補正 | | `marker` | `#FDEAC4` | 強調語の下の黄色マーカー | 2% | 画素の実測 | | `accent-1` | `#E76E1B` | 強調語・数値の文字 | 0% | 画素の実測 | | `text` | `#4A4A4A` | 見出し・本文 | 3% | 画素の実測 | | `secondary` | `#08BAAE` | ターコイズの見出し文字・リンク | 1% | 画素の実測 | | `text-muted` | `#8F8F8F` | 英字サブラベル・注釈 | 0% | 画素の実測 | | `accent-2` | `#5916E4` | フォーム送信ボタン | 0% | 画素の実測 | | `dark-section` | `#233D3A` | フッター | 1% | 画素の実測 | | `cta-accessible` | `#B65901` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#06847C` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#757575` | AA を満たす補正値（計算） | | 計算 | - 地は白とライトグレーをセクションごとに交互に使う - FVと最後のCTA帯はターコイズ一色にして、淡い斜めの光の帯を重ねる - カードの面は淡ミント、上の縁にターコイズの細い帯を付ける - 強調語はオレンジ文字に淡黄マーカーを敷く - 主CTAだけオレンジのグラデーションにして、ほかでは使わない - Q はターコイズ、A はオレンジの四角アイコンにして色で区別する - `button-primary` は文字 `#FEFBEC` × 背景 `#FE7D03` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B65901`、4.58:1）を使う。 - `badge-pill` は文字 `#08BAAE` × 背景 `#FFFFFF` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#06847C`、4.57:1）を使う。 - `form-card` は文字 `#8F8F8F` × 背景 `#FFFFFF` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#757575`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（白抜き） | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.5 | 0.1em | | `headline-lg` | 解決提示のターコイズ大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.5 | 0.12em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.1em | | `headline-sm` | カード見出し・Q文 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.08em | | `body-md` | 本文・回答 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.08em | | `accent` | 見出し下の英字ラベル・STEP番号 | 欧文サンセリフ | Roboto | 700 | 9px | 1.4 | 0.08em | | `label-button` | CTAボタンの文字 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.12em | | `note` | 注釈・フォームのラベル | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.05em | - 全体の字間は0.08〜0.12emと広めにとる - 見出しは中央揃え。下にグレーの英字ラベルを小さく添える - 見出し中のキーワードは、ターコイズの円に白抜き文字で1字ずつ入れる - 数値はオレンジで2倍ほどの大きさにして、単位は小さく書く - 本文は左揃えで、行間を1.7にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みカードだけ 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に約16pxの余白を空けて配置する - 理由ブロックは淡ミントの面を左右交互にずらして重ねる - 導入事例と取引先ロゴは横スクロールのカルーセルにする - フローのカードの間には下向きのシェブロンを置く - フォームは白いカードに収め、ターコイズの帯の上に載せる ## Elevation & Depth - カードにはごく薄い影（0 2px 8px rgba(0,0,0,.06)）を付ける - FVの商品カードは少し傾けて重ね、奥行きを出す - CTAボタンには薄い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物はアイコン風の円に入れる - **セクション境界**: 浅いV字の切り込み、または直線 - ボタンとバッジはピル型にする - 大きな白いコンテナは角丸20pxにする - 悩みカードは上辺にターコイズの帯を付ける - Q・Aアイコンは角丸なしの正方形にする ## Components - **資料DL CTA**（`button-primary`）: オレンジのグラデーションの横長ピル。左端に資料のサムネイル、上に吹き出し調の短い誘い文句を添える - **FVの対象者ラベル**（`badge-pill`）: 白いピルにターコイズ文字 - **円で強調する見出し**（`heading-circle`）: キーワードを1字ずつターコイズの円に入れ、下に英字ラベルを置く - **悩みカード**（`card-problem`）: 白い面に上辺ターコイズ帯。線画イラストと2行の悩み文を入れ、一部にマーカーを敷く - **理由番号のバッジ**（`badge-reason`）: ターコイズのピルに白文字で番号 - **フローカード**（`card-flow`）: 淡ミントの面にイラスト、STEP番号、見出し、ターコイズの細線、説明文を縦に並べる - **Q&A**（`faq-item`）: 白いカードにQ（ターコイズ）とA（オレンジ）の正方形アイコン - **導入事例カード**（`case-card`）: 上に写真、下に成果の数値をオレンジで大きく、最下部にターコイズの社名帯 - **資料請求フォーム**（`form-card`）: 白いカードにグレーの入力欄。送信ボタンは紫のピル ## Do's and Don'ts **Do** - ターコイズとオレンジ以外の強い色は増やさない - イラストは黒の線画にターコイズかオレンジで部分的に色を差す - 数値の実績はオレンジで大きく見せる - セクションの地は白とグレーを交互にしてリズムを作る - CTAはFVとページ末尾の2か所に置く **Don't** - 写真に強いフィルターや暗い色調をかけない - 見出しに明朝体を使わない - CTAを主色と同じターコイズにしない - カードに太い枠線や濃い影を付けない - 字間を詰めすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと無料施策を案内する）: 白地にロゴと、ターコイズの小さな2行ラベル 2. **ファーストビュー**（価値の提示と実績の訴求）: ターコイズ地に白抜きのキャッチ。傾けたカードに実績の数値を入れて横に並べ、下にオレンジのCTAを置く 3. **取引先ロゴ**（信頼の獲得）: 白地にロゴを2段で並べる 4. **悩みの提起**（課題への共感）: グレー地に、イラスト付きの悩みカードを2カラムで5つ 5. **解決の提示**（サービスで解決できると示す）: V字の白帯にターコイズの大見出し。PCとスマホの画面モックの横に人物イラスト 6. **選ばれる理由**（特長の説明）: 角丸の白いコンテナの中で、番号バッジとスクリーンショットのブロックを5つ交互にずらす 7. **導入事例**（成果の証明）: ビル街のイラストの見出し、ロゴのグリッド、事例カードのカルーセル 8. **導入の流れ**（行動のハードルを下げる）: 淡ミントのカード3つをシェブロンでつなぐ 9. **よくある質問**（不安の解消）: グレー地に白いQ&Aカードを縦に並べる 10. **資料請求フォーム**（コンバージョン）: ターコイズの帯に見出しと白いフォームカード。下端に人物イラストを横一列に並べる 11. **運営会社・フッター**（会社情報）: 白地に会社情報、その下に濃いグリーングレーのフッターリンク ## Imagery - 人物は黒の線画で描き、服や小物の一部だけターコイズかオレンジで塗る - 製品画面のスクリーンショットをPC・スマホのモックに入れる - オフィスの写真は明るく白っぽいトーンで、人物は笑顔にする - FVでは、カラフルなカードのデザインを傾けて並べ、楽しさを出す - 背景には半透明の斜めの光の帯を入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に最大幅約900pxで配置する - 悩みカードはPCで3カラムにする - 理由ブロックはPCで画像とテキストを左右交互の2カラムにする - フローはPCで横長カードにし、イラストを左、テキストを右に置く - PCのヘッダーには右側にナビとオレンジのCTAを表示する - 事例カードはPCで4〜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-ed834c20`（元 LP の URL から採番） - **元 LP**: https://gratica.jp/lp/thanks-card/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。