--- version: alpha name: Teal Corporate SaaS Product LP description: 濃いティールの帯と淡いミントの地色を交互に置いた、清潔で信頼感のあるBtoB SaaSのLP。業務フロー型のUIスクリーンショットとフラットなイラストで機能を見せる。英字の小ラベルと日本語の見出しを2段で組む。CTAは青・緑・オレンジの3色で役割を分ける。 colors: primary: '#017E84' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#F2FBFA' surface: '#F9F9F9' tint-1: '#DCF4F4' text: '#282828' secondary: '#1BA3A8' dark-section: '#272441' accent-3: '#121112' cta: '#EC4D1C' on-cta: '#FFFFFF' accent-1: '#026CA4' accent-2: '#02A43B' marker: '#FCF5DB' line: '#DDE8E6' cta-accessible: '#D74112' accent-2-accessible: '#028831' typography: display: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 4px md: 6px lg: 10px 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}' button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-trial: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-download: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-more: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 32px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px feature-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 340px scene-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px news-badge: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px hero-catch-band: backgroundColor: '{colors.dark-section}' typography: '{typography.display}' height: 40px --- # DESIGN.md — ティール×白の業務効率化SaaS LP（Teal Corporate SaaS Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的、シンプル・ミニマル - **キーワード**: ティール・ミントグラデーション・UIスクリーンショット・フラットイラスト・英字ラベル・3色CTA - **地の質感**: フラットでノイズのない面。ヒーローだけ白からミントへの淡いグラデーションにする - **形**: 角は小さめに丸める。カードは四角に近い。ボタンは角丸の長方形にする - **温度感**: 爽やかでやや涼しく、落ち着いたビジネスの温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#017E84` | ブランドティール（特長の帯・ボタン） | 12% | 画素の実測 | | `on-primary` | `#FFFFFF` | ティール帯の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白い地 | 28% | 画素の実測 | | `background-alt` | `#F2FBFA` | 淡いミントのセクション地 | 15% | 画素の実測 | | `surface` | `#F9F9F9` | ライトグレーのセクション地 | 9% | 画素の実測 | | `tint-1` | `#DCF4F4` | ヒーローのミントグラデーション・活用シーンのカード | 6% | 画素の実測 | | `text` | `#282828` | 見出しと本文の濃紺グレー | 3% | 画素の実測 | | `secondary` | `#1BA3A8` | 英字ラベル・強調文字のティール | 0% | 推定 | | `dark-section` | `#272441` | 最終CTA帯の濃紺 | 3% | 画素の実測 | | `accent-3` | `#121112` | フッターの黒 | 3% | 画素の実測 | | `cta` | `#EC4D1C` | 問い合わせCTAのオレンジ | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAの白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#026CA4` | 無料トライアルCTAの青 | 0% | 画素の実測 | | `accent-2` | `#02A43B` | 資料ダウンロードCTAの緑 | 0% | 画素の実測 | | `marker` | `#FCF5DB` | ニュースカテゴリのバッジ地 | 0% | 画素の実測 | | `line` | `#DDE8E6` | 区切り線・枠線 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#D74112` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#028831` | AA を満たす補正値（計算） | | 計算 | - 地の色は白・ライトグレー・淡いミントをセクションごとに交互に使う - 特長セクションは濃いティールの帯を左右交互に寄せて置き、リズムを作る - 強調語はティールの文字にして、上に傍点ドットを付ける - CTAは色で役割を分ける。トライアルは青、資料請求は緑、問い合わせはオレンジ - 最終CTAは濃紺の帯、フッターは黒で、ページの終わりを締める - ティールの帯の上では文字・ボタン枠を白にする - `button-cta` は文字 `#FFFFFF` × 背景 `#EC4D1C` のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D74112`、4.51:1）を使う。 - `button-download` は文字 `#FFFFFF` × 背景 `#02A43B` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#028831`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローの帯付きキャッチ | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-md` | 特長・理由のカード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | 小見出し・シーンカード名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 500 | 13px | 1.2 | 0.05em | | `note` | 日付・注記・バッジ | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.04em | - セクション見出しは中央揃えにし、上にティールの英字ラベルを小さく置く - 本文は行間を1.8前後に広めにとり、読みやすくする - 強調したい語はティールにして、傍点を付ける - ヒーローのキャッチは濃紺の帯に白抜き文字で組む - 太字は見出しとボタンだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。PCでは特長を2カラム、理由とシーンを3カラムにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの上下余白は大きめにとる - 特長はテキストとUI画像を左右交互に並べる - シーンカードはSPで1〜2列のグリッドにする - ニュースは日付・バッジ・タイトルの横並びリストにし、細い線で区切る - 各セクションの最後に中央揃えの小さな一覧ボタンを置く ## Elevation & Depth - UIスクリーンショットのカードには薄くぼかした影を付ける - それ以外のカードは影を付けず、面の色だけで区別する - ヘッダーは白地にして、下に細い境界を付ける ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は角丸の小さい長方形にし、ずらしながら重ねてコラージュする。UIはデバイスか白カードに入れる - **セクション境界**: 直線で区切り、背景色を切り替えるだけにする - ボタンは角丸4〜6pxの長方形にし、右端に丸い矢印アイコンを付ける - 特長番号のバッジは小さいピル型にする - 問い合わせ情報はティールの細い枠で囲む ## Components - **問い合わせボタン**（`button-cta`）: オレンジの角丸ボタン。右端に白丸の矢印を付ける - **トライアルボタン**（`button-trial`）: 青のボタン。上に小さい誘導文を添え、3色のCTAと並べる - **資料ダウンロードボタン**（`button-download`）: 緑のボタン - **詳しく見るボタン**（`button-more`）: ティール帯の上では白地にする。白地の上ではティールの小さいボタンにする - **英字ラベル付き見出し**（`section-heading`）: ティールの英字の小ラベルと、濃い色の日本語見出しを中央で2段に組む - **特長の帯ブロック**（`feature-band`）: ティールの帯を片側に寄せ、その上に番号バッジ・見出し・本文を白文字で置く。反対側に白いUIカードを重ねる - **シーンカード**（`scene-card`）: ミントの面の上にアイコン付きの見出しと箇条書きを置く - **ニュースカテゴリバッジ**（`news-badge`）: 淡い黄色の小さいラベル - **キャッチ帯**（`hero-catch-band`）: 濃紺の帯に白抜き文字を置き、ヒーロー写真の上に重ねる ## Do's and Don'ts **Do** - ティールの帯とミント・白の地を交互に置き、リズムを作る - 機能の説明には簡略化したUIモックを添える - CTAは3色を固定し、役割ごとに色を変えない - 英字ラベル＋日本語見出しの型をすべてのセクションで統一する - イラストはティール・グレー・水色の配色でそろえる **Don't** - 濃い原色の背景を大きな面に使わない - 丸ゴシックや手書き書体を混ぜない - ボタンを大きなピル型にしない - 強い影や立体的な装飾を付けない - CTAの色をティールに統一しない（役割が伝わらなくなる） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビとCTAへの導線）: 白地の左にロゴ、中央にメニュー、右に青と緑の小さいボタンを置く 2. **ファーストビュー**（製品価値を一言で伝える）: ミントのグラデーション地に、オフィス写真のコラージュと製品UIのノートPCを置く。濃紺の帯でキャッチを載せる 3. **製品概要**（何ができるかを短く説明する）: グレーの地。左に円形のフロー図イラスト、右に強調語入りの説明文を置く 4. **特長**（主要機能を3つ示す）: ティールの帯を左右交互に置き、テキストとUIカードを並べる 5. **選ばれる理由**（導入の利点を示す）: ミントの地に、アイソメ風イラスト・見出し・本文の3列を置く 6. **活用シーン**（部門別の用途を示す）: ミントのカードの3列グリッドに、アイコン・見出し・箇条書きを置く 7. **サポート**（導入後の安心を伝える）: 左に写真コラージュ、右に枠囲みの受付時間と問い合わせボタンを置く 8. **ニュース**（更新情報の掲載）: 日付・バッジ・タイトルを横並びにしたリストを、線で区切る 9. **最終CTA**（申込への誘導）: 濃紺の帯に見出しと3色のボタンを横に並べる 10. **フッター**（サイトマップと会社情報）: 黒地にロゴとリンクを複数列で並べ、認証マークを添える ## Imagery - オフィスで働く男女の明るい自然光の写真。PCを操作する場面を使う - 製品UIは白基調のシンプルなモックにし、ティールのアクセントを入れる - 説明図はティールと水色の線画アイコンとフロー図にする - 理由セクションは人物入りのフラットなアイソメ風イラストにする - アバターは丸型のフラットな人物イラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでは特長の帯を全幅にし、テキストの下にUIカードを縦に積む - 理由とシーンのカードはSPで1列にする - 最終CTAの3ボタンはSPで縦に積み、全幅にする - ヘッダーのメニューはSPでハンバーガーにまとめ、CTAは1つだけ残す - ヒーローのコラージュは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-d6247b3a`（元 LP の URL から採番） - **元 LP**: https://createjobstation.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（12/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。