アットコスメが運営するショッピングサイトで買い物をしてみました。モバイルで買い物する際のUIを重視した設計が特徴的なECサイトです。

トグルメニュー内に所持ポイントを表示したり、重要コンテンツメニューを右下FIXで配置したり、今まで見たことのないようなインターフェイスが特徴的でした。

サイト名	コスメドットコム
URL	http://www.cosme.com/
QRコード

検索機能では、キーワードでの検索に加えカテゴリ内キーワード検索を行えます。こちらは同じ画面内で掛けあわせて検索することができるので、いちいち遷移する手間を省けて便利です。

アットコスメのECサイトではお気に入りは「スクラップブック」と呼ばれています。

スクラップブックに追加するボタンの横に登録者数が表示されているので、商品が何人にお気に入り登録されているのか、人気の目安を測ることもできます。

さらに登録したスクラップブック一覧からチェックした商品をまとめカートに入れることもでき便利です。Amazonの欲しいものリストのような使い方ですね。

ヘッダーのトグルメニュー内にポイント表示がされています。めずらしい形ですが、スマホの狭い画面では表示領域を有効に活用するヒントになりそうです。

右下にコンテンツへの動線を確保するナビゲーションボタンが表示されています。FIXされているので、下にスクロールしてもついてくる仕様となっています。

メルカリなどのアプリでも重要なメニューや購入ボタンは下部にFIXさせたりしていますね。

フリマアプリは簡単 メルカリ オークションより安全で無料で出品。ファッション、ブランド、服のショッピングや通販に最適。フリマでお小遣い稼ぎしたい人のためのアプリ
カテゴリ: カタログ
価格: 無料

モバイルファーストでのUIを考えた場合、タッチしやすいボタンの位置は右下に配置したほうがいいかもしれないという議論もあります。まだまだ研究をしなければいけませんが、重要なポイントです。

参考：レスポンシブWebデザインで成功するUI／UXのポイント5つ

決済方法選択は遷移することなく、クレジットカード情報を入力することができます。出来る限り簡単に決済まで完了できるような工夫になっています。

モバイルファーストなナビゲーションやトグルメニューにポイントを入れるなど、モバイル視点で考えられたUIが使いやすいポイントでした。

次回のレビューもお楽しみに！