アークウェブのブログ

アイテム一覧

Flashでは、一気にアイテムの画像を比較して見られます。
HTMLだと1アイテム1行にならざるを得ないのでこの辺はFlash化の優位点ですね。
ただ、HTMLの方は1アイテムごとに商品情報を提供できるので、価格表示等の詳細情報をリスト中に載せられます。

アイテム概要

バッグの画像左側にある丸ポチ3つが色のバリエーションを表しています。
上下キーでバッグの画像が変化するように実装されているようです。

HTMLの場合は、複数カラーバリエーションを表示するとなると画像が多くなって
場所をとってしまいますが、1アイテムを別の画像に差し替えるので場所を取らない利点があります。

携帯FlashのUIは上下とセンターボタンと1234567890キー、*キー、#キーのみなので
いかに誤って左ボタンを押させないようにするかがポイントのひとつになると思います。
この場合は、カラーバリエーションが縦になっているので、上下キーを押させるように誘導する狙いが見て取れます。

見せないボタンによるUIの制御方法は、以前携帯Flash勉強会(デバッグ編)で習ってきたので、興味がある方はそちらを参照ください。

Flash/Lite/KlabのケータイFlash勉強会デバッグ会に行ってきました
https://www.ark-web.jp/sandbox/wiki/357.html#a55d23cf

使ってみて、気づいたのですが、「Email a Friend」は、PC版で閲覧できるURLが欲しいところです。PCでじっくり見たいという人もいると思うので。

上記商品のPC版
http://japan.coach.com/content/product.aspx?category_id=191&product_no=10893

モバイルで時間の空いたときにチェックして、さらにPC版で詳細を見て、でもやっぱり店頭で買う時はモバイル版でチェックする。みたいなシナリオはあるでしょう。ターゲットユーザの違いはあるかもしれませんが、機会損失がないとも言い切れません。

この要望をかなえるには、商品へのURLをPC/モバイル同じにしておき、User-Agentで表示する画面を切り替える、などの昔から取られている対応でも十分効果があるように思います。

アイテム詳細(これはHTML)

画面スクロールが必要になるような長い文字要素がある場合は、HTMLで見せた方が無難です。
Flashでスクロールするような見せ方をする場合は、UIに工夫が必要でしょう。

長めの文字要素は常にHTMLがよい?

長めの文字要素は常にHTMLがよいかというと実はそうでもありません。

Flashのテキストオブジェクトは縦方向スクロールに対応しています。
ユーザのボタンアクションイベントをトリガーにテキストをスクロールするメソッドを呼べば上下スクロールが可能です。

欠点は、テキスト中に画像要素を盛り込めないことです。

ただ、これは商品の製造背景や特徴など長めの文言でコンテンツを1回きり読ませるだけの場合には有効だと思います。

アイテム拡大

この画面だけ、1?9キーを押すと拡大できるモードになっています。

実装方法としては、拡大した時にちょうど100%になるような大きめの画像を用意して縮小した状態で全体を見せるようにし、キー入力によって元の画像に拡大すればできますね。

色のバリエーションがないのがちょっと残念なところです。

あと、これだと一方向しか見られないので、あまり大きすぎない複数枚の画像を使って商品をくるくる回す、などができそうですね。

バッグ試着

数種類のバッグは、シルエットのモデルさんに試着してもらえる機能がありました。

バッグの大きさを見るのに使うようです。
一工夫したユーザーエクスペリエンスはやはり記憶に残りますし、ブランド側の気配りを感じさせますね。

まとめ

場所をとらずに商品をいろいろな角度で紹介できる点は、まず携帯Flashの大きな魅力と言えます。HTML側は、商品価格やサイズなどの詳細を説明する場合に利用すると効果的です。

この切り替えがうまくできると携帯Flashをうまく生かしたサイトが作れそうですね。