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

• 地は白〜淡水色を基本とし、セクション間を水色グラデでつなぐ。
• 濃い青は面積を絞り、業種タグ群などの情報ブロックに使う。
• 鮮やかなスカイブルーは採用など気持ちを高める帯に限定。
• 暖色はヘッダーの採用ボタンのみの一点使い。
• フッターと問い合わせはチャコールで締め、白文字と水色見出しで構成。
• 白い半透明リボンを青面の上に重ねて流れを出す。
• 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

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

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

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