# 精密さを映すロボティクス / Orbit Robotics

## デザインの原則
技術を壮大な言葉でぼかさず、何をどう動かすのかを図と短い工程で示す。写真を製品の信頼感に使う。

紺のラボに白いロボット、精密な注釈と工程表示。用途に応じた動作フローを見せ、産業機器の導入検討につなげるサイト。

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

## トップページの構成
製品と価値提案 → 用途別工程 → 導入の流れ → 検討条件 → 相談。
商品やサービスを選ぶまでの順序を保つ。ユーザーが判断できる説明を置き、実態のない受賞歴・ロゴ・レビューは追加しない。

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

## 固有の構図とサイズ
以下は一般化して持ち運ぶべき造形の仕様。セレクターは移植先に合わせて変更できるが、見出しと写真の面積比・字間・写真の窓の形を維持する。
```css
header{border-bottom:1px solid #304155}.orbit-hero{position:relative;min-height:720px;overflow:hidden}.orbit-copy{position:relative;z-index:1;padding:65px 5vw 100px;pointer-events:none;max-width:850px}.orbit-copy .cta{pointer-events:auto}.orbit-copy h1{font:500 clamp(52px,6.3vw,95px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.055em}.orbit-copy em{font-style:normal;color:#a8d9fb}.orbit-copy p:not(.kicker){font-size:24px;line-height:1.8;margin:35px 0}.orbit-copy .cta{background:#0c1828b3}.orbit-hero figure{position:absolute;inset:0 0 0 25%}.orbit-hero figure img{object-position:65% center}.orbit-tags{display:flex;gap:15px;margin-top:45px;font:11px var(--font-mono)}.orbit-tags span{border:1px solid #62758a;padding:8px 12px;background:#0c1828b3}.orbit-bottom{position:absolute;bottom:0;left:0;right:0;padding:18px 5vw;background:#0c1828dd;border-top:1px solid #304155;display:flex;justify-content:space-between;font:11px var(--font-mono)}.applications{padding:70px 5vw;background:#e3edf8;color:#142b43}.applications h2{font-size:40px;line-height:1.35}.app-tabs{display:flex;gap:8px;flex-wrap:wrap}.app-tabs button{font-size:13px;padding:12px 15px}.app-tabs button[aria-pressed=true]{background:#142b43;color:#e3edf8}.orbit-demo{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid #abc0d4}.orbit-image{height:480px;position:relative;overflow:hidden}.orbit-image img{transition:transform .65s,object-position .65s}.orbit-image span{position:absolute;bottom:15px;left:15px;background:#0c1828;color:#e3edf8;padding:8px;font-size:10px}.orbit-flow{padding:35px}.orbit-flow ol{list-style:none;padding:0;margin:0}.orbit-flow li{border-bottom:1px solid #abc0d4;padding:18px 10px;font:15px var(--font-mono);color:#5a6b7d}.orbit-flow li.active{background:#142b43;color:#e3edf8}.orbit-flow p{margin:25px 0;min-height:80px}.orbit-flow button{width:100%}.integration{display:grid;grid-template-columns:1fr 1fr;gap:10vw;padding:90px 6vw}.integration h2{font-size:42px;line-height:1.4;margin-bottom:25px}.integration>div{position:sticky;top:35px;align-self:start}.integration ol{list-style:none;padding:0;margin:0}.integration li{border-top:1px solid #304155;padding:25px 0 40px}.integration li span{font:12px var(--font-mono);color:#a8d9fb}.integration h3{font-size:25px;margin:20px 0}.end h2{line-height:1.35}@media(max-width:700px){.orbit-hero{min-height:880px}.orbit-copy{padding:40px 5vw 0}.orbit-copy h1{font-size:48px}.orbit-copy p:not(.kicker){font-size:20px}.orbit-hero figure{inset:270px 0 35px 0}.orbit-copy .cta{margin-top:265px}.orbit-tags{margin-top:20px}.orbit-bottom{font-size:9px;gap:15px}.orbit-demo,.integration{grid-template-columns:1fr}.orbit-image{height:350px}.app-tabs{margin-top:25px}.orbit-flow{padding:25px}.integration{gap:35px;padding:55px 5vw}.integration>div{position:static}.integration h2{font-size:33px}}
```

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