【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

オルタナティブECサイトに見るモバイルファーストUI4つのポイント

オルタナティブECサイトに見るモバイルファーストUI4つのポイント

今回は、オルタナティブ® オフシャルオンラインストア のUIを見ていきます。
TOPページ、商品ページをはじめ決済ページまでレスポンシブデザインで作られています。

サイト名 オルタナティブ® オフシャルオンラインストア | Alternative
URL https://www.alternativeapparel.jp/
QRコード alternative
1.押しやすく、遷移ストレスのない カートに入れるボタン/カラーサイズ選択ボタン

 
▼商品ページ
商品ページ

フラットデザインで作られているカラー・サイズ・数量選択とカートに入れるボタン。
すべて、遷移なしで選択、再選択が可能です。
少し詳しくみていきます。

■カラー選択

カラー選択

カラーバリエーションが表示されます。
選択しているカラーにはチェックが表示されるため、
自分がどの色を選択しているか一目でわかります。

 

■サイズ選択

サイズ図選択

サイズ選択では、もともとサイズの用意がない場合はボタンを用意せず、
サイズはあるが在庫が切れているという場合は赤で×印を表示。

 

■数量選択

数量選択

数量ボタンも1タップで数量変更ができるようになっています。
(セレクトボックスなら2度タップが必要です。)

商品ページの全てのボタンがスマホでタップしやすサイズに調整されています。

 

2.拡大可能な商品画像

商品画像が拡大可能2

大きい画像で商品を詳細に確認できることは、
PCでもスマホでもユーザーに安心感を与えます。

商品画像上の虫眼鏡をタップすると商品画像が拡大。
上下左右にスクロールも可能です。

こちらも、画面遷移の必要はありません。
 

3.徹底的に項目を絞り、確認画面もない会員登録フォーム
たった3項目だけの会員登録フォーム
▼会員登録ページ
会員登録画面

会員登録で入力するのは

  • 名前
  • メールアドレス
  • パスワード

のたったの3つのみ!

思い切って項目を減らし、会員登録の心理的障壁を下げています。

確認画面なく登録完了

また、確認画面はありません。
「登録する」ボタンを押すとすぐに登録されます。

会員登録2

住所などは初回購入時またはマイページログイン後に登録します。
 

4.レスポンシブ画像上でテキストサイズを調整する工夫

htmlで作られたテキスト

画像上のテキストはすべてHTMLで実装され、
メディアクエリとpositionで位置とサイズを調整しています。

テキストを画像から分けることで、表示サイズが変わっても、
テキストのサイズが大きすぎる(小さすぎる)ことの内容に配慮されています。

■TOPページ
TOPページ2

ブランド直販サイトだけに、イメージ画像上のテキストまで細かい配慮がされています。

ここまで手をかける必要がないケースも多いとは思われますが、
スマホ・タブレット・PCとデバイスが変わっても、同じようなレイアウトで、同じような使用感をユーザーに与えることは重要なポイントです。

 

終わりに

確認画面のない会員登録フォームなど、UIの原則に従って思い切った工夫が行われているサイトでした。

次回のサイトレビューもお楽しみに!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+