シンプルで機能的なマテリアルデザインChromeをお試しするには

   

マテリアルデザイン

最初からぶっちゃけますが、筆者はマテリアルデザインとはこれと端的に表現できるほどこのデザインを理解出来ていません。ただ、提唱者のGoogleの一部サービスを見て、装飾が非常にシンプルで且つ機能的なUIで、ユーザ操作に対しての動作結果がより直感的な設計…というイメージを持っています。既にAndroidやiPhoneアプリ、或いはWebサービスではマテリアルデザインが適用されたものが多くなっているようです。

そして、当のGoogleが提供するWebブラウザChromeも段階を追ってマテリアルデザインを取り込んでいる最中です。例えば、安定(Stable)版のChromeは49以降ダウンロード画面がマテリアルデザインになりました。他の画面についてもこれから段々に変わっていく筈ですが、現段階で一足先に試してみる方法を纏めます。

念のためマテリアルデザインとは何かについて

説明できないままというのも残念なので、Webのマテリアルデザインの説明リソースを列挙しておきます。

シンプルで機能的なマテリアルデザインChromeをお試しするには

さて、本題です。基本、開発版のChromium(382217)で紹介しますが、物によっては安定(Stable)版49.0.2623.87 mのChromeでも出来ますので、それも付記します。

設定画面(Chromium可で操作要、安定(Stable)版可で操作要)

  • 操作:アドレスバーで「chrome://md-settings/」と記入しEnterキーを押下します。
    chrome://md-settings

    chrome://md-settings

  • 画面イメージ:設定のサブ画面をを含めた全てがマテリアルデザインになっています。元の設定画面である「chrome://settings」も当然使えるので別タブで開いて項目毎にイメージや挙動を確認するのに最適です。表記が殆ど英語でしか記述されていないのも試験機能でこれから直っていく感じですね。
    設定画面

    設定画面

ダウンロード画面:(Chromium可で既定動作、安定(Stable)版可で既定動作)

既に安定板でも既定の表示がマテリアルデザインになっています。設定は不要です。

  • 操作:アドレスバーで「chrome://downloads/」と記入しEnterキーを押下します。或いは、メニューから「ダウンロード」選択、またはCtrlキー+Jキーで開きます。
    chrome://downloads

    chrome://downloads

  • 画面イメージ:
    ダウンロード画面

    ダウンロード画面

閲覧履歴画面:(Chromium可で設定要、安定(Stable)版不可)以下はChromiumの操作

  • 操作:アドレスバーで「chrome://flags/#enable-md-history」と記入しEnterキーを押下します。
    chrome://flags/#enable-md-history

    chrome://flags/#enable-md-history

    表示された項目で「Enabled」を選択します。
    有効にする

    有効にする

    画面下部に表示された「RELUNCH NOW」ボタンをクリックし、Chromiumを再起動させます。
    再起動

    再起動

  • 画面イメージ:
    閲覧履歴

    閲覧履歴

拡張画面:(Chromium可で設定不要、安定(Stable)版設定要)以下は安定板の操作

  • 操作:アドレスバーで「chrome://flags/#enable-md-extensions」と記入しEnterキーを押下します。
    chrome://flags/#enable-md-extensions

    chrome://flags/#enable-md-extensions

    表示された項目で「有効にする」を選択します。
    有効にする

    有効にする

    画面下部に表示された「今すぐ再起動」ボタンをクリックし、Chromeを再起動させます。
    今すぐ再起動

    今すぐ再起動

  • 画面イメージ:
    拡張画面

    拡張画面

オムニバー(アドレスバー):(Chromium可で設定要、安定(Stable)版不可)以下はChromiumの操作

  • 操作:アドレスバーで「chrome://flags/#top-chrome-md」と記入しEnterキーを押下します。
    chrome://flags/#top-chrome-md

    chrome://flags/#top-chrome-md

    表示された項目で「Material」または「Material Hybrid」を選択します。
    Materialを選択

    Materialを選択

    画面下部に表示された「RELUNCH NOW」ボタンをクリックし、Chromiumを再起動させます。
    再起動

    再起動

  • 画面イメージ(Material):Hybridも試しましたが見た目どこが違うのか分かりませんでした。右端のメニューボタンがよりシンプルになり、全体的にスッキリした配置、配色に変わっているのですが違いが分かりにくいです。例えば、このメニューボタンをクリックした際の画面効果やCtrlキー+Fキーで表示される検索窓などを見ると変化がはっきり分かります。
    Material

    Material

マテリアルデザインポリシー画面(Chromium、Stable共に未実装)

  • 操作:アドレスバーで「chrome://flags/#enable-md-policy-page」と記入しEnterキーを押下します。
    chrome://flags/#enable-md-policy-page

    chrome://flags/#enable-md-policy-page

    表示された項目で「Enabled」を選択します。
    有効にする

    有効にする

    画面下部に表示された「RELUNCH NOW」ボタンをクリックし、Chromiumを再起動させます。
    再起動

    再起動

  • 画面イメージ:アドレスバーに「chrome://md-policy/」と記入しEnterキーを押下します。まだ実装されていない旨表示されます。今後ポリシの画面がここで表示されるようになるようです。
    chrome://md-policy/

    chrome://md-policy/

終わりに

まだまだこれからなのですが、いずれChromeは既定で全てこういった画面デザインになっていくようです。画面のデザインだけでなく、挙動の違いなど動きを含めて色々見る部分があります。iPhoneをいじっていると、ハードウェアのスペックよりもデザインや挙動の見せ方の方が心に響く大きな要素になっていると思います。Webブラウザも同じで長時間何度も使うツールですから、こういっった部分をどこまで上手く提供してもらえるか、今後が楽しみです。

それはそうと、今更気が付いたのですがchrome://flagsの各項目は、idがふられていて直接指定できるのですね。今まで気が付かず、記事中ではflags画面を開いた後、検索をかける迂遠な手順で書いていました。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Chrome