今回はビジュアルデザインの話です。といっても UI コンポーネント限定ですが。
Flash に興味のある方は Halo （ヘイロー） という言葉を聴いたことがある方も多いと思います。最近の Flash にはもれなく付いてる UI コンポーネントのビジュアルデザインのテーマ名ですね。
Halo はどんなデザインなのかよく分からないという方は、例えばボタンだと下の図のような感じです。言葉だけではぴんと来なかった人も見れば思い出したりしませんか？
いまさらながら Flash 標準 UI コンポーネントが登場した背景
ちょっと前になりますが Flash が Web サイトで広く使われるようになって、スプラッシュページ以外の用途もだんだんと認知されるようになってきた頃がありました（Flash 5 あたり）。一方で、その頃は Flash の使用自体に対するネガティブな意見もまだまだ強い頃でした。jacob nielsen の "Flash: 99% Bad" などは覚えている人も多いのではないでしょうか。
上記の nielsen のドキュメント内でも記述されていたポイントに、Flash を使ったサイトではサイト毎にコンテンツの操作方法が異なるため混乱することがしばしばで、且つ大抵どのケースも十分に使いやすさが検証されていないコントロールが採用されている、というものがありました。この指摘に対する回答の一つとして（formerly known as） Macromedia から提供されたのが Flash MX 以来の標準 UI コンポーネントというわけです。
さて、その際にビジュアルデザインのテーマとして採用されたのが Halo でした。Flash MX 後も V2 コンポーネントや Flex 1 のコンポーネント等が作られていますが、全てルック＆フィールは Halo になっています。
Halo のデザインは枠の形やベベルなど特徴的で印象の強いものです。おかげでいくつかの問題を抱えることになりました。例えば、コンテンツ並みに目立ってしまうとか、サイトのデザインにあわせにくいとか。。。
結局あまり見かけない標準コンポーネントになってしまいました。
そうこうしている間に Adobe もいろいろと経験を積んだわけです。そうして新しくデザインされたテーマが Aeon （イーオン） です。Aeon が製品に使われたのは Flex 2 が初めてです。Flash ユーザの方はまだ馴染みがないかもしれませんね。
これが Aeon （のボタン）です。
シャープになったエッジやシンプルなサーフェイスから背景との関係がより意識されていることが伺えます。
Flex 2 の Aeon コンポーネント
前述のように、今のところ Flex 2 のみ Aeon コンポーネントを持っています。Flex 2 の SDK をインストールすると Windows であれば \Flex SDK 2\frameworks\themes\AeonGraphical Source に AeonGraphical.fla というファイルが見つかると思います。このファイルを開くと各コンポーネントのスキンが定義されています。
実際には、これらのスキンが使用されているわけではなくて別のファイルに Flex 2 デフォルトのスキンの定義があるのですが、Aeon のデザインポリシーやスキンの構造を理解するにはこっちの方が分かりやすくて便利でしょう。
特に、Flex 2 の UI デザインをする際は Aeon を理解しておくといろいろと役に立ちます。ということで、ここでは一番単純そうなボタンコンポーネントのスキンを紹介します。
Aeon のボタンは下図のように 枠 + 塗り + ハイライト の３つのレイヤーからなるしごく単純な構造です。
実は Halo ボタンは6つのレイヤー（つまり Aeon の倍！）からできていました。Flex 2 でも Halo は使用できますが Aeon の方が全体的にシンプルな構造になっているため描画処理が軽いのです。
また、スキンのカスタマイズも Halo よりは分かりやすくなっているように思います。
Aeon スキンのカスタマイズ
Halo は中央から外へのグラデーションでした。Aeon は上下のグラデーションが基本です。
Flex 2 の Aeon ボタンでは fillColors というプロパティを使って "塗り" のレイヤーに上下両端の色を指定できるようになっています。指定の仕方は CSS と同じ要領です。下の例ではボタンの上から下にかけて白から薄いグレー（これがデフォルト値です）のグラデーションを指定しています。
Button {
fillColors: #ffffff, #cccccc;
}
実際にいくつかの値を適用してみた例が以下になります。左から順に、白（ffffff）→青（0000ff）、青→青、青→白を指定しています。
さて、上の例を見ると、青（0000ff）を指定したのにちゃんとその色になってませんよね？もう理由分かってる人も多いと思いますが、これはボタンが透けているからです。
Aeon のボタンでは "塗り" と "ハイライト" のレイヤーに透明度のグラデーションを設定できます。使用するプロパティはそれぞれ fillAlphas と highlightAlphas で 0 （完全透明）から 1 （非透明）の間の値を設定します。
まず "塗り" の透明度を指定してみます。下の例は全て fillColors に白（ffffff）→青（0000ff）を指定したものです。fillAlphas は左から順に [1, 1]（ボタン全体が非透明）、[0.6, 0.4]（Aeon のデフォルト）、[0.4, 0.6] の値が使われています。
次は "ハイライト" の透明度の指定を変えてみます。fillColors には白（ffffff）→青（0000ff）を、fillAlphas には [0.6, 0.4] を（つまり上のサンプルの真ん中のボタンと同じ）指定することにします。
下の例の左端は highlightAlphas に [0.3, 0] を指定しました。これは Aeon のデフォルトですので、上図の真ん中のボタンと同じはずです。中央のボタンには、[1, 0]（上端が非透明）、[1, 1]（ハイライト全体が非透明）を指定してみました。ハイライトの効果が分かるでしょうか。
それから、ボタン自体が透明度を持つため背景によってボタンの見え方が変わります。下図は上の３つのボタンをそのまま Flex 2 デフォルトの背景色の上に乗せたものです。結構違った印象になります。
このように透明度を使って背景と重ねた効果を積極的に使おうというのは Aeon のデザインコンセプトの一つです。
おわりに
下のスクリーンショットは Flex 2 のサンプルアプリケーションとして公開されている Flex Store です。白い背景でコントラストの強い主役のコンテンツ領域に対し、画面左側の操作用のパネル部は少し背景が透けた状態でそこが2次的なエリアであることが表現されています。
Halo がデザインされた頃は 3D 的な形状を与えることによりノーマン的アフォーダンスを持たせる（懐かしい）というのがトレンドでした。最近は透明なサーフェイスを重ねることでコンテンツやコントロールと背景の関係を表現するというのがトレンドの一つのようですので、Halo から Aeon になってもトレンドを追っかけるという点は変わっていないのかもしれませんね。
Leave a comment