1枚の写真素材でメニュー画面

2009-01-05 (月) 23:20
website

こちらの「TRITON」というサイト、冬季限定キャンペーンサイトらしいです。

さて、上の集合写真から一人を選んでクリックするのですが、その時の演出が気に入りました。

人にマウスカーソルを合わせると、

triton_2

という感じで、スポットライトが当たったような演出になるのです。クリックするとその人物のムービーが再生される仕掛けなのだけど、それはさておきこのスポットライト演出がいい。

人の重なってる部分の処理とかを見てると、これは一人一人を別撮りしたのではなく、与えられた素材は１枚の集合写真だけっぽい。まぁ演出を考えた後の写真撮影だったのかもしれないけれど、限られた素材をアイデアで上手く見せるという姿勢がカッコイイですね。ロールオーバー時に、人それぞれ固有の SE が鳴るのもユーザインタラクションを盛り上げる工夫ですね。

もし将来、何か一枚絵だけをポーンと渡されるような案件がやってきても、アイデア次第で頑張ればいけるぞと希望を持っておこう。

Flash 的な作り方を考える

さて、次はこの1枚の集合写真をどういう風に切り分けて演出しているのかが気になりますよね。切り抜いてる？透明度？レイヤー？かつ、できれば軽量であること。さてどういう制作アプローチがあるでしょうか？人は全部で8人いますね。思いつく限りの手法を挙げてみると：

元の集合写真1枚と、各人物一人にスポットライトが当たっているように Photoshop で加工した集合写真を8枚用意し、ロールオーバーで透明度調整する。つまり同じ画像サイズで9枚重なっている。
マスクを使う方法。Photoshop でスポットライトを当てる人物の範囲以外を黒で塗りつぶしたマスクを用意する。暗がりの人もうっすらと見えている＆注目の人の周辺もボヤーッと黒くさせる必要があるのでアルファチャンネル付き PNG のマスク画像8枚用意することになる。
元の集合写真1枚(A)、全員を暗く処理した画像1枚(B)、各人物にスポットライトが当たった時の画像を8枚用意(C1～C8)。その8枚は透過 PNG 画像で自然に B に溶け込むように画像処理しておく。これだと用意する8人の画像はその人物周辺だけのサイズで済むので軽量。Flash 的には、マウスアウト時は A のみ表示、各人物にマウスフォーカスしたら B と該当する C を同時にフェード表示させる。

という3アプローチが思い浮かびました。実はサイトの写真をマウスを動かしつつじっくり見てみると暗部の画像劣化を目で確認できるのですが、それをふまえるとどうやら3番目の手法っぽい。まぁ画像のファイルサイズ的にも3が無難ですよね。
でもこういう実装アプローチもケースバイケースで違ってくるので、鵜呑みにせずに実際に試してみることも大事ですけどね。

他にもっといい手法あったら教えてください。

メモ：ラグジュアリーなゴールド素材の作り方の参考にもなる。