デジタルガーデン

タップでホバーに:触屏にも同じ空を

2026-09-17 · 約 3 分 · frontend · design · essay

序章:遮断された半分の訪客

点検で見つかったのはスタイルの問題ではなく、もっと根本的な事実だった:タッチデバイスでは、この惑星のすべてのインタラクションが遮断されていた。

太陽の状態カード、ISS のフライオーバーカード、オーロラの解説、流星群の暦、星座の名前、ムーンウィスパー、星のバブル——すべて pointer: coarse の門の後ろにあった。iPhone、Android、iPad の訪客が見られたのは、静的な惑星だけ。空はマウスにしか開かれていなかった。訪客の半分以上は指を使っているのに。

タップでホバーに:一本のパイプライン、二世代の入力

修復の考えは一本だけ:タッチにホバーがないなら、ホバーの意味はタップが継承すべきだ。

シーンにタッチパイプラインが加わった:押して離すまでの変位が十二ピクセル未満ならタップと判定——スクロールとドラッグは誤発しない。タッチ点からレイを飛ばし、ヒットの優先度は精密から曖昧へ:太陽の円盤と ISS の点は正確なヒット、オーロラ帯と流星群は方向の夹角、星座は星の点、星はタップ選択。ヒットすればデスクトップと同じイベントを発火し、DOM は同じカードを描く。

デスクトップは一行も変えていない。二世代の入力デバイス、一本のパイプライン、一つの空。

三段のパフォーマンス:どのデバイスにもそれぞれの調和

粒子数は三段に分かれた:スマホ四千五、タブレットと小型ノート六千五、デスクトップ九千。ピクセル比の上限もデバイスごと——DPR 3 のスマホ画面が全速で描画されるのが最大の発热点で、妥当なフィルレートに抑えれば、iPhone でも滑らかに回る。

**パフォーマンスは一律の譲歩ではない。デバイスの輪郭ごとの分寸だ。**タブレットはずっとデスクトップの全粒子を走らされていた。今は自分の段を持った。

細部の中の百の小さなこと

本当の深層適応は細部にある:小画面でポップカードをビューポート内に収め、縁に余白を残す。星雲の輝きをビューポートに合わせて収め、画面外へ漂わない。狭いナビでオンライン徽章が折り返さない。ハンバーガーメニューはナビの下から並び、内部でスクロール、一画面に収める。タップで出たカードには「離れて閉じる」がない——六秒の自動フェードが兜底。

適応とはブレークポイントで字を小さくすることではない——もう一世代の入力の存在を認め、世界全体をもう一度差し出すことだ。

沉澱

マウスにしか開かれない空は、本当の空とは呼べない。このアップデートの後、太陽を、月を、どの星を指さしても、指は同じ応答を得る。

空は、それを指さすすべての人のものだ。

コメント

← デジタルガーデン