今回はウェブ ブラウジング。師走だし、今年を振りかえってみるエントリー書いてみようとおもったけど、なぜか結構さかのぼって2008年のFlashサイトについて書いてみます。


URL : alexprager.com
制作 : mocoro
デザイナー : HUGO AHLBERG
制作年度 : 2008年 ?



巷で話題の Flash or JS どっちなのよ、って話について、僕は無党派ですが、実際に技術じゃないところで、ちゃんと工夫されてるウェブデザイナーの方はたくさんいます。Flash全盛のころは、数が多すぎて、あっという間に消費されちゃったサイトも多いので、このブログでは、もしかしたら今はドメインすらないようなウェブサイトのことも、いまさらちょっと丁寧に考えてみてもいいのかな。と。



ということで、今回は写真家 Alex Prager のウェブサイトをブラウジングしてみます。これは2008年か2007年の、Flash全盛の時代の作品だった気がします。制作しているのはMOCORO、彼らはもうMOCORO名義では活動してないんですが、当時かなり尖ったUIデザインを連発していたチームでした。

この Alex Pragerのサイトでは「動き」に明確なルールを設けていて、「縦方向のマスク」によってすべてのページが展開していきます。そして、このスライドの流れのなかで、唯一ある横の動きが [←|→] ボタンです。上下にアニメーションの動きを、左右にナビゲーションの動きを、役割そのまま画面内の動きもきれいに分けられています。それに、[←|→] ボタンにはローディングの機能も持たせてあり、「ロードできないと次の写真にすすめない」という処理上の都合を端的にあらわしてくれています。

このマウスに追従するUI辺がやばい

[←|→] にはもうひとつ特筆すべきインタラクションが込められています。このボタンはマウスに追従するのですが、ボタン付近では追従を止めて、じっと押されるために待機状態に入ります。この速度や、「待機状態」にはいるwidthの設計が絶妙で体験者のクリックを促してくれます。もちろんサイト上部に設置されているグローバルメニューエリアへはそれらナビUIは、追従してきません。
こういう細やかな設計はjQueryをはじめ、プラグインに依存していくとなかなか実現していくのが難しい部分で、シンプルながらFlashサイトとして存在する意味が十分にあるなぁと感じる作品のひとつです。