PR

Flash Lite導入サイトまとめ読み

2009年1月26日(月)
岡田 昇三

Flash Lite meets design!

 現在、モバイルサイトを紹介したWebサイトやBlogは少なく、いったい世の中にどのようなサイトやコンテンツがあるのか分からない、といった状況ではないでしょうか。かく言う筆者も、その一人です。ですのでまずは、筆者自身がかかわったプロジェクトを紹介しながら、Flash Liteのトレンドを見ていきましょう。

 一般に「Flash Liteは何もできない」と言われています。確かに単体ではできる事は限られています。しかし、何かと出会い、組み合わせればPCでは表現できない携帯電話独自のコンテンツの制作が可能ではないでしょうか。

 今回は、細かな技術面からはではなく、何とFlash Liteが何かと出会った結果、何が達成できたのかについての事例を紹介します。

 「Nike6.0 モバイルサイト(http://nike6.jp/)」は、2007年初頭、携帯のフルFlashサイト自身が珍しく企業サイトではほとんど見かけませんでした。そんな中ビーコンコミュニケーションズ(http://www.beaconcom.co.jp/)の有川氏とFlash Liteだけで何ができるのか、という事に意欲的に取り組んだサイトです。

 当時のモバイルサイトというのは、情報の羅列だけで、デザインでブランディングを伝えるというサイトは少なかったと思います。動きに関しても(X)HTMLですので基本的には上下のみ、いわゆるY軸ですべて表現されていました。しかし、Flashであれば、ユーザーの操作次第で、X軸もZ軸、時間軸さえ取り入れる事から、携帯電話での新しい軸を提案してみようという考えにいたりました。

 まずは、デザイン制作に入ってもらう前にいくつかモックアップを作りました。ローンチ時のNike6.0コンテンツはBIKEでしたので、同時期にオープンしたNike6.0Park(バイク用のサーキット)をサイト上で再現し、サーキットを順次巡るコンテンツを提案しました。さらに、プロダクト(スニーカー)ページでは、360度の連番PNGを用意し、写真をMovieClipにして、それをフレームで動かし、疑似的にプロダクトの3D表現をしました。

 これらのモックを元に株式会社ルート・コミュニケーションズ(http://www.rootcom.jp/)のデザインが入り、当時の企業サイトでは珍しく、強烈なデザイン性がある携帯フルFlashサイトとしてローンチされました。

Flash Lite meets CMS!

 「H&Mモバイルサイト(http://www.hm.com/mobile/)」も、メインコンテンツはすべてFlashとなっています。

 Webサイトの運営を続けていく際に必ずコンテンツの更新の問題があります。Flash Liteの場合、通常のPCでのFlashサイトと大きく違う部分として「ユーザーの許可なしに外部へアクセスできない」という問題があります。再生時に設定ファイルやコンテンツの読み込みができないので、更新担当者はFlashをインストールしてコンテンツの入れ替え作業を行わなくてはなりませんでした。

 しかし、H&Mモバイルサイトは、コンテンツの更新はCMSで行われており、サーバー側にて写真やテキストといったすべてのコンテンツ/パラメータを埋め込み、ジェネレートされています。さらにステージサイズも機種ごとに動的に可変されており、どの携帯電話で見ても画面サイズにジャストフィットし、すべての携帯電話で同じサイトイメージが保たれています。CMSで簡単に更新ができるので非常に更新スピードが速く、常に最新のアイテムが画面に並んでいます。

 H&Mモバイルサイトで、FLash Liteが担当しているのは基本的な動きと大まかなレイアウトで、いわゆる「テンプレートファイル」になります。テンプレートファイルは各ページにつき1ファイルですので、修正が入った場合、1つのファイルを修正するだけですべての携帯電話の機種に対応する事ができます。

 今後はH&Mのようなリッチ&更新性の高い「CMSxFlash Liteサイト」が増えていくのではないでしょうか。

ワイノット(株)、楽天(株)、フリーランス活動を経て2009年よりhi-posi Inc.代表。「nike 6.0 mobile」「ナイキ モバロンドール」「H&M mobile」「bascule helmets!」などに携わる。http://hi-posi.jp/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています