Firefox 3 のテーマ

2007年11月24日(土) 21時28分 by level
B ?

先日、Firefox UI チームの Alex Faaborg が Firefox 3 の新テーマに関してその構想をブログで公開しました。かなり長い記事ですが、池田さんのブログで前半部分の和訳が公開されています。他にもいくつか日本語の解説記事公開されています

以下のスクリーンショットは、それぞれ、Mac OS X、Windows Vista の新テーマのモックアップです(オリジナル画像、かなり大きいので注意)。ただし、これで決定したわけではありません。

Firefox 3 Mac OS X テーマ Firefox 3 Windows Vista テーマ

Linux に関しては、すでにネイティブな GTK アイコンを使用するように作業が行われており、詳細は Ars Technica の記事を参照してください。

主な、変更点をまとめると以下のようになるでしょうか。

  • プラットフォーム共通のルックアンドフィールから、Firefox としてのアイデンティティを保ちつつ、各プラットフォームのマナーに沿ったルックアンドフィールへ変更。
  • 戻るボタンを大きくする。
  • 戻る・進むの履歴は戻る・進むボタンの間に一つにまとめる。Mac の場合は履歴用のボタンはなく、戻る・進むボタンの長押しでメニューが表示されるようだ。
  • ホームボタンはブックマークツールバーに移動になる(メニューツールバーへ戻すのも可)
  • go ボタンはロケーションバーでアドレス入力時にだけ現れる。逆にスターとフィードアイコンはアドレス入力時は表示されない。
  • スロバーはサイトボタン(ロケーションバーの左端、サイトアイコンが表示されるところ)に統合される。

停止・再読み込みボタンの統合は今のところ予定には入っていないようですが、その理由が、停止しようとした瞬間にロードが完了して、その結果再読み込みを行ってしまう可能性があるからということです。これは、コメントでも提案されているように、停止ボタンから再読み込みボタンへの移行の途中に、クリック不可能な状態を追加すればよいのではないかと思います。

なお、池田さんの和訳には含まれていなかった後半部分にも、今回のデザインの目的や経緯が詳しく述べられています。そこで Notes About the Design の二つの大きな画像の部分について訳してみました。

デザインに関するノート

デザインのノート

画像へのリンク、かなり大きいので注意)

戻るボタンは最も良く利用されボタンであり Firefox のユニークな見た目の独自性を作り出すために他のコントロールよりは大きくなる。

Firefox 3 テーマ:戻るボタン

進むボタンとサイトボタンのカーブは互いに鏡の関係にあり、再読み込みと停止ボタンの周りにより良い要約を作り出すようにデザインされた。

Firefox 3 テーマ:進むボタンとサイトボタン

スロバーを停止ボタンのすぐ横に配置することにより、ユーザに優れたフィードバックをもたらす。なぜなら、ブラウザの右端に視線を移すことなくこれらのくぼみを使用した動作の効果を見ることができる。観念的に、これはナビゲーションコントロールの周囲にあるスロバーに影響するすべてのものに対する自然なマッピングと、スロバーとロードされている URL との視覚的なグルーピングを作り出す。(スロバーのデザインはまだ最終版ではない)

Firefox 3 テーマ:スロバーと停止ボタン

スターされていないスターアイコンはプラットフォーム固有の検索虫眼鏡と同じ幅と色を持つべきである。

Firefox 3 テーマ:スターボタン

履歴ボタンは時計をイメージするエッチング画像を持ち、従来のドロップダウン矢印よりもより大幅に良い比喩をもたらす。履歴ボタンを Firefox 3 の主要 UI の中に配置することは、次期リリースでの基本コントロールの計画変更をもたらさないよう、将来のリリースにおいてこのボタンがどんな UI をあらわすかについての見込みを明示している(訳注:かなり苦しい訳)。

Firefox 3 テーマ:履歴ボタン

履歴ボタンの背景はツールバーの他の部分と同じ色であり、押し込みまたはエッチング効果を持ち、進むボタンと戻るボタンの間で強い見た目のコントラストを作り出す。マウスを載せると他のグリフボタンが持つような見た目で表示される。もし統合メニューを実現できない場合、これを広げて二つの矢印を分離して表示する必要がある。統合メニューはなんとしても欲しいところだ。(訳注;統合メニューのイメージはこちらで確認できる)

履歴ボタンは戻る・進むボタンを分割し、結果的に意味をもつカーブが追加される。戻るボタンは後方に放射する波のような二つのカーブを、進むボタンは前方に放射する波のような二つのカーブを持つ。

Firefox 3 テーマ:履歴ボタン

停止ボタンが無効の場合は、アウトラインで表示される。グレーで表示されても良い。有効な場合は、X が表示され塗りつぶされる。

Firefox 3 テーマ:無効な停止ボタン Firefox 3 テーマ:有効な停止ボタン
さまざまなプラットフォームにおける円と矩形の割合

画像へのリンク、かなり大きいので注意)

ツールバーのカーブの割合は、各プラットフォームの UI の円と矩形のサイズを計測して求められている。

円と矩形のサイズ

上図のように計測した結果に基づき、Mac OS X、Windows Vista、Windows XP のデザインが以下のように決められた(注意:これらは概念的なモックアップであり、最終的には全く異なるかもしれないし、実装されないものもあるかもしれない)。

Firefox 3 テーマ Mac Firefox 3 テーマ Windows Vista Firefox 3 テーマ Windows XP

原文:Introducing the history button into the primary UI in Firefox 3 present us to open up our possibilities for what UI this button displays in futures, without having to change the basic control scheme in the next release.

最終更新: 2008年1月12日(土) 11時17分

コメント (2)

1 11/26 12:03 はらだ
(c1) [2007/11/26 12:03:27] by はらだ

> 次期リリースでの基本コントロールの計画変更を
> もたらさないよう、将来のリリースにおいてこの
> ボタンがどんな UI をあらわすかについての見込
> みを明示している

次期リリースの基本的なデザインルールに従いつつ、
このボタンのような UI が将来のリリースでどんな
事を表現できるるようになるのかという可能性を示し
ている。

みたいな感じ、、、もちょっと微妙ですね。

2 12/05 22:11 うひょ
(c2) [2007/12/05 22:11:58] by うひょ

モックアップのままの白い GUI もかっこいいですね。
この真っ白のテーマは欲しいかも。

トラックバック

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. データがありません。