「Google Chrome 68」で新“マテリアル”なタブバー・ツールバーを体験しよう

　HTTPサイトに“保護されていません”ラベルが付いたり、Android端末が当たる詐欺広告を抹殺する機能が追加されたりと話題に事欠かない「Google Chrome 68」ですが、水面下でもう一つ重要な変更が加えられているようです。

マテリアルなタブデザイン

“chrome://flags#top-chrome-md”フラグで“Refresh”オプションを指定

　「Google Chrome 68」では、タブやアドレスバーのデザインを変更する“chrome://flags#top-chrome-md”フラグに新しいオプションが利用できるようになりました。現在利用できる主なオプションは以下の通りです。

• Normal：クラムシェル（ノートPC）デバイス向け（タッチスクリーンなし）
• Hybrid（旧“Touch）：タッチスクリーンを備えたハイブリッドデバイス向け
• Touchable：「Chrome OS」などのコンバーチブル（2-in-1）デバイス向け
• Refresh：マテリアルデザイン
• Touchable Refresh：タッチデバイス向けマテリアルデザイン

　“Refresh”または“Touchable Refresh”を選択すると、“マテリアル”になった新しいタブデザインを一早く体験できます。現在のところ、Windows/Mac/Linux/Chrome OSで利用できるようですね。

“Touchable Refresh”オプション。タッチ向けにタブやアイコンが一回り大きくなる

“Normal”オプション

　ちなみに“Refresh”は「Google Chrome 67」でも選択できたのですが、タブ部分は従来のデザインのままでした。

「Google Chrome 67」で“Refresh”オプションを指定。タブ部分は従来のデザインのまま

どこがよくなったのか？

　“マテリアルデザイン”は、近年Androidを中心に導入が進められているGoogleの新しいインターフェイスデザインです。Windows 8以降の“フラットデザイン”とよく似ていますが、それぞれのパーツが“紙”のように薄い厚みを持ち、影によって重なりが表現されているのが大きな違い。また、触れた時のフィードバックが重視されており、タッチやクリックといった操作に対するリアクションが慣性を持ったアニメーションで表現されるのも特徴と言えます。

　「Google Chrome」の場合、アクティブなタブはハイライトされ、角丸で少し浮き上がった表現になりました。逆に非アクティブなタブは少し暗く、扁平になり、単に縦棒で区切られるようになっています。タブがアクティブかどうでないかがより鮮明になったといえるでしょう。ただし、新規タブボタンが左端に移った点には、少し慣れが必要だと感じました。

　一方、ツールバーではウィンドウ右上に飛び出していたアカウントの切り替えボタンが統合されたのが目に付きます。アドレスバーも丸みを帯びたデザインになり、以前より柔らかい印象です。ボタンへマウスオーバーさせた際のフィードバックアニメーションも、丸に統一されました。

タブを開きすぎるとタブバーがギザギザになる“ノコギリ”問題も少しはマシに？

　このデザインはまだ実験段階で、正式版にこのまま導入されるかは不透明です。もし興味のあるならば、実験オプションを有効化し、フィードバックに協力してほしいと思います。