# 弾けるフルーツ / Peel Soda

## デザインの原則
味の想像を先に届ける。果実の色と缶の寒色をぶつけ、短いユーザー操作の動きだけを使う。

オレンジの全面写真と空色の缶、跳ねる巨大文字。飲料の楽しさを写真・短い動き・数量選択で伝えるD2Cブランド。

## 業態・商品定義
架空ブランド：PEEL / SODA。デモに掲載した名称・商品・価格・人物・施設は架空の企画。実サービスへの転用時はコピー、仕様、価格、利用条件を置き換える。
主な適性：restaurant-food / ec-retail。

## トップページの構成
商品ポスター → 味の体験 → 原材料の考え方 → ケース選択 → 商品案内。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

## 色と書体
背景 #ff861e / 本文 #273a59 / 強調 #d9edff / 罫線 #cc5d16。
色変数は tokens.css を再利用する。本文は DM Sans + Noto Sans JP、16px以上、行間1.8。メタ情報は IBM Plex Mono。表示用書体は下記CSSの指定に従う。

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
header .brand{font:800 38px 'Barlow Condensed',sans-serif;transform:rotate(-6deg)}.peel-hero{position:relative;min-height:740px;overflow:hidden}.peel-hero>img{position:absolute;inset:0;object-position:center;will-change:auto}.peel-hero h1{position:relative;z-index:1;text-align:center;font:800 clamp(70px,9vw,135px)/.88 'Barlow Condensed',sans-serif;padding:25px 4vw;letter-spacing:-.025em;pointer-events:none}.peel-hero h1 em{font-style:normal;color:#d9edff;text-shadow:2px 2px 0 #273a59}.peel-note{position:absolute;bottom:40px;left:5vw;background:#ff861ee8;padding:20px}.peel-note p{font-size:23px;line-height:1.6;margin-top:15px}.pop-button{position:absolute;right:5vw;top:44%;width:125px;height:125px;border-radius:50%;background:#d9edff;border:0;font:700 34px 'Barlow Condensed',sans-serif;transform:rotate(12deg)}.peel-taste{position:absolute;bottom:45px;right:5vw;font:600 18px 'Space Grotesk',sans-serif;max-width:32%;text-align:right}.flavor{background:#d9edff;padding:70px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:9vw}.flavor h2{font-size:clamp(34px,4vw,58px);line-height:1.4}.flavor .rules{margin-top:30px}.flavor .rules li{border-color:#a6c1d9}.peel-shop{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding:70px 6vw}.peel-shop figure{height:480px;overflow:hidden;border-radius:50% 50% 4px 4px}.peel-shop h2{font:clamp(55px,6vw,85px)/.95 'Instrument Serif',serif;margin-bottom:25px}.quantity{display:flex;align-items:center;gap:25px;margin:30px 0 15px}.quantity button{width:50px;height:50px;border-radius:50%;padding:0;font-size:25px}.quantity output{font:30px 'Space Grotesk',sans-serif}.quantity span{font:12px var(--font-mono)}.case-price{font:38px 'Space Grotesk',sans-serif;margin-bottom:25px}.case-price small{font-size:13px}.peel-shop .cta{width:100%;margin-bottom:18px}@media(max-width:700px){.peel-hero{min-height:730px}.peel-hero h1{font-size:63px;padding-top:35px}.peel-hero>img{object-position:55% center}.peel-note{left:5vw;bottom:25px;padding:12px}.peel-note p{font-size:18px}.peel-note .mono{font-size:9px}.pop-button{width:85px;height:85px;font-size:27px;top:45%}.peel-taste{font-size:13px;bottom:35px;max-width:30%}.flavor,.peel-shop{grid-template-columns:1fr;gap:35px;padding:50px 5vw}.peel-shop figure{height:350px}}
```

## 画像の設計
この見本は画像がないと成立しない。IMAGE.md の生成プロンプトを使い、移植先の商品・業態に合わせた写真を生成する。空の枠、無関係な写真、CSSで作った擬似商品へ置き換えない。
画像に文字を焼き込まない。商品名・価格・CTAはHTMLで重ねる。主役の位置と文字用の余白を画像生成時に指定し、スマートフォンではobject-positionを調整する。実機の性能や実際の施設を証明する画像として使わない。

## 操作・モーション
「POP」ボタンで商品ビジュアルが短く弾み、味の説明を切り替える。数量と価格が連動するケース選択。
共通の確認ダイアログはnative dialogを使い、Escapeで閉じる・フォーカス復帰・Tabの範囲をブラウザに任せる。選択ボタンはaria-pressedで状態を明示。静止状態で全本文を読めること。
一度きりの導入と操作に対する短い反応を基本とする。prefers-reduced-motionではアニメーションを止め、選択とテキスト更新は維持する。ホバーだけに機能を閉じ込めない。

## モバイル
700px以下は一列へ。本文16px、操作44px以上を基本にする。横回遊の領域だけ意図的な横スクロールを許し、ページ全体の横はみ出しを防ぐ。写真は自然比率を維持し、商品や人物が重要な箇所で切れない配置にする。

## 実装・再利用
index.html は生成写真をData URLとして内包するため単体で開ける。assets/hero.webp は最適化した元画像。IMAGE.md は元プロンプトと再生成条件、RESEARCH.md は参考の観察と転用の判断を記録する。

## 避けること
- すべての背景を茶・ベージュへ寄せる。
- 汎用の角丸3列カードに置き換える。
- 参考元の商標・文章・写真をそのまま複製する。
- ダミーの受賞・導入企業・顧客レビューを作る。
- 画像を動画や3Dモデルであるかのように説明する。
- 検証していない商品機能・効能を実証済みと書く。

## 検証状況
制作版。ブラウザでの見た目の確認と独立セッションでの別業種再現検証は未実施。検証記録はmeta.jsonを参照する。


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。