メインコンテンツへスキップ
デザイン刷新 · よりシャープに

Navをサイドパネルから全面リニューアル

Navigation v1.4.0

Nav 1.4.0は、この拡張機能としてこれまでで最大のリニューアルです。サイドパネル、新しいタブページ、オプションページ、キーボードヒント、コマンドバーのデザインを一新しました。1つのアクセントカラーで全体の見た目を統一し、ページ内サイドバーはドラッグしてアイコンだけの表示に縮められます。セットアップは不要で、設定はそのまま引き継がれ、新しい権限も必要ありません。ChromeまたはEdge 123以降で動作します。

  • サイドパネルからコマンドバーまで、主要な画面のデザインをすべて一新しました。
  • サイドパネルを開くと、ワークスペースタイルの列と「その他」メニューが表示されます。
  • 新しいタブページは、漂うドットを背景にした、すっきりとした1列のレイアウトになりました。
  • オプションページは、細いトップバーとシンプルな左側ナビゲーションになりました。
  • キーボードヒントは、インクスタンプ風の見た目と、よりくっきりしたハイライトになりました。
  • コマンドバーとGlanceプレビューも、これに合わせてデザインを一新しました。

アップデート後、サイドパネルを開いて新しいワークスペースタイルの列を確認してください。次に新しいタブページをオンにして、ドットの上でカーソルを動かしてみましょう。準備ができたら、Alt+Kを押して新しくなったコマンドバーをご覧ください。

サイドパネルはタイル1列に

ダークテーマのSuperchargeNavigationサイドパネル。ワークスペースタイル、タブグループ、固定アイコンが表示されています。 「その他」メニューを開いたSuperchargeNavigationサイドパネル。タイムトラベル、テーマ、サイドバーレイアウトの設定が表示されています。

サイドパネルを開くと、横スクロールするワークスペースタイルが1列に並び、以前のボタン列はなくなりました。列の末尾には、新しいワークスペース用の+と「⋯ その他」メニューがあります。「その他」メニューには、テーマ、サイドバー、表示位置のほか、タイムトラベル、一時停止、Learnなどのいつもの操作がまとまっています。ページ内では、サイドバーの端を内側にドラッグするとアイコン表示に折りたたまれ、外側にドラッグすると展開されます。ワークスペースタイルを右クリックすると、そのワークスペースを削除できます。

新しいタブページは中央に1列

ダークテーマのNav新しいタブページ。時計、検索ボックス、ワークスペースカード、サイトの行が表示されています。

新しいタブページは、オンにするまで有効になりません。中央の1列には、時刻、検索欄、ワークスペースカード、続いて固定サイトとトップサイトが並びます。背景では、散らばった小さなドットが集まってきて、そのまま静止します。カーソルを動かすと、近くのドットが浮き上がり、アクセントカラーに色づきます。背景アニメーションは設定でオフにできます。

すっきりしたオプションページ

ダークテーマのNavオプションページ。テーマとアクセントが選択された状態で設定セクションが表示されています。

オプションページは、Navのロゴ、検索、同期状態を表示するスリムなトップバーになりました。7つの設定カードはシンプルな左側のナビゲーションにまとめられ、ウィンドウの幅が狭いときはドロップダウンに切り替わります。スイッチも見やすくなりました。オンはアクセントカラーで塗りつぶし、オフは中抜きの輪郭で表示されるため、アクセントカラーが白でも区別できます。

1つのアクセントカラーで全体を統一

ダークテーマが選択され、インクブルーのアクセントカラー見本が表示されたテーマとアクセントの設定カード。

選んだアクセントカラーが全体の見た目を決めます。現在のワークスペースのタイル、リンク、ボタン、スイッチがこの色で表示されます。アクセントカラーはオプションページの色の中から選べ、テーマは「その他」メニューでライト、ダーク、自動から設定できます。アクセントカラーが白やごく淡い色の場合、Navはテキストを表示する部分で読みやすい色合いに置き換えるため、文字が見づらくなりません。

キーボードヒントがより見やすく

Wikipediaの記事「Web browser」でキー操作モードを使用し、リンクに文字のスタンプが表示され、websitesがハイライトされている様子。

キー操作モードでページに表示されるキーヒントが、インクスタンプ風の新しいデザインになりました。また、ヒント間を移動する際、選択しようとしているリンクがより分かりやすくハイライトされます。Glanceのプレビューと一時停止のトーストも、これに合わせてデザインを変更しました。

コマンドバーのデザインを刷新

Wikipediaのページ上にAlt+Kコマンドバーを開き、「web」という検索語に対してMDNのタブとWeb検索の候補を一覧表示している様子。

Alt+Kコマンドバーも、Navのほかの部分と同じデザインに刷新されました。任意のページでAlt+Kを押して開き、行を移動すると新しいハイライトを確認できます。入力中のShiftキーも正しく認識し、独自の見た目を保つため、ページのスタイルによって表示が変わることはありません。

修正とその他の変更

  • タブをワークスペースに送るメニューが、パネルの端からはみ出さず、パネル内に収まるようになりました。
  • ワークスペースのタイル上でマウスホイールを回すと、背後のリストではなくタイルがスクロールするようになりました。
  • Alt+Kコマンドバーが入力中のShiftキーを正しく認識するようになり、マウスを動かしていないホバーで行が勝手に選択されることもなくなりました。
  • コマンドバーは独自の見た目を保つため、ページのスタイルによって表示が変わらなくなりました。
  • ページ内のレールとトーストがNavのテーマに従うようになり、通常のWebページ以外ではレールが表示されなくなりました。
  • 選択したタブのコントラストが向上し、ほかの場所をクリックすると選択バーが閉じるようになりました。また、フォーカスしたパネルのボタンがEnterキーに反応し続け、ワークスペースメニューを閉じるとそれを開いたボタンにフォーカスが戻ります。
  • セッションタイムトラベルが、このウィンドウのワークスペースに復元するようになりました。現在のタブは先に保存され、短時間表示される「元に戻す」で元の状態に戻せます。以前は、全体でアクティブになっているワークスペースに復元されていました。また、スナップショットの作成時に読み込み中だったページも保存されるようになりました。
  • ブラウザで一部のショートカットキーが設定されていない場合、「Learn」に「ショートカットを設定」ボタン付きのカードが表示され、ブラウザのショートカット設定ページを開けます。
  • 1.4.0にはChromeまたはEdgeのバージョン123以降が必要です。
  • 新しい権限の追加はありません。