AI連携・複数アカウント対応できる神ブラウザZen Browserの使い方

Zen Browserを使い始めました。布教したいので解説します。

↓こんな感じの画面です。

Zen Browserとは

Zen Browserとは?

Zen BrowserFirefoxベースのブラウザです。多くのブラウザはChromium(Chrome系)なのでちょっと珍しいですね。

まずは特徴やメリットを紹介します。

垂直タブ

Zen Browserは垂直タブです。横並びのタブだとタブを開けば開くほど「タイトルが短くて見えづらい」「操作範囲が狭くなる」といった問題が起こります。垂直タブだとその問題は起こりません。

最初は「横幅が減るじゃないか!」と思ってましたが、杞憂でした。幅は自由に変えられますし、邪魔になったら隠せます。

よく使うサイトはピン留めしたり、アプリみたいにアイコンだけ表示させたりできます。

タブ整理と切り替えがスムーズ

ワークスペース機能を使うと、プロジェクト毎にタブをまとめられます。切り替えもスムーズです。

AI連携でサクッと要約・質問

右クリックからAIに要約を頼んだりや質問できます。結果はサイドパネルとして開きます。設定からChatGPT以外も選択できます。

AI連携

ちなみにこのサイドパネル、他にも「ブックマーク」「履歴」「他の端末で開いているタブ」も表示できます。

AIチャットはFirefoxの実験的機能だそうです。

複数アカウントの運用が楽々

コンテナー機能を使うと、同じサイトでも別のアカウントに同時ログインできます。

コンテナーはFirefox由来の機能のようです。

ポップアップでタブを開かず確認

AltCtrlなどを押しながらリンクをクリックすると、タブではなくポップアップとして表示されます。

ポップアップからタブへ切り替えることもできます。
まずはちょっとだけ確認したい、というときに便利です。

Zen Browserの導入

ここからは導入方法の解説です。

インストール方法

公式のダウンロードページからOSを選択してダウンロードします。

途中、OS毎にシステムの種類を聞かれるので自分のマシンに合ったやつを選択します。

インストーラーの実行はポチポチで終わります。

日本語化の方法と日本人向け設定

まずは左の上の「…」のメニューから設定を開きます。

設定の開き方

「General(一般)」>「Language and Appearance(言語と外観)」から日本語化できます。

日本語化

自動スペルチェック機能を使用する」のチェックは外すことをおすすめします。これがオンだといろんなところで赤線が出ます。
同じく設定の「Firefox Labs」を開き、「アドレスバー:IME変換中に結果を表示」にチェックを入れます。

IMEのチラツキ解消

これをやっておかないとアドレスバーから検索するときにチラつきます。

検索エンジンの追加

検索関連は設定画面の「検索」から設定できます。

検索候補を表示しておくと便利です。

検索候補の表示

独自に検索エンジンを追加するなら、「検索ショートカット」の右下のボタンから追加します。

検索エンジン追加ボタン

筆者は次のようにGitHubの検索を追加しています。

追加する検索エンジンの入力
使いたい人向けのコピペ欄
https://github.com/search?q=%s&type=code

アドレスバーの下からも追加できます。

アドレスバーから検索エンジンを追加

レイアウトの変更

「外観」からブラウザのレイアウトを変更できます。

レイアウトの変更

ツールバーのカスタマイズ

タブの空いている箇所を右クリックしてツールバーをカスタマイズできます。

ツールバーのカスタマイズ

名前が似ていて紛らわしいものがあります。

サイドパネルとサイドバー

「サイドパネル」はWebサイトをパネルとして表示する機能です。
「サイドバー」はブックマークやAIチャットを表示する機能です。

デフォルトだとそれぞれアイコンどおりの位置に出ます。

サイド〇〇の位置

オーバーフローメニューとは

ツールバーのカスタマイズで「オーバーフローメニュー」なるものが出てきます。

オーバーフローメニューのカスタマイズ

オーバーフローメニューは画面上部のツールバーの「>>」のことです。

オーバーフローメニューの場所

「外観」から設定できるレイアウトが「Multiple toolbars」「Collapsed toolbaar」のときだけ使えます。

アドオンのインストール方法

アドオン(拡張機能)はaddons.mozilla.orgからインストールできます。

筆者が最初にインストールしたアドオンのリストを載せておきます。

AI連携の活用方法

AIチャットボットをサイドバーに表示するには、設定の「Firefox Labs」を開き、「AIチャットボット」にチェックを入れます。

AIチャットボットの設定

連携できるチャットボットは選択できます。後述のウェブパネルを使うことで選択肢に無いチャットボットでも開けます

実際に使うには、まずは質問したいページで右クリックします。メニューから「〇〇に尋ねる」で選ぶとチャットを開けます。
テキスト選択時はページ全体ではなく選択部分だけ聞けます。

サイドバーで開かれたチャット

設定で「選択テキストにプロンプトを表示する」をオンにすると、テキスト選択時にすぐ聞けるようなミニボタンが表示されます。

テキスト選択で質問

操作が減るので楽です。

ブラウザ独自の画面実装ではなく普段自分が使っているサイトを開いてくれるのがいいですね。チャット履歴も残りますし。

AIチャットボットを開く手段をまとめました。

  • 右クリックのメニューから開く
  • 「選択テキストにプロンプトを表示する」を設定し、ミニボタンから開く
  • ツールバーのカスタマイズでサイドバーボタンを設置し、ボタンから開く
  • ショートカットキーで「ブックマークサイドバー」を開いてから切り替える

今のところAIチャットボット専用のショートカットキーは無いようです。

ウェブパネルなるもの

ウェブパネル(サイドパネル)を開くと、タブとは独立してWebサイトを閲覧できます。

ウェブパネル

ウェブパネルをピン留めすればタブを切り替えても表示を維持できます。

ウェブパネル(サイドパネル)を開く手段をまとめました。

  • ショートカットキーで「ウェブパネルの切り替え」を設定
  • ツールバーのカスタマイズでサイドパネルボタンを設置

ワークスペース・コンテナーの使い方

「プライベート用」「ブログ用」とワークスペースを区切ることでタブを整理できます。
アイコンのクリックやショートカットキーを使って、同じウィンドウですぐに切り替えられます。

コンテナーでアカウントのログイン情報を分離できます。

↓こんな感じでワークスペース毎にコンテナーを割り当てられます。

ワークスペースコンテナー
inbox割り当てなし
プライベートプライベート
プロジェクトA仕事
blog仕事
ワークスペースとコンテナの関係

デフォルトはコンテナーなしです。アカウントの分離が必要なければ使わなくてOKです。

コンテナーはワークスペース内でも複数使い分けられます。たとえば「検証アカウントでログインしたタブ」「開発アカウントでログインしたタブ」を同じワークスペース内で開けます。

ワークスペース・コンテナーの管理方法

タブ一覧の上下にあるアイコンをクリックすると次のような「ワークスペースの管理メニュー」が開きます。

ワークスペースリスト

コンテナーを増やすには設定の「一般」>「コンテナータブを有効にする」の右にある「設定」から管理できます。

コンテナーの管理方法

コンテナーの割り当て方法

ワークスペースのリストにてコンテナーを割り当てができます。

ワークスペースに対するコンテナーの割当

タブ毎にコンテナーを割り当てる場合、タブの右クリックメニューから可能です。

Modsの紹介

Zen Modsを使うとテーマを変更したりプラグインを導入できます。
即時反映のものもあれば、ブラウザを再起動しないと反映されないものもあるようです。

いくつか試しましたが筆者にとって必要なmodはなかったため、詳しい説明は省きます。


多機能なブラウザはゴチャつきがちなのですが、Zen Browserは見た目がスッキリ・挙動も安定しています。
サイドブラウザにしようかな~と思ってインストールしましたが、ガッツリ普段使いできて大満足です。感謝。