DESIGN.md — 和紙グレーと彩雲線画の老舗そば店 LP（Ink Wash Japanese Noodle Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル
• キーワード: 和紙テクスチャ・縦書き明朝・線画の彩雲・水墨の山並み・湯気の写真・菱形
• 地の質感: 細かな粒子がある和紙風のグレー地。遠景に墨のぼかしで描いた山並みを重ねる。
• 形: 角丸なしの直線。白い短冊、菱形の写真グリッド、四隅で線がはみ出す枠付きボタン。
• 温度感: 低彩度で落ち着いた寒色寄り。差し色の黄色が温かみを足す。

Colors

• 地は和紙グレー一色。セクションは色ではなく余白と山並みで区切る。
• 差し色の黄・青緑・マゼンタは線画の雲だけに使い、文字やボタンには使わない。
• 文字は墨色。白は短冊・カード・ボタンの面に限る。
• ヘッダーと動画の帯は黒に近い墨色で引き締める。
• タグは墨グレーの面に白文字の小さな矩形にする。
• 写真は彩度を落とすか、モノクロにする。

Typography

• 見出しも本文も明朝で統一する。ゴシックは表の情報とタグだけに使う。
• コンセプトやメニュー名は縦書きにし、右から読ませる。
• 字間を広め（0.1em 以上）に取り、余白で品を出す。
• 本文の行間は 2 倍以上にする。
• 太字はほぼ使わない。強調はサイズと余白で行う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に段差をつけて配置する。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は全幅、左寄せ、右寄せを交互に置いてリズムを作る。
• 縦書きのコピーは右寄せにする。
• メニューは白い縦長の短冊を横に並べる。画面からはみ出してもよい。
• 店舗一覧はアコーディオンにし、開くと白い面に表と地図を出す。
• 各セクションの終わりに枠付きボタンを中央付近に置く。

Elevation & Depth

• 影は使わずフラットにする。
• 白いお知らせカードは、左下の角だけ折り返した紙のような表現にする。
• 奥行きは雲の線画と山並みを重ねて出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形のほか、菱形に切り抜いた写真を斜めのグリッドに並べる。
• セクション境界: 水墨のぼかしで描いた山並みのシルエット。直線では区切らない。
• 角丸は一切使わない。
• ボタンは白い矩形にし、細線の枠を上下左右に少しはみ出させて交差させる。
• 開閉アイコンは菱形の中に＋／−を入れる。
• 菱形は墨・抹茶・藍の単色ブロックを写真に混ぜる。

Components

• 交差線の枠付きボタン（button-frame）: 白い矩形に細線を四隅で交差させ、右側に短い横線を添える。
• 縦書き短冊コピー（hero-vertical-copy）: 黒い縦帯に白い明朝を縦書きで入れ、数列並べて写真に重ねる。
• メニュー短冊（menu-tanzaku）: 白い縦長の短冊に料理名を縦書きで入れ、等間隔で並べる。
• 店舗アコーディオン（store-accordion）: 店舗名と菱形の＋アイコンを並べ、下線で区切る。開くと白い面に表と地図を出す。
• 店舗タグ（tag-label）: 墨グレーの小さな矩形に白い太字ゴシックを入れる。
• お知らせカード（news-card）: 白い大きなカードに日付・タイトル・タグを並べ、横線で区切る。角を一つ折り返す。
• 菱形フォトグリッド（diamond-gallery）: 菱形に切り抜いた写真と単色の菱形、ロゴの菱形を斜めに組んで並べる。
• 黒帯ヘッダー（header-bar）: 黒い帯の左にロゴ、右にテキストリンクと菱形のメニューボタンを置く。

Do's and Don'ts

Do - 和紙の粒子テクスチャと山並みを全体に敷く。 - 線画の雲を、セクションの境目の左右の端にはみ出させて置く。 - 見出しとメニューは明朝の縦書きにする。 - 写真はモノクロか低彩度で、湯気や手元を写す。 - 余白をたっぷり取り、情報は少なめに見せる。

Don't - 角丸やピル型のボタンを使わない。 - 差し色を文字やボタンの面に塗らない。 - ドロップシャドウやグラデーションのボタンを使わない。 - 太いゴシックで見出しを作らない。 - 白一色のフラットな背景にしない。

Page Structure

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

1. ファーストビュー（店の空気感を一目で伝える。）: 湯気の立つ鍋の暗い全幅写真に、縦書きの白抜きコピーを左下に並べ、四隅に雲の線画を置く。
2. ヘッダー（ナビゲーション。）: 黒い帯にロゴと菱形のメニューボタンを置く。
3. コンセプト（店の想いと歴史の長さを語る。）: 右寄せの縦書き大見出しと、明朝の本文を数段落置き、最後に枠付きボタンを付ける。
4. こだわり写真（職人の手仕事を見せる。）: 全幅、左寄せ、右寄せの写真を段差をつけて重ね、雲を添える。
5. 歴史（老舗としての信頼を示す。）: 横書きの明朝見出しと本文、ボタン、モノクロの古写真を置き、濃いグレーの帯を重ねる。
6. 動画帯（シズル感を出す。）: 暗い全幅の写真か動画で、セクションの間を区切る。
7. メニュー（定番の品を紹介する。）: 中央に見出しと補足文を置き、白い短冊の縦書きメニューを横に並べ、もっと見るボタンを付ける。
8. ギャラリー（料理と店内の雰囲気を伝える。）: 菱形の写真と色ブロックを斜めのグリッドで組む。
9. 店舗一覧（アクセス情報を伝える。）: アコーディオンで店舗を並べ、開いた店舗には表と地図を出し、下にボタンを 2 つ置く。
10. お知らせ（最新情報を伝える。）: 角を折った白いカードに日付・タイトル・タグを 3 件載せる。
11. フッター（サイト内の回遊と会社情報。）: 山並みと雲の上にロゴを中央に置き、縦書きのリンクを 2 段に並べ、その下に会社の住所を入れる。

Imagery

• 写真は暗めの露出で撮り、湯気・麺・職人の手元をクローズアップする。
• 店内写真はモノクロにするか、彩度を落とす。
• 装飾は細い線を重ねた雲形の線画。山吹・青緑・マゼンタを半透明で重ねる。
• 背景には水墨のぼかしで描いた山並みを、薄いグレーで何層か重ねる。
• ロゴは菱形の白抜きマーク。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真を左右非対称に大きく配置し、余白を広めにとる。
• PC のヘッダーは横並びのテキストナビにする。
• PC ではメニュー短冊を 8 本程度、1 行に収め、見出しは右に縦書きで置く。
• PC ではお知らせを横 1 行（日付・タイトル・タグ）のリストにする。
• PC では店舗のボタン 2 つを横に並べる。
• 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 行書くと起動時に読み込まれる。