DESIGN.md — 深紅×青空の都市型同窓会コミュニティ LP（Crimson Skyline Alumni Community LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 力強い・インパクト、清潔・爽やか、シンプル・ミニマル、信頼・誠実
• キーワード: 深紅・青空・斜めカット・アウトライン英字・人物カード・都市
• 地の質感: フラットな単色の面と、彩度の高い空・街の写真の組み合わせ。影はほとんど使わず、白いオフセット枠で立体感を出す。
• 形: 四角を基本とし、セクション境界を斜めに切る。ボタンは四角い枠線ボタンとピル型を併用する。
• 温度感: 深紅の温かみと空色の涼しさが対比する、やや明るめの中間温度。

Colors

• 地は深紅と白の 2 色をセクションごとに交互に使う
• FV と終盤 CTA の背景には青空の都市写真を使い、深紅との補色対比をつくる
• 白地の上では見出し・本文・線をすべて深紅にする
• 深紅地の上では文字・線・枠をすべて白にする
• 黄色などの多色はイラストバナーの中だけに使う
• ボタンは深紅地なら白枠、写真上なら白地に深紅文字にする

Typography

• 見出しは英語にし、日本語は補足ラベルや本文に回す
• セクション名は塗りなしのアウトライン文字で大きく置く
• 小見出しとボタンは大文字の太字にする
• 本文は細字で行間を広めにとる
• フッター見出しは字間を広めの小さな大文字にする
• 人名は姓と名を 2 行に分けて詰め気味に組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メンバーは 1 列、イベントは横スクロールカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 8px（375px 幅換算）
• 左右余白は約 16〜20px
• メンバーカードは左寄せで、幅は画面の約 45%
• イベント履歴は横にはみ出すカルーセルにする
• 見出しの右に小さな日本語の枠ラベルを並べる
• セクション間は斜めの境界で切り替える

Elevation & Depth

• イベントカードにだけ薄い影（0 1px 4px rgba(0,0,0,.15)）をつける
• 人物写真の右下に白い板を 6px ずらして重ね、紙を重ねたように見せる
• 深紅地の上では影を使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は正方形に近い矩形、イベントは横長サムネイル
• セクション境界: 右上がり・右下がりの斜めカット
• 主ボタンは角丸なしの矩形にする
• バナー下のリンクボタンだけピル型にする
• ナビバーは白のピル型カプセルにする
• 役職ラベルは写真の左下に重ねた角丸なしの深紅帯にする

Components

• カプセル型ナビ（nav-pill）: 上部に浮かぶ白のピル型バー。ロゴと英字メニューを深紅で並べる
• アウトライン英字見出し（outline-display）: 線だけの巨大な英単語見出し。右に日本語の小さな枠ラベルを置く
• 行動指針の帯（guideline-band）: 写真の上に深紅の帯を段違いに重ね、白い英文を載せる
• イベント履歴カード（event-card）: 横長サムネイルの左上に深紅の日付バッジを置き、下に 2 行の説明文を入れる
• メンバー写真カード（member-card）: 白いオフセット枠付きの写真に役職帯を重ね、下に大文字の名前・在籍年・SNS の丸アイコンを置く
• 白枠ボタン（button-outline）: 深紅地の上の、白い 1px 枠の矩形ボタン。大文字のラベルを入れる
• 白地の主 CTA（button-primary）: 写真と深紅の境目にまたがって置く大きな白い矩形ボタン。文字は深紅
• ピル型リンクボタン（button-pill）: バナー下端に半分重ねる深紅のピル型ボタン
• パートナーロゴ枠（partner-box）: 白い細線の枠に白ロゴを入れ、横に並べる

Do's and Don'ts

Do - 深紅と白の面を斜めカットで交互に切り替える - セクション名は大きなアウトライン英字で見せる - 人物写真には白のオフセット枠と役職帯を必ずつける - 空と街の写真は彩度を高く、明るく使う - ボタンは大文字の英字ラベルにする

Don't - 深紅以外のブランド色を見出しやボタンに使わない - セクション境界を水平線やウェーブにしない - 強い影やグラデーションのボタンを使わない - メンバー写真を丸く切り抜かない - 本文を太字や大きな文字にしない

Page Structure

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

1. ファーストビュー（団体の所在地と理念を伝える）: 青空の都市写真を全面に敷く。左にストライプ枠のロゴ、右に深紅帯の行動指針を置き、下端を斜めにカットする
2. 活動履歴（過去のイベント実績を見せる）: 白地に深紅の英字見出しを置き、日付バッジ付きカードを横スクロールで並べる
3. 外部ページ誘導（SNS のイベントページへ誘導する）: 深紅の枠に多色イラストのバナーを入れ、下端にピル型ボタンを重ねる
4. メンバー紹介（運営メンバーの顔を見せて親しみを出す）: 深紅地にアウトラインの見出しを置き、オフセット枠の写真カードを縦に並べる
5. 参加 CTA（入会を促す）: メンバー一覧の下に白枠の矩形ボタンを中央に置く
6. メッセージ（団体の趣旨を伝える）: 白地に深紅のアウトライン見出しを置き、細字の深紅本文を段落で並べる
7. イベント CTA（最新イベントへ誘導する）: 都市写真の上に深紅のアウトライン大英字を重ね、深紅地との境目に白いボタンを置く
8. フッター（提携先と著作権を示す）: 深紅地に白線のパートナー枠、白ロゴ、コピーライトを置く

Imagery

• 高層ビル街と青空を見下ろした、明るい晴天の都市パノラマ写真
• メンバーは懇親会や旅行先で撮った笑顔の自然なスナップ
• イベントサムネイルは人物の顔写真と大きな日本語タイトルを組み合わせたバナー
• 多国籍の子どもと都市のランドマークを描いたフラットなイラスト
• ロゴは白と深紅の斜めストライプで縁取った正方形のスタンプ風
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はナビメニューを全項目横に並べる
• PC はメンバーカードを 4 列のグリッドにする
• PC はイベントカードを 4 枚まで横に並べて表示する
• PC はコンテンツ幅を約 70% に収めて中央に寄せる
• 斜めカットの角度は PC でも同じにし、面積だけを広げる

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