DESIGN.md — 海色シアン×明朝の地域連携プロジェクトLP（Inland Sea Cyan Serif Regional Project LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 清潔・爽やか、上品・高級、シンプル・ミニマル、ナチュラル
• キーワード: 海・シアン・欧文セリフ・余白・角丸写真・二重罫線
• 地の質感: フラットな単色面と高彩度の風景写真。影はほぼ使わない
• 形: 大きめ角丸の写真と直角のシアン面、細い二重罫線の額縁
• 温度感: 明るく涼しい。黄色の差し色でわずかに温かみを足す

Colors

• 白地を主にし、理念と問い合わせのブロックだけシアンで全面を塗る
• シアン面の上の文字・罫線はすべて白にする
• 黄色は主ボタンと地図の強調だけに使う差し色にする
• 見出しの欧文は、白地ならシアン、シアン地なら白にする
• 本文は濃いグレーの一色で、色のバリエーションは増やさない
• framed-card は文字 #FFFFFF × 背景 #05C2DE のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#038193、4.6:1）を使う。
• contact-block は文字 #FFFFFF × 背景 #05C2DE のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#038193、4.6:1）を使う。
• illustrated-map は文字 #FFFFFF × 背景 #05C2DE のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#038193、4.6:1）を使う。

Typography

• 全体を明朝と欧文セリフで揃え、ゴシックは使わない
• 欧文の大見出しの直下に、小さな和文サブタイトルを中央揃えで置く
• 本文は短く改行して中央揃えにし、行間は広めの2.0
• メインビジュアルの欧文は1文字ずつ画面幅いっぱいに均等に配置する
• 太字は避け、細めの書体で上品に見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。リンク欄だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• シアンのブロックは左右に約16pxの余白を残して置く
• 写真コラージュは左右に互い違いに配置し、大きさにも差をつける
• 問い合わせブロックは写真の下半分にシアン面が重なるように置く
• 本文ブロックは60%程度の幅で中央に寄せる

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真とシアン面の重なりだけで出す
• 二重の白罫線で額縁のような立体感を出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 大きめ角丸の長方形。メインビジュアルとリンク背景は角丸なしの全幅
• セクション境界: 直線で区切る。写真とシアン面を重ねて境界を作る
• シアン面は角丸なしの直角にする
• 写真は角丸20px前後で統一する
• ボタンはピル型
• 枠は白の細い二重罫線

Components

• 全面写真スライダー（hero-slider）: 全幅の風景写真の上下に、字間を大きく取った欧文を白で重ねる。下にドット型のインジケーター
• 欧文＋和文の見出し（section-title）: 大きな欧文セリフの下に、小さな和文の見出しを中央揃えで置く
• 二重罫線の理念カード（framed-card）: シアン地の中に白の二重罫線の枠を置き、下線付きの欧文小見出しと白文字の説明文を入れる
• 角丸写真コラージュ（photo-collage）: 大きさの違う角丸写真3枚を、左右に互い違いにずらして並べる
• 黄色のピル型ボタン（button-primary）: 黄色のピル型。左に文字、右端に黒丸の矢印アイコン
• 問い合わせ帯（contact-block）: 上に重ねた写真の下からシアン面が始まり、白の見出し・一文の説明・黄色ボタンを左揃えで置く
• イラスト地図（illustrated-map）: 海をシアン、陸地をグレーにし、対象地域を黄色のにじみで示す。グレーのピル型ラベルと白い線画の泡・鳥を添える
• 関連リンクバナー（link-banner）: 風景写真の背景の上に、角丸なしの横長バナーを2列のグリッドで並べる

Do's and Don'ts

Do - シアン・白・黄の3色に絞る - 見出しは欧文セリフと和文の小見出しを組にする - 写真は青空と海の明るい風景を選ぶ - 余白を広く取り、本文は中央揃えで短く改行する - 罫線は白の細い線で上品に見せる

Don't - ゴシックの太字で強く訴求しない - 影やグラデーションのボタンを使わない - 黄色を広い面に使わない - 暗く彩度の低い写真を使わない - シアン面に角丸を付けない

Page Structure

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

1. ファーストビュー（地域の景色で世界観を伝える）: 全幅の風景写真のスライダーに、字間を広く取った欧文を上下に配置する
2. プロジェクト紹介（取り組みの趣旨を伝える）: シアンの欧文大見出し、明朝のコピー、中央揃えの短い本文を白地に置く
3. 理念（ビジョン・ミッション・バリュー）（目指す方向を3つの項目で示す）: シアン面の中に二重罫線のカードを3つ縦に積む
4. 写真ギャラリー（地域の魅力を見せる）: 角丸の写真3枚を互い違いに配置したコラージュ
5. 問い合わせ（相談・連携の窓口へ誘導する）: パノラマ写真の下半分にシアン帯を重ね、黄色のピル型ボタンを置く
6. エリアマップ（対象エリアの範囲を示す）: シアン・グレー・黄のイラスト地図に、ピル型の地名ラベルを付ける
7. 関連リンク（関連サービスへ送客する）: 空撮写真の背景の上に白い見出しと2列のバナーグリッドを置く

Imagery

• 快晴の空と海を、高彩度で明るく撮る
• 港町・島の風景・自転車など、人の暮らしと景色を組み合わせる
• パノラマは水平線を中央より下に置き、空を広く取る
• イラストは白い線画の泡・波・鳥を地図の余白に散らす
• 背景の写真は青みを帯びた空撮を使い、上に白文字を載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では理念カード3つを横3列に並べる
• PC では紹介文の左右に角丸写真を散らして配置する
• PC の問い合わせは見出しを左、説明文とボタンを右に置く2カラム
• PC の関連リンクは3列のグリッド
• メインビジュアルは 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 行書くと起動時に読み込まれる。