Component Gallery

Ecommerce UI

EC UIまとめ

EC UIは、商品比較、詳細確認、カート、決済までの不安を減らし、購入判断を支えるUI設計です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

EC UIは、商品比較、詳細確認、カート、決済までの不安を減らし、購入判断を支えるUI設計です。

拾いたい検索意図

  • ・ECサイトのUI部品を探したい
  • ・商品一覧と商品詳細を設計したい
  • ・決済画面の失敗を減らしたい

設計ポイント

  • ・価格、在庫、配送条件を近くに置く
  • ・一覧では比較軸を揃える
  • ・決済では金額変化とエラーを明確にする

関連コンポーネント

カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。カルーセル（Carousel）カルーセル（Carousel）は、複数の画像やカードを横スクロールまたは自動再生で切り替えて表示するコンポーネント。ドット・矢印などのナビゲーターを持つ。評価（レーティング）（Rating）評価（レーティング）（Rating）は、星や数値でユーザーの評価を入力・表示するコンポーネント。読み取り専用・インタラクティブのバリアントがある。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。

関連画面パターン

商品一覧画面（Product List Screen）商品一覧画面は、複数の商品を比較しながら絞り込み、目的の商品詳細へ進むための画面です。商品詳細画面（Product Detail Screen）商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。決済画面（Checkout Screen）決済画面は、商品、金額、配送、支払い方法、確認操作を誤解なく完了させるための画面です。検索結果画面（Search Results Screen）検索結果画面は、検索条件に合う情報を一覧し、絞り込みや並び替えで目的の項目へ到達する画面です。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

EC UIでは何から設計しますか？

まず検索意図や利用シーンを決め、card、carousel、ratingなどの主要コンポーネントを画面目的に合わせて選びます。

EC UIで避けるべきことは何ですか？

見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。

EC UIの関連ページはどう辿るべきですか？

まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。