「開いているタブ」と「保存したブックマーク」は、分けて見たほうが落ち着く場面と、並べて見たほうが速い場面の両方があるからです。分けると1つの画面を広く使えて迷いが減り、並べるとタブをグループへドラッグして保存しやすくなります。どちらが合うかは、人や画面の大きさ、その時の作業で変わります。そこで v2.9.0 では、2つのレイアウトをワンクリックで行き来できる切替バーを（上部のモードが「タブ」のとき）常に表示し、ボタンの並びも自分で変えられるようにしました。
v2.9.0 で、サイドパネルの画面レイアウトを選べるようにしました（変更点の一覧は「v2.9.0 アップデート」にまとめています）。この記事では、なぜ1つに決めずに「切り分け」と「統合」の両方を残したのか、作る側として考えたことを書きます。
これまでの画面と、気になっていたこと
v2.8 までの LB TAB Layers は、サイドパネルを上下に分けて、上に保存したグループ、下に開いているタブ（単独タブ）を並べていました。今の「統合」レイアウトです。
この形には、見たまま下から上へドラッグして保存できる、という良さがあります。一方で、サイドパネルは縦に長く、横に狭い場所です。グループが増えると上の欄が長くなり、下の単独タブの欄は小さくなります。境目をドラッグして広さを変えることはできましたが、どちらかを広げれば、もう片方が狭くなります。
もう1つ気になっていたのは、性質の違うものが1つの画面に並んでいることでした。開いているタブは、今使っているもの・まだ判断していないもの。保存したグループは、置き場所が決まったもの。流れていく情報と、ためておく情報です。2つが同時に目に入ると、パネルを開くたびに「これはどっちだっけ」と考えることになります。
分ければ解決、とは言い切れなかった
それなら、2つを別の画面に分ければいい。そう考えて作ったのが「切り分けレイアウト」です。「タブ」の画面には単独タブだけ、「ブックマーク」の画面にはグループだけが、パネルの高さいっぱいに並びます。
ただ、分けると今度は別の困りごとが出てきます。
- 「タブ」の画面ではグループが見えないので、保存先を見ながらドラッグする、という今までの保存のしかたができない
- 大量のタブを、いくつものグループに振り分けたいときは、上下に並んでいたほうが速い
- 今の画面に慣れている方にとっては、アップデートでいきなり画面が変わるのは負担になる
どちらにも良いところと苦手なところがあり、どちらが合うかは、人や画面の大きさ、その日の作業で変わります。そこで、1つに決めるのをやめて、両方を残し、行き来しやすくすることにしました。
決めたこと1：切替バーをいつも表示する
レイアウトの選択を設定の奥にしまうと、知られないままになるか、切り替えるのが面倒になります。かといって、案内のバナーだけで知らせると、閉じたあとに戻り道がなくなります。
そこで、グループ一覧の上に「タブ」「ブックマーク」「統合」「メモ」の4つのボタンを並べた切替バーを、いつも表示することにしました（上部のモードが「タブ」のとき）。「タブ」「ブックマーク」「メモ」は1つの画面を広く使う切り分けレイアウト、「統合」は上下に並べる統合レイアウトです。レイアウトを変える操作と、見る画面を選ぶ操作を、同じ1列のボタンにまとめています。
狭いサイドパネルに4つ並べるので、「ブックマーク」のような長めの言葉が途中で省略されないよう、ボタンの幅と余白も調整しました。
決めたこと2：ボタンの並びをドラッグで変えられるようにする
4つのボタンのうち、どれをいちばんよく使うかは人によって違うはずです。保存したグループから仕事を始める人は「ブックマーク」、開いたタブの片付けが中心の人は「タブ」、ToDo を見ながら進める人は「メモ」かもしれません。
そこで、ボタンをつかんで左右にドラッグすると、並びを入れ替えられるようにしました。並びは保存され、次に開いたときも、同じ Chrome で開いているほかの画面でも同じ並びになります。「タブ」「ブックマーク」「メモ」のボタンにマウスを乗せると「クリックで表示切替・ドラッグで順番を並び替え」と表示されます（「統合」のボタンにはレイアウトの説明が出ますが、並べ替えは同じようにできます）。
決めたこと3：今使っている方の画面は変えない
アップデートした方は、これまでと同じ「統合」のまま始まります。そのうえで「新しい『切り分けレイアウト』が選べるようになりました」という案内を出し、［試してみる］で切り分けを試せるようにしました。
新しく使い始める方は、切り分けレイアウトの「タブ」画面で始まります。まだ慣れた画面がないので、最初から1つの画面に1種類のものが並ぶ形を見てもらうことにしました。こちらにも「画面レイアウトはいつでも変更できます」という案内を出し、［統合表示を試す］で上下に並べる形も選べるようにしています。
どちらの案内も、ボタンを押すまで表示されます。案内を閉じたあとも、切替バーからいつでも切り替えられます。
決めたこと4：分けても保存しやすくする
切り分けレイアウトでいちばん気をつけたのは、「タブ」画面から保存しにくくならないことです。2つの方法を用意しました。
- 行の「フォルダに保存」 — 単独タブの行にマウスを乗せると出るフォルダのアイコンから、保存先のグループを選べます（行の右クリックでも同じメニューが出ます）
- 「ブックマーク」ボタンに重ねる — タブをドラッグして切替バーの「ブックマーク」に重ねると、少しして「ブックマーク」画面に切り替わり、そのままグループの上で離して保存できます
また、「タブ」画面で「新しいグループ」を押したときは、自動で「ブックマーク」画面に切り替えてからグループを作ります。作ったグループが見えないまま、ということがないようにするためです。
割り切ったところ
両方を残したことで、割り切った部分もあります。
- 上下の境目のリサイズと、下の欄の折りたたみは「統合」のときだけ使えます。切り分けでは、それぞれの画面が全体の高さを使うためです
- 切替バーが表示されるのは、上部のモードが「タブ」のときです。整理・スクショ・AI・DB のモードでは表示されません
- 切り分けの「タブ」画面では、保存先を選ぶのに一手間かかります。グループを見ながら一気に振り分けたいときは、「統合」に切り替えるのがおすすめです
実際の使い分けのしかたは「開いているタブと保存したブックマークを分けて使う」と「サイドバーを出さずに1つのタブで整理する」で紹介しています。
これからも、使い方に合わせて
LB TAB Layers が目指しているのは、「タブやブックマークを探す時間は、考える時間に。」です。画面の形を1つに決めなかったのも、探す・迷う時間が減る形は、人によって違うと考えたからです。使ってみて気づいたことがあれば、お問い合わせからお知らせください。
よくある質問
Q. 切り分けと統合は、どちらがおすすめですか？
開いているタブを落ち着いて片付けたいときや、パネルの高さが足りないと感じるときは切り分け、大量のタブをグループに振り分けたいときは統合が向いています。切替バーでいつでも行き来できるので、作業に合わせて使い分けてください。
Q. 最初に開く画面を決められますか？
最後に選んだ画面が保存され、次に開いたときもその画面から始まります。切替バーのボタンの並びも、ドラッグで変えて保存できます。
Q. 「ブックマーク」ボタンの数字は何ですか？
グループの数です（サブグループを含み、アーカイブしたグループは除きます）。ブックマークの件数ではありません。
Q. レイアウトの切り替えは無料ですか？
はい、無料です。「タブ」画面の下にある「本日の履歴」だけは、PRO版とトライアル中に使える機能です。
▶ 実際の操作を動画で見る
サイドバーで、ブックマークとタブをいっしょに管理する様子です。
分けて見るか、並べて見るか。
画面レイアウトは切替バーでいつでも変更できます。アカウント登録なし · 保存先は Chrome のブックマーク · 3か月すべての機能を無料で
Chrome に無料で追加 →