概要

作業していると、気づいたらタブが開きすぎていて困ったことはありませんか？

後で使いそうだから残しておこう
開き直すのが面倒くさいページだから残しておこう
閉じ忘れ

気づいたら多くのタブが開かれていると思います。

タブを整理して快適にブラウザを使用できる案をいくつか提案させていただきます。

以降の説明はChromeをベースに行なっていきます

以下の機能を使ってタブを整理しよう！

１. タブの固定

タブを固定する方法

ブラウザ上部のタブに対して右クリック
「固定」をクリック

以降紹介する機能は全てタブを右クリックしたら出てきます

タブを固定するとfaviconのみが表示されるようになってブラウザに左詰で表示されていきます。下の画像のような感じになります。

(画像はQiita,AWS,GitHubを固定中)

固定状態では解除するまで閉じることも出来なくなりますので常に使うものを表示しておくと便利です。ですが、faviconしか表示されなくなるためfaviconが同じである同サイトの別のページを複数固定する場合は各タブの順番に慣れるまで使いにくいかもしれません。

おすすめの使用法

そのページが多くタブを開くようなページの場合はよく使うページのトップやマイページなどを固定しておいて都度、command + click等で必要なページを別タブで開くようにすると固定しているタブの中でfavicon被りも起きないので使いやすいかもしれません。

２. リーディングリスト

これはよくある「後で読む」のような機能です。

リーディングリストに追加する方法

ブラウザ上部のタブに対して右クリック
「タブをリーディングリストに追加」をクリック

追加したリーディングリストを確認する方法

右上の「︙」をクリック
「ブックマークとリスト」にホバー
「リーディングリスト」にホバー
「リーディングリストを表示」をクリック

追加前

追加後

未読と既読で分かれているので、読み終わって再度確認したいものは既読にして、読み終わって見返すことないだろうなというものは「×」ボタンで削除すれば綺麗に保っていけるかと思います。

リーディングリストを使えば後で読みたい、見返したいという記事をタブから一時的に避けておけます。ブックマークするほどではないけど後で見返すかもという記事などを既読の欄に残しておくと結果的にまとめておけたりもするので便利です。

３. グループ化

グループ化する方法

ブラウザ上部のタブに対して右クリック
「タブをグループに追加」をホバー
「新しいグループ」をクリック

固定の時の画像にちらっと写っていましたが、再度載っけておきます。

グループ化は下の画像を見て想像できる通り、タブをグループ化して閉じた状態にすれば綺麗にまとめておける機能です。

グループ化してまとめておけば、開発の際に多くのタブを開くようなツールを使うタイミングと使わないタイミングで閉じたり表示したり切り替えられて綺麗にしておけます。タブ自体を閉じるわけではないので状態も保存されますし、見た目上収納されるだけというのが気軽にグループを閉じられるのでありがたいです。

私としては使うタイミングである程度同じである。または同機能のタブをまとめておくといいのかなと思っています。

例１）ツールでまとめる時
AWSを複数のタブで開いている方であればAWSを触らないタイミングも出てくるかと思いますので、下記のようにグループ化して使わないときは閉じておけば簡潔になります。

AWS
├─ S3
├─ EC2
├─ RDS
└─ DynamoDB

例2 ）プロジェクトでまとめる時
様々な案件を同時で進めることもあるかと思います。その案件でしか使わないページは別の案件の作業中には閉じおけば色んな案件を往復するような場合もとても便利です。

イベントLP　　　　　　　　　　　　　　自社プロダクト
├─ Figma　　　　　　　　　　　　　├─ task管理ツール
├─ localhost　　　　　├─ localhost
└─ 記事　　　　　    　　　├─ GitHub
            　　　　　└─ AWS

個人的グッドプラクティスを紹介します

固定 × グループ化 × Acid Tabs

これまでの説明と重複する箇所もありますが再度それぞれの機能を説明させていただき、組み合わせることのシナジーに関しても説明させていただければと思います。

固定

faviconのみが表示されるようになってブラウザで左詰表示される

グループ化

タブをまとめて、使わない時は閉じておける

Acid Tabs

Acid TabsはChromeの拡張機能。
事前にセットしたURLと一致するタブを自動でグループ化してくれる。

右上の拡張機能からクリックした画面

左側(Name)がグループ名、右側がグループに自動追加させたいタブのURL
if文のように上から判定していくので、分けたいけど、URLの条件に重複する箇所があるという場合には優先したい方を上側にすると解決されます。設定で上のグループからブラウザ上では左からで表示されます。

組み合わせるとどうなるのか

少しわかりにくいですが、Qiitaというグループの中に自動で格納されていっています。
そして固定されているタブはグループ化の対象外となります。

グループがない状態で、同じことを行なっても開いた瞬間にグループが生成されて格納されます。固定されたタブはグループ化されない、自動でグループ化できて使わない時は閉じられる。という状況が出来上がります。

その上で固定の時におすすめしていた、必要なページを別途別タブで開くようにすると自動でグループ化されて整理しやすいといった具合です。

もしタブに悩んでいた方がいらっしゃいましたら、自分の使いやすいように好きなとこだけ取り入れていただければと思います。

ベストプラクティスたり得ない理由

グループ化したくないタブも自動的にグループ化されてしまう点が少し不便な為。

グループ化を回避する為にわざわざ固定して終わったら解除する程ではないし、都度行うのは手間である。一時的に特定のQiitaの記事だけはグループ化せずに開いておいて他の記事は今使わないから閉じておきたいなというような場面が許されないからです。

該当するURL全てに対して自動化が働くということはそのぶん柔軟性に欠けるということでもありますので。

まとめ

最後までありがとうございました。あまりに多くのタブを開いていると目当てのタブを探すのが少し遅くなったりします。だからと言って都度全てのタブに対して閉じて開き直すという行為はタブを最小限にできますが、開き直す手間で生産性を下げる行為にも繋がるかと思いますので、いいバランスで作業できるように常に環境は整えていきたいものです。

GoogleがAIが判断してグループ化をする実験的機能を実装みたいな記事を前に見た気がするので、日本でも実装される日が楽しみです。

タブのグループ化でプロジェクトごとにまとめるという例を挙げましたがこれも、プロジェクトはウィンドウ毎に分けて、機能や自分の中でまとめておきたいものをグループ化してというように色んな方法があるかと思いますので自分に合った方法で生産性を上げていきましょう！！