DESIGN.md — 藍染布×白余白の海鮮小屋飲食 LP（Indigo Seafood Popup Minimal Serif LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、シンプル・ミニマル、和風、ナチュラル
• キーワード: 藍染の布・白余白・明朝体・縦書き・モノクロ表組み・海鮮写真
• 地の質感: 布のしわが残る藍色背景の写真と、ペン画風の貝殻線画。面はフラット。
• 形: 角丸はほぼなし。直線の罫線と四角いラベルが中心。
• 温度感: クールな藍と白の中に、焼き色や貝の暖色を写真で添える

Colors

• 地は白が基本。出店情報だけ薄グレーの地にしてまとまりを分ける
• 藍色はファーストビューとフッター前のバナー写真にだけ使い、ベタ塗りの面にはしない
• 表ヘッダー・ボタン・タグは黒で統一し、モノクロで落ち着かせる
• 色の強調はステータスラベルの深紅と茶だけにする
• 暖色は料理写真に任せ、UI には足さない
• フッターは真っ黒に白文字

Typography

• 欧文の大見出しの下に、日本語の小ラベルを黒い箱か枠囲みで添える
• 見出しは明朝、本文はゴシックで細めにし、行間を約 2.2 と広く取る
• コンセプトコピーは文字サイズを変えた縦書きでリズムを出す
• 背景に薄いグレーの巨大な欧文を透かしで敷く
• 太字は使いすぎず、上品な細さを保つ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 2 カラムの交互配置
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 100px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は画面端まで寄せたり、左右にずらして重ねたりして非対称に置く
• コンセプト部分は上下に 150px 以上の余白を取る
• 本文ブロックは左右 6〜8% の余白
• 表は地域ごとに、罫線の中見出しで区切る
• ニュースは日付・タグ・タイトルを細線で区切ったリストにする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の重なりとずらし配置で出す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。画面端で切って、左右にずらして重ねる
• セクション境界: 直線の切り替え。地色の変化で区切る
• ラベルは右端を矢印状にした四角形
• 斜めに傾けた黒い吹き出しラベルを見出しの上に置く
• もっと見るは下線付きのテキストリンクにし、右端に小さな黒いピル型の矢印を付ける

Components

• 開催状況ラベル（status-label）: 右端が矢印形の小さなラベル。状況に応じて深紅か茶にする
• 表内の詳細ボタン（button-detail）: 黒い小さな四角ボタン
• 出店スケジュール表（schedule-table）: 黒ヘッダーで、白いセルを罫線で区切る 5 列の表
• もっと見るリンク（link-more）: 欧文セリフのテキストに下線を引き、右端に黒いピル型の矢印を付ける
• 斜めの吹き出しラベル（tilted-tag）: 黒地に白の明朝文字。少し傾けて欧文見出しの上に置く
• 帯見出し（bar-heading）: 幅いっぱいのチャコール帯に白い明朝文字
• ニュース行（news-item）: 日付の横に黒い小タグを置き、下にタイトル。行は細線で区切る
• 罫線中見出し（line-heading）: 左右に細い横線を引き、中央に明朝の見出しを置く

Do's and Don'ts

Do - 白い余白をたっぷり取り、明朝体で静かな上質感を出す - 鮮やかな色は料理写真に任せ、UI はモノクロにする - 写真はずらして重ね、雑誌のようなレイアウトにする - 藍色の布の写真で始め、同じ写真のバナーで締める

Don't - ポップな丸ゴシックや原色のボタンを使わない - 影やグラデーションの装飾ボタンを使わない - ステータス以外に赤を使わない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（世界観とブランドの印象づけ）: 藍色の布に貝殻を周囲に並べた全面写真。中央に手書き風ロゴと明朝の短いコピー
2. 出店情報（開催中の店舗と期間を示す）: 薄グレーの地。斜めラベルと欧文見出しを置き、地域別の黒ヘッダー表を並べる
3. お知らせ（最新情報の告知）: 欧文見出しの左に黒い縦線。日付とタグのリストを並べ、もっと見るリンクを付ける
4. コンセプト（ブランドの思想を伝える）: 大きな余白の中に縦書きの明朝コピーを置き、手描きの波線を添える
5. 写真ギャラリー（体験の空気感を伝える）: 手元のアップと海辺の写真を左右にずらして重ねる
6. ブランド紹介（特徴と食材の産地を説明）: 貝殻の線画、欧文見出し、黒ラベル、行間の広い本文、全幅の料理写真
7. システム・メニュー（料金・メニュー・支払い方法の案内）: 背景に巨大な欧文の透かし。料理写真の下に、チャコール帯見出しと短い本文を並べる
8. 締めバナー・フッター（ブランドの想起とナビゲーション）: 藍色の布の写真にロゴを置き、その下に黒フッターでナビ、規約リンク、SNS を並べる

Imagery

• 藍染風の布に、牡蠣やホタテなどの貝殻を真上から並べたフラットレイの写真
• 大皿に盛った海鮮を俯瞰で撮った、暖色で鮮やかな写真
• 軍手で焼き牡蠣を持つ手元のクローズアップ（背景はぼかす）
• 海辺で網焼きをする夕方の自然光の写真
• 細いペン画風の貝殻イラストと、手描きの波線
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真と本文を左右 2 カラムで交互に、非対称に置く
• PC のニュースは左に見出しともっと見る、右にリストの 2 カラム
• 表は PC で横に広げ、セル内の改行をなくす
• システム・メニューは PC で左に写真、右に帯見出しと本文
• フッターのナビは PC で横 1 列に並べる

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