amanaリニューアル：スクロールバーのアイデアとサイトの使い勝手

amana group（アマナ・グループ）のコーポレートサイトがリニューアルしています。Flash 開発は undefined のむらけんさん。

とにかくブログタイトルに書いてる2点は特筆ものだと思います。

スクロールバーのアイデア

サイトトップページの一覧画面上のスクロールバーはこのようになっています。

水平方向のスライドバー

トグルを左右にスライドさせることで、その下にならんだコンテンツが上下スクロールします。
「左右に動かすと上下に動く」と文字で書いてしまうとなんだかややこしい印象ですが、実際にはとても直感的に操作をすることができました。

これを見て、昔 apeirophobia 様のエントリで紹介されてた冷蔵庫「動くん棚」のインターフェースを思い出しました。当時そのエントリに感動して、「これを Web の UI（ユーザインターフェース：デザイン的な操作性・使い勝手） に落とし込めないかなぁ。」と考えてみたものの、ウィンドウのリサイズに関しては下図のような、境界を直接ドラッグ

する直感的だし、うーん Web とはまた別の話かなぁと早々に思考を止めてしまった自分が悲しいです。ウィンドウのリサイズ以外にも使えるという発想まで行ってなかった。。

コンテンツ上端・下端のマウスオーバースクロール

上の左右スライドバーだけでなく、サムネイルが並んでいるコンテンツ部分の上端・下端にそれぞれマウスオーバーした時は、自動で上下スクロールしてくれます。素敵な気遣いですよね。

この「行きたい方向にマウスカーソルを持っていくとそっちに移動する」というのは Flash ならではの直感的な UI だと思います。

ちょい重だけど collection のページを見てみて！

とか、「東北新社 2009年度新卒採用サイト（CM ができるまでのページ）」「NikeDunk の RANKING のページ」などで見ることができますが、誰でもすぐ理解できる、直感的、かつ気持ちいい UI だと思いませんか？

でもやはり作るのはたいへんなわけで・・

Flash でスクロール機構の実装っていうのはなかなか骨の折れる作業です。ブラウザのスクロールバーと違って、Flash 製作者がゼロから作ることが多いのです。スクロールさせる画面とスクロールバーのの比率を算出するコードを書いて、トグルの移動量、滑らかにスクロールするコード、さらにユーザがウィンドウをリサイズした時には比率を再計算、その比率反映をどのタイミング（このサイトの場合はトグルクリック時）で実行するか・・・。こういったことを矛盾が起きないように、かつ、ユーザが一番理解しやすいように考え、コードを書かないといけないわけです。んで、最大限努力したにもかかわらず「やっぱ慣れてるからブラウザのスライダーが一番だな。」とかユーザさんに言われることもあったりと、Flasher にとっては心身ともに結構難儀なパートなのではないでしょうか？

そこに今回の amana サイト。新しいスライダー UI の提案、この UI 体験にグッとくるユーザは確実にいるだろうし、こうやって UI の可能性・将来性が広がっていくのだなぁとワクワクします。そして発想もすごいけれども、この機能を実装（コーディング）した人はエライなぁと思うわけです。僕ならブーたれて普通のスクロールバー付けてしまいそうです。（でもブラウザのスクロールバーを非表示にして、代替として同じく右端に Flash 製スクロールバー置くのってなんか抵抗ありますよねぇ。わざわざ改悪してしまってる感が。。）

サイトの使い勝手

おそらく Progression Framework を使われていますね。上の画像のように、画面遷移するとパーマリンクが付きます。これのおかげでフルフラッシュサイトでも「当社へアクセスはこちらのページをご覧ください。」ってな感じで URL をコピペしてメールで送ったりできるわけです。さらに Progression なので、例えば任意のボタンの上で右クリックすると、

みたいなコンテクストメニュー（WindowsOS でもおなじみですね。）が表示され、新規ウィンドウで開いたり、URL をコピーできるわけです。
なんだかんだでこの Flash サイトにおける革新を体験してない人も多いのではないかと思いますが、実際に URL コピーして新規ウィンドウのアドレスバーにペーストしてアクセスしてみてください。「Flash サイトなのに目的のページが開くよ！」という体験はだいぶワクワクものです。

Progression フレームワークを使えばどのページにパーマリンクを持たせるか、パーマリンクで直接アクセスされた場合はどういう画面転換をするかの設定も可能で、使い勝手の良い Web サイト設計に役立つフレームワークなのです。なので、以前も書きましたがｗ、Progression が使いこなせる新人さんとかいたら相当人気者になれると思うのでオススメなのです。

今 Progression はクリエイター間でブーム中で、製作者側からのボランタリーな提案レベルでの導入が多いのかもしれませんが（僕 Web 制作業界知らないですが）、今後その利便性が広く浸透すれば、クライアント側からの導入依頼も増えるでしょうし、エクセルの請求書の項目に「Progression 導入費」を用意しておくといいですね。そうですね。

最後に

今回 amana サイトリニューアルの Flash を手がけた undefined のむらけんさん、Progression Framework 作者の taka:nium さん、両トップクリエイターと知り合いな僕は分不相応にラッキーだなと。かたや僕はブログ書いてただけなので、だからこそブログは書いたほうがラッキーなこと多いよと思うわけなのでした。