デスクトップ版とモバイル版の Google Chrome 68 には、マテリアル デザインの更新の要素が含まれています。これらの要素はデフォルトでは無効になっていますが、非表示の設定を変更することで任意に有効にすることができます。その方法は次のとおりです。
マテリアルデザインをご存じない方のために説明すると、これはGoogleが2014年にデスクトップ、モバイル、ウェブ向けに開発したデザインガイドラインです。グリッドベースのレイアウト、レスポンシブなアニメーションとトランジション、パディング、そして照明や影などの奥行き効果をより効果的に活用しています。
デスクトップ版 Chrome では、マテリアル デザインはより丸みを帯びた外観に制限されており、2018 年 4 月にブラウザの開発者ビルドで初めて登場した丸みを帯びたタブは現在除外されています。
iOSでは、マテリアルデザインにより、ナビゲーションコントロールが画面上部から画面下部のタブエリアに移動されました。その結果、進むボタンや戻るボタン、新しい検索ボタンなど、よく使うナビゲーションコントロールに片手モードでアクセスしやすくなりました。
Material Design には、iOS、Mac、Android、Windows、Linux 用の Chrome 68 以降が必要です。
App Store を起動し、[更新] タブをクリックしてプルダウンし、保留中の更新のリストを更新することで、iOS 版 Chrome を最新バージョンに更新できます。
デスクトップ版 Chrome を更新するには、Chrome メニューから [Google Chrome について] を選択します。
iOS版Chromeでマテリアルデザインを有効にする
iPhone および iPad 版 Chrome で新しいマテリアル デザインの更新を有効にするには、次の手順を実行します。
1) iOS デバイスでChrome 68以降を開きます。
2) URL バーをタップし、次の URL を入力します。
chrome://flags/#top-chrome-md
3) 「UI 更新フェーズ 1 」の横をタップし、 ポップアップ メニューから[有効]を選択します。
4)左上隅の左矢印 をタップします。
5) Chrome を再起動します。ホームボタンをダブルクリックしてアプリスイッチャーを起動するか、iPhone X ディスプレイの下端から上にスワイプして一時停止し、Chrome のサムネイルを上にスワイプします。
6)変更を有効にするには、Chrome を再起動します。
特に下部にある新しい検索ボタンが気に入っています。
以前のバージョンには専用の検索ボタンが全くありませんでした。代わりに、いつでも検索を開始するにはURLバーをタップする必要がありました。ナビゲーションコントロールが画面下部に並んだので、Plusサイズのスマートフォンでもすぐに検索を開始したりURLを入力したりできるようになりました。
新しいタブページも再設計されました
ご覧のとおり、設定、デスクトップ サイトのリクエスト、最近使用したタブ、ブックマーク、履歴へのアクセスなど、あまり使用されないショートカットのほとんどに、下部にある 3 つのドットのメニューから片手で簡単にアクセスできるようになりました。
iOS 版 Chrome の新しいマテリアル デザインは面白そうだ pic.twitter.com/JakpLFLKiB
— トム・ウォーレン（@tomwarren）2018年7月25日
ああ、最後にもう 1 つ: 私の場合は問題なかったのですが、Material Design をオンにした後、ログイン エラーのためにタブと閲覧履歴を同期できないという報告もあります (新しいタブ ページの[続行] ボタンは、どうやらまったく機能しないようです)。
Mac版Chromeでマテリアルデザインを有効にする
デスクトップ版 Chrome でマテリアル デザインの変更を有効にするには、次の手順に従います。
1)コンピューターでChrome 68以降を起動します。
2) URL バーをクリックして、次の URL に移動します。
chrome://flags/#top-chrome-md
3)まず、 「ブラウザの上部クロムの UI レイアウト」 の横にあるメニューをクリックし、ポップアップ メニューから「更新」 というオプションを選択します 。
4)次に、URL バーをクリックして次の URL に移動します。
chrome://flags/#views-browser-windows
5)最後に、 「Cocoa の代わりに Views ブラウザ ウィンドウを使用する」 の横にあるメニューをクリックし、 ポップアップ メニューから[有効] というオプションを選択します 。
6)変更を確認するには、Google ブラウザを再起動します。
より白く丸い窓のクロームをチェックしてください
繰り返しになりますが、Chromeのマテリアルデザインの変更は、デスクトップ版ではモバイル版ほど顕著ではありません。ウィンドウが少し白くなり、外観が丸みを帯びるようになった程度です。iOS版Chromeのマテリアルデザインでは、ナビゲーションコントロール全体が画面下部に移動され、特に縦長のスマートフォンでは1本の指で操作しやすくなっています。
ちなみに、Google Chrome Canary バージョンにはさらに優れたマテリアル デザイン インターフェースが搭載されており、すべてのユーザーに公開される前に Chrome のベータ バージョンに反映されることを期待しています。
AndroidでChromeのマテリアルデザインを有効にする
Androidユーザーにも関連するフラグがあることを簡単にご説明します。これらは「マテリアルデザイン」ではなく「モダンデザイン」と呼ばれています。具体的には、Android版Chromeでchrome://flags/#top-chrome-mdにアクセスし、以下のフラグを変更してください。
chrome://flags/#enable-chrome-modern-design
chrome://flags/#ntp-modern-layout
Chrome を再起動して、新しいマテリアル デザインの外観をお楽しみください。
それで、男の子も女の子も、Chrome のマテリアル デザイン ドレッシングはいかがですか?
下記にコメントを残してお知らせください。
ヘルプが必要ですか？iDB にお問い合わせください。
このハウツーが気に入った場合は、サポート担当者に渡して、下記にコメントを残してください。
困っていませんか？Appleデバイスで特定の操作方法がわからない場合は、 [email protected]までご連絡ください。 今後のチュートリアルで解決策が見つかるかもしれません。
ハウツーの提案は [email protected]までお送りください。
