# 花を贈る色彩 / Stem Florist

## デザインの原則
花屋をナチュラルカラーに限定しない。生花をファッションのように撮り、色で選ぶ体験をつくる。

コバルトの空間に鮮やかな花と大きな文字。ギフトの用途と大きさを選び、贈る場面まで想像できるフラワースタジオ。

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

## トップページの構成
色のヒーロー → 花の姿勢 → ギフト選択 → 届け方 → FAQ。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

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

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
.stem-hero{position:relative;min-height:810px;overflow:hidden;padding:40px 5vw}.stem-heading{position:relative;z-index:1;pointer-events:none}.stem-heading h1{font:500 clamp(62px,8.8vw,133px)/.94 'Space Grotesk',sans-serif;letter-spacing:-.065em}.stem-heading em{color:#ffd344;font-style:italic;display:inline-block;margin-left:8vw}.stem-hero figure{position:absolute;inset:0 0 0 29%;mix-blend-mode:normal}.stem-hero figure img{object-position:55% center}.stem-stamp{position:absolute;right:4vw;top:35px;background:#ffd344;color:#1739aa;transform:rotate(9deg);padding:25px;font:700 15px/1.3 'Space Grotesk',sans-serif;border-radius:50%;text-align:center}.stem-bottom{position:relative;z-index:1;display:flex;align-items:center;gap:35px;justify-content:space-between;margin-top:95px}.stem-bottom p{font-size:20px;line-height:1.8}.stem-studio{background:#ffdfeb;color:#263d9c;padding:70px 6vw;display:grid;grid-template-columns:1fr 1.8fr;gap:25px 8vw}.stem-studio .kicker{grid-column:1/-1}.stem-studio h2{font-size:clamp(28px,3.5vw,45px);line-height:1.6}.gift-builder{display:grid;grid-template-columns:1fr 1fr;gap:9vw;padding:80px 6vw}.gift-builder h2{font:clamp(58px,7vw,100px)/.98 'Instrument Serif',serif;margin-bottom:30px}.gift-builder label,.gift-builder select{display:block;width:100%}.gift-builder label{font:12px var(--font-mono);margin-bottom:25px}.gift-builder select{font:16px var(--font-body);margin-top:10px}.gift-builder select option{color:#1739aa;background:#fff}.bouquet-sizes{display:flex;gap:8px;margin:12px 0 25px}.bouquet-sizes button{flex:1;padding:15px 10px;font-size:19px}.bouquet-sizes span{font-size:13px}.bouquet-sizes button[aria-pressed=true]{background:#ffd344;color:#1739aa}.gift-result{border-top:1px solid #6881df;padding-top:25px;min-height:170px}.gift-result h3{font-size:21px;margin-bottom:15px}.gift-result p{font-size:14px}.gift-result #gift-price{font-size:23px;margin:12px 0 25px}.gift-builder .primary{background:#ffdfeb;color:#1739aa;width:100%}.stem-hero .cta{background:#1b3ecb}.stem-hero .cta:hover{background:#ffdfeb;color:#1739aa}@media(max-width:700px){.stem-hero{min-height:920px;padding-top:30px}.stem-heading h1{font-size:65px}.stem-hero figure{inset:210px 0 140px 0}.stem-stamp{top:270px;right:20px;padding:20px;font-size:12px}.stem-bottom{margin-top:420px;gap:15px;flex-wrap:wrap}.stem-bottom p{font-size:17px}.stem-studio,.gift-builder{grid-template-columns:1fr}.gift-builder{gap:45px;padding:50px 5vw}.stem-hero .cta{width:100%;justify-content:center}}
```

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

## 操作・モーション
用途とサイズを選ぶと、提案文・料金・注文確認が変わるギフトビルダー。
共通の確認ダイアログは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にブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。