たにぐちまこと氏が教える! Web担当者が知っておきたい、企業サイトの賢いスマートフォン対応とは?

taniguchi_1000

20.Aug.2011

実はECサイトはスマートフォンに向かない?

 

スマートフォンサイトは、画面の広さの制約とタッチパネル式の操作がある。そのため、PCサイトの情報をすべてスマートフォンサイトで表現できない場合もあるという。

「一般的にECサイトが挙げられると思います。基本的には情報が多いものはスマートフォンサイトに適しませんね。商品点数が多いために検索機能を充実させてサイト内の遷移やアクションを効率化したとしても、最終的に購入時に配送先住所等を記入するフォームがタッチパネルでは操作感があまりよくなかったりします。そこでユーザーが離脱することも考えられます。そのためiPhoneアプリにもなっているAmazonや楽天など、普段からPCで使用していて、アカウントもあり、たまにスマートフォンで使うというケースは別として、ECサイトをスマートフォン対応するのは、費用対効果が低いように思いますね」

とはいえ、実際にはECサイトのスマートフォン対応も案件として依頼はあるという。そういった場合、たにぐち氏はどういった対応をしているのだろう?

「まず前提として、商品の選択から決済までの全てをスマートフォンで行う必要性が無いとも言えるわけです。というのも、スマートフォンを使っている人は、PCを開くことが日常生活でそれほど面倒なことでは無い場合が多いです。結果的にそういう人たちがスマートフォンでECサイトを見ている状況というのは、リビングでPCを開くのが面倒だから見ている、というような状況です。よって、カートに入れるまではスマートフォンで、決済はPCで、とスマートフォンサイトで行う役割を切り分けてしまう選択肢もアリだと思います」

一見面倒かな、と思われがちだが、実際に自分が購入者になると、むしろ“住所入力、面倒だな。ここからPCでできないものか”と思ってしまうものだ。今後、HTML5などの技術を使いフォームも改良され、徐々にスマートフォンだけで決済などを行うユーザーも増えると予想されるが、現状ではスマートフォンのタッチパネルでの入力は別の手段も準備するのが無難だろう。

 

  • ポイント8 タッチパネルでの文字・数字入力は必要最小限に抑える

 

住所情報の入力補助の例 楽天のスマートフォンサイト(iPhoneでの表示)では、配送先情報入力時に、郵便番号検索によって タッチパネルでの入力を最小限に留める配慮がされている

同様の考え方で、サイトの情報が多過ぎる場合、すべての情報をスマートフォン対応させるのはあまり賢いやり方ではない。画面が小さく、指でタップするスマートフォンは、多重階層や情報の多いサイトのブラウジングには向いていない。例えば、飲食店のクチコミサイトである「ぐるなび」は、豊富な特集記事の中から厳選したものをスマートフォンサイトのコンテンツとしている。最適な情報提供の方法を考えた“部分対応“の好例といえるだろう。

一部のコンテンツのみ掲載している例 飲食店検索の人気サイト「ぐるなび」のスマートフォンサイト(右画面/iPhoneでの表示)。トップで表示されているのは「夏本番!ビール特集」のみで、 その他の特集はPCサイトのリンクに誘導されている。左の画面は幾つもの特集が並ぶPCサイトの特集トップページ

 

  • ポイント9 情報が多いサイトの場合は、スマートフォンで使いやすい一部の情報のみに特化して対応する

  • Top
  • Ideas
  • たにぐちまこと氏が教える! Web担当者が知っておきたい、企業サイトの賢いスマートフォン対応とは?

You might like these

アクセシビリティからはじめるWebサイトのUI/UXデザイン

EVENT

WebのUI(インターフェース)、そこから生まれる体験のデザインプロセスを考えるワークショップ ”Webアクセシビリティ”と聞くと、JIS規格やWCAGといったガイドラインへの対策を想起しがちで...

2016年03月03日 19:00-21:30

loftwork COOOP(渋谷・道玄坂)

Aug.20.2011 UP

未来の千葉市サイトを考える

EVENT

UXデザイナー坂本貴史さん、Code for Chibaによる 千葉市サイトのペーパープロトを作成する実践ワークショップ 「市役所のWebサイトでは必要な情報が見つけにくい」そういった声をよく聞き...

2015年08月05日 19:30-21:30

loftwork COOOP(渋谷区・道玄坂)

Aug.20.2011 UP

石嶋未来 Bootstrap3からはじめる! レスポンシブWebサイト構築ワークショップ

WORKSHOP

  紹介文 同じコードを書いて同じ場所でつまづいていませんか? Bootstrapで同じコードは二度と「書かない」! Bootstrapというとエンジニアさんや上級者が使うものと...

Aug.20.2011 UP

坂本貴史さんと、Webサイト制作をより楽しくするドキュメンテーションを考えませんか?

IDEAS

Webサイトを立ち上げる、または、リニューアルする際に、何から考えますか?  昨今では、Webサイトは単なる情報掲載以上に、訪れたユーザーにサイトを体験してもらい、その次に情報を得たり、問い合わせ、ソ...

Aug.20.2011 UP

4月12日開催レポート!樽本徹也氏:注目のキーワード、Agile,UCD,UX,リーンスタートをWeb制作から考える企画「IA meets Lean/Agile UX 」

REPORTS

利用品質ラボの樽本徹也氏をお迎えし、IA meets Lean/Agile UX ~リーン/アジャイルな201x年型Web制作スタイルの可能性~を開催しました。...

2012年04月12日 19:00~21:00

loftwork 8F SeminarRoom

Aug.20.2011 UP

IA meets Lean/Agile UX in 京都 ~アジャイル・UX・リーンな時代 Ver.2~

EVENT

2012年05月15日 19:30~21:30

ロフトワーク 烏丸

Aug.20.2011 UP