---
version: alpha
name: Bright Sky Blue and Lemon Yellow Relocation Event LP
description: 白地に水色のピル型見出しと、レモンイエローの大きな円で目立たせる移住・地域相談イベントのLP。丸く切り抜いた写真とフラットなイラストを散らし、手書き風の太い丸ゴシックで親しみやすく、明るく元気な印象にまとめている。
colors:
  primary: '#22A0E6'
  on-primary: '#F0FEFE'
  background: '#FFFFFF'
  background-alt: '#BEECF9'
  tint-1: '#E4F7FD'
  accent-1: '#FDEB02'
  cta: '#FCEC02'
  on-cta: '#1A1A1A'
  accent-2: '#C11819'
  text: '#373737'
  text-muted: '#53494B'
  accent-3: '#4EDB59'
  secondary: '#2C89E6'
  line: '#FFFFFF'
  primary-accessible: '#1479B2'
  accent-3-accessible: '#1B8624'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
  accent:
    fontFamily: Zen Maru Gothic
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-heading-pill:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 30px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 32px
  pennant-badge:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 64px
  message-circle:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 300px
  keyword-pill:
    textColor: '{colors.accent-2}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 28px
  event-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 230px
  category-label:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 26px
  persona-block:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 380px
---

# DESIGN.md — 水色×黄色の手描き風移住相談会LP（Bright Sky Blue and Lemon Yellow Relocation Event LP）

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

## Overview

- **業種**: 自治体・公共・団体 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、清潔・爽やか、やさしい・柔らかい
- **キーワード**: 空色・レモンイエロー・円形切り抜き・フラットイラスト・手書き風ロゴ・イベント告知
- **地の質感**: フラットな単色面。グラデーションも影も使わない。
- **形**: 正円・ピル型・旗型のペナントが中心。角張った形はカードくらい。
- **温度感**: 明るく暖かい。屋外の晴天を思わせる爽やかさ。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#22A0E6` | セクション見出しのピル型帯 | 3% | 推定 |
| `on-primary` | `#F0FEFE` | 見出し帯上の白文字 | 1% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の地色 | 44% | 画素の実測 |
| `background-alt` | `#BEECF9` | 悩み・ターゲット紹介セクションの空色の地 | 17% | 画素の実測 |
| `tint-1` | `#E4F7FD` | フッターの淡い水色の地 | 5% | 画素の実測 |
| `accent-1` | `#FDEB02` | メッセージ用の大きな黄色い円と旗型ペナント | 6% | 画素の実測 |
| `cta` | `#FCEC02` | 詳細ボタンの塗り（黄色） | 0% | 画素の実測 |
| `on-cta` | `#1A1A1A` | ボタン上の黒文字 | 0% | 推定 |
| `accent-2` | `#C11819` | キーワードの赤文字と波線 | 0% | 画素の実測 |
| `text` | `#373737` | 見出し・本文の黒文字 | 3% | 画素の実測 |
| `text-muted` | `#53494B` | 箇条書きや注釈のグレー文字 | 1% | 画素の主要色に補正 |
| `accent-3` | `#4EDB59` | オンラインのカテゴリーラベル（緑） | 0% | 画素の実測 |
| `secondary` | `#2C89E6` | 東京のカテゴリーラベル（青） | 0% | 画素の実測 |
| `line` | `#FFFFFF` | 小見出し下の白い区切り線 | 0% | 画素の主要色に補正 |
| `primary-accessible` | `#1479B2` | AA を満たす補正値（計算） |  | 計算 |
| `accent-3-accessible` | `#1B8624` | AA を満たす補正値（計算） |  | 計算 |

- 地は白。中盤のターゲット紹介だけを空色の全幅面にして、リズムを切り替える。
- セクション見出しは青のピル型帯に白文字で統一する。
- 黄色は、メッセージの大円・開催地のペナント・CTAボタン・マーカー線に限って使う。
- 赤は、強調語の文字・波線・小さなバッジにだけ使う。
- カテゴリーラベルは開催形態ごとに緑・青を色分けする。
- フッターは淡い水色にしてページを締める。
- `section-heading-pill` は文字 `#F0FEFE` × 背景 `#22A0E6` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1479B2`、4.61:1）を使う。
- `category-label` は文字 `#F0FEFE` × 背景 `#4EDB59` のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#1B8624`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのイベントタイトル（青・手書き風の太字） | 装飾・ディスプレイ | Dela Gothic One | 700 | 46px | 1.25 | 0.05em |
| `headline-lg` | 青帯のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.08em |
| `headline-md` | 黄色い円の中の強調コピー | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.5 | 0.05em |
| `headline-sm` | ターゲット別の小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.4 | 0.05em |
| `body-md` | リード文・イベント情報 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.03em |
| `note` | 箇条書き・注釈・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em |
| `accent` | 黄マーカーを敷いたキャッチの太字 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.6 | 0.05em |
| `label-button` | ボタン・ラベル・リンク | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.05em |

- 見出しは丸みのある太いゴシックで、親しみやすくする。
- 本文は細めのゴシックを小さめに組み、情報量を抑える。
- 強調語は赤文字にし、白いピル型の枠で囲むか、赤い波線を引く。
- キャッチコピーは2行に分け、それぞれに黄色の半透明マーカーを敷く。
- 英字は小さな詳細リンクに限り、下線付きで使う。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。イベントカードだけ2カラム。
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
- 見出し帯は画面幅のほぼ全幅（左右12px）に置く。
- 大きな円形イラストを中央に置き、その下に左揃えで小見出しと箇条書きを並べる。
- セクション間は縦の3点リーダー（グレーの点）でつなぐ場面がある。
- イラストは端からはみ出させて余白に動きを出す。
- FVは円形写真を四隅に散らし、タイトルを中央に置く。

## Elevation & Depth

- 影は使わない。
- 重なりは、写真やイラストを円形で前後に重ねることだけで表現する。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 写真もイラストも正円に切り抜く。イベント画像は角丸なしの長方形。
- **セクション境界**: 直線で背景色を切り替える。
- 見出し帯とボタンは完全なピル型にする。
- 開催地は、下辺が山形に切れた黄色い旗型ペナントで並べる。
- メッセージは画面幅いっぱいの黄色い正円に入れる。
- カテゴリーラベルは角丸の小さな四角にし、カード画像の左上に重ねる。

## Components

- **青ピル見出し**（`section-heading-pill`）: 全幅の青いピル帯に、白い太字を中央揃えで置く。
- **黄色CTAボタン**（`button-primary`）: 黄色のピル型。黒文字で、右端に黒の三角矢印を付ける。
- **開催地ペナント**（`pennant-badge`）: 黄色の旗型。上に赤い小バッジ、下に黒い太字を置く。
- **黄色メッセージ円**（`message-circle`）: 大きな黄色の正円。中に強調語の白ピルと赤い波線を配置する。
- **強調語の白ピル**（`keyword-pill`）: 白地のピル枠に赤い太字を入れる。
- **イベントカード**（`event-card`）: 上に画像、左上に色分けラベル。下に日付・タイトル、右下に下線付きの英字リンクを置く。
- **形態ラベル**（`category-label`）: 緑または青の小さな角丸ラベルに白文字。
- **ターゲット紹介ブロック**（`persona-block`）: 円形イラストの下に、小見出し・白線・中黒の箇条書き2行を並べる。

## Do's and Don'ts

**Do**
- 見出しはすべて青ピル帯で統一する。
- 写真・イラストは正円に切り抜き、ページ全体に散らす。
- 黄色は面として大きく使い、視線を集める。
- 文章は短くし、箇条書きは中黒で並べる。
- 人物はフラットなイラストで温かく描く。

**Don't**
- 影・グラデーション・立体表現は使わない。
- 暗い色や重い色の背景は使わない。
- 角張った四角いボタンにしない。
- 本文を長く詰め込まない。
- 赤を面で多用しない。

## Page Structure

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

1. **ファーストビュー**（イベント名・開催地・形態を伝える。）: 黄色い半円の上部に開催告知を置き、その下に旗型ペナントを3つ並べる。中央に青い手書き風タイトル、周囲に円形写真を散らす。
2. **キャッチ**（気軽さを伝える。）: 黄色マーカーを敷いた2行のコピーに、アクティビティのイラストを添える。
3. **メッセージ**（相談会の価値を伝える。）: 大きな黄色い円の中に、強調語の白ピルと赤い波線を入れる。下に農作業のイラストを置く。
4. **イベント一覧**（開催中のイベントへ誘導する。）: 青ピル見出しとリード文の下に、2カラムのカードを並べる。
5. **悩み・ターゲット**（共感して自分ごと化してもらう。）: 空色の全幅面に、円形イラストと小見出し・箇条書きを3つ縦に並べる。
6. **相談内容**（聞けることを具体的に示す。）: 3点リーダーでつなぎ、青ピル見出しの下に箇条書き5項目と打ち合わせのイラストを置く。
7. **参加者特典**（参加の後押しをする。）: 特典の一文と注釈の下に黄色CTAを置き、飛行機と旅行者のイラストを添える。
8. **フッター**（運営元情報を示す。）: 淡い水色の地に、ロゴ・住所・コピーライトを中央揃えで置く。

## Imagery

- 人物・風景・作業の場面を、輪郭線なしのフラットなイラストで描く。色は落ち着いた中間色にする。
- 実写は地域の人や自然の写真にし、正円に切り抜く。
- イラストは端から少しはみ出させ、余白の中で動きを出す。
- 地域の形を緑のシルエットにし、上に英字を載せる装飾を使う。
- 赤い波線やマーカーなど、手描き風の装飾を添える。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは、FVのタイトルを中央に置き、キャッチを左上、黄色い円を右へ振り分けて横長に構成する。
- PCのターゲット紹介は、円形イラストと文章を左右交互に配置する。
- PCの見出しピルは全幅にせず、幅60%程度で中央に置く。
- イベントカードはPCでも2カラムのまま、幅を広げる。
- 相談内容と特典は、PCではイラストを左右の端に配置する。

## 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-26f0cec7`（元 LP の URL から採番）
- **元 LP**: https://kochi-iju.jp/lp/shigotokurashi.html
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。