EC運営

ネット通販をプロデュースする！

記事一覧へ

戦略的なＷｅｂサイト構築・運営を手掛けるエクストラコミュニケーションズ社より、多くのＥＣサイトを手掛けてきた実績ノウハウをお伝えします。

（株）エクストラコミュニケーションズ   代表取締役　前野　智純

ＰＣよりモバイル？【１】　やっぱり売れてるモバイルＥＣの特性（木根）

ＰＣよりモバイル？【２】　やっぱり売れてるモバイルＥＣの特性（木根）

2009年07月13日｜コメント(0)｜トラックバック(0)

────────────────────
■モバイルＥＣサイトのトレンド
────────────────────

地域によっては梅雨明けとなり、本格的に夏真っ盛りとなってきた。
毎年、なるべくクーラーには頼るまいと考えるのだが、すでにこの時期から、我家でクーラーが休んでいる日は一日もない。。。せめて、２６度の温度設定を、２７度、２８度とあげてみたり、プチ温暖化対策にいそしんでいる。

さて、前回は、モバイルの特性から、モバイルＥＣサイトにとって、またその集客に際して、重要な要素を取り上げた。今回は、その続編として、モバイルＥＣサイトのトレンドなどについて、お伝えしたい。

────────────────────
■モバイルＥＣサイトに求められるデザイン
────────────────────

まず、周知のとおりモバイルは画面が小さい。パソコンと比較すると、基本的なユーザビリティは劣るように思うし、一度に見せられる内容も制限される。だが、画面が小さいからこそ、そのサイトのデザインやインターフェースの考え方がとても重要になる。もし、あなたが普段モバイルをあまり利用しないのであれば、自分自身がユーザーとなって色んなサイトを比較しながら試してみるといい。
デザインやユーザビリティがモバイルにこそ求められるのがよくわかるはずだ。

モバイルＥＣサイトに限らずだが、モバイルサイトでは、小さな画面という制約の中で、どれだけ見やすく、どれだけ多くの情報をすばやく、印象良く伝えられるかが求められる。そのため、実に高度
なデザインテクニックが要求されるのだ。

モバイルＥＣサイトのデザインに求められる条件を簡単にまとめると、下記のとおりだ。

・小さい画面でより多くの情報を伝える
・イメージや商品特性、商品の背景などをすばやく伝える
・表示や操作性などユーザビリティに配慮する
・１ページのコンテンツ配置や流れを考える

ただ、モバイルの場合、「ｄｏｃｏｍｏ」「ａｕ」「ＳｏｆｔＢａｎｋ」などといったキャリアごとに画面サイズや仕様、コーディング方法が異なり、凝ったデザインをしようとすると手間やコストがかかる。どんどん新しくなる新機種への対応や実機での確認も面倒だ。それに、フルブラウザ対応ならＰＣ向けのサイトも見られるから、携帯向けのデザインサイトはいらないといった声さえ聞こえてくることもある。

しかし、「モバゲータウン」に代表されるように、モバイルユーザーに人気のあるサイトのほとんどが、画像やイラストをふんだんに使ってデザインにも凝ったＸＨＴＭＬベースのサイトだ。モバイルＥＣサイトでも、その傾向は顕著だ。
フルブラウザの場合は、文字が小さくなってしまい、見づらかったり、別に料金がかかってしまう場合があったりと、ユーザーにとって決して使いやすいものではない。やはりモバイルで利用するには、モバイル向けに設計、およびデザインされたサイトが必要なのだ。

それに、テレビＣＭで「続きはＷｅｂで」というフレーズがより使われているが、こんなシーンでは、パソコンではなくモバイルから検索する人が非常に多いと言われている。（※実際、私の妻も、テレビのある番組（通販番組ではない）内で紹介されていた圧力鍋を、モバイルで検索して購入していた）また、フリーペーパーや、雑誌といった紙媒体でも、ページにつけられたＱＲコードからサイトに訪れた場合も、テキストのみのサイトだったらがっかりする。モバイルサイトのデザインは、商品やブランド訴求のシーンでも無視できない存在になっているのだ。

────────────────────
■リッチにつくるモバイルＥＣサイト
────────────────────

モバイルＥＣが盛り上がってきたとはいえ、まだまだモバイル用のＥＣサイトは少ないので、参入するなら、絶対にリッチなサイトをつくることをオススメする。画面が小さいモバイルでは、サイト自体に他店との違いを打ち出すのに苦労することになるが、それを解決するには、いかにリッチなコンテンツ、リッチな見せ方をするかがポイントなのだ。

ではモバイルＥＣサイトにおいて、リッチなサイトとはどんなものか、その要素を簡単にまとめてみる。。。

・ＸＨＴＭＬベース
・Ｔａｂｌｅ／Ｄｉｖタグを取り入れる
・ＶＧＡなど高解像度に対応
・Ｆｌａｓｈの利用
・動画の利用

リッチなモバイルＥＣサイトにおいて、ＸＨＴＭＬベースで制作することがポイントになる。ＸＨＴＭＬでのコーディングにあたっては、キャリアごとのＸＨＴＭＬ記述の違い、端末ごとの指定や対応の違いが存在する。また、非対応の指定に関しては無視されることになる。以下にキャリアごとの表現手法の違いをまとめてみる。

【キャリアごとのＣＳＳ指定】
・ｄｏｃｏｍｏ：外部ＣＳＳ対応
・ａｕ：外部ＣＳＳ対応
・ＳｏｆｔＢａｎｋ：外部ＣＳＳ対応

【キャリアごとのtableタグ指定】
・ｄｏｃｏｍｏ：ｈｔｍｌ６．０以上対応のｉｍｏｄｅ対応機種で対応
・ａｕ：ほぼ対応
・ＳｏｆｔＢａｎｋ：ほぼ対応

【キャリアごとのｄｉｖタグ指定（ｆｌｏａｔプロパティ指定の可否）】
・ｄｏｃｏｍｏ：ほぼ対応
・ａｕ：ｆｌｏａｔプロパティには非対応
・ＳｏｆｔＢａｎｋ：ほぼ対応

【キャリアごとのｉｍｇタグ指定（ｆｌｏａｔプロパティ指定の可否）】
・ｄｏｃｏｍｏ：ｓｔｙｌｅのインライン指定にて対応
・ａｕ：ｉｍｇタグのａｌｉｇｎ指定にて対応
・ＳｏｆｔＢａｎｋ：ｓｔｙｌｅのインライン指定にて対応(一部ａｌｉｇｎ指定)

※キャリアごとのページを制作せず、３キャリア１枚での制作も可能。
　その場合は、共通化できる指定のみ有効な表現のデザインを考える。

次に、モバイルＥＣサイトをリッチなサイトにするための重要なポイントが、端末ごとに違う画面解像度の対応だ。機種によって解像度の違いが多様にあるので注意が必要だ。部分背景色と画像等を組み合わせたい時など、画像サイズが機種ごとに最適化されていないと、レイアウトが崩れる。
※画像サイズの対応については、今回は割愛する。

また、Ｆｌａｓｈ Ｌｉｔｅ（携帯電話向けに開発されたＦｌａｓｈ Ｐｌａｙｅｒ）での表現も重要なポイントだ。
ＦｌａｓｈＬｉｔｅはデザインの自由度も高く、モバイルの小さな画面でもインパクトのある印象を与えることができる。ＦｌａｓｈＬｉｔｅには、サイト全体もしくはページ全体をＦｌａｓｈ化する場合（インタラクティブＦｌａｓｈ）と、ページの一部にＦｌａｓｈを使う場合（インラインＦｌａｓｈ）の２種類の手法があるが、目的によって使い分けると効果的だ。なお、ＦｌａｓｈＬｉｔｅは各機種のブラウザサイズへ自動的に最適化されるので、機種ごとにサイズを意識することがあまりない。
※機種依存はあり。また、端末の中には、一部Ｆｌａｓｈ Ｌｉｔｅ非対応のものもあるので、
　非対応端末には、代替画像を表示させるなどの処理が必要。

さらに、モバイルＥＣサイトにおいては、動画を使った表現も、是非取り入れたい。現在では、ダウンロードやストリーミング時の転送速度にストレスを感じにくくなってきているため、モバイルを利用しての動画鑑賞は一般的になってきている。お笑い芸人が、毎月１，０００万円の賞金を目指してモバイル上でバトルする「Ｓ?１バトル」が人気をはくしているらしいが、そういったところからも、ユーザーがモバイル上で、動画を見ることに抵抗がなくなっている証拠といえる。

最後に、モバイルサイトの制作現場では、その機種対応の多さから、端末ごとに最適化したページを動的に表示させる機能を持ったＡＳＰ型のサービスが普及している。その中でも最近では、本格的なリッチサイト制作に対応するサービスとして、モバイルサイトをＦｌａｓｈ化して提供するサービスがでてきている。ＥＣサイトには、特におすすめなサービスだが、既存の商品データベースからＦｌａｓｈコンテンツを生成し、使いやすいユーザーインタフェースを実現できるという。変化する商品情報をリアルタイムにＦｌａｓｈページに反映していくため、商品ごとに新たなページを用意する必要がなく、商品データを用意するだけでページ更新ができる。自動生成したＦｌａｓｈページは、３キャリアに対応しているので、端末ごとの指定を気にする必要もない。

ケータイＦｌａｓｈ ASP（http://mobile-flash.kbmj.com/）

以上、思いのほか長文になってしまったので、今回はこの辺で終了としたい。
次回は、モバイルＥＣのマーケティングについて紹介していく。