# 触れる開発ツール / Relay Developer

## 1. デザインの核
ミント色の製品画面と等幅のイベントログ。シミュレーションを実行して、APIの応答を理解できる開発者向けサイト。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。

## 2. 情報構成
製品の宣言 → 即座に操作するplayground → 配送パイプライン → 使い始めの案内
デモは架空ブランド「RELAY / SDK」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。

## 3. 色と書体
背景 #bcebcf、主文字 #123d2e、強調 #18593e、罫線 #70ae88。tokens.css を使う。明暗反転セクションにもこの関係を引き継ぐ。
本文は DM Sans + Noto Sans JP、メタ情報は IBM Plex Mono。表示用書体は下記のCSS仕様に従う。欧文と日本語を同じサイズに揃えず、それぞれの文字密度に合わせる。

## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.relay-hero{padding:60px 5vw 45px;display:flex;justify-content:space-between;gap:40px;align-items:end}.relay-hero h1{font:500 clamp(44px,6.5vw,95px)/1.06 var(--font-mono);letter-spacing:-.08em}.relay-hero h1 span{color:#397951}.relay-hero p:not(.eyebrow){margin-top:30px}.version-stamp{border:1px solid #123d2e;padding:20px;text-align:center;min-width:155px;transform:rotate(5deg);font:11px var(--font-mono)}.version-stamp strong{display:block;font-size:58px;font-weight:400;line-height:1.4}.playground{margin:0 5vw 50px;background:#123d2e;color:#bcebcf;border:1px solid #123d2e}.terminal-head{display:flex;justify-content:space-between;border-bottom:1px solid #467559;padding:15px 25px;font:12px var(--font-mono)}.terminal-grid{display:grid;grid-template-columns:1fr 1fr;min-height:330px}.terminal-input{border-right:1px solid #467559;padding:30px}.terminal-input label{font:12px var(--font-mono);display:block;margin-bottom:15px}.terminal-input select{background:#bcebcf;color:#123d2e;border:0;padding:10px;width:100%}.terminal-input pre{font:15px/1.8 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:25px 0}.terminal-input button{background:#bcebcf;color:#123d2e;border:0}.terminal-input p{font-size:12px;margin-top:15px}.terminal-output{padding:30px;font-family:var(--font-mono)}.terminal-output ol{list-style:none;padding:0;font-size:14px;line-height:2;margin-top:35px}.terminal-output li{padding:6px 0;border-bottom:1px solid #315d45}.terminal-cursor{display:block;margin-top:15px}.pipeline{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--color-line)}.pipeline article{padding:30px 30px 30px 0}.pipeline article+article{border-left:1px solid var(--color-line);padding-left:30px}.pipeline span{font:12px var(--font-mono)}.pipeline h3{font-size:26px;margin:25px 0 20px}.quickstart{padding:55px 5vw;border-top:1px solid var(--color-line);display:flex;align-items:center;justify-content:space-between;gap:30px}.quickstart h2{font-size:34px;margin-bottom:25px}@media(max-width:700px){header>.mono,.version-stamp{display:none}.relay-hero{padding-top:40px}.relay-hero h1{font-size:clamp(32px,7.8vw,55px)}.terminal-grid{grid-template-columns:1fr}.terminal-input{border-right:0;border-bottom:1px solid #467559;padding:22px}.terminal-head{padding:14px;font-size:10px}.terminal-output{min-height:220px;padding:22px}.pipeline{grid-template-columns:1fr}.pipeline article+article{border-left:0;border-top:1px solid var(--color-line);padding-left:0}.quickstart{display:block}.quickstart .cta{margin-top:30px}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。

## 5. インタラクション
入力に対応するコードと実行ログを切り替えるローカルシミュレーション。通信や偽の実測レイテンシは使わない。
- 操作前から内容を読める初期状態を用意する。JSが動かなくてもナビゲーションと本文を保持する。
- hoverのみでしか使えない機能は作らない。button、range、details等のネイティブ要素を使い、タッチとキーボードを同等に扱う。
- 選択状態は aria-pressed、結果更新は必要な箇所だけ aria-live で伝える。
- 動作低減設定では自動アニメーションを止め、状態変更は即時または静止画で返す。
- デモ用のCTAは実在する予約・購入として扱わない。移植時に実サービスへ接続する。

## 6. モバイル
700px以下では複雑な分割を一列にする。横回遊の見本だけは意図的な横スクロールを残す。ページ全体には横はみ出しを作らない。見出しはclampで縮小し、本文は16pxを維持する。操作対象は原則44px以上を確保する。

## 7. 禁止事項
- 背景をベージュや茶色に置き換え、全セクションを同じ温度に寄せない。
- 汎用の角丸カード3列へ構成を置き換えない。
- 意味のない紫青グラデーション、絵文字アイコン、架空の顧客ロゴを追加しない。
- すべてをフェードインさせて初期表示を隠さない。
- 参考サイトの画像・ロゴ・コピー・有料プロンプトは流用しない。

## 8. 再現の確認
背景・表示書体・主要な配置比率・固有の操作が保持されていること。別業種への移植では、操作対象をその業種で意味のある内容へ翻訳する。独立セッションによる再現検証は未実施で、検証済みの記録を偽って記載しない。


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。