空色と雲の白で包むマスコット紹介 LP

Soft Sky Mascot Character LP

水色の空とふわふわの雲を地に敷き、白い大きな角丸カードと深い青緑のアウトラインボタンで構成した企業マスコットのキャラクター紹介 LP。3D 調のキャラクターとやさしいゴシック体で、親しみやすく清潔な印象を出している。

自動車・バイクやさしい・柔らかい清潔・爽やかかわいいシンプル・ミニマルSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白と空色を交互に置き、境界は雲のぼかしでつなぐ
強調色は深い青緑 1 色だけ。見出しの一部語句・日付・ボタン線に使う
カードは常に白で空色地の上に置く
本文は濃グレーで黒は使わない
フッターだけ青緑の濃い面にして締める
赤や黄の強い色は写真内以外に使わない

TYPOGRAPHY

書体

displayFVの挨拶の大見出し（白抜き）ゴシック／ Noto Sans JP 700 ／ 48px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出しゴシック／ Noto Sans JP 700 ／ 28px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdFVサブコピー・小見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

headline-smカードのタイトルゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文（太めで行間広め）ゴシック／ Noto Sans JP 700 ／ 15px ／行間 2.2

あなたの LP を、もっと伝わる形に。Aa 123

note日付・タグ・フッターリンクゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonアウトラインボタン文字ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

書体はゴシック 1 系統で統一する
見出しは中央揃えで字間を少し広げる
見出し内のキーワードだけ青緑にする
本文は太字寄りで行間 2 以上にしてゆったり見せる
FV の文字は白抜きで空の上に置く

PAGE STRUCTURE

セクション構成

ヘッダーロゴとメニューの導線白地の細いバー。左にロゴ、右にアイコンとハンバーガー
ファーストビューキャラクターの第一印象を作る空色グラデーションと雲の背景に白抜きの挨拶の大見出しと2行のサブコピー。下に3Dキャラを大きく
キャラクター紹介名前と役割を伝える白地に語句強調見出し、円形写真、太字本文、アウトラインボタン
ニュース一覧活動実績を見せる空色地に白い角丸カードを縦に並べる。日付とタグ付き。最後にもっと見るボタン
オリジナルグッズグッズを紹介する白地に見出し、青緑の小見出しと一言、薄グレータイルを2列
目撃情報・SNSSNSフォローへ誘導淡い空色地にキャラと見出し、本文、ずらし配置のSNS投稿カード、SNS別のアウトラインボタン3本
サービス誘導本体サービスへの送客白地に一言見出し、小さなキャッチと大きなロゴ、右に矢印
エンディングビジュアル世界観で締める画面幅いっぱいの3Dイラスト。下にページトップ
フッター会社情報とSNS青緑の濃い面に白リンクとSNSアイコン

COMPONENTS

部品

アウトラインボタン button-outline白または透過の地に青緑の細線のピル型。文字は中央、右端に青緑の丸い矢印アイコン
ニュースカード news-card白の大きな角丸カード。上に写真、下にタイトル・日付・タグ。右上に画鋲を重ねる
カテゴリタグ tag-pill日付の横に置く青緑の細線ピル
語句強調見出し heading-highlight中央揃えの見出しで固有名詞部分だけ青緑にする。鉤括弧も同色
グッズタイル goods-tile薄グレーの角丸正方形に商品画像、下に太字の名前
SNS投稿風カード sns-post-cardアバターとグレー線のダミー行、三点リーダーを上部に持つ白い投稿枠に写真を入れる
円形写真 photo-circle正円に切り抜いたイラスト写真に、小さなキャラクターを縁からはみ出させる
フッター footer青緑の濃い面に白の縦線区切りリンクとSNSアイコン、下段は淡い青

守ること

白と空色のセクションを交互に置き、境界は雲のぼかしにする
強調色は青緑 1 色に絞る
カードとボタンは大きな角丸・ピル型にする
キャラクターは余白の中に大きく置き、浮遊する影を付ける
見出しは中央揃えで短くする

DON'T

避けること

直線的なセクション区切りにしない
塗りつぶしの派手な CTA ボタンを使わない
カードに濃いドロップシャドウを付けない
明朝体や手書き体を混ぜない
暖色の強調色を足さない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ヘッダー（ロゴとメニューの導線）: 白地の細いバー。左にロゴ、右にアイコンとハンバーガー
ファーストビュー（キャラクターの第一印象を作る）: 空色グラデーションと雲の背景に白抜きの挨拶の大見出しと2行のサブコピー。下に3Dキャラを大きく
キャラクター紹介（名前と役割を伝える）: 白地に語句強調見出し、円形写真、太字本文、アウトラインボタン
ニュース一覧（活動実績を見せる）: 空色地に白い角丸カードを縦に並べる。日付とタグ付き。最後にもっと見るボタン
オリジナルグッズ（グッズを紹介する）: 白地に見出し、青緑の小見出しと一言、薄グレータイルを2列
目撃情報・SNS（SNSフォローへ誘導）: 淡い空色地にキャラと見出し、本文、ずらし配置のSNS投稿カード、SNS別のアウトラインボタン3本
サービス誘導（本体サービスへの送客）: 白地に一言見出し、小さなキャッチと大きなロゴ、右に矢印
エンディングビジュアル（世界観で締める）: 画面幅いっぱいの3Dイラスト。下にページトップ
フッター（会社情報と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

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

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

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://corp.kinto-jp.com/mascot/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

自動車・バイク黒×レーシングイエローの限定車 LPBlack and Racing Yellow Limited Edition Car LP 自動車・バイクチャコール×オレンジの軽商用車アウトドアLPDark Charcoal Outdoor Utility Vehicle LP 自動車・バイク白地に深紅×黒の自動車ローン解説 LPCrimson and Black Comic-Bubble Auto Finance LP 自動車・バイクくすみグレー×白の車用小物EC LPMuted Slate Car Accessory Product LP 自動車・バイク黒革×銅グラデの車用クッション通販 LPDark Leather Automotive Accessory EC LP 自動車・バイク鮮やか青×ボディ色地のクルマ×ファッションコラボLPBlue Collab Fashion x Car Styling LP