タブブラウザを辞めてもいい頃
世界はタブブラウザに支配されている。
そう言っても過言ではないほど、ウェブブラウザのユーザーインターフェース(UI)には多様性が無いのではないでしょうか。
IEから転生を果たしたEdge、世界シェア1位を走りつづけるChrome、対応が打ち切られつつある悲哀のFireFox、そのほかSafariとかOperaとかBraveとかVivaldiとかありますが 結局どれもみんなタブブラウザです。
種類はいろいろあるのに、結局同じ見た目のものばかり…それって寂しくないですか？
というわけでタブブラウザの支配を終わらせる道を探してみたいと思います。
タブブラウザとは
そもそもタブブラウザって何だ っていう方も――もしかしたら――いるかもしれないので、ここで簡単に共通認識を作っておきます。
タブブラウザとは、Webブラウザのうち、タブと呼ばれる画面切り替え用インターフェースを利用し、1つのウィンドウで複数のWebページを表示することを可能にしているWebブラウザのことである。
要するにWebページの切り替えにUIパーツのタブを採用したブラウザを指します。ここ10年以内にパソコンでウェブブラウザを使ったことがあるならそれはおそらくタブブラウザです。
余談ですが、さっき引用したページ曰く主要ブラウザの中ではOperaが最初にタブUIを採用したらしいです。
また、窓の杜で古の記事を探したところ2001年のOpera6.0-Beta1の紹介にタブUIを採用したとの記述がありました。さらにそれ1999年頃にも個人開発レベルでタブUIを採用したブラウザがあったようです。
起動時にMDIスタイルとSDIスタイルのどちらか選択できるようになり、タブ切り替え型Webブラウザーのインターフェイスと、「Internet Explorer」のような1ページ1ウィンドウのインターフェイスを使い分けられるようになっている。
他のブラウザがタブUIに移行していった時期もそれはそれで気になりますが、本題から逸れるので未来の自分に任せておきます。
タブブラウザの問題点
メーカーの垣根を越えてブラウザに採用されていて、名実ともにデファクトスタンダードになっている「タブUI」ですが、不満点はあります。
1. 大量にWebページを開くと使い物にならない
タブUIはWebページのタイトルを「横書き」かつ「横並び」で表示する都合上、大量にWebページが開いた状態では表示できる文字数が少なくなります。
その結果、開いているページのタイトルが分からず、またそのページを開くまで内容は分からなくなります。
自由気ままにブラウジングしていたらタブの山が出来上がっていているのはあるあるでしょう。
2. 目的のページが探しづらい
また、タブUIが増えるにつれて、表示が細かくなるより先に発生する問題もあります。
タブはすべてのウェブページが平等に表示されるので、確認したタイミング、ユーザーにとっての重要度にかかわらず同じレベルで表示されます。
そのため、さっき開いたページを再確認するときには他のタブに埋もれて見つけにくくなります。
ページタイトルがわかりやすければまだいいものの、調べ物中は似たような題名のページを大量に開きがちになるため、見直さないことには特定は困難です。
3. 操作がめんどい
マウスで操作する場合、タブUIはカーソル移動量が多くなりがちで、加えて精密な操作も要求されます。
普通、タブはウィンドウの上下左右のいずれかに配置されます。そして、タブに関する最も多い操作は画面中央のWebコンテンツと画面端のタブの往復になると考えられます。
平均して画面の中央にカーソルがあるとすると、往復するだけで画面の縦幅ぐらいは毎回移動することになります。斜めの移動を考慮するともっと増えます。
また、タブを閉じる際には小さいバツ印をピンポイントで押す必要があります。
タブまでカーソルを大きく移動してきた直後に、狭い領域にカーソルを合わせるチマチマした操作を要求してくるのは困ったものです。
また余談ですが、マウスのホイールクリック（中ボタンクリック）を習得すればタブは閉じられるのでストレスは若干解消できます。
また、マウスジェスチャーに対応したブラウザであれば、文字入力以外はマウスを握りしめたまま快適に操作できるでしょう。
あと、サイドボタンは正義
タブブラウザを超えた先
ここからは、ブラウザのタブUIを置き換えられるUIはどんなものか、探したり考えたりしていきます。
①リスト
タブが低密度なのは、横書き文字列を横並びにしたからです。であれば縦に並べればいいという話。
Edgeの垂直タブやVivaldiのタブサイクラー等で実装されています。
垂直タブはタブの領域を画面の左右に配置するものです。シンプルに一覧性が高まっていますが、カーソルの移動距離は現在のタブUIと同等でしょう。
一方でタブサイクラーは、①マウスの右ボタンを長押しをするとホバー表示され、②ホイールを回すとページが切り替わる、という操作でページを切り替えます。
一覧性も高く、操作の手間もかかりません。
しかし、どのページが同じレベルでずらっと並ぶので探す手間はタブと大差ないです。
$$
\begin{array}{|lcl|}\hline
\bold{観点} & \bold{評価} & \bold{備考} \\\hline
表示ページ量 & ◎ & タブと比べるとかなり増やせる\\
ページ再発見難度 & × & タブと同様 \\
操作コスト & & \\
垂直タブ & × & タブと同様\\
タブサイクラー & ◎ & 素早く操作できる\\\hline
\end{array}
$$
②タイル
2次元的に並べればもっと密度が上げられます。スマホ版のChromeなどではサムネイルをタイル状に並べて表示します。
PC版
タブUIと比べると画面の専有面積は増大しますし、何を基準に多段化するかはユーザーの好みが出る部分でしょう。
Edge, Chromeのタブのフォルダリング機能、Vivaldiのタブスタックはタイルっぽいです。 でもコレジャナイ感。
自分はVivaldiをヘビーに使っていますが、正直タブスタック機能は活かせていません。
ある1つのページを選ぶのに2回のアクションを要求されますし、タブをまとめるのも結局手動なので無闇に手間が増えるだけの印象です。
$$
\begin{array}{|lcl|}\hline
\bold{観点} & \bold{評価} & \bold{備考} \\\hline
表示ページ量 & 〇 & 面積が増えた分だけ増えるものの\\
ページ再発見難度 & △ & 使い手の管理次第 自分には無理\\
操作コスト & × & タブよりかえって手間が増える\\\hline
\end{array}
$$
②'ファビコンを並べる
言ってはみたものの捨て案です。
ファビコンとはウェブサイトに設定されたアイコンで、タブの左端などに小さく表示される画像です。
アイコン画像は小さいのでびっしり並べるにはうってつけ。しかし同じサイトを複数開いたら同じアイコンが並んで区別つかなくなります。結局ダメじゃん…
生成AIでページ毎に動的に識別性の高いアイコンを生成して…みたいな小手先案も考えてみましたが、根本的に画像が小さすぎてうまくいく気がしませんね…
$$
\begin{array}{|lcl|}\hline
\bold{観点} & \bold{評価} & \bold{備考} \\\hline
表示ページ量 & ◎ & アイコン1つ1つは小さいため\\
ページ再発見難度 & × & 同じサイトだと区別が付かない\\
操作コスト & ?? & 画面のどこに配置するか次第\\\hline
\end{array}
$$
ところでそもそも、知らぬ間にタブが増殖する原因は何なのでしょうか?
直接の原因は「ユーザーが新規タブで開いているから」に他なりません。(タブを増やしまくる変なマルウェアが入ってるとかじゃない限り。)
ではなぜ新規タブで開いているのか。
それは、「今見たページを、後から見直せるように残しておくため」ではないでしょうか。
回想すると、
さっき見たのを確認したいなー
あれ、どうやって見に行ったんだっけー？
見つからない…ｸﾞｽﾝ
もうタブなんて閉じるもんか（決意）
となった苦い経験から、常にページを新規タブで開いてしまう宿痾にかかってしまったのでしょう。おいたわしや。
そして、このような使い方をタブブラウザが登場した2001年頃に想定されていたとは思えません。
ページを開きすぎたらCPUやメモリの消費量が増えて動作がもたつく、といったことも起こりそうなものです。（当時を知らないので憶測ですが。）
③ツリー
新しいページを開き続ける操作は、言い換えれば「元のページを親として子のページを増やしていくこと」です。
例えば、Googleの検索結果一覧ページが親なら結果のページが子、結果のページから参照したページは孫になります。
こうやって開き続けたページをツリー状に表示し、親のページにサクッと戻れるようにすれば快適になりそうです。
ページを閉じるとか上書きされるとか考えることなく、ユーザーがアクセスした履歴の流れをそのまま表示できるので、さっき見たページにも遡りやすくなりそうですね。
問題はどう木構造を表現するかです。
一番シンプルなのはリスト表示に段階をつけてやる形です。
こ
ん
な
感じに
軽く探してみたらFirefoxのアドオンにありました。すべてのページ閲覧履歴が残るらしいです。でもこれだとEdgeの垂直タブと大差ないですね…
（この程度の考えだと世の中には普通にあるもんですね…）
他に木構造を表現する手法としては、マインドマップ的なものとツリーマップが挙げられます。
マインドマップ的な表示は分かりやすいですが、どうしても余白が多くスカスカになるためタブUIの代替としては不向きでしょう。
一方でツリーマップ、これにはかなりの可能性を感じています。
ツリーマップは、木構造を長方形の包含関係で説明する手法です。マンガのコマ割りみたいな見た目になります。
また、重みづけを長方形の面積に持たせることもできるのが特徴です。
以下のように使用すると良さそうです。
ウェブページと長方形が一対一対応する。
検索結果一覧ページなど、リンク元を『親』、
検索結果から開いたページなど、リンク先を『子』とする。親ページの下に子ページがレイアウトされる。
何らかの重要度に基づいてページの表示面積が変化する。
閲覧時間
ブックマーク登録済
閲覧の傾向
※Wikipediaよく読んでるなー とか
右クリック長押しによるホバー表示として出てくる。
（Vivaldiのタブサイクラーをパクった。）
雑に作った表示イメージは以下の通りです。
Wikipediaのページを開いている想定
引用：https://e-words.jp/w/タブブラウザ.html、https://dic.nicovideo.jp/a/タブブラウザ
$$
\begin{array}{|lcl|}\hline
\bold{観点} & \bold{評価} & \bold{備考} \\\hline
表示ページ量 & 〇 & 実装しだい、タイル表示に近いため増やせる\\
ページ再発見難度 & 〇 & 木構造なのでブラウジングの履歴を辿りやすい(はず)\\
操作コスト & △ & 実装しだい、工夫のしどころ\\\hline
\end{array}
$$
おわりに
ここまでタブブラウザが抱える問題点と、タブUIの代替案の検討をしてきました。
タブブラウザは、表示面積の少なさと横書き・横並びで表示していることからWebページを大量に開くような使い方には向きません。
また、すべてのページが同じレベルで表示されているため探しにくく、画面の端に配置されているため操作の手間が多くなります。
それらの問題を解決する方法として、木構造をベースとしたツリーマップによる表示を提案しました。
画面いっぱいに広げられるツリーマップであれば表示できるWebページの量はかなり増やすことができます。
また、木構造のためページを辿った流れを確認できます。操作性については試作してみないと何とも言えませんが、工夫の仕方はあるでしょう。
タブブラウザを滅ぼすことを目的にいろいろ考えてみましたが、実はスマホ向けのブラウザではすでに滅びかけているかもしれません。
例えばスマホ版Chromeでは、表示しているWebページを「タブ」と呼称してはいます。しかし、実情はサムネイルをタイル状に並べており本来のタブUIとは似て非なるものです。
また、スマホアプリは基本的に1つのサービスのために開発されており、そもそもタブのような画面切り替えを要しないものも多々あります。
そもそもタブUIはパソコン向けに開発されたものなのでデバイスが変わればUIも変わるのは自明ではあります。
真にタブブラウザが滅びるとき、それはパソコンが使われなくなった時なのかもしれません。
というおふざけは置いといて、ツリーマップによるタブ表現はいずれ作ってみたいと思います。
ここまでお読みいただきありがとうございました。ではまた。
この記事が気に入ったらサポートをしてみませんか？