導入事例

導入事例トップ

BtoB向けEC、アプリ、デジタルコンテンツ配信事業者まで、幅広くご利用いただいています。

人気のインタビュー

ケーススタディ

資料ダウンロード 導入相談

UI/UXデザインで考える、これからの自社ECサイトに必要な買い物体験とは?

2023年9月21日

自社ECサイトの新規立ち上げやリニューアルにおいて、UI/UXデザインの重要性が高まっています。消費行動の変化にともない、ECサイトのあり方も変わっていく中で、これからの自社ECサイトに求められる買い物体験とは、どのようなものでしょうか。

UI/UXデザインの専門家集団として、nano・universeなど大手ブランドのECサイトを多数制作してきたハイジ・インターフェイス株式会社の蒲澤宏氏と長尾貴洋氏に、自社ECサイトで優れたUI/UXを実現する方法をうかがいました。

【目次】

  1. ECサイトにおけるUI/UXデザインの定義
  2. ECサイトのUI/UXデザインが重要な理由
  3. 消費行動の変化がUI/UXデザインに与える影響
  4. UXデザインの方法論とUIデザインの具体例
  5. UI/UX視点で考えるECサイトの商品検索
  6. これからのECサイトに求められるUI/UXとは?

ハイジ・インターフェイス株式会社
2010年設立の制作会社。WebサイトやECサイト、アプリといったデジタル領域を中心に、ロボットアプリケーションの受託開発やリアルイベントの空間演出まで、幅広い分野でプロダクトの企画・設計・制作を手がけています。クライアントの課題解決にコミットする伴走型の受託開発を強みとし、ビジュアルの優れたデザインにとどまらず、プロダクトの裏側を支えるシステム開発まで行うUI/UXデザインのプロフェッショナル集団です。EC領域では、多数の既存サイトへのUXレビュー/コンサルティングの他に、nano・universeやPaul Smith、TATRAS CONCEPT STORE、KASHIYAMA the Smart Tailor、ELLE SHOP、MUVEILなどの構築実績があります。

代表取締役 蒲澤宏さん

ハイジ・インターフェイス株式会社 代表取締役CEO。慶応大学環境情報学部卒。
システム開発会社でエンジニア・プロダクトマネージャーとしてWEB系サービスや音楽ソフト、プリンタファームウェアなどの開発に携わったのち、2010年に同社を設立。
現在は会社経営を主業務としながらも、自ら現場に立ちプロデューサー・ディレクターとしてシステムやサービスの構築・改善を行っている。

取締役 長尾貴洋さん

ハイジ・インターフェイス株式会社 取締役COO。HCD-Net認定人間中心設計専門家。
多様な制作の経験による技術力をバックグラウンドに、ディレクター/プロデューサーとして大小問わずさまざまなクライアントの課題解決にコミットしている。加えてCOOとして経営企画と制作チーム全体のマネジメントを行っている。

1.ECサイトにおけるUI/UXデザインの定義

──まずECサイトにおけるUI/UXデザインとはどのようなものか、言葉の定義を教えてください。

長尾さん:UIデザインとUXデザインはセットで語られることが多いですが、それぞれが独立した概念であり、ECサイトやWebサイトの構築においては、UXデザインの工程の後に、別のプロセスとしてUIデザインを行います。UXデザインとUIデザインについて、順を追って説明しますね。

まずは、ECサイトの設計における上流工程であるUXデザインについて説明します。

UXとは、ユーザーエクスペリエンスの略語であり、プロダクトを使うユーザーの体験を意味します。ECサイトのUXデザインとは、「誰に、何を伝えるか」を決めた上で、理想のユーザー体験を実現するために、ECサイトの構造や機能などを設計することだと私たちは考えています。

ECサイトを訪れるお客さまは、どのような人たちで、どのような目的を持っているのか。ECサイトのデータ分析などによってそれらを明確にした上で、企業が伝えたいことや届けたい情報を整理し、プロダクトに落とし込むプロセスがUXデザインです。

ECサイトの新規立ち上げやリニューアルを行う際、初期段階で取り組むものであり、とても重要なプロセスです。UXデザインがプロジェクトの運命を左右するといっても過言ではありません。弊社がECサイトの構築を受託する場合、ECサイトの規模などにもよりますが、1〜2ヶ月ほどかけてUXを設計します。

次に、UIデザインについて説明します。

UIとは、ユーザーインターフェースの略語であり、直訳すると「ユーザーとプロダクトの接点」という意味になります。ECサイトにおけるUIデザインとは、操作や閲覧の体験をデザインすること。例えば、写真や文章、メニューバー、検索窓、絞り込み機能、カートボタン、会員登録フォーム、決済画面、問い合わせフォームなど、買い物の過程でユーザーが接触する要素の閲覧体験や操作体験を設計するのがUIデザインです。

ECサイトのUI/UXデザインとは?

UXデザイン:「誰に、何を伝えるか」を決めた上で、理想のユーザー体験を実現するために、ECサイトの構造や機能などを設計すること
UIデザイン:ECサイトにおけるユーザーの閲覧体験や操作体験を設計すること

2.ECサイトのUI/UXデザインが重要な理由

──ECサイトにおいて、UI/UXデザインが重要なのはなぜでしょうか。

長尾さん:ECサイトは商品検索やカート投入、会員登録、決済など、ユーザーが操作したり入力したりする項目が多く、ECサイトにアクセスしてから購入に至るまで、たくさんのハードルを越えなくてはいけません。買い物の過程でユーザーがつまずくことがないように、ユーザーにとっての「不便」を出来るだけ減らすことが重要です。

ECサイトは操作項目や入力項目が多いという意味で、コーポレートサイトやWebメディアなどと比べても、UI/UXデザインの重要性が高いと考えられます。

──ECサイトのUI/UXを改善すると、売上高やコンバージョン率といった業績指標の向上にもつながるのでしょうか。

長尾さん:もちろんです。定量的な成果の一例を挙げると、大手アパレルブランドのスマートフォンサイトのトップページや商品一覧の見せ方を改善した結果、CVRが改善前の1.4倍に向上しました。他の事例では、UXデザインの視点を取り入れてECサイトを抜本的にリニューアルした結果、自社ECサイトの売上高が数倍〜数十倍に拡大したケースも多数あります。

ECに特有のUI/UXデザイン

ECサイトは商品検索・カート投入・会員登録・決済など購入までに多くのハードルがあるため、買い物の過程でユーザーがつまずかないように、UIを設計することが重要です。

3.消費行動の変化がUI/UXデザインに与える影響

──近年、スマートフォンの普及によって消費者はいつでも、どこでも買い物ができるようになりました。UI/UXデザインの重要性に注目が集まっている背景には、こうした消費行動の変化も影響していると思いますか?

長尾さん:多いに影響していると思います。

スマートフォンやSNSの台頭にともない、消費者の買い物のシナリオが複雑化し、ECサイトにアクセスするユーザーのニーズも多様化しました。その結果、ECサイトを構築する際に、さまざまなニーズを持ったユーザーを想定し、それぞれに不便を感じさせないUIを設計することが必要になりました。

2010年ごろまでは、オンライン広告やSEOなどでPCサイトのアクセスを集めるのが主流でした。こうした時代は、ECサイトを訪れるユーザーの心理状態が今よりも画一的だったため、ECサイトのUIもシンプルなもので問題がありませんでした。

しかし現在は、ECサイトへの流入経路がSNSやライブコマース、実店舗のQRコードなど多様化しています。ECサイトに流入するユーザーの心理状態は「欲しい商品が具体的に決まっている」「SNSで話題の商品を見にきた」「実店舗で見た商品をECで買いたい」などさまざまです。UI/UXデザインの重要性が高まっているだけでなく、UI/UXを設計する難易度も上がっていると思います。

──買い物のシナリオのさまざまなパターンを想定し、ECサイトのUI/UXを緻密に設計する必要があるのですね。

長尾さん:おっしゃる通りです。そして近年は、ECサイトの外側を意識してUXを考えることも重要になっています。

SNSの台頭にともない、消費者が購買の意思決定を行う場所は、ECサイトの外側へと広がっています。SNSに投稿された口コミ、ユーチューバーによる「買ってみた」の動画、アフィリエイターが書いたブログなど、ブランドがコントロールできない第三者による発信の影響が非常に強まったためです。

ECサイトを訪れた時点で、消費者の購入の意思がすでに固まっていることも少なくありません。そのことを踏まえると、購入の意思が固まっている消費者を逃さずに購入まで誘導するUIも重要になっています。

消費行動の変化を踏まえたUI/UX
消費者の買い物のシナリオが複雑化し、ECサイトにアクセスするユーザーのニーズが多様化しているため、さまざまなニーズを持ったユーザーを想定し、それぞれに不便を感じさせないUIを設計することが必要です。

次ページ:UXデザインの方法論とUIデザインの具体例>>

1 2

お気軽にお問合せください

ご要望に合わせたご提案をさせていただきます。
サービスのご説明をご要望の場合もお問い合わせください。
オンラインミーティングにて対応させていただきます。

資料のダウンロード お問い合わせ