---
version: alpha
name: Ocean Blue Ribbon Corporate Logistics LP
description: 淡い水色から鮮やかな青へのグラデーションに、白く流れるリボン曲線を重ねたコーポレート型 LP。欧文セリフの細い大見出しと明朝の和文で上品さと信頼感を出し、港・人物写真を重なり配置して奥行きを作る。
colors:
  primary: '#1C6FA1'
  secondary: '#4BB9F6'
  background: '#FCFDFF'
  background-alt: '#E7F0F7'
  surface: '#FEFFFE'
  tint-1: '#8BC3F1'
  tint-2: '#3C9ACD'
  accent-1: '#1C6FA1'
  text: '#444545'
  dark-section: '#444444'
  accent-2: '#132A40'
  cta: '#EA3334'
  on-cta: '#FFFFFF'
  on-dark: '#E0E2E3'
  primary-accessible: '#1A6998'
  cta-accessible: '#E81E1F'
  secondary-accessible: '#D3EEFD'
typography:
  display:
    fontFamily: Cormorant Garamond
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.12em
  headline-md:
    fontFamily: Marcellus
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  accent:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.06em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 96px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 48px
  button-pill:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 32px
  header-cta:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 28px
  stat-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.sm}'
    height: 90px
  tag-label:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 22px
  circle-diagram:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 300px
  photo-tile:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 180px
  service-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 56px
  contact-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 80px
---

# DESIGN.md — 海色グラデと白リボンの物流企業 LP（Ocean Blue Ribbon Corporate Logistics LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、上品・高級、クール・先進的
- **キーワード**: 海と空の青・流れるリボン曲線・細い欧文セリフ・写真の重なり・余白多め・企業の誠実さ
- **地の質感**: 白〜水色の柔らかいグラデーションに、半透明の白い帯がうねる。紙面はフラットで影はごく薄い。
- **形**: 角丸は小さめ。写真は四角、ボタンはピル型。円形の図解と曲線の波が有機的なアクセント。
- **温度感**: やや寒色寄り。白と青で清潔で爽やか、フッターのチャコールで締める。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1C6FA1` | ブランドの濃い青（業種ブロック面・ボタン） | 6% | 画素の主要色に補正 |
| `secondary` | `#4BB9F6` | 鮮やかなスカイブルー（採用帯・写真フレーム） | 10% | 画素の実測 |
| `background` | `#FCFDFF` | ページの地（ほぼ白） | 20% | 画素の実測 |
| `background-alt` | `#E7F0F7` | 淡い水色の地 | 10% | 画素の実測 |
| `surface` | `#FEFFFE` | カード・リスト面 | 9% | 画素の実測 |
| `tint-1` | `#8BC3F1` | グラデ中間の水色 | 6% | 画素の実測 |
| `tint-2` | `#3C9ACD` | 業種内の明るい枠面 | 3% | 画素の実測 |
| `accent-1` | `#1C6FA1` | 見出し・数値の青文字 | 1% | 画素の主要色に補正 |
| `text` | `#444545` | 見出し・本文の濃い文字 | 2% | 画素の主要色に補正 |
| `dark-section` | `#444444` | フッター・お問い合わせのチャコール | 9% | 画素の実測 |
| `accent-2` | `#132A40` | 濃紺（写真の作業服・夜帯） | 5% | 画素の主要色に補正 |
| `cta` | `#EA3334` | 採用ヘッダーボタンの赤 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `on-dark` | `#E0E2E3` | 暗色面上の白文字 | 0% | 画素の実測 |
| `primary-accessible` | `#1A6998` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#E81E1F` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#D3EEFD` | AA を満たす補正値（計算） |  | 計算 |

- 地は白〜淡水色を基本とし、セクション間を水色グラデでつなぐ。
- 濃い青は面積を絞り、業種タグ群などの情報ブロックに使う。
- 鮮やかなスカイブルーは採用など気持ちを高める帯に限定。
- 暖色はヘッダーの採用ボタンのみの一点使い。
- フッターと問い合わせはチャコールで締め、白文字と水色見出しで構成。
- 白い半透明リボンを青面の上に重ねて流れを出す。
- `button-pill` は文字 `#E0E2E3` × 背景 `#1C6FA1` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1A6998`、4.59:1）を使う。
- `header-cta` は文字 `#FFFFFF` × 背景 `#EA3334` のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E81E1F`、4.53:1）を使う。
- `circle-diagram` は文字 `#1C6FA1` × 背景 `#4BB9F6` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#D3EEFD`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV・採用の大きな欧文ワード | 欧文セリフ | Cormorant Garamond | 400 | 56px | 1.1 | 0.04em |
| `headline-lg` | FV のメインコピー | 明朝 | Shippori Mincho | 500 | 28px | 1.5 | 0.12em |
| `headline-md` | セクション欧文見出し | 欧文セリフ | Marcellus | 400 | 22px | 1.3 | 0.04em |
| `headline-sm` | 欧文見出し下の和文サブ・リード | 明朝 | Noto Serif JP | 500 | 16px | 1.7 | 0.1em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em |
| `accent` | 数値実績の大きな数字 | 明朝 | Shippori Mincho | 500 | 26px | 1.2 | 0.02em |
| `note` | 注釈・数値の補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em |
| `label-button` | ピルボタン・タグ | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.06em |

- セクション見出しは小さな旗アイコン＋欧文セリフ、その下に和文サブを小さく置く。
- 和文コピーは明朝で字間を広めにとる。
- 本文はゴシックで行間を広く、色は濃いグレー。
- 背景に巨大な欧文ワードを薄く敷き、装飾として使う。
- 数値は大きな明朝、単位は小さく添える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC は 2 カラム（左テキスト・右図／写真）と 3 列・2 列カードを併用
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
- セクション上下は余白を大きくとり、詰めすぎない。
- 写真は枠からはみ出させ、重ねて非対称に配置。
- 数値カードは 3 列グリッドで、イラストを右上に重ねる。
- サービス一覧は白いリストカードを罫線で区切る。
- 会社情報は写真背景の 2×2 タイル。

## Elevation & Depth

- カードは影なしか、ごく薄いぼかし影。
- サービスリストは柔らかい広がった影で浮かせる。
- 円形図解は青のグロー状のぼかしで立体感。
- 写真は影なしで重ねる。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
- **写真の切り抜き**: 四角でトリミングし、ずらして重ねる。円形は図解とボタンのみ。
- **セクション境界**: 白く半透明なリボン状の曲線が波打って境界をまたぐ
- 業種タグは角丸小さめの濃紺ラベル。
- 詳しく見るボタンはピル型で矢印付き。
- 写真上の VIEW MORE は濃いグレーの正円ボタン。
- 円形図解は中心円の周囲に小円を 5 つ配置。

## Components

- **旗アイコン付き欧文見出し**（`section-heading`）: 小さな旗アイコン＋青い欧文セリフ見出し、下に和文サブ。
- **ピル型リンクボタン**（`button-pill`）: 濃い青または白地のピル、右に小さな矢印。
- **ヘッダー強調ボタン**（`header-cta`）: ヘッダー右端に見積の青と採用の赤を並べる。
- **数値実績カード**（`stat-card`）: 白カードにラベル・大きな明朝の数値、右上に青い線画イラストを重ねる。
- **業種タグ**（`tag-label`）: 濃い青ブロック内に濃紺の小ラベルを流し込みで並べる。
- **円形サービス図**（`circle-diagram`）: 中心の青円にロゴ、周囲に番号付き白小円を 5 つ配置。
- **写真タイルリンク**（`photo-tile`）: 暗めの写真に白の欧文大見出し＋和文小見出し。
- **サービスリスト**（`service-list`）: 白いカードに項目を罫線で区切って縦に並べる。
- **お問い合わせ導線**（`contact-box`）: チャコール面の右に白ボックス、青い丸矢印ボタン。

## Do's and Don'ts

**Do**
- 青のグラデーションと白いリボン曲線でセクションを流れるようにつなぐ。
- 見出しは欧文セリフ＋和文明朝で上品にまとめる。
- 人物と現場写真を重ねて奥行きを出す。
- 余白を広くとり、情報は整然とグリッドに置く。
- 数値・業種など事実情報を視覚的に整理して信頼感を出す。

**Don't**
- 暖色や蛍光色を多用しない。
- 太いゴシックの極太見出しで押しつけない。
- 角丸の大きなポップなカードにしない。
- 強い影や立体ボタンを使わない。
- 写真をイラストに置き換えて軽くしない。

## Page Structure

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

1. **ファーストビュー**（企業の姿勢と人の存在を伝える）: 白地に左上へ明朝コピー、右に社員写真と現場写真を重ね、背景に白リボン。
2. **企業紹介**（歴史と提供価値の説明）: 水色グラデ全面に巨大欧文と年号、中央寄せ白文字、下部に港の風景写真。
3. **取引先ロゴ**（実績による信頼付与）: 白地にロゴを 2 段で横スクロール風に並べる。
4. **数字で見る実績**（規模を定量的に示す）: 分野別小見出しの下に 3 列の数値カード、線画イラスト付き。
5. **サービス一覧**（事業領域の提示）: 左に見出し、右に白い影付きリストカード。
6. **特長**（一貫対応の強みを示す）: 左テキスト＋ピルボタン、右に円形図解。背景に薄い巨大欧文。
7. **対応事例**（扱える範囲の幅を示す）: 濃い青ブロック内にタグを流し込み、内側に明るい枠で事例タグ。
8. **会社情報**（詳細ページへの導線）: 暗めの写真タイルを 2×2 で配置。
9. **採用**（人材募集への誘導）: スカイブルー面に巨大欧文、写真を散らし、下にループ欧文の帯と集合写真。
10. **新着情報**（更新情報の提示）: 左見出し、右に罫線区切りのリストと丸矢印。
11. **お問い合わせ・フッター**（問い合わせ獲得とサイト導線）: チャコール面に電話情報と白ボックス、下に明朝コピーとサイトマップ。

## Imagery

- 港・コンテナ・船など現場を青空の下で明るく撮る。
- 社員はスーツや作業服で、自然な笑顔か遠くを見る姿。
- 集合写真はローアングルで空を背景に力強く。
- 数値用イラストは青系の単色フラット線画。
- 白い半透明リボン曲線を装飾として繰り返す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SP は 2 カラムを縦積みにし、テキストを先に置く。
- 数値カードは SP で 1〜2 列にする。
- 会社情報タイルは SP で 1 列。
- 巨大欧文は SP で 48〜56px に縮小し、はみ出しを許容。
- ヘッダーはハンバーガーメニューにし、強調ボタンは下部固定も検討。

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