デジタルガーデン

明と暗のあいだで:iPhone 流テーマ切替

2026-09-14 · 約 2 分 · デザイン · 迭代記録

以前:儀式のない切替

テーマボタンは三状態を循環していた:自動 → ライト → ダーク。アイコンは即座に切り替わり、ページは瞬時に反転した。機能は完璧——でもあの「パチン」という音は、日没ではなく電気のスイッチだった。

iPhone はどうしているか

iOS はテーマを切り替える時、決して「パチン」と言わない。三つの層が同時に動く:

  1. アイコンのスプリング旋回——新しいアイコンは 0.4 倍の縮小と -100° の回転から、システムのスプリング曲線に沿って正位置へ。古いものは削除されたのではなく、旋回して現れたものに取って代わられた
  2. ボタンの反発——タップの瞬間に 0.86 まで縮み、弾き戻る。指先は目より先に「触れた」と知る
  3. ページ全体のクロスフェード——View Transitions API が新旧のフレームを撮り、0.5 秒で交差溶解する。スキンの交換ではなく、世界全体が光を変える

ひとつの門扉

ある細部がすべてを台無しにしかけた:これらのアニメーションを状態に吊るすと、初回レンダリングで自ら再生してしまう——誰もページを見る前に、アイコンがひとりでに旋回した。

解法は門扉:theme-switched クラスは、ユーザーが初めて本当にタップした後にのみ付与される。アニメーションはインタラクションのために存在し、レンダリングのためではない。

退化は尊厳の一部

prefers-reduced-motion のユーザーには清潔な即時切替を。未対応ブラウザはページのクロスフェードを自動でスキップし、アイコンのアニメーションは残る。すべてのユーザーが完全な機能を得る——テンポが違うだけだ。

モーションは、見たい人への贈り物であり、全員への関所ではない。

コメント

← デジタルガーデン