端末の傾きは、レイアウトではなく光に使う

端末の傾きを取得できると、カードそのものを回転させたくなる。けれども、センサー値は端末、持ち方、ブラウザで異なり、許可が必要な環境もある。レイアウトの成立をセンサーへ預けるのは危険だ。

このサイトでは、傾きは反射の位置、影の向き、左右の縁といった装飾に限定している。縦型から横型へのレイアウト変更は画面のorientationへ任せ、センサーは「少し手触りが変わる」ためだけに使う。

最初の値を基準にする

取得した角度をそのまま使うと、ページを開いた姿勢によってカードが急に傾く。最初の値を基準として保存し、そこからの差分を小さな上限付きで扱うと落ち着く。

センサーが未対応、許可されない、動きを減らす設定が有効、といった場合は何もしない。このフォールバックに特別な画面は不要で、装飾が消えるだけでよい。センサーは機能ではなく余韻、と考えると設計しやすい。