【8つのUIコンセプト】簡単で使いやすいEコマースウェブサイトを立ち上げ顧客転換につなげる方法とは？！

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、8 Fascinating UI Concepts for eCommerce Websitesを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,078 views

読了時間 : 約3分44秒

最も成功しているEコマースウェブサイトは、いくつか共通の性格を持っています。1つ目に、とても使いやすく、サイト内は見やすい仕様になっています。実際のところ、買い手がほしいものを探すとき時間がかかればかかるほど、途中であなたのサイトを諦めてしまうのです。

2つ目に、彼らはとても小さな詳細まで気を払い、ユーザー体験をより楽しいものにしています。リアルタイムで商品を形成する能力でも、簡単なマイクロインタラクションでさえも、全てが、買い手を魅了し維持できるようにデザインされています。

全ては、ウィンドウショッピングしている人々を本格的な顧客に転換するためなのです。そして最も成功しているショップはこの法則を化学のようにマスターしています。

今日、私たちはこれらのコンセプトを間近で見ていきます。CodePenのアーカイブから特集を探し、少し工夫を加えるだけでどんなEコマースウェブサイトにも追加できる内容を抜き出しました。早速始めましょう！

自分だけのオフィスを立ち上げましょう

人々は視覚的体験を好み、この方法で商品を形成する能力は、かなりの柔軟性を提供します。このデスク構成ツールでは、必要な部分を選び、画面で視覚的に選択肢が表示されます。また自動的にスライドショーを通して異なる設定を紹介しているのも、よい工夫です。ポテンシャルのある顧客は、クリックする前にこの方法で可能性を把握しておくことができるのです。

8 Fascinating UI Concepts for eCommerce Websites

カードを一枚選んでください

カードレイアウトは、それぞれしっかりと定義されたスペースが与えられている、素晴らしい方法であり、近頃とても人気を集めています。この商品カードの例はとてもユニークで、上に移動することで、購入方法のオプションが現れます（サイズ、色そして“カートに加える”ボタン）。ユーザーのオプション選択を可能にし、ページを閉じることなくアイテムを追加できると同時に、複数の商品をリスト化することができる、とても効果的な方法なのです。

8 Fascinating UI Concepts for eCommerce Websites1

なんてVue（眺め）でしょう

使いやすいフォーマットで、関連性のある全てのデータを提供するショッピング体験について、言っておくことはたくさんあります。Vue.jsの力を借りることで、ユーザーはクイックにアイテムをカートに追加することが可能です。しかしここでの真のスターは、右下に表示されているカートコンテンツです。オーダーするアイテムとそれらの価格を一瞬で更新してくれます。さらに、数変更とカート一掃の機能も存在します。お役立ち情報ですね！

8 Fascinating UI Concepts for eCommerce Websites3

ストレスフリーなお会計

お会計のプロセスは、顧客の素早い完了を可能にすると同時に、できるだけ簡単であるべきです。複数に分かれるパネルが一度に2つ、3つの関連情報のみ聞く、というのがここでの概念です。一ページで済むチェックアウトはおしゃれかもしれませんが、時々多すぎる分野で混乱を招くこともあります。しかし、この大概案ではストレスの溜まりにくい体験を提供できるでしょう。

8 Fascinating UI Concepts for eCommerce Websites4

携帯可能にしましょう

より多くの人々が購入に携帯デバイスを使う現在、あなたのショップも、小さな画面でもよりよい体験を提供できることが必要不可欠です。ここでは、上のカード商品にも似ている携帯商品ページを紹介しています。スクロールバーを使い、ユーザーは商品の詳細を眺めることができ、ウィッシュリストとカートに追加ボタン両方が特集されています。あなたが必要なものは全てここに揃っているのです。

8 Fascinating UI Concepts for eCommerce Websites5

素晴らしい空飛ぶ商品

アニメーションは、ユーザーアクションに概要を生み出すことができる効果的な方法です。これはEコマースアプリケーションで特に役に立ちます。例えば、このカートに商品を加えるとき、アイテムのコピーがカートアイコン（右上）に向かって“飛んで”いきます。さらにそのアクションを確約するのが、アイテムを受け取ったと宣言するようにカートが傾く機能です。ユーザーは、起きている進行状況をしっかりと把握することができます。

8 Fascinating UI Concepts for eCommerce Websites6

インスタントカート

ショッピングカートの中身は直観的であるべきです。例えば買い手は、次のステップが何で、どうやって変化を加えるか知る必要があります。このReactからサポート受けるカートページは、クリーンな見た目と素晴らしい特徴を兼ね備えています。簡単に、商品数や全体の更新を一瞬で変更することができるのです。。

8 Fascinating UI Concepts for eCommerce Websites7

サイズを測ってください

洋服のようなアイテムにとって、サイズ表記は思いやりのある表示でしょう。顧客がこの情報に簡単にアクセスできるように工夫する必要があります。ここでは、シンプルなボタンが見られます。しかしクリックするとお役立ちサイズガイドが現れ、アコーディオン型のメニューで詳細が書かれています。より進むと、タブの付いたナビゲーションが見つかるはずです。情報を届けるための、率直でわかりやすい、携帯フレンドリーな方法なのです。

8 Fascinating UI Concepts for eCommerce Websites8