Windows10でFirefoxのテーマを使うとボタンがきれいに表示されない

Windows10にアップグレードした件で3部作を書くと言いましたが、最後の一つ「全般的な感想編」は長くなりそうなので後回しにして短めの記事を書きます。FirefoxのテーマとWindows10のUIについてです。操作する上では全く問題ないですが、見るとたぶん誰でも気持ち悪さを感じると思います。とりあえずの回避ができたのでその方法を紹介します。

Windows10のUIとFirefoxのテーマ機能の不整合



まずはどんな感じか見てもらいましょう。

こちらデフォルトテーマです。

win10firefoxtheme_01.png

次にカスタムテーマです。

win10firefoxtheme_02.png

右上の最小化・最大化・閉じるボタンが微妙に下側の余白が少なく、アンバランスです。

このボタン部分ですがWindows10のUIでは角は丸くないのですが、Firefoxのカスタムテーマでは角が丸くなっています。実際のボタンは四角なのに、です。以前のUIにはこれが正しかったのだろうと思います。

(さらに細かい話ですが、上のスクリーンショットでは閉じるボタンが赤くなってますがあれはマウスオーバーしてるからです。普段はすべて白です。キーボードのPrint Screenキーを使うとマウスカーソルが表示されない状態で撮影されるのです。)

気持ち悪いので治す方法がないか探しましたが、解決策らしいものの紹介記事の前に、こんなことを文句つけてる記事がなさそうでした。代わりに大量に出てきたのがFirefox 40がWindows 10に最適化されて出てくるという話題。


Firefox 40はWindows 10対応を謳ったリリース



「Firefox 40」がベータ版に、「Windows 10」をタブレットモード込みで完全サポート - 窓の杜
http://www.forest.impress.co.jp/docs/news/20150706_710354.html

Mozilla outlines Firefox for Windows 10 design specs | VentureBeat | Dev | by Emil Protalinski :
http://venturebeat.com/2015/07/10/mozilla-outlines-firefox-for-windows-10-design-specs/


Windows10のデザイン作法に従ったUIが提供されるようです。つまりは私が現在使っているFirefox 39は正式な対応前のバージョンということに。基本動作には何の支障もないので、見た目に関して10には10用の表示ができるようになるということでしょうか。(8や8.1でもボタンは四角だったようですが、テーマを使ったときちゃんときれいに表示できてたのかな)

40ではツールバーがスリムになったり、アドレスバーや文字が大きめになったりして、より洗練されたUIになるようです。39では真っ白のタブバーが薄いグレーになるみたいですね。まぶしくなくなるのでいいことだと思います。

今回の話に関連するところは

さて、40でWindows10に対応するらしい、ということがわかりましたが、今回私はテーマの話をしています。

Windows 10 » Design Specs — i01
http://people.mozilla.org/~shorlander/mockups/Windows-10/Windows-10.html


こちらでWindows10向けのデザインが公開されているのですが、その中で注目したいのがlight/dark themeの部分。

win10firefoxtheme_03.png

カスタムテーマが使われているように見えます。その上にかぶさるツールバーの色が明るめか暗めか選べる機能を紹介していますが、右上のボタン部分もテーマが適用されています。40ではこのようになるみたいですね。個人的には整合していればボタン部分が縁どりされていてもいいと思うので、これは若干やり過ぎで視認性が悪くなるんじゃないかと心配です。

(このユニコーンはwhimsycornとも呼ばれるマスコットで、過去にもFirefoxでは使われているようです。イースターエッグとして出てくるみたいですよ。下に動画を貼っておきます。)




win10firefoxtheme_04.png

Chrome(バージョン44)はWindows10に上げた状態でもこのような表示。Windows10の標準UIではなくChrome独自のデザインですね。グレー系のテーマを追加してます。ボタン部分も背景色がついてますがボタンの枠はついてます。これが一番いいと思うのですが。

話を元に戻すと、Firefox40では変わるようなので、この記事で書いているボタン部分がズレて白いままになる問題はすぐに消えてしまうかもしれませんね。

今後のFirefoxに期待するところで

関係ない話が多めですが、Firefoxの話をもう少し。Firefox 40ではWindows10に向けたデザインが出るわけですが、その次の41についてはこんな話が。

Windows向け64bit版の正式公開はFirefox 40から(追記あり) - Mozilla Flux
http://rockridge.hatenablog.com/entry/2015/07/19/225110


40ではなく41になったそうですが、64bit版Firefoxが出そうです。一時期64bit版を作っていたけれど開発を止めにしました。その後しばらく経ってChromeが64bit版を出しました。私も使っていますが32bit版より軽くなりました(そんな話を書いてます、その後重くなったり軽くなったりしていますが)。同じようにFirefoxでもより使いやすくなればいいなと思います。

個人的にはFirefoxはサブで使っていて、あまり重いと感じたことがなくむしろChromeよりいいんじゃないかと度々思うのですがChromeで慣れてしまってメインを切り替えるまでは行きません。それでもブログ書くときは必ず使っているブログ用ブラウザとなっていますし、なんだかんだで毎日のように開いて何かしらに使っています。

今後の進化に期待です。

ボタンのデザインとテーマを調和させる方法


長くなりました。いよいよ解決策です。が完全に解決はしません。妥協も受け入れていただく必要があります。またバージョン40が出るまでの短い一時凌ぎとなる可能性大ですが、書きます。

先に結果を見ていただきましょう。

導入するとこうなります


win10firefoxtheme_05.png

導入後です。いい感じになってます。

導入前と比較するとボタンがきれいになりました。それとタブバーの高さが小さくなってます。妥協は開いているタブとツールバー部分がテーマ画像でなく単色である点です。シンプルなテーマを使っていることもあってか、私はこれも気に入っていてあまり妥協とは思わないのですが、大部分が塗りつぶされるので許せない人もいるかもしれません。

導入方法

使いたいカスタムテーマを入れておいてください。ここでは私はLinen Lightというテーマを入れてます。

Linen Light :: Add-ons for Firefox :
https://addons.mozilla.org/ja/firefox/addon/linen-light/



次にStylishでユーザースタイルを導入します。

Australis for Windows 10 - Themes and Skins for Browser - userstyles.org :
https://userstyles.org/styles/114261/australis-for-windows-10


こちらを入れますが、入れる前に色をカスタムできます。

win10firefoxtheme_06.png

テーマを入れるので「Window background」は関係ないです。テーマを使わない場合はmore screenshotsにもある鮮やかな色のシンプルなデザインを作ることができます。

「Toolbar background」を各自で選んでください。私の場合は#E3E3E3にしてあります。

「Titlebar text color」はblackとwhiteが選べます。私はblackのまま。

インストールします。以上です。

おわりに


StylishでFirefoxのUI側を触ればボタン部分に背景画像が適用されることから、当然カスタムテーマの右上で画像が欠けているわけではないし、いくつかのテーマを試してもボタン部の不整合はあるので、Firefox40でWindows10対応が入ればたぶんテーマ側での調整の必要もなくきれいに表示されるのだろうと思いました。

Firefox 40は2015年8月に出るようなので、少し待てばすぐに治るでしょう。

Windows 7からWindows 10にアップグレードしてウインドウのデザインが変わったことで、FirefoxのUI関連の拡張やStylishで色々使えなくなってますね。ツールバーも含めて透明化してたこともあるんですが10ではできませんね。プライベートブラウズ中もテーマを使えるようにする「Private Browsing Personas」は10でも動きます。

そう言えば、この記事でテーマと言ってきたのは背景画像を付けるだけのpersonasで、ボタンも含めて見た目を変えるテーマは含めてないです。そちらは開発者側でいろいろ調整しないとWindows10でうまく表示されないかもしれません。personasしか使っていないので現状すらわかっていませんが。

今後もどんどん変わって行きます。時間は流れるものです。今はWindows10でFirefoxを楽しみましょう。


この記事へのコメント