静的なUIが動き続ける理由: 状態を手放した瞬間に設計は強くなる

Hatched by naoya

Jul 05, 2026

1 min read

2 views

78%

変わり続けるのは画面ではなく、前提である

「画面はなぜ勝手に変わるのか」と問うと、答えはたいてい「ユーザーが操作したから」です。しかし本当に変わっているのは、画面そのものではありません。変わるのは、アプリがその瞬間に信じている前提です。入力欄の中身、選択中のタブ、オンになったスイッチ、そして表示モード。UIは静止画の集まりではなく、前提の変化を映す仕組みです。

この見方をすると、2つの話が一本につながります。ひとつは、状態が変わると必要な部分だけが再実行され、画面が更新されるという仕組み。もうひとつは、利用者の表示モードが驚くほど分かれていて、ダークモード、ライトモード、その併用がほぼ均等に存在するという事実です。つまり、UIは一つの正解を固定的に配るものではなく、複数の前提が同時に成立する世界を扱う必要があるのです。

ここに、現代の設計の核心があります。良いUIは、見た目を整えるだけではありません。変化を前提にして、その変化を破綻なく受け止める構造を持っています。

UIの本質は「描くこと」ではなく「再構成すること」

多くの人はUIを、画面に要素を並べる作業だと考えがちです。ですが、実際にはもっと動的です。画面は一度作って終わりではなく、状態が変わるたびに必要な部分が再び組み立てられます。ここで重要なのは、再描画ではなく再構成という発想です。

たとえばレストランのメニューを考えてみてください。注文が入るたびに店全体を建て直す必要はありません。変わるのは厨房で準備すべき料理だけです。席の配置、入口、看板まで毎回作り直していたら、店はすぐに崩壊します。UIも同じで、状態が変わったからといって全体を力任せに更新するのではなく、変化の影響を受ける場所だけを再構成するほうが合理的です。

この考え方が強いのは、単に効率が良いからではありません。関心の分離を作れるからです。あるコンポーネントが自分の状態を抱え込みすぎると、どこで何が変わるかが見えなくなります。逆に、状態を必要な場所へ明示的に渡せば、見た目のロジックと変化の責任を分けられます。すると、バグは減り、変更は局所化し、テストもしやすくなります。

UI設計で難しいのは、画面を美しくすることではない。変化を局所化することだ。

この視点は、ダークモードのようなテーマの話にもそのまま当てはまります。なぜなら、表示モードは見た目の違いに見えて、実はアプリが世界をどう解釈するかという状態だからです。

ダークモードは色の好みではなく、世界の複数化である

ダークモードについて語るとき、しばしば「目に優しい」「見栄えが良い」「バッテリーに良い」といった単純な利点に話が収束します。しかし利用者の現実はもっと複雑です。ある調査では、モバイルユーザーはおよそ3分の1ずつ、ダークモード、ライトモード、両方を組み合わせて使っていました。これは何を意味するのでしょうか。

重要なのは、ユーザーが単一の恒常的な人格として存在していないことです。同じ人が、時間帯、場所、気分、用途によって前提を切り替えるのです。昼の屋外ではライトモードが読みやすく、夜の寝室ではダークモードが落ち着く。長文を読むときは一方、写真編集や動画視聴では別のモードが心地よい。ユーザーは一つの設定を守り抜く存在ではなく、状況に応じて最適解を変える存在です。

ここで設計者が犯しやすい誤りは、自分の好みを普遍化してしまうことです。自分がダークモード派だから全員そうだと思う、自分がライトモード派だから他は例外だと思う。けれど、現実はそのどちらでもありません。むしろ、正解が分散していることを前提にしなければなりません。

この分散は、設計思想に大きな示唆を与えます。もしユーザーがモードを切り替えるのが当たり前なら、UIは「一つの見た目を守る」より「どちらに切り替わっても壊れない」ことを優先すべきです。つまり、ダークモード対応は配色の追加ではなく、状態を受け入れる設計の試金石なのです。

たとえば、文字色を単純に白黒で反転するだけでは不十分です。コントラスト、情報の階層、画像の見え方、影の意味、ボタンの押下状態まで含めて再設計しなければ、モードをまたいだときに意味が崩れます。見た目だけを変えると、使い勝手はむしろ悪化します。ここでも必要なのは、単なるスタイル変更ではなく、状態と意味の再構成です。

ステートレスとは、何も持たないことではない

状態を扱う設計でしばしば誤解されるのが、「ステートレスなら何も覚えない」という理解です。実際には逆です。ステートレスとは、何もできないことではなく、自分で抱え込まないことです。自分が状態の唯一の保管場所になるのを避け、外から渡された現在の値を描くだけに徹する。すると、その部品は単純になり、再利用しやすくなります。

この発想は、家具の組み立てに似ています。椅子の脚が自分の高さを勝手に覚えていたら、引っ越しのたびに不都合が起きます。けれど、設計図が高さを外部から与え、椅子はその通りに組み上がるだけなら、用途に応じて調整できます。アプリのコンポーネントも同じで、情報を保持する器ではなく、状態を受けて意味ある形を返す器として作ると強いのです。

ここで鍵になるのが、状態の持ち方を分けることです。入力の生データ、表示ルール、テーマの選択、画面遷移のような変化は、同じ場所に混ぜるほど壊れやすくなります。状態ホイスティングは、その混線を解くための方法です。状態を上位に移し、下位の部品は表示と通知に集中する。これにより、下位の部品は汎用的になり、上位は変化の責任を引き受けられます。

この構造は、ダークモードのようなグローバルな前提にも有効です。モードを各部品が勝手に決め始めると、アプリ全体で整合性が崩れます。ある画面はダーク、別の画面はライト、ボタンだけ別テーマ、というカオスが起きる。けれど、表示モードを上位で管理し、下位はその選択に従うだけなら、全体として一貫性が保てます。つまり、状態を手放すことは、制御を失うことではなく、制御を正しい場所へ移すことです。

優れた設計は、責任を消すのではなく、責任の置き場所を整える。

変化に強いUIは、単一の真実を持たない

ここで少し視点を広げましょう。状態を局所化し、モードの分散を受け入れるという話は、実は同じ教訓を別の角度から語っています。それは、単一の真実を前提にしないということです。

昔の設計では、UIは一つの真ん中の状態から一方向に描画されるものとして扱われがちでした。しかし実際の利用環境はそんなに素直ではありません。ユーザーは1日を通じてモードを変え、ネットワークは不安定で、画面は回転し、通知は割り込む。ひとつの固定的な真実に依存したUIは、こうした変化に弱い。だからこそ、現代のUIは「今の状態から、今見えるべきものを再構成する」設計に近づいています。

この設計の強さは、未来予測を減らせる点にあります。すべての状態遷移を先回りして想像するのではなく、状態が変わったらその時点で再評価する。これは怠慢ではありません。むしろ、変化を前提にした慎重さです。世界の複雑さを無理に単純化しないことで、かえってシステム全体が安定します。

ダークモード対応も同じです。重要なのは、どちらの配色が正しいかを決めることではありません。どちらに切り替わっても、情報の意味が保たれるかです。見出し、本文、補助情報、警告、成功、無効状態。これらの意味は、色に依存しすぎると壊れます。だから、色は意味を支える一要素であって、意味そのものではないと考える必要があります。

この観点に立つと、デザインシステムの役割も変わります。デザインシステムは見た目のカタログではなく、状態が変わっても意味が崩れないルール集です。コンポーネントの責務を明確にし、テーマの切り替えを一貫して扱い、再構成を予測可能にするための仕組みなのです。

Key Takeaways

UIは静的な画面ではなく、状態に応じて再構成される仕組みだと考える。 変化するのは画面ではなく、画面が前提としている状態。
ステートレスとは、状態を持たないことではなく、状態を抱え込まないこと。 表示する部品は単純に保ち、状態の責任は上位へ移す。
ダークモード対応は配色の問題ではなく、複数の前提を許容できるかの試験である。 色だけでなく、意味、階層、可読性まで再設計する。
一貫性は、すべてを同じにすることではなく、状態が変わっても意味が壊れないこと。 ライトでもダークでも、情報の優先順位が同じように伝わるか確認する。
設計で最も重要なのは、変化をどこで受け止めるかを明確にすること。 変化の責任を分散させず、適切なレイヤーに集約する。

結論: 良いUIとは、揺らぎを受け入れる秩序である

UI設計の成熟とは、もっときれいに描けるようになることではありません。変化する世界を、壊さずに受け止められるようになることです。状態を手放したコンポーネントは弱くなるのではなく、むしろ他と組み合わせやすくなります。ダークモードとライトモードが並立する世界では、単一の見た目を守るより、前提の揺らぎに耐える構造のほうが価値を持ちます。

つまり、優れたUIは「固定された完成形」ではありません。状況が変わるたびに、必要な部分だけを静かに再構成し続ける生きた秩序です。見た目の違いに惑わされず、その背後にある状態の流れを見ること。そこから、設計は単なる実装作業ではなく、世界の複数性を受け入れる知性になります。