# 光を置く誌面 / Arc Lighting

## デザインの原則
商品写真の外側にも余白を置く。光の形と室内での大きさの両方を一枚の写真から読む。

細いセリフ体と非対称の写真配置。明るさのイメージを操作しながら、光を家具として選ぶ照明ブランド。

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

## トップページの構成
余白と照明のヒーロー → 明るさの体験 → 造形の考え方 → 仕様選択 → 設置相談。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

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

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
.arc-hero{display:grid;grid-template-columns:.9fr 1.1fr;padding:35px 5vw 70px;gap:6vw;align-items:center}.arc-hero h1{font:clamp(70px,8vw,120px)/.93 'Bodoni Moda',serif;letter-spacing:-.055em}.arc-hero h1 em{color:#a33227}.arc-hero p:not(.kicker){font-family:'Noto Serif JP',serif;line-height:2;font-size:20px;margin:35px 0}.arc-hero figure{height:630px}.arc-hero figure img{height:calc(100% - 35px);object-position:60% center}.arc-hero figcaption{font:11px var(--font-mono);padding-top:14px;letter-spacing:.07em}.light-study{display:grid;grid-template-columns:1.2fr 1fr;background:#2c3033;color:#f4f5f4}.light-view{position:relative;height:600px;overflow:hidden;background:#121619}.light-view img{filter:brightness(.8);transition:filter .18s}.light-view span{position:absolute;bottom:25px;left:25px;background:#2c3033;padding:8px 14px;font:12px var(--font-mono)}.light-controls{padding:65px 5vw}.light-controls h2{font:400 38px/1.5 'Noto Serif JP',serif;margin-bottom:25px}.light-controls label{display:flex;justify-content:space-between;margin-top:40px;font-size:14px}.light-controls input{width:100%;accent-color:#efb4a9}.light-controls .small{color:#c5cbcf}.arc-story{display:grid;grid-template-columns:1fr 1.5fr 1.2fr;gap:4vw}.arc-story h2{font:400 33px/1.6 'Noto Serif JP',serif}.arc-inquiry{display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:#e5e7e7;padding:70px 6vw}.arc-inquiry h2{font:64px/1 'Bodoni Moda',serif;margin-bottom:30px}.arc-inquiry label,.arc-inquiry select{display:block;width:100%}.arc-inquiry label{font-size:13px;margin-bottom:25px}.arc-inquiry select{font-size:16px;margin-top:8px}.arc-inquiry .cta{width:100%;margin-bottom:20px}@media(max-width:700px){.arc-hero{grid-template-columns:1fr;padding-top:35px;gap:35px}.arc-hero h1{font-size:70px}.arc-hero figure{height:440px}.light-study,.arc-story,.arc-inquiry{grid-template-columns:1fr}.light-view{height:400px}.light-controls{padding:40px 5vw}.arc-story{gap:20px}.arc-inquiry{padding:50px 5vw;gap:35px}.arc-inquiry h2{font-size:52px}}
```

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