No. 07
夜を纏うエディトリアル Afterhours Fashion
夜の都市と銀のジャケットを、細長い文字とフィルムのような横回遊で見せる。服のディテールからサイズ選択へつながるファッションサイト。
制作版：独立レビュー・別業種での再現検証は未実施です。
体験できること
ルック・ジャケット・トラウザーの切替に応じて写真の注目位置と商品説明が変化。横スクロールのディテール閲覧。
表現の参考元
配色・情報構成・操作の考え方を研究し、オリジナルの架空ブランドへ展開しています。
仕様
| 書体 | 個性的な見出し書体 |
|---|---|
| 配色 | 暗色＋金属色・深色 |
| 情報量 | 標準 |
| レイアウト | 横スクロール |
| 装飾 | 写真中心 |
| 動き | 動きが体験の一部 |
| 雰囲気 | 躍動感 / 先鋭的・緊張感 |
| 業種 | ファッション・アパレル / 通販・小売 |
| 架空企業 | 架空・AFTER / HOURS 09 |
| 利用条件 | 商用利用可・改変可・クレジット不要 |
このデザインの画像をつくる
業態・被写体・光・構図まで指定した、実際の生成プロンプトです。
# 画像の生成仕様 — AFTER / HOURS 09 ## 用途 夜の都市と銀のジャケットを、細長い文字とフィルムのような横回遊で見せる。服のディテールからサイズ選択へつながるファッションサイト。 ## 生成方法と保存先 - 生成：built-in imagegen - ファイル：`assets/hero.webp`（1536 × 1024） - サイト用にWebPへ最適化し、デモHTMLには同じ画像を埋め込んでいる。 - オリジナルの架空画像。人物・商品・施設の実在や性能を示すものではない。 ## 実際に使用したプロンプト ```text Use case: photorealistic-natural Asset type: original premium website hero photographic asset Primary request: realistic fashion editorial full-body anonymous adult female model wearing oversized reflective silver technical jacket and black wide-leg pants in wet urban night scene, blurred red street lights, deep black environment, cool flash lighting, cinematic framing, model right of center and substantial negative space left, no text or visible brands. Composition/framing: landscape 3:2, approximately 1536x1024. Clean full-bleed photograph, keep subjects entirely in frame, no clipped subjects. Constraints: Fictional visual concept. No text, labels, logos, watermarks, UI, borders or collage. ``` ## 再生成する際の判断 ブランドの業態と主役を置き換える。光の方向・素材・余白・主役の位置を指定する。実在ブランドのロゴや商品写真は渡さない。画像にはコピーやボタンを描かず、テキストはHTMLで配置する。 ## 配置・動き ルック・ジャケット・トラウザーの切替に応じて写真の注目位置と商品説明が変化。横スクロールのディテール閲覧。 拡大や明暗の変化は写真を使った表現であり、動画・3Dモデル・実測値ではない。スマートフォンでも商品や人物の重要な箇所が切れないようにobject-positionを調整する。
このブランドのロゴ
実際のロゴ生成指示を見る
# AFTER / HOURS 09 — ヘッダーロゴ ## 制作 2026-09-15 / built-in imagegen。既存サイトのロゴ画像は入力せず、架空ブランド向けに新規生成。 - 画像: `assets/logo.webp`（生成結果をWebPに圧縮、アルファ保持） - 用途: トップページのヘッダー、または固定サイドのブランド表示 - 方向: fashion house, angular bespoke ligature AH, sophisticated nocturnal technical fashion - 表示: 最大 74 × 25px の枠内で縦横比を保持。スマートフォンでは幅と高さを縮小。 - ブランド名はalt属性に保持。リンクとナビゲーションは既存のまま。 - 同じ画像をデモHTMLに埋め込み、単一ファイルでも表示可能。 - 背景に応じたCSSフィルター: `brightness(0) invert(1)`。 ## 実際の生成プロンプト ```text Use case: logo-brand. Create one finished original website header logo for the fictional brand "AFTER HOURS". Art direction: fashion house, angular bespoke ligature AH, sophisticated nocturnal technical fashion. Palette: silver white. Exact text only: "AFTER HOURS". Compose an integrated distinctive emblem and custom drawn lettering as ONE compact horizontal lockup, about 3:1 ratio, occupying almost the entire canvas with only 4 percent padding. Must remain legible at 160px wide. Truly transparent alpha background; no background rectangle, mockup, paper, scene, shadow, 3D, watermark, extra labels or logo variations. Clean high resolution flat artwork. Do not imitate any existing brand logo. For Japanese text preserve every character exactly. ``` ## 運用 参考サイトのロゴ・商標を流用していない。生成物の商標調査・法的な類似性審査は未実施。 ### サイズ調整 ヘッダーの占有面積を抑えるため、ロゴを 74 × 25px、モバイルを 68 × 23px に縮小。本文の見出しより控えめな大きさにする。
参考表現から、この事例への落とし込み
# 表現の研究 — 夜を纏うエディトリアル ## 参考元 [https://supahero.io/hero/casa-lunara](https://supahero.io/hero/casa-lunara) 確認日：2026-09-15。公開ギャラリーの掲載画像・説明を調査。元サイトの全ページやソースコードを解析したものではない。 ## 観察と転用 掲載画像では人物と商品が大きく置かれ、空間全体でファッションの世界観を見せている。サングラスから夜のテクニカルウェアへ転用。黒い都市の写真、細長い見出し、ディテール回遊に再構成。 ## 独自の業態設定 AFTER / HOURS 09 / 写真の暗さを潰さず、反射素材の輪郭だけを際立たせる。昼のECと異なる夜の編集。 ## トップページ構成 フルスクリーンルック → コレクション宣言 → ディテールフィルム → 商品選択 → サイズ案内 ## 学習できる技術 ルック・ジャケット・トラウザーの切替に応じて写真の注目位置と商品説明が変化。横スクロールのディテール閲覧。 画像・コード・コピー・有料プロンプトを参考元から流用せず、この事例用に制作。
DESIGN.md
# 夜を纏うエディトリアル / 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にブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。