ANTEPRIMA FW07ウェブサイトとその思いで。
2007.08.09 01:24
[Web]
ANTEPRIMA FW07のサイトがラウンチしました。
ANTEPRIMA FW07 (英語)
ANTEPRIMA FW07 (日本語)
AD : Ogino Hideki (FICC inc.)
De : Wakita Takashi (FICC inc.)
Dv : Fukuoka Akira (FICC inc.)
ANTEPRIMA(アンテプリマ)の2007年秋冬コレクションサイト。今回もFlashコーディングは私が担当です。Wakita氏から受け取ったデザインを"立体化"しました。インパクトのあるプレゼンテーションと、コンテンツの一覧性を両立するレイアウト、そしてANTEPRIMAのコレクションそのものをお楽しみください。
…と。本当であればあまり解説をしない方が格好がつくのですが、後から見ておそらくこれが一つの節目になると思いますので、制作者の目線からいろいろと解説させていただきます。今回で私が関わるANTEPRIMAのコレクションサイトはこれで5回目になります。最初に携わったANTEPRIMA FW0506コレクションのサイトのラウンチから約2年が経ちました。5回目にして新しい挑戦、それがANTEPRIMA FW07ウェブサイトです。
最大の見せどころはやはり3Dパネルインターフェース。3Dのインパクトと操作性の両立、快適に操作できること。遡ればCOBYやFICC Labsなどで培った技術を、「面白さ」と「操作しやすさ」を両立した形で結実させました。COBYウェブサイトが表現したのが子供らしい無邪気さ・自由奔放さであるならば、ANTEPRIMA FW07サイトが表現したものは大人の品位。空間の広がりを感じながらも迷わないで進める、今回のコレクションを余す所なく楽しんでいただけるインターフェースに仕上げました。実はこのサイトではマウスクリックの操作だけではなく、マウスホイールやキーボード操作(アローキーやスペースキー)にも対応しています。ぜひマウスとは違った操作感を体験してみてください。
もう一つの大きなポイントはActionScript3での制作。おそらくこの規模のサイトでのAS3の利用はなかなかないであろう中で、0からスタートしてがんばってみました。もちろんただただ新しい技術に飛びついて導入したわけではありません。AS3の処理スピードが3Dパネルを手でめくるような滑らかな操作感を生みました。また、AS3の新しい機能を生かしたのが金の曲線です。

ANTEPRIMA FW07のインビテーションカードに印刷された「金の曲線」をウェブ上で、しかも動く形で再現。今回のサイトでは金の曲線がいくつか登場します。まずオープニングでマウスに追従するように滑らかな曲線が描かれます。マウスで操ることが可能なのでぜひ好きな模様を描き出してみてください。またダウンロードコンテンツのミュージックプレイヤーにも金の曲線が登場。

こちらはサウンドの再生あわせて空間を舞う金の曲線。あともう一つの金の曲線は…ぜひダウンロードコーナーの中から見つけ出してみてください。
音楽、と言えば今回のテーマ曲、岩村学氏による「Starlight Moonlight」。本当に素敵。ダウンロードコーナーからもMP3がダウンロードできますので、ぜひあなたのiPodへ。Starlight Moonlightはサイト内でもBGMとして再生されています。ぜひサイトを見る際にはヘッドフォン(またはイヤフォン)を装着してみてください。耳を澄ますと新しい発見がありますよ。
…と、ちょっと喋りすぎたかな(でも本当は全然喋り足りない)。ぜひ実際に触って、見て、確かめてみてください。そして各方面様々な方からのお力を借りてこのサイトを完成させられたことを、ありがたく、嬉しく思い…この場を持って皆さんへの感謝の気持ちを記します。ありがとうございました!!
このエントリーのトラックバックURL:
http://www.akirafukuoka.com/mt/mt-tb.cgi/116



I've seen your project for Anteprima, is very cool!I like very much the stacked windows with fake 3d effect, can i know how is this be done?Thanks.(Sorry for my english...)
m_k_i 2007.11.15 02:28Writing is a light as for the comment. A basic idea of effect is brought together on this page. Please refer.
(Powered by エキサイト翻訳)
コメントを書き込んでくれてありがとう。疑似3Dエフェクトの基本的な考え方はこのページにまとめてあります。参考にしてみてください。
AF 2007.11.16 01:53Thank you very much!
m_k_i 2007.11.16 19:25