DESIGN.md — ライム×藍の斜めカット3Dサービス LP（Lime Slash Tech Service LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、シンプル・ミニマル、信頼・誠実
• キーワード: 斜めカット・蛍光ライム・藍紫アクセント・英字見出し・縦ガイド線・余白多め
• 地の質感: フラットな単色面。ライム面に細かいドット網点を少し入れる。影はほぼ使わない
• 形: 平行四辺形（右上がりの斜め辺）の帯・カード・写真マスク。ボタンは角丸かピル型
• 温度感: ややクール。白・グレーの無彩色に、藍紫とライムを強調色として使う

Colors

• 地は白とライトグレー（#F4F4F4）をセクションごとに交互に使う
• 藍紫は英字見出しの頭文字・下線・タブ・リンク・番号に限って使う
• ライムは斜めの面、文字下のマーカー、必須ラベル、アイコンの塗りに使う
• 主 CTA は黒地に白文字。フッター CTA だけライムの面を使う
• 暗い写真セクションでは見出しと本文をライムにし、枠線もライムにする
• ライムの上に白文字は置かない（読めなくなるため）
• button-circle-link は文字 #1A1821 × 背景 #280FB5 のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#816DF3、4.53:1）を使う。

Typography

• セクション見出しは英字の大文字。頭文字 1 字だけ藍紫にする
• 英字見出しの下に和文サブ見出し、その下に藍紫の短い下線と小さな三角を付ける
• 特長見出しの背後に手書き英字をライムで薄く重ねる
• 見出しの最後の 2 字を藍紫にして強調する
• 本文は小さめにして行間を広く（2.0 前後）取る
• キャッチはライムのマーカー帯の上に黒の太字で書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（理由・シーンは 3 列・2 列の小カード）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右 6% の余白。背景に細い縦のガイド線を 2 本通す
• 特長は斜めのグレー帯（文章）と斜めに切った写真を左右交互に置く
• 白とグレーの地をセクションごとに交互にする
• 表は全幅で黒い罫線、見出しのセルはグレー
• フォームはラベルを上、入力欄を下に縦に積む

Elevation & Depth

• 影はほぼ使わない。面の重なりと色の差で奥行きを出す
• 写真の背後にライムやグレーの面を少しずらして重ねる
• 白カードはグレー地の上に影なしで置く

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 片側を斜めに切った平行四辺形、または長方形
• セクション境界: 直線で区切る。帯やカードは斜めカット
• 斜めは右上がりの約 15° に統一する
• 流れのカードは平行四辺形の白面にする
• 理由のアイコンは薄い灰色線の正円に入れる
• タブは角丸 8px の藍紫の枠。選択中は藍紫で塗る
• 主ボタンはピル型

Components

• 英字セクション見出し（section-title）: 英字の大文字（頭文字は藍紫）＋和文サブ見出し＋藍紫の下線と三角
• 特長番号ラベル（feature-label）: ライムの斜めの塊の上に「FEATURE 01」形式の番号。見出しには手書き英字を重ねる
• 斜めカット帯（slant-band）: 片側を斜めに切ったグレーの面に本文を載せる。隣に斜め切りの写真
• 機能切替タブ（tab-button）: 3 つ並べる角丸ボタン。選択中は藍紫で塗って白文字、他は白地に藍紫の枠
• 確認・送信ボタン（button-primary）: 黒のピル型。白文字と右向き矢印
• 丸矢印リンク（button-circle-link）: 藍紫の正円に白い矢印＋右に黒太字のテキスト
• 流れの平行四辺形カード（flow-card）: グレー地の上に白い平行四辺形。ライムを差した線画アイコン、藍紫の番号＋見出し、説明を中央揃えで置く
• 必須・任意ラベル（badge-required）: 斜めに切った小さなラベル。必須はライム地に黒文字、任意は灰色地に白文字
• ライムのマーカー帯（marker-text）: 文字の背後にライムの帯を敷いたキャッチや画像のキャプション
• フッター CTA パネル（footer-cta）: 藍色の写真帯の上に斜めの白パネル。ライムのピル型ボタンと電話番号を置く

Do's and Don'ts

Do - 斜めの角度を全体で統一する - 藍紫とライムは小さな面積で、要所だけに使う - 白とグレーの交互配置で区切りを見せる - アイコンは黒の線画にライムの塗りを差す - 余白は大きく取り、本文は小さく行間を広くする

Don't - ライムを広い背景や文字色に使わない（暗い面の上は除く） - 角丸の大きいカードや強い影を使わない - 藍紫とライム以外の鮮やかな色を足さない - 見出しを和文だけにしない（英字＋和文の組で作る） - グラデーションを多用しない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（サービス名と価値を一目で伝える）: 藍紫の帯コピー、斜体の英字ロゴ、ライムとグレーの斜め面に重ねた室内写真とデバイスの画像、ライムのマーカー付きキャッチ
2. お知らせ（最新情報を伝える）: グレー地の上に白カード。日付と藍紫のカテゴリラベルを置く
3. サービス概要（何ができるかを説明し、体験へ誘う）: 中央揃えの短文、ライムの斜め装飾付きの一文、デモ画面の埋め込み（背後にライム面）
4. 技術の説明（使っている技術を補足する）: グレーのボックスに藍紫の見出しと本文
5. 特長（3 つの利点を示す）: 番号ラベル、手書き英字を重ねた見出し、斜めのグレー帯の本文、斜め切りの写真を左右交互に置く
6. 利用シーン（使える場面を想起させる）: 写真カードのスライダー。下にライムのマーカーでキャプション、ドットのナビ
7. 機能紹介（主な機能を切り替えて見せる）: グレー地。3 つのタブ、見出し、大きな写真、白い補足ボックス
8. 選ばれる理由（信頼の根拠を示す）: 円の中に線画アイコン、藍紫の見出し、短い本文を 3 列で並べる
9. 会社紹介（業界での実績を伝える）: 暗い写真の背景にライムの細い枠、ライムの文字とロゴ
10. 料金（価格と含まれる内容を明示する）: 黒い罫線の表。大きな価格表示とライムのチェックマーク、下に注釈
11. ご利用の流れ（導入までの手順を示す）: グレー地に、平行四辺形の白カード 5 枚を縦に並べる
12. お問い合わせフォーム（問い合わせを獲得する）: ラベルに必須・任意のラベル、グレーの入力欄、黒のピル型送信ボタン
13. フッター CTA・フッター（最後の問い合わせ導線と会社情報）: 藍色の写真帯に白い斜めパネル、ライムのボタンと電話番号。下に白地のロゴとリンク

Imagery

• 明るく整ったモデルルーム・ショールームの広角の室内写真
• 端末を操作する人物の自然光の写真（白・ベージュ系の服）
• PC・タブレット・スマホを重ねたデバイスの画像
• 黒の線画アイコンにライムの塗りを部分的に入れる
• 写真は斜めに切り、背後にライムやグレーの面をずらして置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左にテキスト、右に斜めに切った大きな写真の 2 分割にする
• PC はファーストビューの直下に横並びのグローバルナビと黒い問い合わせボタンを置く
• PC の特長は写真と文章の帯を左右交互の 2 カラムにする
• PC のシーンは左に説明、右に写真スライダー
• PC の料金表は価格を左のセルに縦長で配置する
• PC のフォームはラベル左・入力右の 2 カラム。流れのカードはアイコン左・文章右

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。