Google Chrome Windows版でもマテリアルデザインを実装する方法を紹介!!

シェアする



どうもIT大好きFwwwです。

みなさんはつい先日Chrome 52が公開されたのをご存知でしょうか?

実は最新のChromeではバックスペースキーで戻る機能を廃止して、

Windowsであれば「Alt + ←」または「Alt + →」で、

ページの推移ができるよう改善されたようです。

この機能は、フォームなどのデータを入力している際に誤ってバックスペースキーに触れてしまい、

フォームに戻ると一から入力しないといけないということがあり議論された結果バックスペースキーのショートカットキーを廃止したようです。

そして、今回の本題となるのがマテリアルデザインです!

実は今回のアップデートでMac版だけが標準でマテリアルデザインを実装するようになったようです。

それがこちらです。

Google Chrome Macマテリアルデザイン

参照:AAPL CH.

どうでしょうか。

僕はマテリアルデザインの方が見やすく操作も容易にできるような気がします

従来のChromeだったらこんなデザインですよね、、

従来のChromeデザイン

Chromeは何年も使用してきたから正直言うと、このデザイン飽きています。

そこで、今回はWindows版のChromeでもマテリアルデザインを一足先に実装する方法をご紹介したいと思います。

※僕の環境ではChrome52だったのでそれ以下のverで、マテリアルデザイン実装できなかった方はChromeのアップデートを「chrome://help/」から行ってくださいね。

※どうやらChrome49あたりからできるようです

スポンサーリンク

Windows版Chromeで試験運用されているマテリアルデザインを実装しよう

※今回実装するのは試験運用中のマテリアルデザインなので、お使いのChromeの挙動がおかしくなってもこちらは責任を取れませんことを予めご了承ください

僕も最近知ったのですがChromeには試験運用機能一覧を表示させるページが有り、そこで任意の機能を試験的に実装できるそうです。

もちろん開発中の機能なのでデザインが崩れてしまうこともあります。

そのときは、そのページに行き戻せば直ります

そして、その試験運用機能一覧ページはアドレスバーに「chrome://flags/」を貼ってアクセスすると表示させることができます。

その中に「ブラウザのトップChrome部分でマテリアルデザインを使用する」という項目があります。

「コントロールキー+F」で「マテリアル」と入力すればすぐにその項目まで移動できます!Chrome マテリアルデザイン実装

プルダウンメニューには下記のように「マテリアル」と「マテリアルハイブリッド」があるとい思います

Chrome マテリアルデザイン

マテリアルデザインは従来のデザインをマテリアルに変えたもので、マテリアル ハイブリッドは従来のデザインより若干タブが高くなるそうです。

何回も試しましたが僕には違いがよくわかりませんでした笑

他にも違いが分かった方は、コメントで教えてください!!

ここでは、「マテリアル」か「マテリアルハイブリッド」を選択しましょう。

すると、Chromeの画面下部から下記のようなメニューが現れるので、

Chromeを再起動しましょう!

Chrome再起動

Chromeの再起動に無事成功するとぱっと見では分かりづらいですが、

見事に今時のデザインに早変わりしましたね!!

もし、マテリアルデザインに変更してデザインが崩れたり、気に入らない場合は同じように

「chrome://flags/」で「規定」を選んでやれば元に戻ります。

画像で見てもわかりづらいのですが、マテリアルデザインを実装したChromeの画像載せておきます。

マテリアルデザインなChrome

スポンサーリンク

まとめ

Chromeの試験運用機能一覧ページには他にもたくさんの項目がありますが、

開発中の機能なため安易に有効化して試すのは良くないと思います。

僕はどうしてもマテリアルデザインがいいので、そこだけ有効化してます笑

最後まで読んでいただきありがとうございました。

スポンサーリンク

シェアする



オススメ記事