今回は、オルタナティブ® オフシャルオンラインストア のUIを見ていきます。
TOPページ、商品ページをはじめ決済ページまでレスポンシブデザインで作られています。
| サイト名 | オルタナティブ® オフシャルオンラインストア | Alternative |
| URL | https://www.alternativeapparel.jp/ |
| QRコード |  |
▼商品ページ
フラットデザインで作られているカラー・サイズ・数量選択とカートに入れるボタン。
すべて、遷移なしで選択、再選択が可能です。
少し詳しくみていきます。
カラーバリエーションが表示されます。
選択しているカラーにはチェックが表示されるため、
自分がどの色を選択しているか一目でわかります。
サイズ選択では、もともとサイズの用意がない場合はボタンを用意せず、
サイズはあるが在庫が切れているという場合は赤で×印を表示。
数量ボタンも1タップで数量変更ができるようになっています。
（セレクトボックスなら2度タップが必要です。）
商品ページの全てのボタンがスマホでタップしやすサイズに調整されています。
大きい画像で商品を詳細に確認できることは、
PCでもスマホでもユーザーに安心感を与えます。
商品画像上の虫眼鏡をタップすると商品画像が拡大。
上下左右にスクロールも可能です。
こちらも、画面遷移の必要はありません。
会員登録で入力するのは
- 名前
- メールアドレス
- パスワード
のたったの3つのみ！
思い切って項目を減らし、会員登録の心理的障壁を下げています。
また、確認画面はありません。
「登録する」ボタンを押すとすぐに登録されます。
住所などは初回購入時またはマイページログイン後に登録します。
画像上のテキストはすべてHTMLで実装され、
メディアクエリとpositionで位置とサイズを調整しています。
テキストを画像から分けることで、表示サイズが変わっても、
テキストのサイズが大きすぎる（小さすぎる）ことの内容に配慮されています。
■TOPページ
ブランド直販サイトだけに、イメージ画像上のテキストまで細かい配慮がされています。
ここまで手をかける必要がないケースも多いとは思われますが、
スマホ・タブレット・PCとデバイスが変わっても、同じようなレイアウトで、同じような使用感をユーザーに与えることは重要なポイントです。
確認画面のない会員登録フォームなど、UIの原則に従って思い切った工夫が行われているサイトでした。
次回のサイトレビューもお楽しみに！
