# 水光のスキンケア / Dew Skincare

## デザインの原則
ガラスと水の質感が商品の印象を決める。効能を誇張せず、使う時間と手触りを伝える。

淡いミントと緑のガラス、丸い写真窓。朝と夜の使い方を切り替えながら、日常の習慣として商品を紹介するスキンケアブランド。

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

## トップページの構成
商品写真と一言 → ブランド姿勢 → 朝夜のルーティン → セット内容 → FAQ。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

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

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
.dew-note{text-align:center;background:#174235;color:#e2f1e9;padding:8px;font-size:11px;letter-spacing:.1em}.dew-hero{position:relative;text-align:center;min-height:830px;padding:35px 4vw 50px}.dew-hero h1{position:relative;font:clamp(62px,8vw,120px)/.9 'Instrument Serif',serif;letter-spacing:-.04em;z-index:1}.dew-hero h1 em{display:block}.dew-hero figure{width:min(550px,65vw);height:490px;margin:-32px auto 0;border-radius:48% 48% 4px 4px;overflow:hidden}.dew-hero img{object-position:center}.dew-caption{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:-50px auto 0;position:relative;text-align:left;gap:30px}.dew-caption>p{font-family:'Noto Serif JP',serif;line-height:2}.dew-caption .cta{background:#e2f1e9}.dew-statement{text-align:center;padding:80px 5vw;background:#f5faf6}.dew-statement h2{font:400 clamp(28px,4vw,45px)/1.7 'Noto Serif JP',serif;margin-bottom:30px}.ritual{display:grid;grid-template-columns:1fr 1fr;gap:9vw;padding:80px 6vw}.ritual h2{font:clamp(55px,7vw,95px)/.95 'Instrument Serif',serif}.ritual-tabs{display:flex;gap:10px;margin-top:35px}.ritual-tabs button{border-radius:40px;font-size:14px}.ritual #ritual-content{align-self:center}.ritual h3{font-size:25px;line-height:1.5;margin:20px 0}.ritual ol{padding-left:20px}.ritual li{padding:15px 0;border-bottom:1px solid var(--color-line)}.dew-set{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:50px 6vw 80px;background:#cce1d5}.dew-set figure{height:500px;border-radius:50% 50% 0 0;overflow:hidden}.dew-set>div{align-self:center}.dew-set h2{font:55px/1 'Instrument Serif',serif;margin-bottom:25px}.dew-set .price{font-size:32px;margin:22px 0}.dew-set .price span{font-size:13px}.dew-set details{margin-top:35px}.dew-set details p{font-size:13px}header .brand{font:italic 48px 'Instrument Serif',serif}@media(max-width:700px){header nav a:nth-child(2){display:none}header{align-items:center}.dew-hero{padding-top:35px;min-height:0}.dew-hero figure{width:85vw;height:400px;margin-top:-10px}.dew-caption{display:block;margin:25px 0 0;text-align:center}.dew-caption .cta{margin-top:25px}.dew-hero h1{font-size:65px}.ritual,.dew-set{grid-template-columns:1fr;gap:40px;padding:50px 5vw}.dew-set figure{height:380px}.dew-set h2{font-size:48px}}
```

## 画像の設計
この見本は画像がないと成立しない。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にブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。