タイル型とフローティング型 — 浮遊し始めるUI（PC編）
Googleのサービスはまるで生物のように日々絶え間ないUIの変更が加えられています。その変更の中にはMaterial Design 3への対応といった大々的なものもあれば、色味の修正といった簡単なものまで様々です。特にYouTubeのUIはGoogleでありながらコンテンツプラットフォームとして独自の立ち位置を得ている先駆者です。そんなYouTubeが先日行ったアップデートが個人的に興味深いものであったため、今回はこのアップデートについて深堀って行こうと思います。
YouTubeのミニプレイヤー
YouTubeは2024年7月頃に、動画再生時に他の画面に移動した際に動画を継続して流すためのUIを既存の下部バーの形からピクチャー・イン・ピクチャー（以下、PiP）形式のミニプレイヤーに変更しました。
正直、数年前に発表された「アンビエントモード」に比べたら些細な変化です。しかしながら、自分はこの変更がなぜかすごく心に残っていました。この心残りを自分なりに解釈した結果、コンピュータが登場してから今日、はたまた未来のUIに至るまで通底する二項対立について考えました。今回はこれについて記していきます。軽く要点を述べると UIには「フローティング型とタイル型」の二項対立が常に存在している と考えています。これはUIが今後どちらかが覇権を取るという話ではなく、フローティング型とタイル型が常に共存し続けるという意味です。よろしければしばしのお付き合いお願いします。
1. YouTubeのミニウィンドウはスマホのPC化
フローティング型とタイル型の話をするにあたって、まずはYouTubeがなぜこの変更をすることにしたのか考えてみましょう。YouTubeがこの変更をしたことで得られたメリットは以下のとおりです。
ミニプレイヤーにおけるコンテンツの最大化
既存のPiPシステムとのUI的融合→サイズと位置の柔軟な変更の可能化
再生/一時停止、10秒間の巻き戻し/送りオプション
ここでYouTube側が明言してたのは下の2つです。しかしながら、再生/一時停止、10秒間の巻き戻し/送りオプションは既存のUIに於いてもタイトル部分を削ることで実装は可能でした。そのため、この変更を加えた大きな理由は「既存のPiPシステムとのUI的融合し、それによりサイズと位置の柔軟な変更の可能になる」ことだと言えます。ここで考えてほしいのですが、このPiPとはとある別の機能にとても似ています。それはこの文章の見出しからもわかるように、PCのウィンドウです。現在Windows OS, MacOS, Chrome OSなど広く一般に使われているOSはデフォルトでフローティング型ウィンドウマネージャーでウィンドウを管理しています。これは、PiPと同じようにサイズや位置を柔軟に変更可能なのはもはや当たり前のこととみなしてよいでしょう。そして、この論を支える重要な要素がYouTubeのミニプレイヤーにも組み込まれています。それが閉じるボタンです。今回のアップデートで抱いた違和感の最大の要因はここにあります。YouTubeはAndroid, iOSはもちろんのことWebサービスまで展開するクロスプラットフォームサービスでありどのOSでもそのデザインを比較的統一しています。しかしながら、今回発表されたこのミニプレイヤーは閉じるボタンのデザインがAndroidとiOSで左右の配置が異なっています。これが今回の主張の証左となり得ます。AndroidはLinux, iOSはMac OSに直接的な親子関係があります。今回は自由度の高いLinuxだと判断がつきにくいのでGoogleが開発しているLinuxの一つであるChrome OSに絞って考えてみましょう。このとき、Chrome OSの閉じるボタンが右にあるのに対して、MacOSの閉じるボタンは左にあることがわかります。このことから、開発側が意識しなかったとしてもミニウィンドウはそれぞれのPCのウィンドウを参考にして作られたと言えるでしょう。
2. そもそもフローティングウィンドウが登場したのっていつ？
それではそもそもフローティングウィンドウがどのような経緯でPCに導入されたかについて振り返ってみましょう。PCのフローティングウィンドウはPCにGUIが導入されたときまで遡ります。当時のコンピューターはCUIと呼ばれる所謂テキストコマンドのみで操作をしていく形式でした。その中で、米軍のSAGEがGUIの駆け出しになったりと色々起こりましたが、注目するべきなのは商業的に成功を収めたWindows OSとMacOSでしょう。特に、Altoの先進性に感銘を受けたジョブズとAppleのエンジニアが作成したMachintoshが最も影響が大きいと言えます。ここから、ビル・ゲイツがこのアイデアを参考にするなどしてMacOS, WindowsOSと一般にフローティングウィンドウが普及していきました。
3. PCは全てがフローティングになったのか
3.1. ウィンドウマネージャーに思いを寄せて—タイル型ウィンドウマネージャ (利便性)
では、PCの大半がフローティングになった現在フローティングがタイル型を全て駆逐してしまったと言えるでしょうか？答えはNoです。もちろんタイル型のウィンドウマネージャーは存在します。むしろ、この二項対立はPCのウィンドウマネージャーのこの2つを見たときに思いついたものです。タイル型ウィンドウマネージャーとは、文字通りウィンドウをタイルで管理するします。タイル型ウィンドウマネージャーは操作の高速性と既に位置がある程度決まってる秩序性においてかなりの利点があります。フローティングウィンドウと異なり自由度を下げた設計を行っているタイル型ウィンドウマネージャーですが、そもそもウィンドウは基本的に横並びで配置したり、田の字で配置したりと規則的な配置を前提に構成されることが多いです。そのため、常に規則正しく配置されるタイル型ウィンドウマネージャーはその辺りの取り回しが良いです。（キーボードショートカットで全てのウィンドウ操作が完結できるのもメリットだったりします笑）。このようなタイル型の機能はギークに限った話ではなく、実はフローティングウィンドウマネージャーを導入したものにも見られています。Macにおいてはデフォルトで最大化ボタンをホバーするとタイル型のウィンドウ配置ができるショートカットが出てきます。WindowsにおいてもPower Toysを導入していれば起動することができます。また、この流れはタブレットなどの大画面タッチデバイスにも来ています。iPadOSやAndroidは画面分割がそれに該当しますね。また、ArcやZen Browserといった最新ブラウザ、VSCodeなどのエディタも同様に画面分割をサポートしています。
3.2. 変わらぬタイル型の存在—キーボード
ここまで、画面内部におけるタイル型について論じていましたが、実はPCは画面外からタイル型を守っているとも言えます。あなたがスマートフォンを操作するとき、一番操作しやすい場所はどこでしょうか？これはAppleが少し前に行ったSafariの変更から読み解くことができます。SafariやChrome, FirefoxといったブラウザではPC時代から画面上部にタブバーを配置していました。しかし、Appleはその概念を覆し、iPhoneのSafariのタブバーを配置するようになりました。これは画面下部が一番操作しやすい場所としてAppleが認識していると捉えられます。コレはiOSやAndroidで見られるジェスチャーナビゲーションにも言えます。また、AppleはMacOSのトラックパッド操作とiOSのジェスチャーナビゲーションとを似た体験にしています。そして、iOSのキーボードはWebページなどのコンテンツの下、ジェスチャーナビゲーションの上に存在します。この配置はパソコンのトラックパッド→キーボード→ディスプレイと全く同じ配列です。これはAppleがiPhoneをMacに似せたとも捉えられますが、お互いを等価に見たとき面白いことがわかります。iPhoneのキーボードとトラックパッドがタイル型とすると、PCのキーボードとトラックパッドもタイル型と言えるのです。そういう意味では、PCの画面というのはパソコンの上部だけを言うのではなく、今も昔も常に画面下部にキーボードとトラックパッドがタイル型でついている大きな画面とみなすこともできます。フローティング型がウィンドウマネージャーの中で大きなシェアを獲得している一方で常にタイル型が存在していたというのは非常に興味深いです。
逆に、現代ではAndroidのGboardや、iPad OSの純正キーボードに見られるようにフローティング型のキーボードも存在しています。
4. 規格化と自由の境界
では、タイル型とフローティング型が共存してくれる理由は何でしょうか。僕はそれを規格化と自由の違いだと考えています。YouTubeがフローティングのミニプレイヤーに変更したとき、使いづらいという反発が一部で起こっていました。その反発の原因としては、位置やサイズが思いもよらず変わってしまうというのがほとんどです。これはGoogleがミニプレイヤーで述べたメリットと同一です。つまり、カスタマイズ性の自由が、メリットにもデメリットにもなってしまう。規格化を施すメリットは、どんな状態であっても、たとえ見ていなかったとしても、場所と操作が既に決まっているため最速で的確にアクセスできることにあります。そのため、操作の要となるパソコンのキーボードはタイル型を採用しており、フローティングウィンドウマネージャーも同じ理由だと言えます。一方で、フローティング型はカスタマイズ性が高いので、画面領域が制限されやすいモバイル端末、そしてエンタメ分野のPiPに採用されているのかもしれません。
ただ、フローティング型はスピードにおいては常に劣ってしまいます。フローティング型は我々のイメージとしてはイラストレーターのレイヤーのように二次元の空間に新たに高さを加えることで限られた空間を有効に活用するシステムです。しかし、スクリーンはホログラムではないため今も昔も2次元から変わっていません。追加された高さの軸、z軸は一体どうやって追加されているのでしょうか？ このz座標はスクリーンが飛び出しているわけではなく、時間軸がその代わりを担っています。私達がYouTubeのミニプレイヤーの後ろのコンテンツを見たいとき、UI上は上に乗っかっているミニプレイヤーをどかして、下のコンテンツを見ますが、現実に置き換えるとそれはミニプレイヤーが乗っかっている状態から乗っかっていない状態の画面に時間軸を通して遷移しているに過ぎないのです。そして、私達は空間をスクリーンで見られるのに対して、時間は点でしか見ることができません。そのため、フローティング型で作業する際は常に時間を移動する必要性が出てきてしまいます。これがタイル型と比較したときのフローティング型の遅さ、操作の面倒につながってしまいます。
ここまで、PCにおけるタイル型とフローティング型について論じてきましたが、想定以上に長くなってしまったのでアドカレとは別に残りをモバイル編と将来編の2つに分けて論じていこうと思います。