すべてのフレームが完璧

2026年6月13日原文(tonsky.me)

概要

Waylandの「すべてのフレームは完璧であるべき」という目標に着目 UI設計においても「どの瞬間のスクリーンショットも意味を持つ」ことの重要性を強調 UIの完成度がユーザーの信頼につながる根拠不完全なフレームやアニメーションが信頼を損なう例を紹介すべてのフレームに注意を払うべき理由を解説

「Every Frame is Perfect」というWaylandの思想とUI設計

Waylandの目標の一つである 「すべてのフレームは完璧」 という考え方
この目標は 技術面 だけでなく UI設計 にも応用可能
どの瞬間のスクリーンショット でもアプリの状態が理解できるUI設計の重要性
ユーザーは コード ではなく UI でアプリの品質を判断
UIの完成度 が高いと、開発者が細部まで気を配っている印象を与える

「Every Frame is Perfect」が意味する実践例

画面遷移時の白いフラッシュ やちらつきの排除
部分的なコンテンツの読み込み表示 を避ける
コンテンツ読み込み中のレイアウト再配置 を防ぐ
UI内の情報の一貫性 を保つ
- 例：「1件のアップデートがあります」と「アップデートを確認中...」の矛盾排除
アニメーションの精度 にも注意
- 開始・終了状態だけでなく 途中のフレーム も自然であること
Safariの例 ：プレースホルダーとカーソルのアニメーションが非同期で不自然
Photosの例 ：CropとAdjustモード切替時、画像と枠線の動きが非同期
YouTubeの例 ：単純な矩形移動でも不自然な動き

不完全なフレームが引き起こす問題

UIの 同期ズレ がユーザーの混乱や不信感につながる
アニメーションが 設計段階で十分考慮されていない 場合、不自然さが生じる
技術的制約やDOM構造による 不自然な挙動 の発生
「技術が開発者を出し抜く」 状況の発生
結果として 「完璧なフレーム」 でないUI体験

まとめ：「すべてのフレームに気を配る」ことの重要性

開始状態・終了状態 だけでなく すべての中間フレーム も重視
UIは 正確な道具 であるべきで、ユーザーに誤解を与えない設計が必要
アニメーションやUI遷移の細部まで配慮する姿勢
「Every Frame Matters」 という意識を持つことの推奨

Hackerたちの意見

これには共感したけど、ポジティブな例も見たかったな。トーンは愚痴っぽくはなかったけど、良いUIの構築についてあまり知らない私には、ノーススターが何かを理解するには至らなかったな。

└

もしくは、著者が悪い例を正しくやった場合の見た目を描いてくれたらよかったな。

こういう不完全なフレームがないUIの方が気持ちいいだろうけど、今はこのクリップをそれぞれ編集して実際にどう見えるか見てみたいな。同時に、なんで全てに動きが必要なんだろう？私の理解では、動きはアクションがトリガーされた場所とは違う領域でUIが微妙に変わるときに使うべきだと思う（例えばトースト通知みたいに）。多くのトランジションは不要だと思うし、瞬時に再フローしてパッと切り替わる方が気持ちいいはず。

└

トランジション後の再オリエンテーションには動きが重要だよね。動きがないと、リフレッシュするたびに脳がページ全体を再スキャンしなきゃいけないから。

└

いいUIのゲームをプレイすれば、あちこちでアニメーションが使われてるのがわかるよね。瞬時の遷移は理論上はいいけど、実際はどうかな。

└

でも、なんで全てに動きが必要なの？必要ないよね。ほとんどのものはそう。こういう無駄が、余計に半ダースの人を雇わせて、他の半ダースの人に「$BRANDのデザイン言語は他より優れてる」って得意気に言わせるんだよね。示されたほとんどのケースでは、アニメーションがなければもっと良い感じになると思う。ボタンをクリックしたら、さっさと結果を見せてほしい。ダンスなんかしないで、ただ見せてくれればいいんだよ！

今は不完全なフレームの方がいいな、完璧なフレームは後ででいい。レイテンシーはどんなUIにとっても最優先事項で、レイテンシーが低いと自分の体の一部みたいに感じられて、認知負荷が減るから。アニメーションは特にこれに悪影響を与えるよね。アニメーションは何百ミリ秒ものレイテンシーを追加しちゃうから。

└

タイトルがWaylandについてだと思ったかもしれないけど、その通り。でも、これはWaylandの話じゃないよ。

└

それは誤った二項対立だと思う。著者が挙げた例は、正しくやればどんな点でも遅くならないはずだよ。

良いアニメーションは、動いている間に少しごまかすことが多いと思う。完璧に見える必要はなくて、カートゥーンみたいに、間違ったタイミングで一時停止すると奇妙に見えるスミアフレームを使うことがあるけど、全体のアニメーションの一部として見ると動きを視覚的に伝えるのに役立つんだよね。

└

ゲームのオーバーウォッチは、これの現代的な良い例だね。[1] すごく流れるようなアニメーションがあって、フリーズフレームするとちょっと変に見えるよ。[1]: https://youtu.be/vIdeGmN__Pw?t=550

└

この例えはちょっと合わないと思う。ぼやけたフレームは動いているときは良く見えるけど、ブログに載ってるフレームは動いてるとひどく見える。最初の例のアニメーションは本当にひどくて、最初に見たときは、最後に上にボタンが3つあると思ったんだけど、実際には2つしかなくて、ちょっと変で混乱した。

Hacker Newsで議論の続きを見る

ハクソク