Daily UI #012「E-commerce Shop」ECショップ

製作の流れ

業種を選択

今回は久しぶりのスプレッドシートを使用し業種選択を行いました。
結果は「家具・家電」ということで、家具販売のECサイトのデザインを作成していくことにしました。

家具のECサイトの代表例

ニトリ

日本国内で最も有名な家具・インテリアのブランドの一つであり、オンラインショップも提供しています。ニトリのECサイトでは、家具、寝具、生活雑貨などの幅広いアイテムを購入することができるのが特徴です。

イケア

イケアはスウェーデンの家具メーカーで、日本国内でも多くの評判を集めています。
大型ショッピングモールと併設していて個性的で実用的なインテリアが多い印象です。

無印良品

シンプルで機能的な家具や生活雑貨を提供する日本のブランドであり、オンラインショップも展開しています。
化粧水の量もお得ですね。

上記の代表的な3社からそれぞれのECサイトの特徴を参考に商品一覧と商品詳細の2画面を作成していきます。

ペルソナ設定

家具販売のECサイト画面を利用するユーザーのペルソナをChatGPTから設定します。

彼女が家具のECサイトで求めるもの

• セール中の商品を直感的にわかるようにしてほしい
• 商品レビューで購入するかどうか決めたい

家具ECサイトの調査

家具サイトのベースデザインを参考にするため「ニトリ」と「イケア」の商品一覧ページと詳細ページのデザインを調査しました。

商品一覧

家具サイトの商品一覧では家具の仕様に合わせたカテゴリ分けや商品のカラーなどの絞り込みが特徴になっています。

IKEAのように「人気商品」というようなラベルをつけることによる効果を考察しました。

• 注目度を高める
  • 一覧ページをスクロールして商品を見ているときに、このようなラベルがついている商品は注目されやすく、ユーザーの興味を引くことができる
• 選択を簡素化する
  • 家具サイトでは商品が多くユーザーが選択する際に迷いやすい場合があるので、「人気商品」や「おすすめ」というラベルがついている商品は、ユーザーが選択肢を絞りやすくなり購買行動を促進する
• セールス促進
  • ラベルを付けることで、セールス促進効果が期待でき、ユーザーは割引や特典がついている商品に興味を持ちやすくなり、購買意欲が高まる

購買意欲を高めるための導線として用いている場面が多い印象です。

商品詳細

家具サイトの商品詳細ページはでは以下の構成で成り立っているパターンが多い印象です。

• 商品画像
  • 商品の外観やデザイン、色合いなどを詳細に確認することができる
• 商品説明
  • 素材、サイズ、重量、機能、組み立て方法などの情報が記載され、ユーザーが商品の特徴や利点を把握できる
• 価格情報
  • 通常価格やセール価格、割引率などが明確に表示され、ユーザーが価格を比較しやすくなる
• レビューや評価
  • 他のユーザーの意見や評価を参考にして購買意思決定を行うことができる
• カートに追加
  • このボタンをクリックして商品をカートに追加し、購入手続きを進めることができる

これらの情報を参考にデザインを作成していきます。

UIデザインを作成

商品一覧

ヘッダー・絞り込み

ニトリやIKEAのサイトを参考にヘッダーや商品の絞り込み周りをデザインしました。

ECサイトの特徴として、2カラムのサイドナビで検索条件や絞り込みが行えるの場面が多いかと思いますが、今回は1カラムで実装しスクロール途中で固定に変わる仕様を想定しました。

サイドカラムを用いることでスマホデザインの際に要素を格納したり、デザインを再度考え直す手間が発生することがあるので、絞り込みの条件数にもよりますが、ワンカラムの方が効率的だと考えました。

商品一覧

IKEAのラベルを参考にアイコンとテキストを組み合わせた商品ラベルを左上に配置しました。

ペルソナの「セール中の商品を直感的にわかるようにしてほしい」という要望の元、ラベルに合わせた文字色を使用しアピールポイントとして活用しています。

家具の仕様に関するタグに関して、ニトリではかなり協調的なアイコンを使用していましたが、サイトのデザインコンセプトに合わせて緑枠と文字でシンプルな形にしています。

商品詳細

商品画像

家具サイトでは1つの商品に対して10枚以上の商品画像を使うパターンが多いので、そちらの枚数をシンプルかつわかりやすく表現するためカルーセルによる切り替えで実装しました。

スマホの際には、全画像枚数を表示して横スライドで切り替えるという方法を用いています。

商品詳細

• 商品名
• 仕様のタグ
• カラー選択
• サイズ
• レビュー
• 購入方法
• カート

上記の内容でニトリとIKEAを参考にデザインを作成しました。

購入方法や返品などの項目に関してもカートに入れるまでの導線に入れておくことで購入後のトラブルを防止する役目があると考えました。

まとめ

#012「E-commerce Shop」UIデザインのまとめです。

• ECサイトにおけるレビュー評価は商品やお店としての信頼度に直結するので、ECサイト制作時には機能として搭載した方が良い
• 購入促進のためのラベルは必須

Daily UI #012 「E-commerce Shop」ECショップ プロトタイプはこちら ↓ ↓

最後までご覧いただきありがとうございました！