--- version: alpha name: Pastel Flat Illustration Eco Service LP description: 白に近い淡いグレーの地に、方眼のガイド線と淡い水色のグラデーション面を重ねたウェブサービス LP。藍色の衣服とピンクの針と糸のフラットイラストが全体をつなぎ、細めのゴシック体で静かに語る。環境への配慮とサービスの手軽さを、やさしく清潔な印象で伝える。 colors: background: '#FAFBFD' surface: '#F9FDFF' primary: '#2D1A83' tint-1: '#D1F1FE' tint-2: '#D5F0FC' cta: '#43C3FD' on-cta: '#FFFFFF' secondary: '#519ED4' accent-1: '#F06AAE' accent-2: '#7AD085' text: '#141C2A' text-muted: '#6B7280' line: '#B8BEC7' dark-section: '#212830' on-dark: '#FFFFFF' cta-accessible: '#027DB4' accent-1-accessible: '#E2177E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 80px 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.sm}' height: 40px text-link: textColor: '{colors.secondary}' typography: '{typography.body-md}' height: 20px speech-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 32px section-label: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 18px before-after-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 330px item-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 165px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 150px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.md}' height: 55px guide-link-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 32px --- # DESIGN.md — 水色×藍×ピンクのフラット絵柄の衣服修繕サービス LP（Pastel Flat Illustration Eco Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル、クール・先進的 - **キーワード**: フラットイラスト・淡い水色グラデ・方眼ガイド線・糸のライン・細ゴシック・エコ - **地の質感**: ほぼ白の地に、極細の方眼線と＋印を薄く敷く。質感はなく、フラットでデジタルな印象。 - **形**: 角丸は小〜中。円形に切り抜いた拡大図をあしらう。セクション境界はゆるい曲線と布のめくれ。 - **温度感**: やや寒色寄り。ピンクの差し色で温かさを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAFBFD` | ページ地色 | 40% | 画素の実測 | | `surface` | `#F9FDFF` | カード面 | 9% | 画素の実測 | | `primary` | `#2D1A83` | 衣服イラストの藍色 | 5% | 画素の実測 | | `tint-1` | `#D1F1FE` | 水色グラデーションの面 | 12% | 画素の実測 | | `tint-2` | `#D5F0FC` | 淡い水色バッジ・ハイライト | 5% | 画素の実測 | | `cta` | `#43C3FD` | 主ボタンの水色 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `secondary` | `#519ED4` | リンク・STEP 番号の青 | 0% | 画素の実測 | | `accent-1` | `#F06AAE` | 針・糸・吹き出しのピンク | 2% | 推定 | | `accent-2` | `#7AD085` | 山のイラストの緑 | 4% | 画素の実測 | | `text` | `#141C2A` | 見出しの文字 | 1% | 画素の主要色に補正 | | `text-muted` | `#6B7280` | 補足の文字・ラベル | 0% | 推定 | | `line` | `#B8BEC7` | 点線の区切り線 | 0% | 推定 | | `dark-section` | `#212830` | フッター地色 | 7% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#027DB4` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E2177E` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ白。グリッド線は地より少し濃いグレーで極細にする - 中盤の対象アイテムと終盤の CTA は、白から水色へ縦グラデーションで面を変える - 藍とピンクは主にイラストに使う。文字には多用しない - ボタンと吹き出しは水色→青、ピンク→濃ピンクの横グラデーションにする - テキストリンクと STEP 番号は青に統一する - フッターだけ濃い紺グレーで締める - `button-primary` は文字 `#FFFFFF` × 背景 `#43C3FD` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#027DB4`、4.57:1）を使う。 - `speech-badge` は文字 `#FFFFFF` × 背景 `#F06AAE` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E2177E`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | ゴシック | Zen Kaku Gothic New | 400 | 44px | 1.4 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 400 | 22px | 1.5 | 0.02em | | `headline-md` | 特長・STEP の小見出し | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.5 | 0.02em | | `headline-sm` | 見出しの上に置くリード・アイコン付きラベル | ゴシック | Noto Sans JP | 400 | 13px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.02em | | `note` | カード内のラベル・注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `accent` | STEP 表記・背景の大きな英字 | 欧文サンセリフ | Montserrat | 500 | 10px | 1.2 | 0.1em | | `label-button` | ボタン・吹き出しの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 見出しは細めのウェイトで大きく置き、太字にしない - かなを小さく、漢字とカナを大きくするサイズの強弱を FV で使う - 重要な語には色付きの点線下線を引く - 背景に薄い大文字の英字をレタースペース広めで敷く - 本文は 12px 前後、行間はゆったり 1.8 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイテム一覧とガイドリンクは 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 18px - 見出しは左揃え。FV とクロージングだけ中央揃え - 各セクションの上に小さなアイコン付きラベルを置く - カードはスライダーやグリッドで並べる - イラストは画面の端まではみ出して配置してよい ## Elevation & Depth - カードには極薄の影（0 2px 8px rgba(0,0,0,0.05)）をつける - STEP カードは上辺に青グラデーションの帯を 3px つける - 円形の拡大図には白いフチと淡い影をつける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 4px の矩形。拡大図は正円に切り抜き、引き出し線でつなぐ - **セクション境界**: ゆるい曲線のグラデーション面や、布がめくれたような形で切り替える - 主ボタンは角丸 4px の横長 - バッジや吹き出しは角丸 8px で、下に三角のしっぽをつける - アイテムのサブラベルはピル型の淡い水色にする - フッターのリンクボタンはピル型の線枠にする ## Components - **主 CTA ボタン**（`button-primary`）: 横幅いっぱいの水色グラデーションのボタン。白文字に外部リンクのアイコンを添える - **矢印付きテキストリンク**（`text-link`）: 右揃えの青い文字に、細線の矢印アイコンを添える - **吹き出しバッジ**（`speech-badge`）: グラデーションの角丸ラベル。下にしっぽをつけ、特長の見出しに使う - **アイコン付きセクションラベル**（`section-label`）: 小さなカラーアイコンと短いラベルを並べ、見出しの上に置く - **ビフォーアフターカード**（`before-after-card`）: 白いカードに写真を 2 枚並べ、Before / After のピルと仕様表を入れる。スライダーで送る - **アイテムタイル**（`item-tile`）: 白いタイルの中央に衣服イラストを置き、名前と淡い水色のピルラベルを下に添える - **STEP カード**（`step-card`）: 上辺に青い帯。左にイラスト、右に STEP 番号の円と小見出し、点線、説明文を置く - **FAQ リンクカード**（`faq-card`）: 白いカードの左上に青いラベルタグを置き、質問文と右向きの山括弧を入れる - **ガイドリンク一覧**（`guide-link-list`）: 線画アイコンとテキストを 2 カラムで並べ、各行の下に点線を引く ## Do's and Don'ts **Do** - 地は白に近く保ち、色はイラストとグラデーション面で出す - 見出しは細い字で、大きな余白をとって置く - ピンクの糸のラインでセクション同士をつなぐ - 重要な語には点線下線や点線の区切りを使う - マスコットのキャラクターを要所に小さく登場させる **Don't** - 太く重いゴシックや、黒ベタの見出しにしない - 赤や黄など、強い警告色を CTA に使わない - 写真を全面に敷かない。写真は事例カードの中だけにする - 影を濃くしない。立体感を強めすぎない - 装飾フォントや手書き書体を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値を一言で伝える）: 中央揃えの細い大見出しに点線下線付きの説明文。下に大きな衣服イラストと円形の拡大図を置き、ピンクの糸を走らせる 2. **特長**（2 つの主な価値を示す）: 吹き出しバッジとイラストの下に、見出し・点線・本文・テキストリンクを並べる。2 つの特長は円弧の矢印でつなぐ 3. **コンセプト**（環境への貢献をストーリーで伝える）: 水色グラデーションの地に短い文を段落で区切って置き、下に風景のワイドイラストを入れる 4. **事例**（修繕の質を見せる）: ビフォーアフターカードを横スライダーにし、ドットと矢印ボタンをつける 5. **対象アイテム**（対応範囲を示す）: 曲線の水色面の上に、チェックリストとアイテムタイルの 2 カラムグリッドを置く 6. **利用手順**（流れを簡潔に示す）: STEP カードを 3 枚縦に並べる 7. **手順の詳細**（アプリ画面で具体的に見せる）: STEP の見出しと説明の下に、ブラウザ枠のスクリーン図を入れる 8. **区切りイラスト**（リズムをつくる）: 糸のラインに衣服イラストを横一列に並べる 9. **利用ガイド・よくある質問**（疑問を解消する）: ガイドリンク一覧と FAQ カード、一覧へのリンクを置く 10. **お知らせ**（更新情報を伝える）: 絵文字風アイコン付きの見出しと、一覧へのリンクを置く 11. **CTA**（会員登録へ誘導する）: 白から水色へのグラデーション地に中央見出し、主ボタン、ログインリンクを置き、下に風景イラストを入れる 12. **フッター**（ナビゲーションと関連サービスを示す）: 濃い紺グレーの地に 2 カラムのリンクを並べ、ピル型の線枠ボタンを縦に積む ## Imagery - 影のないフラットなベクターイラスト。衣服は藍と水色のグラデーションに、ピンクの差し色を入れる - 風景は緑の三角の山、丸い木、青い工場、風車、白い雲でつくるパノラマ - ハリネズミのような小動物のマスコットを、各所に小さく配置する - ピンクの針と糸の細い曲線で、ページ全体を縫うようにつなぐ - 細部は円形の拡大図にし、グレーの引き出し線でつなぐ - アプリ画面は暗い上部バーのブラウザ枠にモーダルを重ねて見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV の見出しを 1 行にし、衣服イラストを 3 着横に並べる - PC の特長は 2 カラムで、中央に円弧の矢印を置く - PC のアイテムタイルは 4 列、STEP カードは 3 列に並べる - PC の手順詳細は、左に見出し、右に説明を置く 2 カラムにする - PC の FAQ カードは 2 列、ガイドリンクは 4 列にする - PC の本文幅は約 70% に絞り、余白を大きくとる ## 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-de42fd60`（元 LP の URL から採番） - **元 LP**: https://repair.fito.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。