--- version: alpha name: Soft Sky Mascot Character LP description: 水色の空とふわふわの雲を地に敷き、白い大きな角丸カードと深い青緑のアウトラインボタンで構成した企業マスコットのキャラクター紹介 LP。3D 調のキャラクターとやさしいゴシック体で、親しみやすく清潔な印象を出している。 colors: primary: '#19647A' background: '#FFFFFF' background-alt: '#C2ECF8' tint-1: '#D4F1F9' secondary: '#66C1DC' surface: '#FFFFFF' tint-2: '#F7F7F7' text: '#353535' dark-section: '#01718C' on-dark: '#FFFFFF' accent-1: '#69A7BE' line: '#277586' typography: display: fontFamily: Noto Sans JP fontSize: 48px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 8px md: 20px lg: 36px full: 999px spacing: unit: 8px card: 24px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 400px tag-pill: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 26px heading-highlight: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px goods-tile: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px sns-post-card: backgroundColor: '{colors.surface}' rounded: '{rounded.sm}' height: 230px photo-circle: rounded: '{rounded.full}' height: 300px footer: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 160px --- # DESIGN.md — 空色と雲の白で包むマスコット紹介 LP（Soft Sky Mascot Character LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、かわいい、シンプル・ミニマル - **キーワード**: 空色・雲の境界・3Dキャラクター・大きな角丸カード・アウトラインボタン・余白多め - **地の質感**: ぼかした雲のグラデーションと単色の水色面。影はほとんど使わずフラット - **形**: 角丸 32px 前後の大きなカード、ピル型アウトラインボタン、円形切り抜き写真 - **温度感**: 明るく涼しげ。青緑の差し色で少しだけ引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#19647A` | ブランド色（見出し強調・ボタン線・日付） | 2% | 画素の実測 | | `background` | `#FFFFFF` | 白地セクション | 34% | 画素の実測 | | `background-alt` | `#C2ECF8` | 空色セクション地（ニュース） | 24% | 画素の実測 | | `tint-1` | `#D4F1F9` | 淡い空色セクション地（目撃情報） | 13% | 画素の実測 | | `secondary` | `#66C1DC` | FVの空のグラデーション色 | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード面 | 12% | 画素の実測 | | `tint-2` | `#F7F7F7` | グッズ画像の薄グレー枠 | 2% | 画素の実測 | | `text` | `#353535` | 見出し・本文の濃グレー | 3% | 画素の実測 | | `dark-section` | `#01718C` | フッター地 | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#69A7BE` | フッター下段の淡い青 | 0% | 画素の実測 | | `line` | `#277586` | ボタン・タグの細線 | 0% | 画素の実測 | - 地は白と空色を交互に置き、境界は雲のぼかしでつなぐ - 強調色は深い青緑 1 色だけ。見出しの一部語句・日付・ボタン線に使う - カードは常に白で空色地の上に置く - 本文は濃グレーで黒は使わない - フッターだけ青緑の濃い面にして締める - 赤や黄の強い色は写真内以外に使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの挨拶の大見出し（白抜き） | ゴシック | Noto Sans JP | 700 | 48px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 28px | 1.4 | 0.08em | | `headline-md` | FVサブコピー・小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.7 | 0.04em | | `headline-sm` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 16px | 1.7 | 0.02em | | `body-md` | 本文（太めで行間広め） | ゴシック | Noto Sans JP | 700 | 15px | 2.2 | 0.02em | | `note` | 日付・タグ・フッターリンク | ゴシック | Noto Sans JP | 400 | 13px | 1.5 | 0.02em | | `label-button` | アウトラインボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.04em | - 書体はゴシック 1 系統で統一する - 見出しは中央揃えで字間を少し広げる - 見出し内のキーワードだけ青緑にする - 本文は太字寄りで行間 2 以上にしてゆったり見せる - FV の文字は白抜きで空の上に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、グッズは 2 列、SNS 投稿は 2 列で上下にずらす - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算） - 左右余白は約 24px - セクション間は雲の境界を挟んで大きく空ける - ニュースカードは縦に 40px 間隔で並べる - SNS 投稿カードは左右の列を上下にずらして並べる - ボタンは横幅いっぱいで中央に置く ## Elevation & Depth - カードに影は付けず、白と空色の明度差だけで浮かせる - キャラクター下に薄いぼかし影を置いて浮遊感を出す - カード右上に画鋲のアイコンを重ねて掲示物らしさを出す ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 36px。ボタンはピル型。 - **写真の切り抜き**: カード上部の写真は角丸の内側で切る。紹介写真は正円で切り抜く - **セクション境界**: ぼかした雲の帯で白と空色をつなぐ - ニュースカードは大きな角丸 36px 前後 - グッズ画像は角丸 20px の薄グレー正方形 - SNS 投稿風カードは角丸小さめ 4〜8px - ボタン・タグは完全なピル型 ## Components - **アウトラインボタン**（`button-outline`）: 白または透過の地に青緑の細線のピル型。文字は中央、右端に青緑の丸い矢印アイコン - **ニュースカード**（`news-card`）: 白の大きな角丸カード。上に写真、下にタイトル・日付・タグ。右上に画鋲を重ねる - **カテゴリタグ**（`tag-pill`）: 日付の横に置く青緑の細線ピル - **語句強調見出し**（`heading-highlight`）: 中央揃えの見出しで固有名詞部分だけ青緑にする。鉤括弧も同色 - **グッズタイル**（`goods-tile`）: 薄グレーの角丸正方形に商品画像、下に太字の名前 - **SNS投稿風カード**（`sns-post-card`）: アバターとグレー線のダミー行、三点リーダーを上部に持つ白い投稿枠に写真を入れる - **円形写真**（`photo-circle`）: 正円に切り抜いたイラスト写真に、小さなキャラクターを縁からはみ出させる - **フッター**（`footer`）: 青緑の濃い面に白の縦線区切りリンクとSNSアイコン、下段は淡い青 ## Do's and Don'ts **Do** - 白と空色のセクションを交互に置き、境界は雲のぼかしにする - 強調色は青緑 1 色に絞る - カードとボタンは大きな角丸・ピル型にする - キャラクターは余白の中に大きく置き、浮遊する影を付ける - 見出しは中央揃えで短くする **Don't** - 直線的なセクション区切りにしない - 塗りつぶしの派手な CTA ボタンを使わない - カードに濃いドロップシャドウを付けない - 明朝体や手書き体を混ぜない - 暖色の強調色を足さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューの導線）: 白地の細いバー。左にロゴ、右にアイコンとハンバーガー 2. **ファーストビュー**（キャラクターの第一印象を作る）: 空色グラデーションと雲の背景に白抜きの挨拶の大見出しと2行のサブコピー。下に3Dキャラを大きく 3. **キャラクター紹介**（名前と役割を伝える）: 白地に語句強調見出し、円形写真、太字本文、アウトラインボタン 4. **ニュース一覧**（活動実績を見せる）: 空色地に白い角丸カードを縦に並べる。日付とタグ付き。最後にもっと見るボタン 5. **オリジナルグッズ**（グッズを紹介する）: 白地に見出し、青緑の小見出しと一言、薄グレータイルを2列 6. **目撃情報・SNS**（SNSフォローへ誘導）: 淡い空色地にキャラと見出し、本文、ずらし配置のSNS投稿カード、SNS別のアウトラインボタン3本 7. **サービス誘導**（本体サービスへの送客）: 白地に一言見出し、小さなキャッチと大きなロゴ、右に矢印 8. **エンディングビジュアル**（世界観で締める）: 画面幅いっぱいの3Dイラスト。下にページトップ 9. **フッター**（会社情報とSNS）: 青緑の濃い面に白リンクとSNSアイコン ## Imagery - マスコットはつやのある白い3Dクレイ調で、丸い目だけのシンプルな表情 - 背景は水色の空とぼかした白い雲 - イラストは粘土風3Dで、緑の丘・海・青緑の車など明るい色 - 活動写真は屋外の明るい自然光、ぬいぐるみを画面に入れる - グッズは白背景の切り抜き物撮り - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは内容幅を約 800px に絞り、中央に置く - FVはPCで左に見出し、右にキャラの横並び - 紹介はPCで円形写真と本文を左右2カラム - ニュースカードはPCで2列、右列を下にずらした互い違い - グッズはPCで3列、SNS投稿は3列 - SNSボタンはPCで2本横並び＋1本中央、幅は狭める ## 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-0135cd23`（元 LP の URL から採番） - **元 LP**: https://corp.kinto-jp.com/mascot/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。