---
version: alpha
name: Teal Anniversary Illustrated Corporate LP
description: 深いティールと白を交互に敷き、黄色を差し色にした IT 企業の周年記念 LP。弧を描くセクション境界、吹き出し型の見出しラベル、大きな数字カード、丸角の写真カード、色分けしたイラストカードで、明るく前向きな企業らしさを出している。
colors:
  primary: '#0195B2'
  background: '#FEFFFE'
  secondary: '#4CB5CA'
  accent-1: '#FCBE28'
  accent-2: '#0341A0'
  tint-1: '#B9EAEA'
  tint-2: '#1CC8BB'
  background-alt: '#F0F9FF'
  surface: '#FEFEFE'
  text: '#161617'
  on-dark: '#FFFFFF'
  text-muted: '#666666'
  cta: '#019BAC'
  on-cta: '#FFFFFF'
  marker: '#F0607A'
  primary-accessible: '#015C6E'
  cta-accessible: '#018290'
typography:
  display:
    fontFamily: Poppins
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.0
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Poppins
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-button:
    fontFamily: Poppins
    fontSize: 9px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 8px
  md: 20px
  lg: 28px
  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}'
  speech-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 40px
  stat-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-2}'
    typography: '{typography.display}'
    rounded: '{rounded.lg}'
    height: 170px
  episode-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 230px
  button-circle:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 22px
  flip-card:
    backgroundColor: '{colors.surface}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 235px
  like-counter:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 28px
  name-plate:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 60px
  era-label:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 80px
---

# DESIGN.md — ティール×黄色の周年記念テック企業 LP（Teal Anniversary Illustrated Corporate LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、清潔・爽やか、信頼・誠実、クール・先進的
- **キーワード**: ティール・周年記念・吹き出し見出し・大きな数字・線画イラスト・弧の境界
- **地の質感**: フラットな単色面とグラデーション。質感は加えず、線画イラストと薄い影だけで奥行きを出す
- **形**: 角丸の大きいカード、弧や波のセクション境界、ピル型の吹き出しラベル、下向き V 字の切り替え
- **温度感**: 爽やかで少し涼しい。黄色で温かみと元気を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0195B2` | ブランドのティール。メイン面と見出しラベル | 28% | 画素の実測 |
| `background` | `#FEFFFE` | 白地 | 33% | 画素の実測 |
| `secondary` | `#4CB5CA` | 数字セクションの明るめティール | 8% | 画素の実測 |
| `accent-1` | `#FCBE28` | 黄色の差し色（見出しの文字・×記号・数字） | 3% | 画素の実測 |
| `accent-2` | `#0341A0` | 濃い青の数字 | 2% | 画素の実測 |
| `tint-1` | `#B9EAEA` | グラデーション上端の淡いミント | 5% | 画素の実測 |
| `tint-2` | `#1CC8BB` | グラデーション中央のエメラルド | 6% | 画素の実測 |
| `background-alt` | `#F0F9FF` | タイムラインの淡い水色の帯 | 4% | 画素の実測 |
| `surface` | `#FEFEFE` | カード面 | 10% | 画素の実測 |
| `text` | `#161617` | 見出しと本文の濃い文字 | 1% | 画素の実測 |
| `on-dark` | `#FFFFFF` | ティール地の上の白文字 | 2% | 画素の主要色に補正 |
| `text-muted` | `#666666` | 注記・時点表記のグレー | 0% | 推定 |
| `cta` | `#019BAC` | 矢印付きの丸ボタン | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 丸ボタンの上の白い矢印 | 0% | 画素の主要色に補正 |
| `marker` | `#F0607A` | いいねボタンのハート（ピンク） | 0% | 推定 |
| `primary-accessible` | `#015C6E` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#018290` | AA を満たす補正値（計算） |  | 計算 |

- 地の色はティール面と白面を交互に置き、境目は弧や波にする
- 黄色は見出しラベルの文字、×記号、一部の数字だけに使う
- 数字カードでは濃い青と黄色の数字を交互に並べる
- 年表セクションでは、淡いミントから深いティールへ縦グラデーションをかける
- 課題カードの枠は 6 色（黄・紫・青・赤・緑・橙）で塗り分ける
- ティール地の上の文字は白で統一する
- `speech-label` は文字 `#FCBE28` × 背景 `#0195B2` のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#015C6E`、4.55:1）を使う。
- `button-circle` は文字 `#FFFFFF` × 背景 `#019BAC` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#018290`、4.57:1）を使う。
- `name-plate` は文字 `#0195B2` × 背景 `#F0F9FF` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#015C6E`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 大きな数字・年代ラベル | 欧文サンセリフ | Poppins | 800 | 64px | 1.0 | 0.0em |
| `headline-lg` | メッセージ見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.03em |
| `headline-md` | 吹き出しラベル内の見出し | 装飾・ディスプレイ | M PLUS Rounded 1c | 800 | 26px | 1.2 | 0.1em |
| `headline-sm` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.02em |
| `note` | 時点表記・注記・ハッシュタグ | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `accent` | エピソード番号・英字ラベル | 欧文サンセリフ | Poppins | 600 | 15px | 1.2 | 0.02em |
| `label-button` | 続きを読む・カードをめくる | 欧文サンセリフ | Poppins | 600 | 9px | 1.2 | 0.0em |

- 数字と英字は太い幾何学サンセリフにする
- 数字の下には単位を中くらいの太字で置く
- 和文の見出しは太いゴシックで 2 行・中央揃えにする
- 本文は行間を広めにとり、白地では中央揃え、ティール地では左揃えにする
- 課題カードは漢字の見出しの下に小さなふりがなを添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードは中央寄せの単列
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 各章の頭に吹き出しラベル・×記号・ロゴを縦に積んで置く
- カードは画面幅の約 63% で中央に置き、間隔は 24px
- 年代ラベルはカード列の外に大きく置き、左右にずらす
- 年表は横スクロールの帯にする

## Elevation & Depth

- カードには下方向の柔らかい影（0 6px 12px rgba(0,0,0,.15)）を付ける
- 数字カードには右下に少し濃いめの影を付けて浮かせる
- 背景面は影なしのフラットにする

## Shapes

- **角丸**: 小 8px ／ 中 20px ／ 大 28px。ボタンはピル型。
- **写真の切り抜き**: カード上部の矩形写真で、上の角を丸く切る。人物写真は雲形の背景イラストと合成する
- **セクション境界**: 下に膨らむ弧、上に膨らむ弧、波線、下向き V 字
- 見出しラベルは左下に尻尾のあるピル型の吹き出しにする
- ボタンは円形に矢印を入れる
- 課題カードは太い色枠で角を丸くする

## Components

- **吹き出し見出しラベル**（`speech-label`）: ティールのピル型に黄色の太文字を入れ、尻尾を付ける。下に黄色の ×、その下にロゴを置く
- **数字カード**（`stat-card`）: 上端にティールのタブ型の項目名を載せ、大きな数字・単位・時点表記を続ける。角にイラストを添える
- **エピソードカード**（`episode-card`）: 上半分に写真を置き、左上にエピソード番号を重ねる。下半分は白地にタイトルとハッシュタグ、右下に丸い矢印ボタン
- **丸い矢印ボタン**（`button-circle`）: 小さな英字ラベルの横に、ティールの円と白い矢印を置く
- **課題イラストカード**（`flip-card`）: 色枠の白カードに、色付きの漢字見出し・ふりがな・イラスト・めくるボタンを入れる
- **いいねカウンター**（`like-counter`）: 白い円の中にピンクのハートを入れ、白い太字のラベルと数字を横に並べる
- **人物の名前プレート**（`name-plate`）: 人物写真の下に、左端を丸めた淡いグレーの帯を置き、肩書と氏名を入れる
- **年代の見出し**（`era-label`）: 特大の英字の下に年の範囲を小さく添える。色は白・ティール・黄色を使い分ける

## Do's and Don'ts

**Do**
- セクション境界は弧・波・V 字にして、直線で区切らない
- 章頭は必ず吹き出しラベル＋×＋ロゴの型で揃える
- 数字は特大にし、単位と時点表記を必ず添える
- イラストは線画に淡いティールと黄色を塗ったトーンに揃える
- カードの角は大きく丸め、柔らかい影を付ける

**Don't**
- 黒や暗いグレーの大きな面を使わない
- 黄色を本文や広い面に使わない
- 細い明朝体を使わない
- 写真を角丸なしで全幅に並べない
- 装飾的な質感やテクスチャを加えない

## Page Structure

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

1. **ファーストビュー**（周年記念であることを印象づける）: ティールのグラデーション地に、大きな数字と人物群のイラストを置く。下端は弧で区切り、英字のサブコピーを添える
2. **キャッチコピー**（テーマを一言で伝える）: 白地に太ゴシック 2 行を中央揃えで置く
3. **代表メッセージ**（ビジョンを語る）: 吹き出しラベルの章頭の下をティール地にし、白文字の長文を置く。最後に雲形イラストと人物写真、名前プレートを置く
4. **実績の数字**（規模と信頼性を示す）: 明るいティール地に数字カードを 6 枚並べ、下端は波で区切る
5. **製品の年表**（製品の歩みを見せる）: 横スクロールの年表。上段にハード、下段にアプリを置き、角に弧の装飾を付ける
6. **10 年のエピソード**（歴史を物語で見せる）: ミントから濃いティールへのグラデーション地に、エピソードカードを縦に並べる。年代ラベルで区切り、下端は V 字にする
7. **今後の展望**（未来への意思を示す）: 白地に中央揃えの短い行の本文を置き、メインイラストとキャッチコピーを再掲する
8. **参加型企画**（閲覧者を巻き込む）: ティール地に色枠の課題カードを 6 枚並べ、それぞれにいいねカウンターを付ける
9. **フッター**（会社情報とリンク）: 白地にロゴ・社名・外部リンクを置き、ページトップへ戻るリンクを添える

## Imagery

- 線画にティール・黄色・ピンクの淡いフラット塗りを合わせた、働く人々のイラスト
- 人物写真は切り抜き、街並みを描いた雲形のイラストに重ねる
- 製品写真は白背景の切り抜き
- エピソードの写真は現場やイベントの実写を明るく補正する
- 背景の黄色い風船は小さな丸として散らす
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では数字カードを 3 列 × 2 段にする
- PC ではエピソードカードを 2 列にし、右列を少し下にずらす
- PC では課題カードを 3 列 × 2 段にする
- PC の代表メッセージは、左に本文のパネル、右に人物写真を置く
- 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-acadf5f6`（元 LP の URL から採番）
- **元 LP**: https://safie.co.jp/10th/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。