Mozilla Flux

Mozilla関係の情報に特化したブログです。

Firefox 57でUI刷新を目指すPhotonプロジェクト

約3年半ぶりの刷新

Firefox 57はMozillaがFirefoxの大改造を予定しているバージョンであり、ユーザーインターフェイス(UI)もその例外ではない。現在のデスクトップ版UIは2014年4月、Firefox 29のリリース時に導入されたもので、Australisのコードネームで呼ばれる。2017年11月にリリース予定のFirefox 57では、Photon(光子)のコードネームが付いた新UIが披露され、約3年半ぶりにUIが刷新されることになる。

Photonプロジェクトの存在が明らかにされたのは、2016年12月下旬。本格的な始動は2017年3月下旬ころだ。判明しているだけでも15人のエンジニアと7人のUXデザイナが関与しており、現在ではさらに増えているとみられる。

この大プロジェクトの初期段階のデザインをスクープしたのが、オーストラリアオーストリアのsoeren-hentzschel.atである。早くも3月22日には"Firefox 57: Erste Vorschau auf das neue Firefox-Design (Photon)"という記事をドイツ語で発表し、その後も最新のモックアップを基にした記事を次々に物している。これを追いかけてgHacksが英語で記事を書いているのが現状だ。

もっとも、最初のほうこそ少しばかり秘密主義をとっていたPhotonプロジェクトも、最近はモックアップをオープンにするなど、状況が変わってきた。本記事ではPhotonプロジェクトの概要を簡単に紹介し、新UIについても見ていく。

f:id:Rockridge:20170515210238p:plain

6つのサブプロジェクト

Photonプロジェクト(Bug 1346488)は6つのサブプロジェクトに分かれており、対応するチームが存在する。各チームの開発状況はFirefox/Photon/Updates - MozillaWikiに掲載され、随時更新される。また、各チームの意見交換のためPhoton-devというメーリングリストが存在し、そのアーカイブは誰でも閲覧することができる。

6つのサブプロジェクトとは、標準テーマを刷新するVisual Redesign、起動から終了までの体感パフォーマンスを向上させるPerformance、メニュー・ツールバー・パネルの構造に手を加えるStructure、アニメーション処理を改良するAnimation、インストール直後の起動時におけるユーザー体験を改善するOnboarding、設定画面のカテゴリーと項目を再編成するPreferenceである。

この中で、Preferenceだけは本格的な成果が前倒しで投入される可能性がある。設定画面がリニューアルされる時期は、今のところFirefox 55だ。ただ、デザインを見直してFirefox 56以降に投入すべきとの意見も有力であり、上記の時期は確定ではない。

また、Australisのときとは異なり、Photonプロジェクトにおいて開発ブランチは設けられていない。これは、プロジェクトの成果が直ちにNightlyチャンネルに投入されることを意味する。初期設定では無効化されるとしても、Firefox Nightlyのユーザーはいち早くPhotonの内容に触れられるわけだ。

それどころか、最近の開発動向からすると、Photonの取り組みの一部はFirefox 55のリリース版にも投入されるようだ。たとえば、ツールバーアイコンが全面的にPNG形式からSVG形式に移行し、タブの移動・変更時のアニメーションが新しくなり戻る・進むボタン再読込・停止ボタンがロケーションバーから切り離される。

新UIのデザイン

ここからは新UIのデザインについて見ていく。現在公開されているものはWindows版を前提にしており、macOS版やLinux版では若干スタイルが異なりうる。また、言うまでもないが、モックアップなので最終的なデザインにおいては修正が加えられる可能性が高い。

新UIでは、画面上部中央にロケーションバーが置かれ、検索ボックスはなくなる。戻る・進むなどのボタン類はバーの左側にまとめられ、バー内にはブックマーク用のスターボタンとアクションメニューを呼びだす3点リーダのようなボタンがあるだけだ。バーの右側にツールバーボタンが並び、右端にハンバーガーメニューがあるのはこれまでどおりである。

f:id:Rockridge:20170515221040p:plain

標準のテーマではタブ列が暗くなっているが、別のテーマ(LightとDark)に切り替えることもできる。しかも、PhotonではUIの「密度」を調節できる。密度は通常・コンパクト・タッチの3つから選択し、タッチにするとタブバー・ツールバー領域が広がり、コンパクトにするとコンテンツ領域が広がる。テーマの種類やUIの密度はカスタマイズ画面から変更可能だ。

メニュー画面は文字が中心でアイコンが脇役になっており、情報量が格段に増えた。他方、サブメニューや履歴とブックマークの管理画面、ブックマーク追加時のパネルなどは従来のデザインをほぼ踏襲しており、一番目立つ部分を重点的に変えているようだ。

f:id:Rockridge:20170515223304p:plain
f:id:Rockridge:20170515223353p:plain

ライブラリボタンもメニューを呼びだす仕組みになっている。ブックマーク、履歴、ダウンロードなどのサブメニューに移行すると、より詳しいメニュー項目が出てくる。

f:id:Rockridge:20170515225323p:plain
f:id:Rockridge:20170515225609p:plain

サイドバーを呼び出すボタンもある。サイドバーでは表示する内容(ブックマーク、履歴など)を切り替えられるほか、表示する位置(右側か左側か)を変更することもできる。なお、初期設定でサイドバーは右端に表示される。

f:id:Rockridge:20170515230238p:plain
f:id:Rockridge:20170515230302p:plain

これらのアイコンに関し、ツールバーに常時表示される数には限りがあるようで、いわば「溢れた」アイコンを収納するメニューもある。

f:id:Rockridge:20170516072430p:plain

ロケーションバーから呼び出すアクションメニューには、ページのブックマーク追加と並んで「Pocketに保存」という項目があるのが目につく。「URLのコピー」があるのもライトユーザーにとって嬉しい配慮だ。また、SNSへのシェア機能も充実している。メニュー内にスクリーンショットという項目があるのは、Firefox 55でTest Pilot掲載のPage Shot⁩が統合されるのを踏まえたもので、「スクショ」をSNSでシェアしやすいようにしている。

f:id:Rockridge:20170516072916p:plain
f:id:Rockridge:20170516072937p:plain

以上のデザインに不満を覚えた場合、ユーザーはカスタマイズ画面から修正を行うことができる。画面には現行のデザインであればメニューパネルに配置されるアイコンが多数並んでおり、Photon UIではこれらをツールバーに置くことになる。初期設定では表示されない検索ボックスもここから復活させられる。そのうえ、ロケーションバーが中央の位置にあることさえ、空白のスペースで挟まれていることによるものだから、これらの空白を外せばバーの位置を動かせるのだ。

f:id:Rockridge:20170516074527p:plain

コンテンツ領域に目を向けると、スタートページが刷新されている。Test Pilot掲載のActivity Stream⁩が統合されるためだ。新規タブも同様とみられる。モックアップには「トップサイト」とPocketからのおすすめ記事が表示されているが、おそらく過去のブラウジング履歴に基づく「ハイライト」も加わるはずだ。

f:id:Rockridge:20170515223237p:plain

そのほか、セッション復元、ネットワークエラー、ライセンス表示など、特殊な画面も新しいものが用意される。

f:id:Rockridge:20170516081258p:plain

Project Tofinoの影響

ロケーションバーを中央に配置してシェア機能を組み込むこと、戻る・進むなどのボタン類をバーの左側に固めて配置すること、タブのデザインを四角くすること。こういったPhotonの特徴は、Project Tofinoが遺したもの - Mozilla Fluxで紹介した、Tofinoの成果であるコンセプトUIを受け継いでいる。一方、同じくコンセプトUIにあったOverview(概要)タブや「ナビゲーションバー」などは採用されていない。

f:id:Rockridge:20161218203649p:plain

Project Tofinoの影響は限定的だったとの評価もありうるが、Photonが明確にFirefox 57をターゲットにしていることを考慮すると、現行のデザインから無理なく変更できる部分をまず採り入れたとの見方もできそうだ。別の言い方をすれば、現在明らかにされているのはPhoton v1という通過点に過ぎず、2018年のPhoton v2でTofinoのコンセプトUIにより近づいていくのではないか。