FREENANCE Ad

Mコマースで売り上げを伸ばそう!アプリデザインの6つのポイント

m-commerce-01
FREENANCE Ad

モバイル端末を使用した電子商取引「Mコマース」。スマートフォンなどのモバイル端末で行うEコマースとして、年々需要が高まっています。

Statistaの予測によると、2019年の米国におけるEコマースの売上高全体のうち、Mコマースが占める割合は44.7%。2018年の39.6%に比べても大幅に増加しており、今後も市場拡大が見込まれています。

m-commerce-01

このような状況下でさまざまな企業がMコマース事業に進出し、競争が激化してきています。そのような中で顧客がいま求めているのは、ただものを買うだけでなく、視覚的にも魅力的な体験ができるMコマースアプリです。

今回は、競争が激化しているMコマース業界で生き残れるアプリを作るために、徹底的なリサーチをおこないました。その結果たどり着いた、Mコマースにおけるアプリデザインのポイントを6つご紹介します。

1. モバイルファーストで考える

Googleの調査によると、モバイル端末からの顧客のうち約50%は、アプリのUXにひとつでも難点があると二度とそのアプリを使わないとされています。つまり、UXの失敗は大きな損失に直結しているということです。

こうした損失を避けるためには、スマートフォン向けのアプリにECサイトを最適化することが欠かせません。ECサイトに掲載している情報をすべてアプリに詰め込むのは避けましょう。

アプリそのものの見やすさも重要です。ざっくりと眺めただけで、アプリの概要がわかるようなレイアウトにしましょう。たとえばJimmy Chooのアプリは、画像の下にカテゴリーのリストを配置しています。シンプルでわかりやすいレイアウトですね。

m-commerce-02

誰にでも理解できるシンプルなレイアウトは、どんな製品が買えるのかという情報を一目で伝えられます。

2. タッチ操作をスムーズにする

タッチする対象(ボタンなど)は小さすぎないように注意しましょう。

タッチする対象は少なくとも7mm以上の大きさにし、要素間は2mm程度離すのがおすすめです。

m-commerce-03

▲出典:Alex Khoroshok

アプリの操作をスムーズにするために、ジェスチャーに気を配ることも大切です。たとえば多くの人は、「ダブルタップ」や「ピンチ」のようなジェスチャーに慣れ親しんでいます。

逆に言うと、商品の画像を詳しく見たいと思ったときに、ダブルタップやピンチで画像が拡大できないと、見込み顧客を逃してしまうかもしれません。

3. マイクロインタラクションを活用する

Mコマースアプリを作るにあたって、商品に対する顧客からの評価はとても重要です。

お気に入りボタンや、星評価ボタンなどを使いやすく魅力的にするために、マイクロインタラクションを取り入れましょう。思わず押したくなるような、使いやすいボタンにすることが大切です。

m-commerce-04

▲出典:Mykolas Puodziunas

直感的な操作を可能にするマイクロインタラクションには、エラーを防ぐほか、顧客のアクションが完了したことを知らせる役割も。Mコマースアプリには欠かせない要素のひとつです。

マイクロインタラクションについて詳しくはこちら▼

4. サジェスト機能を取り入れる

顧客が商品を見つけやすいように、サジェスト機能(予測変換機能)を取り入れましょう。

m-commerce-05

▲Etsyとトイザらスのアプリにおけるサジェスト機能

とくにサジェスト機能の導入をおすすめしたいのが、クレジットカード番号の入力フォームです。

カード番号を打ち込むことにストレスを感じている顧客は多いはず。カードの種類の自動検出を導入すれば、購入プロセスを効率化し、顧客のストレスを軽減させられます。

データ入力は、可能な限り自動化しましょう。

5. セキュリティの堅牢性をアピールする

クレジットカードの情報を入力する際は、誰でもセキュリティが気になりますよね。たとえ強固なセキュリティがアプリに実装されていても、UIがそれを表現できていなければ顧客には伝わりません。

解決方法はとてもシンプルです。鍵の記号を取り入れたり、「安全」や「暗号化」などの単語を使ったりするだけでも、顧客の不安は軽減できます。

また色を活用するのもおすすめです。色が顧客に与える印象を学んでデザインに反映させましょう。

色が与える影響(色彩心理学)について詳しくはこちら▼

6. 決済プロセスはシンプルにする

アプリの決済プロセスが長すぎたり、複雑すぎたりして、購入をやめてしまった経験はありませんか?

一説によると、機会損失の28%は決済の煩雑さによって引き起こされているそうです。

m-commerce-06

上の画像からもわかるように、『Zalora』の決済はたった3ステップ。このように、決済プロセスはできるだけシンプルにしましょう。プログレスバーを使って進行状況を確認できるようにしているところも、お手本にしたいポイントです。

また、購入前にアカウント作成を促すのはやめましょう。アカウント作成を省くだけで、購入までの道のりがぐっとスムーズになり、機会損失も防げます。

おわりに

Mコマース業界はいま急速に成長しています。オンラインストアを作りたいと思っている人や、すでに持っている人は、もはやMコマースの存在を無視できません。

今回お伝えしたヒントを、ぜひMコマースのアプリデザインに活用してみてください。セキュリティとUXを常に意識することをお忘れなく!

(原文:Dana Kachan 翻訳:Nakajima Asuka)

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship