DESIGN.md — 橙×クリームの六角写真が並ぶ食品企業LP（Warm Orange Rice Brand Statement LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、やさしい・柔らかい
• キーワード: オレンジ・クリーム地・六角形写真・傾いたスタンプ文字・弧の境界・太い丸み欧文
• 地の質感: グラデーションや影のないフラットな塗り。写真だけが質感を持つ
• 形: 角丸の六角形写真、下へふくらむ弧のセクション境界、吹き出し型の三角
• 温度感: 暖色寄りで明るく温かい

Colors

• ファーストビューだけをオレンジ全面にし、以降はクリーム系で統一する
• 事業紹介は2種のクリームを1ブロックずつ交互に敷いて区切る
• オレンジは文字色としてセクション小見出し・スタンプ・感嘆符に限定して使う
• 見出しはほぼ黒で強く、リード文は焦げ茶でやや柔らかくする
• 赤は丸い矢印アイコンだけに使う小さな差し色
• ボタンの塗りは使わずテキストリンクで遷移させる
• hero-statement は文字 #FFFFFB × 背景 #FE882C のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C35601、4.5:1）を使う。
• video-embed は文字 #F48630 × 背景 #FFFFE7 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BC580A、4.56:1）を使う。

Typography

• 和文は太字ゴシックで字間を0.1em以上あける
• ステートメント本文は中央揃えにし、行間2.0で短く改行する
• 事業見出しは大見出しと小さな語尾を分け、2段階のサイズで組む
• 語尾にオレンジの感嘆符を添える
• 欧文スタンプは-10°ほど傾けて写真の左上に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、テキストは左寄せで写真の下に置く
• 本文ブロックの幅: 画面幅の約 70%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• 事業ブロックは写真・上見出し・大見出し・リンクの順に縦積み
• 1ブロックは上下に約60pxの余白をとる
• ファーストビューは文字を中央揃えにし、段落間を大きくあける
• 理念カードは画面幅の約75%で中央に置く

Elevation & Depth

• 影は使わず、すべてフラット
• 階層は地色の切り替えと弧の境界で表現する

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の六角形（上下の頂点が尖り、角は小さく丸める）
• セクション境界: ファーストビュー下と一覧の終わりは下にふくらむ弧。一覧の始まりは中央に下向き三角の吹き出し
• 写真はすべて同じ六角形マスクで統一する
• カードは角丸16px程度で枠線なし
• 矩形の直線の切り替えは事業ブロック間だけにする

Components

• スローガンヒーロー（hero-statement）: オレンジ全面に白い太欧文ロゴと中央揃えのステートメント本文を置く
• 動画埋め込み（video-embed）: オレンジの小見出しの下に角丸の16:9動画を置く
• 六角形写真（hex-photo）: 六角形に切り抜いた写真。左上に傾けたオレンジの欧文スタンプを重ねる
• 事業紹介ブロック（business-block）: 小さな上見出し、大きな太字見出し、語尾と感嘆符、リンクを縦に並べる
• 丸矢印テキストリンク（arrow-link）: 赤い丸の中に白い右矢印を入れたアイコンと太字テキスト。外部リンクには別窓アイコンを付ける
• 吹き出し境界（speech-divider）: 白地から次の面へ、中央の下向き三角でつなぐ
• 理念カード（philosophy-card）: 淡黄の角丸カードに見出し・リード・リンクと3段のピラミッド図を入れる

Do's and Don'ts

Do - 写真は必ず六角形に切り抜き、傾いた欧文スタンプを重ねる - 事業ブロックは2種のクリーム地を交互に敷く - 太いゴシックの見出しは字間を広くとる - 感嘆符などの小さなオレンジで遊び心を出す - 大きなセクションの切り替えは弧か吹き出しの三角にする

Don't - 寒色や彩度の低いグレーを地色に使わない - ドロップシャドウやグラデーションボタンを入れない - 写真を四角や円のまま並べない - 細い明朝体で見出しを組まない - オレンジを本文全体の文字色にしない

Page Structure

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

1. ファーストビュー（スローガンと企業の想いを伝える）: オレンジ全面に上部の白い説明文、巨大な欧文ロゴ、中央揃えの宣言文を置き、下端は弧で閉じる
2. ステートメント動画（映像でブランドを補強する）: クリーム地にオレンジの小見出しと角丸の動画を置く
3. 取り組み一覧の導入（事業群を紹介する見出し）: 白地の中央に小さな上見出しと大きなオレンジ見出しを置き、吹き出しの三角で下へつなぐ
4. 事業紹介（繰り返し）（6つ前後の事業や商品の価値を示す）: 六角写真、スタンプ、上見出し、大見出しと語尾、矢印リンクの1セットを交互の地色で繰り返す
5. 理念体系（企業の価値観へ誘導する）: 白地に淡黄の角丸カードを置き、見出し・リード・リンクと3段ピラミッド図を入れる

Imagery

• 自然光の室内で家族や子どもが食べて笑う写真
• 白い背景で撮った料理の寄り写真
• 研究を表す顕微鏡写真は黒地の円に収める
• 地球の俯瞰写真に白い感嘆符のモチーフを散らす
• PCでは周りに小さな手描きの放射線や商品パッケージの切り抜きを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは事業ブロックを左に六角写真、右にテキストの2カラムにする
• PCでは右上に商品パッケージの切り抜き写真を添える
• PCのファーストビューは本文の改行を減らし、左右に手描きの装飾を置く
• PCの理念カードは横長にし、左にテキスト、右にピラミッドを置く
• コンテンツ幅はPCで約800pxに抑える

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