Orbit poster editorial
印刷されたトラベルポスターシリーズがそのままページになったようなホームページ。インクのように暗いセクションと紙のように明るいセクションが交互に現れ、タイポグラフィは大きくタイトに、ただ一つのオレンジアクセントがあらゆるアクションを引き締めます。ヒーローは小さな宇宙—惑星、軌道、ペーパーカード—がマウスに向かって傾きます。さらに下に進むと、実際の写真は単なる枠内に配置されるのではなく、ポスターに印刷されます。グレースケール変換、紙色への乗算、巨大な文字の下に配置され、訪問者がホバーするまでカラーは戻りません。
参考ビルドは example/index.html（架空の旅行ブランド「Atlasio」、英語）。詳細なコードは references/components.md にあります。screenshots/ には全セクションのデスクトップおよびモバイル表示のスクリーンショットが含まれています。
1. デザイン前に
- 6〜8枚の写真を集めてください。人物が動いているもの（駅、掲示板、道路、窓）が良いでしょう。各写真に一つの役割を割り当てます。ヒーローの小さなプリント、ポスターの各状態、サポートカードの各1枚。同じ写真を二度使用しないでください。
- すべての写真から、サードパーティのロゴや画面（空港広告、ブランドの看板など）をチェックし、切り取ってください。
- **4つの「可能性」**を選びます（旅行方法、都市、プログラム、季節など）。ルートコンソール用に4つのステップも選びます。それぞれに、1単語のポスタータイトル、2行の見出し、1文、そして1つの具体例（「パリ → ウィーン 夜行列車で」）が必要です。
- 写真を圧縮します（§5参照）。サンプルの7枚の写真は合計で約750 KBです。
2. ビジュアルDNA
| 要素 | ルール |
|---|---|
| インク | #101b22 ページ; テキスト用紙 #edece4; 控えめ #9ca6a8; ヘアライン #ffffff20 |
| 紙 | #edece4 明るいセクション、ポスター色: セージ #cbd4b2、クレイ #d8c4b5、ミスト #c0cfce、ライラック #c9c2d3; サポートカード #dbe1cd と #e5d5c6 |
| アクセント | 一つのオレンジ #ff6c3a（惑星、太陽円盤、ティッカー、アクティブタブ、最終セクション）。見出しのピリオドとルート番号のみ、薄いライム #c6d9ab/#c2d3a3 を使用 |
| タイプ | 表示用: DM Sans 800–1000（文字間隔 -.065 ～ -.09em、行間 .8–1）; 本文用: 400–700。ラベル、座標、アイブロウは全て IBM Plex Mono 6–9px 大文字 |
| 見出し | 3段積み: ソリッド、アウトライン（-webkit-text-stroke:1px）、オレンジ; 各行はマウスに応じて異なる量だけ動く |
| 写真 | ポスター内とサポートカード内: grayscale(1) contrast(1.1) + mix-blend-mode:multiply を着色された独立したカードに適用; ホバーでカラーが復元され、1.04倍に拡大。ヒーロー内の小さなプリントはカラーのままで、紙の枠を持つ |
| 形状 | 惑星、太陽円盤、軌道、スイッチャーのピルを除き、すべての角は正方形 |
| カーソル | 30pxのリングとドット、mix-blend-mode:difference; リンク上で拡大。マグネティックボタンはポインターに向かってドリフト |
3. セクションパターン
- ヘッダー – ワードマーク、モノ「edition」リンク、3つのアンカー、モーション切り替え (
MOTION ON/OFF)、枠線付きCTA、650px以下でバーガーメニュー。2pxのオレンジ色の読書進捗バーがページ上部に表示される。 - ヒーロー – モノメタ行、3行見出し、アスタリスク星、2行の本文、下線付きリンク、小さなプリント。右側: 軌道宇宙（緯度/経度リングと2文字の単語を持つ惑星、3つの軌道、衛星、回転するモノラベル）と3枚の浮遊カード: デスティネーションチケット（クリックで4つの可能性を巡回）、パスポートスタンプカード、フォトプリント。下部バー: スクロールリンク、「move the mouse」ヒント、ボリューム番号。
- ティッカー – 全幅のオレンジ帯、−1.6°回転、星グリフで区切られた巨大な単語。
- 可能性 – グレーの中間フレーズを持つ見出し、ピル型スイッチャー、次に2段組ボード: ポスター（座標行、ブレンド写真、太陽円盤、巨大な単語、下部ラベル）と詳細（大きな数字、アイブロウ、見出し、本文、「出発点となるルート」、インク色ボタン、モノ免責条項）。ポスターはマウスに合わせて3Dで傾く。
- ルートコンソール – 暗いセクション、オレンジのフレーズを持つ見出し、枠線付き行としての4つのタブ（アクティブタブはオレンジ）、パネル: ゆっくり回転する楕円軌道の中に巨大なライム色の数字とステップの本文。その下に「unlock」行。
- サポート – 大きく回転する星 + 2色の見出し; 2枚のカード（セルフサービスと有料アドバイザー）、それぞれにブレンド写真、カーソル追従ライト、下線付きリンク; 1つのオレンジの単語を持つ「learn a language」行。
- ファイナルコール – 全面オレンジのセクション、グリッド、2行の巨大なリンク（「So, where next?」）、ホバーで動く矢印、短い約束、インク色ボタン、モノルート行。
- フッター – ワードマーク、2行の文章、リンク; ブランドが架空の場合の正直な注記を含むモノ下部行。
4. シグネチャーエフェクト
- マウスフィールド: ヒーロー内の
pointermoveで、:rootに--px/--py（−1…1）をセット。見出し行、浮遊カード、3D軌道システムは、異なる倍率でtranslate3d/rotateX/Yでこれらを読み取り、.6s cubic-bezier(.16,1,.3,1)のトランジションで緩和される。動的なX 050 / Y 050の座標表示も更新される。 - 粒子ネットワーク: 65個の漂う点（携帯電話では25個）のキャンバスで、95px以内でリンク。点はポインターの120px以内で押しのけられ、180px以内ではオレンジの線がポインターに接続される。ヒーローが表示され、モーションがオンの場合のみ実行。
- ブレンド写真ポスター: 写真は
isolation:isolateポスター内でz-index:-2の絶対配置<img>。グレースケール＋乗算でポスター色に印刷。太陽円盤はその上に乗算、巨大な単語はその上に配置。可能性を切り替えると、古い写真がフェードアウト（.swap）、srcを交換、load時にフェードイン、data-theme属性でポスター色と太陽色を変更。 - チルトカード＋カーソルライト: ポスターとサポートカードはポインターに向かって約7〜9度回転し、
--cx/--cyを公開して放射状ハイライトを適用。 - アクセシブルなタブ: ルートタブは
role="tablist"、ロービングtabindex、矢印/Home/Endキーを使用。 - モーション切り替え: 1つのボタンですべてのアニメーションを停止し、マウスフィールドをゼロに。
prefers-reduced-motionと粗いポインターは同じものを自動的にオフにする。
5. ビルドルール
- 写真:
ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg（ヒーロープリントは約900px幅）。ロゴや画面の切り取り:-vf "crop=w:h:x:y,scale=1100:-2"。各写真は約170KB以下に保つ。 - スタンドアロンHTML: doctype、charset、viewportを含む。フォントはGoogle Fontsから。矢印と星のインラインSVGシンボル。その他の依存関係なし。
- すべての写真に実際の
alt属性でシーンを説明。ただしポスター写真は装飾的（alt=""、aria-hidden）とする。ポスターの単語と詳細が意味を伝えるため。 - モバイル: ヒーローは縦積み、宇宙は約66%に縮小、カードは独自の変形で縮小、ポスターの単語は
22vwでword-break:normal、タブは2×2グリッド、カーソルリングとチルトはオフ。 - 390pxで水平スクロールなし。スキップリンク。表示可能な
:focus-visibleアウトライン。
6. コピーライティング
- 3つの短い宣言文: 「Come with a dream. Leave with a plan.」「Find the place. Draw your own route.」
- モノラベルは印刷版のように:
01 / POSSIBILITIES、MODE 02 / AIR · FAR AWAY BY TOMORROW。 - 例は実際のもののように見せるが、例であることを明示。法的または参入ルールは常に公式ソースを参照。
7. 完了チェックリスト
- 各写真は一度だけ使用され、クレジット表示され、サードパーティロゴがないようにトリミングされ、圧縮されている。
- ヒーローはマウスに合わせて傾く。デスティネーションカードと「another possibility」は、ポスターと同期して4つの状態を巡回する。
- ポスター写真は古い画像がフラッシュせずに切り替わる。ホバーで色が戻る。
- ルートタブはキーボードで操作できる。
- モーション切り替え、縮小モーション、タッチ操作のすべてで、マウスフィールド、キャンバス、ティッカー、チルトが停止する。
- 390px: ポスタータイトル内で単語の分割がない、水平スクロールがない、コンソールエラーがない。
- スクリーンショットを再生成:
node scripts/screenshots.mjs example screenshots