# 水平線に泊まる / Coastal Haven

## デザインの原則
風景を最初の価値にする。文字の背後に海を残し、予約の情報は独立した白い帯へ。

青い水平線を一面に敷き、余白とセリフ体で滞在の時間をつくる。客室選択から宿泊案内までがつながる小さな海辺のホテル。

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

## トップページの構成
風景のヒーロー → 宿泊条件 → 滞在の哲学 → 客室比較 → 過ごし方 → 案内。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

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

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
.coast-cover{position:relative;height:94svh;min-height:680px;max-height:1100px;color:#fff;overflow:hidden;background:#173a59}.coast-photo{position:absolute;inset:0;animation:coast-arrival 1.8s ease-out both}.coast-shade{position:absolute;inset:0;background:#07192a38}.coast-cover header{border-bottom:1px solid #ffffff55}.coast-cover .brand{font-family:'Bodoni Moda',serif;letter-spacing:.1em}.coast-title{position:relative;padding:100px 6vw 45px;max-width:1000px;text-shadow:0 2px 18px #06162866}.coast-title h1{font:clamp(56px,7.2vw,115px)/1.05 'Bodoni Moda',serif;letter-spacing:-.045em}.coast-title p:last-child{font-family:'Noto Serif JP',serif;font-size:20px;line-height:2;margin-top:28px}.coast-bottom{position:absolute;bottom:28px;left:6vw;right:6vw;display:flex;justify-content:space-between;font-size:12px}.booking{display:flex;gap:35px;justify-content:space-between;align-items:center;padding:30px 6vw;background:#fff}.booking .kicker{font:italic 30px 'Bodoni Moda',serif;text-transform:none;margin:0}.booking label{font:11px var(--font-mono);min-width:120px}.booking select{display:block;font:15px var(--font-body);width:100%;margin-top:6px}.coast-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:30px 10vw}.coast-intro .kicker{grid-column:1/-1}.coast-intro h2{font:400 clamp(30px,3.5vw,49px)/1.8 'Noto Serif JP',serif}.coast-room{display:grid;grid-template-columns:1.2fr 1fr;background:#dfeaf1}.coast-room figure{min-height:540px}.coast-room figure img{object-position:75% center}.coast-room>div{padding:65px 6vw}.coast-room h2{font:64px 'Bodoni Moda',serif;margin:20px 0}.coast-room dl{margin:30px 0}.coast-room dl div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid #bacdd9;font-size:14px}.coast-room dd{margin:0}.rhythm{list-style:none;padding:0;display:flex;gap:5vw}.rhythm li{flex:1;border-top:1px solid var(--color-line);padding-top:25px}.rhythm time{font:40px 'Bodoni Moda',serif}.rhythm h3{font-size:20px;margin:25px 0 15px}.rhythm p{font-size:14px}@keyframes coast-arrival{from{transform:scale(1.07)}to{transform:scale(1)}}@media(max-width:700px){.coast-cover{height:85svh;min-height:630px}.coast-photo{object-position:62% center}.coast-title{padding-top:90px}.coast-title h1{font-size:53px}.coast-bottom{display:block}.coast-bottom a{display:block;margin-top:12px}.booking{flex-wrap:wrap;gap:22px;padding:25px 5vw}.booking .kicker{width:100%}.booking label{flex:1}.booking button{width:100%}.coast-intro,.coast-room{grid-template-columns:1fr}.coast-room figure{height:300px;min-height:0}.coast-room>div{padding:40px 5vw}.rhythm{flex-direction:column}.coast-intro h2{font-size:28px}}
```

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