# 夜を纏うエディトリアル / Afterhours Fashion

## デザインの原則
写真の暗さを潰さず、反射素材の輪郭だけを際立たせる。昼のECと異なる夜の編集。

夜の都市と銀のジャケットを、細長い文字とフィルムのような横回遊で見せる。服のディテールからサイズ選択へつながるファッションサイト。

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

## トップページの構成
フルスクリーンルック → コレクション宣言 → ディテールフィルム → 商品選択 → サイズ案内。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

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

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
.fashion-cover{position:relative;min-height:780px;height:95svh;max-height:1100px;overflow:hidden;background:#101317}.fashion-cover>img{position:absolute;inset:0;object-position:65% center}.fashion-cover::after{content:'';position:absolute;inset:0;background:#05080c25;pointer-events:none}.fashion-cover header,.fashion-title{z-index:1}.fashion-title{position:relative;padding:70px 5vw}.fashion-title h1{font:600 clamp(80px,11vw,160px)/.84 'Barlow Condensed',sans-serif;letter-spacing:-.02em}.fashion-title em{font-style:normal;color:#e8eaf0;-webkit-text-stroke:1px #e8eaf0}.fashion-title p{line-height:1.9;margin:30px 0;font-size:18px}.fashion-title .cta{background:#10131780;font-size:13px}.fashion-number{position:absolute;right:30px;bottom:30px;font:13px var(--font-mono);writing-mode:vertical-rl;z-index:1}.fashion-manifest{padding:85px 6vw;display:grid;grid-template-columns:1.6fr 1fr;gap:30px 7vw}.fashion-manifest .kicker{grid-column:1/-1;color:#adb5c5}.fashion-manifest h2{font:clamp(48px,5.5vw,82px)/1.03 'Instrument Serif',serif;letter-spacing:-.02em}.fashion-manifest>p:last-child{align-self:end;line-height:2}.film-strip{display:flex;overflow-x:auto;gap:25px;padding:0 6vw 25px;scroll-snap-type:x mandatory;scrollbar-color:#686e7d #101317}.film-strip figure{flex:0 0 44vw;scroll-snap-align:center;overflow:hidden}.film-strip img{height:560px}.film-strip figure:nth-child(2) img{object-position:77% 20%;transform:scale(1.08)}.film-strip figure:nth-child(3) img{object-position:72% bottom}.film-strip figcaption{position:relative;background:#101317;font:12px var(--font-mono);padding:20px 0}.film-hint{margin:15px 6vw 65px;color:#adb5c5}.fashion-pieces{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:50px 6vw 80px;border-top:1px solid var(--color-line)}.piece-photo{height:640px;overflow:hidden}.piece-photo img{object-position:75% 30%;transition:transform .6s,object-position .6s}.fashion-pieces>div:last-child{align-self:center}.piece-tabs{display:flex;gap:10px}.piece-tabs button{font:12px var(--font-mono)}.fashion-pieces h2{font:45px/1 'Instrument Serif',serif;margin:35px 0 25px}.fashion-pieces #piece-price{font-size:25px;margin:25px 0}.fashion-pieces label,.fashion-pieces select{display:block;width:100%}.fashion-pieces label{font:12px var(--font-mono)}.fashion-pieces select{margin-top:8px;font-size:16px}.fashion-pieces select option{background:#101317}.fashion-pieces .cta{width:100%;margin:25px 0}.fashion-pieces details p{font-size:13px}@media(max-width:700px){.fashion-cover{height:90svh;min-height:760px}.fashion-cover>img{object-position:62% center;filter:brightness(.72)}.fashion-title{padding-top:100px}.fashion-title h1{font-size:82px}.fashion-title p{font-size:16px}.fashion-manifest,.fashion-pieces{grid-template-columns:1fr}.fashion-manifest{padding:55px 5vw}.film-strip figure{flex-basis:80vw}.film-strip img{height:430px}.fashion-pieces{padding:40px 5vw 60px;gap:35px}.piece-photo{height:460px}}
```

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