---
version: alpha
name: Aqua Gradient Corporate IT LP
description: シアン〜ブルーのグラデーションの FV、大きな欧文の見出し、円弧で区切ったセクションでまとめた IT システム企業のコーポレート LP。白とライトグレーを地に、水色を見出しとセクション背景に使い、最後は黒のフッターで締める。
colors:
  primary: '#6ED2F6'
  secondary: '#2AA3D4'
  tint-1: '#94E4EA'
  background: '#FFFFFF'
  surface: '#F4F4F4'
  accent-1: '#7DC7DE'
  text: '#010404'
  text-body: '#36353D'
  text-muted: '#959390'
  line: '#F4F4F4'
  dark-section: '#060E10'
  on-dark: '#FEFFFF'
  cta: '#6CD3F3'
  on-cta: '#FFFFFF'
  secondary-accessible: '#217FA5'
  primary-accessible: '#0B7FAA'
  cta-accessible: '#0D80A4'
typography:
  display:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.15
  headline-lg:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  accent:
    fontFamily: Inter
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.0
rounded:
  sm: 8px
  md: 14px
  lg: 32px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-gradient:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 290px
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 60px
  vertical-label:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 130px
  service-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 420px
  venn-diagram:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 220px
  info-table:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 400px
  message-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 800px
  photo-banner:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 230px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 44px
  footer-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 270px
---

# DESIGN.md — 水色グラデと大きな円弧のIT企業LP（Aqua Gradient Corporate IT LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: クール・先進的、清潔・爽やか、信頼・誠実、シンプル・ミニマル
- **キーワード**: 水色グラデーション・大きな欧文見出し・円弧の区切り・テック系写真・余白多め
- **地の質感**: 装飾のない単色面とやわらかいグラデーション。テクスチャは入れない
- **形**: 大きな円弧、角丸カード、片側だけ丸いピル型の写真
- **温度感**: 青寄りで涼しく、知的な印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#6ED2F6` | ブランドの水色（見出しと会社概要の背景） | 12% | 画素の実測 |
| `secondary` | `#2AA3D4` | FV グラデーションの濃い青 | 4% | 画素の実測 |
| `tint-1` | `#94E4EA` | FV グラデーション上部の淡いシアン | 3% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地 | 37% | 画素の実測 |
| `surface` | `#F4F4F4` | 事業カードの面 | 11% | 画素の実測 |
| `accent-1` | `#7DC7DE` | カード見出しと縦書き欧文の水色 | 0% | 画素の実測 |
| `text` | `#010404` | 見出しの黒 | 2% | 画素の実測 |
| `text-body` | `#36353D` | 本文のダークグレー | 3% | 画素の主要色に補正 |
| `text-muted` | `#959390` | コピーライトの薄いグレー | 0% | 画素の主要色に補正 |
| `line` | `#F4F4F4` | 会社概要の区切り線（白） | 0% | 画素の主要色に補正 |
| `dark-section` | `#060E10` | コンタクトとフッターの黒 | 7% | 画素の実測 |
| `on-dark` | `#FEFFFF` | 黒地の上の白文字 | 0% | 画素の実測 |
| `cta` | `#6CD3F3` | 問い合わせボタンの水色 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary-accessible` | `#217FA5` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#0B7FAA` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#0D80A4` | AA を満たす補正値（計算） |  | 計算 |

- 地は白。カード面だけをライトグレーにする
- 水色はブランド色。カード見出し、縦書き欧文、会社概要の背景に使う
- FV だけは淡いシアンから濃い青へのグラデーションにする
- 大見出しは黒、本文はダークグレーにする
- 水色の背景の上では文字と線を白にする
- ページ末尾は黒のフッターにし、ロゴを水色で置く
- `hero-gradient` は文字 `#FEFFFF` × 背景 `#2AA3D4` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#217FA5`、4.51:1）を使う。
- `info-table` は文字 `#FEFFFF` × 背景 `#6ED2F6` のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0B7FAA`、4.53:1）を使う。
- `button-primary` は文字 `#FFFFFF` × 背景 `#6CD3F3` のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#0D80A4`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の英語キャッチ | 欧文サンセリフ | Inter | 700 | 30px | 1.15 | 0.0em |
| `headline-lg` | セクションの大きな欧文見出し | 欧文サンセリフ | Inter | 700 | 36px | 1.1 | -0.01em |
| `headline-md` | 日本語のリード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em |
| `headline-sm` | カードの見出し（水色） | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.03em |
| `note` | 見出しの下の日本語ラベルと英語の補足 | ゴシック | Noto Sans JP | 500 | 9px | 1.4 | 0.02em |
| `accent` | 縦書きの欧文見出し | 欧文サンセリフ | Inter | 700 | 34px | 1.0 | 0.0em |

- セクション見出しは大きな英単語にし、下に「— 日本語」の小さなラベルを付ける
- About と Message の見出しは 90 度回転させた縦書きにする
- 日本語のリード見出しは太字で 4 行ほどに改行する
- 本文は小さめで行間を広く取る
- カードの見出しは水色の太字にし、下に小さな英語の補足を付ける
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC の事業カードは写真を左、文章を右に置く
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 左右の余白は約 14px にする
- About の本文は左に縦書き見出しを置き、右に寄せる
- 事業カードは縦に積み、カード間を約 24px 空ける
- 写真は画面の右端まではみ出させてもよい
- 会社概要は 2 列の表にし、横線で区切る

## Elevation & Depth

- 影は使わず、色面の違いで階層を表す
- カードは影なしのライトグレー面にする

## Shapes

- **角丸**: 小 8px ／ 中 14px ／ 大 32px。ボタンはピル型。
- **写真の切り抜き**: カード写真は上の角を丸める。About の写真は左側だけ大きく丸めた半ピル型にする
- **セクション境界**: 大きな円弧（ドーム型）でセクションを切り替える
- セクションの境目は直線ではなく大きな円弧にする
- カードの角丸は約 14px
- メッセージカードの角丸は大きく 30px 前後
- ボタンはピル型

## Components

- **グラデーションの FV**（`hero-gradient`）: シアンから青へのグラデーションに、ロゴ文字を半透明で大きく敷く。英語キャッチと日本語の補足、縦書きの Scroll 表示を置く
- **欧文の大見出しと和文ラベル**（`section-title`）: 大きな黒の英単語の下に、「— 日本語」の小さなラベルを付ける
- **縦書きの欧文見出し**（`vertical-label`）: 水色または白の英単語を 90 度回転させ、本文や写真の横に置く
- **事業カード**（`service-card`）: 上に写真、下にライトグレーの面。水色の見出し、英語の補足、本文の順に並べる
- **3 つの円の図**（`venn-diagram`）: 半透明の水色とシアンの円を 3 つ重ね、細い黒線の三角形で囲む
- **会社概要の表**（`info-table`）: 水色の地の上に白文字で 2 列の表を作り、白い細線で区切る
- **代表メッセージのカード**（`message-card`）: 大きな角丸の白いカード。人物写真に縦書きの白い見出しを重ね、本文を続け、最後に署名を右寄せで置く
- **写真のリンクバナー**（`photo-banner`）: オフィス写真を暗くし、中央に白い欧文の大見出しを重ねる
- **問い合わせボタン**（`button-primary`）: 水色のピル型ボタンに白文字と矢印を入れる。PC の黒地のフッターに置く
- **黒のフッター**（`footer-dark`）: 白い欧文の見出し、水色のロゴ、ポリシーへのリンク、グレーのコピーライトを置く

## Do's and Don'ts

**Do**
- セクションの境目は大きな円弧にする
- 見出しは大きな欧文と小さな和文ラベルの組み合わせにする
- 余白を広く取り、要素を少なくする
- 水色は見出しと背景面に絞って使う
- 写真は青みのあるテック系のものにする

**Don't**
- 暖色や原色の赤をアクセントに使わない
- カードに影や太い枠線を付けない
- 本文を大きくしたり詰め込んだりしない
- 手書き風や丸ゴシックの書体を使わない
- 直線だけの単調な区切りにしない

## Page Structure

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

1. **ファーストビュー**（企業の使命を英語のキャッチで伝える）: 水色から青へのグラデーションに、ロゴ文字を半透明で敷き、白文字のキャッチを重ねる。下端は円弧にする
2. **会社について**（理念と事業領域を簡潔に伝える）: 縦書きの水色の欧文見出しの横に、太字のリード見出しと本文を置く。下に半ピル型の写真を配置する
3. **事業内容**（3 つの事業を紹介する）: 大きな欧文見出しとリード文の後に、写真付きのライトグレーのカードを 3 枚並べる
4. **特徴**（一気通貫の強みを示す）: 太字のリード見出しと実績の文に、3 つの円を重ねた図を添える
5. **会社概要**（基本情報を示して信頼につなげる）: ドーム型の水色の背景の上に、白文字の 2 列の表を置く
6. **代表メッセージ**（代表の人柄と考え方を伝える）: 角丸の写真に縦書きの見出しを重ね、長めの本文を続け、署名を右寄せで置く
7. **採用への導線**（採用ページへ誘導する）: 暗くしたオフィス写真の全幅バナーに、白い大見出しを重ねる
8. **問い合わせとフッター**（問い合わせへ誘導し、ページを締める）: 黒地に白の見出し、水色のロゴとピル型ボタン、サイトマップを置く

## Imagery

- ビジネスの写真に、青いデジタル UI やホログラムを合成したテック系のイメージを使う
- 明るく清潔なオフィスで、白い家具と観葉植物が写った写真を使う
- 人物は白い T シャツなどのカジュアルな服で、自然な笑顔のものにする
- ロゴ文字を半透明で大きく敷き、背景の装飾にする
- 図は半透明の円と細い線だけで描くフラットな表現にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーにナビと黒のピル型の問い合わせボタンを置く
- PC の事業カードは写真を左、文章を右の横並びにする
- PC の特徴セクションは文章と図を左右に並べる
- PC のメッセージは水色の背景の上に白いカードを浮かせる
- PC のフッターは多列のサイトマップに広げる
- コンテンツ幅は 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-8dc00f11`（元 LP の URL から採番）
- **元 LP**: https://nanoc-inc.co.jp/
- **解析に使った画像**: 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/）からご連絡ください。