DESIGN.md — 白黒基調×グリッチ色帯のアート施設 LP（Monochrome Gallery Grid with Glitch Color Streaks）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: シンプル・ミニマル、クール・先進的、上品・高級
• キーワード: 白黒モノトーン・細罫線・グリッチ色帯・縦書きキャッチ・ギャラリー型カード・枠線ピル
• 地の質感: フラットで影なし。色はすべてビジュアル（色帯・作品画像）が担う
• 形: 画像は角丸なしの長方形。ボタンとタグは細い黒線の角丸かピル
• 温度感: クールで知的。色帯の部分だけ鮮やか

Colors

• 地は白、文字・罫線・ボタンの線は黒に限る
• 鮮やかな色は FV と紹介文の背景の色帯と、作品画像だけに使う
• UI 部品に色は付けない。強調は黒の塗りと白文字の反転で表す
• フッターだけ黒地に白文字とし、ページの終わりをはっきりさせる
• カード画像の外側に色の付いた背景を敷かない

Typography

• セクション見出しは英字の細い大文字 1 語にし、装飾は付けない
• キャッチは縦書きにし、欧文の縦組みを添える
• 本文は小さめの文字に広い行間をとり、余白を活かす
• 日付は数字をピリオドで区切った形式にし、タイトルの下に置く
• ステートメントは中央に寄せた左揃えにし、要所の語だけ太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード一覧を 2〜3 カラムにする
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 90px、基本単位 8px、カード内 0px（375px 幅換算）
• セクションの間には全幅の細い黒線を引く
• 見出しは左、more ボタンは右に置き、同じ行に並べる
• カードは画像（16:9 前後）→タイトル＋矢印丸アイコン→日付→タグの順に並べる
• カードどうしの間隔は約 60px とる
• ニュースは上下の罫線で区切るリストにする

Elevation & Depth

• 影は一切使わない
• 階層は罫線と余白、黒塗りの反転だけで表す

Shapes

• 角丸: 小 3px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形を全幅で切り抜く
• セクション境界: 全幅の 1px 黒線
• ボタンは黒の 1px 線で囲んだ白地のピル型にする
• タグは小さい角丸の線囲みにする
• 矢印のアイコンは線の丸で囲む
• カレンダーの日付は角丸なしの線囲みの四角にする

Components

• 枠線のピルボタン（button-outline-pill）: 白地に黒の 1px 線を引いたピル型のボタン。外部リンクには斜めの矢印を付ける
• 英字見出しと more（section-header）: 左に英字のセクション名、右に more のピルボタンを置く
• イベントカード（event-card）: 全幅の画像の下にタイトル・日付・タグを並べ、右端に丸い矢印アイコンを置く
• タグ（tag-chip）: 小さな文字を線で囲んだ角丸のタグ。横に複数並べる
• ニュースの行（news-row）: 上下の罫線で区切った行に、タイトル・日付・タグを並べる
• 日付の横スライダー（calendar-strip）: 線囲みの日付ボックスを横に並べ、選択中の日だけ黒塗りに白文字にする。左右に矢印を置く
• グリッチ色帯の FV（glitch-hero）: 白地の中央に縦書きのキャッチを置き、左右と下にピクセル状に伸びた色帯を敷く
• 黒いフッター（footer-dark）: 黒地に白文字でロゴ・リンク・SNS アイコンを並べ、白線のピルボタンを置く

Do's and Don'ts

Do - 余白を大きく取り、白と黒の静けさを保つ - 色は作品画像と色帯に任せる - ボタンとタグは線囲みに統一する - セクションは全幅の細い罫線で区切る - 英字見出しは細めのサンセリフにする

Don't - ボタンを色で塗りつぶさない - 影やグラデーションのカードを使わない - 見出しに帯・アイコン・下線などの装飾を足さない - 画像に角丸や装飾の枠を付けない - 色帯をページ全体に繰り返さない

Page Structure

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

1. ファーストビュー（施設の思想を一言で印象付ける）: 縦書きの太いキャッチ、小さいロゴ、グリッチ状の色帯で構成する
2. 施設紹介（活動の概要を伝える）: 色帯の背景に英字見出しと長めの本文を重ね、詳しくみるボタンを置く
3. 注目企画（一押しの企画を見せる）: 大きな画像のカードを縦に並べる
4. イベント一覧（開催中・予定の展示を一覧で見せる）: カードを縦に繰り返し、タグで分類を示す
5. お知らせ（最新情報を伝える）: 罫線で区切ったテキストリストにする
6. カレンダー（日付から予定を探せるようにする）: 前月・次月のボタンを置き、日付ボックスを横スライドで並べる
7. ステートメント（理念を詩のように伝える）: 縦書きのキャッチの下に短い行の詩文を置き、要所を太字にする
8. アクセス（所在地と行き方を示す）: 住所を太字で示し、地図ボタン、徒歩分数、埋め込み地図を並べる
9. フッター（ナビゲーションと連絡先を置く）: 黒地にドット調のロゴ、リンク、SNS、ニュースレター登録ボタンを並べる

Imagery

• FV の色帯は、写真を縦方向に引き伸ばしたようなピクセルグリッチにする
• 色帯は蛍光寄りのマゼンタ・青・黄緑・淡いピンクを使う
• 作品画像はポスターや作品写真をそのまま見せ、加工しない
• 鉛筆画やリソグラフ風のアート表現と相性が良い
• ロゴはドット調・ピクセル調の幾何学的な文字にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長にし、縦書きのキャッチを中央、色帯を両側に置く
• PC はカード一覧を注目企画 2 列、イベント一覧 3 列にする
• PC はニュースを日付・タグ・タイトルの横 1 行に並べる
• PC はカレンダーに日付を 8 日分並べる
• 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 行書くと起動時に読み込まれる。