DESIGN.md — 濃紺×金の航海モチーフ周年記念 LP（Midnight Navy Voyage Anniversary Timeline LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、信頼・誠実、上品・高級
• キーワード: 夜の海・航海・光の軌跡・縦タイムライン・周年記念・グラデーション文字
• 地の質感: 濃紺の単色地に、星空・夜の海の写真カードと、金色に光る細い線のエフェクトを重ねる。
• 形: 角丸 12px 程度の細枠カードと、縦線上の丸い節点。ボタンはピル型。
• 温度感: 寒色の濃紺が主体で、金と黄の暖色を少量だけ灯りのように差す。

Colors

• 地はすべて濃紺 #000441 系にする。白や明るい色の地のセクションは作らない。
• 強調は金黄色と水色の 2 色だけにする。年号は金黄色、日付とラベルは水色にする。
• キービジュアルの英字見出しや強調語には、水色→黄緑→黄のグラデーション文字を使う。
• カードは地より少し明るい紺の面にして、細い青紺の枠線で区切る。
• 本文は純白にせず、淡いグレー青にして眩しさを抑える。
• CTA だけをグラデーションの塗りボタンにして目立たせる。

Typography

• 年号は欧文の太字にして、日本語タイトルとは縦線で区切って横に並べる。
• 時代区分の見出しは、薄い大きな年号の透かしの下に白い日本語を置き、短いグラデーションの下線を添える。
• 小ラベルは字間を広げた小さい文字で、水色または金色にする。
• 本文は 12px 前後・行間 1.9 で、ゆったり読ませる。
• 英字キャッチは字間を広めにとり、一部の語だけ色を変える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左端に縦のタイムライン線を通し、その右にカードを並べる。
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• タイムラインの線は左から約 28px の位置に置き、各カードの上端に丸い節点を合わせる。
• カード同士の間隔は 40〜56px にする。
• 時代区分の見出しは中央揃え、その他の本文は左揃えにする。
• メッセージ系のセクションは人物写真を背景に敷き、暗いオーバーレイの上に文字を載せる。
• 最後の CTA は角丸の枠ボックスに入れ、中身を中央揃えにする。

Elevation & Depth

• カードに影はほぼ付けず、細い枠線と面の明度差で浮かせる。
• CTA ボタンには、グラデーション色のやわらかい光彩（グロー）を付ける。
• 写真カードの中に、金色の光の筋や粒子で奥行きを出す。
• 古い紙の資料風の画像には、軽いドロップシャドウとテープ留めの演出を付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: カード全面に写真を敷くか、白枠付きの角丸 8px の写真をカード内に入れる。
• セクション境界: 直線で区切る。区切り目は背景色のわずかな変化と細い横線だけで示す。
• ラベル・バッジは細枠のピル型にする。
• タイムラインの節点は直径 18px の円にする。主要な出来事は塗りの黄、小さな出来事は水色の枠線のみにする。
• カードの角は 12px で揃える。
• 斜めの区切りや波形の区切りは使わない。

Components

• グラデーションCTA（button-primary）: 水色から黄へのグラデーションで塗ったピル型ボタン。文字は濃紺で、右に矢印を付ける。光彩を伴う。
• 年表カード（timeline-card）: 夜の海の写真を背景に敷いた横長カード。小ラベル・年号・タイトル・2〜3 行の説明を左寄せで載せる。
• 写真付き年表カード（timeline-photo-card）: 上に白枠の写真、下に水色の日付・白い太字タイトル・説明文を置くカード。
• タイムライン節点（timeline-node）: 左の水色の縦線上に置く円。主要な出来事は黄の塗り、小さな出来事は水色の枠線のみにする。
• 時代区分見出し（era-heading）: 暗い大きな年号の透かしに白い日本語見出しを重ね、その下に短いグラデーションの下線を引く。
• 枠線ラベル（badge-outline）: 細い水色または金色の枠を持つピル型の小ラベル。セクション名を表示する。
• 外部記事リンクカード（link-card）: 細枠のカード。左に白い小バッジ、中央に記事タイトル、右に水色の矢印を置く。
• 署名ブロック（signature）: 左に水色の縦線を引き、太字の氏名と小さな役職名を置く。

Do's and Don'ts

Do - 地は一貫して濃紺にし、夜の航海の世界観を保つ。 - 年号は金黄色の欧文太字で統一する。 - 写真には暖色の光と星空のレタッチを加え、ドラマチックにする。 - タイムラインの縦線と節点で、時間の流れを途切れさせずに見せる。 - グラデーションは英字キャッチと CTA と下線だけに限定する。

Don't - 白地や明るい背景のセクションを挟まない。 - 赤やオレンジなど、他のビビッドな色を足さない。 - カードに強い影や太い枠線を付けない。 - 本文を純白の太字にしない。 - 丸ゴシックや手書き風フォントを本文に使わない。

Page Structure

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

1. ヘッダー（ロゴとページ内ナビ）: 透過の濃紺地。左にロゴ、右にピル型の小さなナビを並べ、現在地のナビは塗りで示す。
2. ファーストビュー（周年の祝祭感と世界観を伝える）: 夜の海と花火の写真に、大きな周年数字の透かしと羅針盤のモチーフを重ねる。中央に期間を示すピル、グラデーションの英字タイトル、英字サブコピー、SCROLL 表示を置く。
3. 代表メッセージ（トップの想いを伝える）: 人物写真を暗いオーバーレイで背景に敷く。枠線ラベル、一部の語だけグラデーションにした見出し、4 段落の本文、署名、記事リンクカードを置く。
4. 年表・創業期（創業時の物語）: 時代区分見出しの後に、写真を背景に敷いた年表カードを縦線上に 2 枚並べる。
5. 年表・成長期（資金調達やブランド刷新などの歩み）: 年表カードと写真付き年表カードを交互に並べる。主要な出来事は黄、小さな出来事は水色の節点にする。
6. 年表・プラットフォーム期（サービス拡大と最新の到達点）: 製品 UI のモックアップや大きな数字を光のエフェクトと合わせたカードを並べ、最後に周年カードで締める。
7. 次の10年（ビジョン）（未来の方針を宣言する）: 枠線ラベル、グラデーションの英字見出し、白い太字のリードの後に、長めの本文を段落ごとに置く。最後の段落は白の太字にする。
8. 採用CTA（採用サイトへ誘導する）: 角丸の枠ボックス内に、金色の枠線ラベル、見出し、説明 1 行、グラデーションのピル型ボタンを中央揃えで置く。
9. フッター（著作権表示）: 細い区切り線の下に、小さなグレーのコピーライトを置く。

Imagery

• 夜の海・星空・港湾・コンテナ船を、濃紺と金色の光でシネマティックに表現した写真やイラストを使う。
• 画像には、船の航跡や流れ星のような金色の光の曲線を合成する。
• 当時の資料やプレスリリースは、古い紙風のカードにテープ留めし、手書き風の一言を添えてコラージュする。
• オフィスやメンバーの写真は明るい実写のまま白枠で切り抜き、暗い地とのコントラストを出す。
• 製品 UI は、光るデバイスのモックアップとアイコンを組み合わせて見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではタイムラインの線を中央に置き、カードを左右交互に配置する。
• PC の代表メッセージは、左に本文、右に人物写真の 2 カラムにする。
• PC のヘッダーはロゴとナビを横一列に収め、ファーストビューは横長でトラックや船のモチーフを左右に配置する。
• PC でもカード幅は約 300px 相当に抑え、余白で間をとる。
• CTA ボックスは PC で中央に寄せ、幅約 50% にする。

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 行書くと起動時に読み込まれる。