『このサイトで買いたい』と思ってもらえるECサイト
11個のコンポーネント
横スワイプ/スライドで画像やカードを送るUI
画像が多いサービスで必須。スムーズなカルーセルは洗練の象徴。
クリックで拡大プレビュー・ギャラリー表示に対応した画像
画像がただ貼ってあるだけ vs プレビューできる、この差は大きい。
+−ボタン付きの数値入力フィールド
ECサイトの数量変更の定番。ブラウザデフォルトの矢印より圧倒的にUXが良い。
手順の進捗を表示するUI(ステップ1 → 2 → 3)
登録フローや購入フローが一気にプロっぽくなる。ユーザーの離脱率も下がる。
★★★★★ で評価を表示
レビュー系UIには必須。星があると口コミの信頼感が段違い。
★をクリック/タップして評価を入力するUI
レビュー機能の定番入力。インタラクティブな星は触ってて楽しい。
NEW、3件、Pro などの小さいラベル表示
バッジで情報の鮮度や状態を示せると『使いやすいアプリだな』になる。
¥980 /月 のような価格とサイクルの表示
価格の見せ方で売上が変わる。フォントサイズの差が購入率に直結する。
情報をまとめて表示する箱。画像・タイトル・説明・ボタン等を含む
カードは最頻出パーツ。デザインの質 = アプリ全体の質に直結する。
画面下からスライドして出るパネル(モバイル向け)
iOSの共有メニューと同じパターン。モバイルUXの定番。
ホーム > カテゴリ > 記事 のような現在地表示
これがあると『ちゃんとしたサイト構造だな』と思われる。無いと迷子になる。