◎ECサイト構築におけるUI/UXとは

UI/UXデザインとは、UIとUXを高めたECサイトのデザインを表します。UI（ユーザーインターフェース）とは、ECサイトの使い心地のことです。ECサイトのレイアウト・画像・テキスト・フォント・メニューボタンの見た目や使い勝手のよさなど、ユーザーの目に触れるすべてのデザインがUIに含まれます。

一方UX（ユーザーエクスペリエンス）は、ECサイトを通してユーザーが体験するものすべてを指します。UXには、デザインがおしゃれ・ECサイトのカテゴリがわかりやすく、トップページから商品の購入ページまで回遊しやすい・商品の選択から購入までスムーズに行える・問い合わせフォームが見つけやすいといったユーザー体験などが含まれます。そのほかにも、ECサイトで注文した商品がすぐに届いた、問い合わせへの対応が丁寧だった、という体験もUXです。ECサイトのユーザー体験を表すUXを向上させるためには、ECサイト上のUIが質のよいものである必要があります。UIとUXは密接に関連しており、どちらかが欠けるとECサイト全体の顧客満足度に影響を与えます。

◎UI/UXを改善する重要性

近年、ECサイト市場の競争が激化しています。商品やサービスの内容だけでは、差別化を図ることが非常に難しく、ユーザーがいかに快適にECサイトを利用できるかがサイトの売上を左右するといわれています。実店舗における接客において、お客さまへの配慮や気配りが重要であるのと同様、ECサイトにおいてもUIやUXを意識し、ユーザーにとって使いやすくわかりやすいサイト設計とすることが大切です。ユーザーが自社商品に興味を持ってECサイトを訪問しても、購入したい商品が見つけにくかったり、カートに入れたあとの決済プロセスが複雑だとECサイトの離脱や競合他社への流出につながりかねません。

逆に、UI/UXが意識されユーザーが使いやすいと感じるECサイトは、ユーザーに安心感を与え顧客満足度の向上や売上アップが期待できます。SEO（検索エンジン最適化）では、サイトが上位表示されるための基準がいくつか設けられていますが、サイトの使い勝手も重要視されている条件のひとつです。SEO対策の観点からも、ECサイトにおけるUI/UXの改善は重要といえます。

EC-CUBEは、国産のオープンソースです。日本国内向けにECサイトを運営する上で必要な機能が揃っており、カスタマイズ性に優れているのが大きな特徴です。ターゲットユーザーの属性に合わせ、ECサイト全体のUIを自由にデザイン・改善できるため、満足度の高いECサイト構築を行うことができます。

◎ECサイトのUIを改善する際のポイント

ECサイトのUIを改善する際は、いくつか意識すべきポイントがあります。EC-CUBEでは、ECサイトのあらゆる機能をカスタマイズできるため、ターゲットユーザーの使いやすさを重視したUIの改善を行うことができます。

ECサイトのUIを改善する際、まずはECサイトのコンセプトやターゲットを明確にする必要があります。コンセプトやターゲットが定まっていないとECサイトの方向性がずれてしまい、最終的にユーザーにとって使いにくいサイトとなってしまうため、注意が必要です。ECサイトのターゲットユーザーを決定する際は、自社商品と親和性の高いターゲットを狙うと優良顧客の囲い込みがしやすくなります。

たとえば、単に「30代女性」といったターゲット設定よりも「30代、都市部で正社員として働く2児の母親」など、属性を細かく設定することでターゲットにささりやすくなるほか、ECサイトやUIのデザインが設計しやすくなります。高齢のユーザーをターゲットとする場合は、デザインよりもインターネットに不慣れなユーザーでも使いやすいUIを重視することが大切です。EC-CUBEでは、ECサイト上のメニュー・カート・会員画面など、あらゆる箇所のレイアウトやデザインを柔軟に変更できます。ECサイトの導線やカテゴリーを工夫することで、ターゲットユーザーが直感的に使いやすいECサイトを実現します。

ECサイトでUIを改善する際は、サイトデザインやテキストの内容と合わせて商品の写真が魅力的であることも重要です。商品の写真を準備する際は、商品の色や形が実物と齟齬のないよう意識することで、ユーザーは安心して商品を選べるほか、商品購入後の顧客満足度にもつながります。商品の魅力を伝えることに加えて、購入後の生活での利用シーンを想像できる写真も意識して用意するとよいでしょう。近年は、写真だけでなく、動画による商品やサービスの紹介も一般的となっています。販売する商品に合わせて動画の掲載も検討しましょう。

レスポンシブデザインとは、パソコンやスマートフォンなど利用する端末によってWebサイトの表示を最適化することを指します。近年、スマートフォンでECサイトを閲覧するユーザーが増加しています。レスポンシブデザインに対応しておらず、スマートフォンで閲覧しにくいECサイトは離脱されやすく購入までつながりにくいため、UIを改善する際はレスポンシブデザインも意識しておく必要があります。レスポンシブデザインへの対応は、SEO対策としても有効です。EC-CUBEは、レスポンシブデザインに対応したデザインテンプレートやプラグインが豊富に用意されています。スマートフォン用とPC用にそれぞれレイアウトをオリジナルで作成することも可能です。

UIの改善には、徹底したセキュリティ対策が必要不可欠です。取り扱う商品やECサイトのコンセプトがいくら魅力的であっても、セキュリティに不安のあるサイトは売上につながりにくくなります。ECサイトのデザインや決済画面でユーザーが不安を感じることのないよう、十分配慮してUIを設計することが大切です。セキュリティ対策の内容は、購入単価やユーザーの年齢層などを加味して決定するとよいでしょう。

EC-CUBEでは、ECサイト構築前・構築後のセキュリティ対策が充実しています。セキュリティを強化したプラグインを提供しているため、セキュリティ対策をしながらオリジナルのECサイトが構築できます。運用サポートは、EC-CUBEと提携している専門会社へ依頼することも可能です。セキュリティなどに関する重要情報を先行して受け取り、直接講習も受講しているため、万が一のシステムトラブルの際にも安心してサポートを受けることができます。また、海外産のEC構築サイトと異なり、EC-CUBEの公式情報はすべて日本語です。利用者同士の運用コミュニティも充実しており、開発・運用に関わるセミナーや開発者向けのドキュメント、よくある質問を検索できるポータルも揃っています。

UIの優れたECサイトは、ユーザーが欲しいと感じた情報がすぐに手に入るよう設計されています。商品ページの閲覧から購入まで直感的に操作できるよう意識してECサイトを構築したら、定期的にユーザーの反応を確認し、必要に応じて改善を行うことが大切です。ヒートマップなどUI改善ツールを導入し、ユーザーの反応を可視化しましょう。ヒートマップでは主に、ユーザーがECサイト上のどこに興味を持って閲覧しているのか、どこで興味を失いサイトを離脱しているのか、どこをクリックしているかなどが確認できるため、導入して分析に役立てることで効果的なUIの改善を行うことができます。

EC-CUBEのデータはすべて自社の資産となるため、購買データや顧客情報をマーケティングにいかすことも可能です。アンケート機能を用いて商品やサービスの評価機能を充実させることで、ユーザーの反応だけでなく、直接的な評価を得ることにも役立ちます。

◎UIをデザインする際に意識すべきポイント

UIを意識したECサイトは、ユーザーが必要な情報にアクセスできるよう設計することが非常に大切です。「この箇所はクリックできるのか」「問い合わせページはどこにあるのか」「ECサイト上のこの記載はどう意味なのか」など、ユーザーが深く考えたり迷う必要のないように設計する必要があります。UIのデザインを設計する際は、近接・整列・コントラスト・反復を意識することがポイントです。

近接とは、複数の情報のなかから関連のあるものを近づけて配置することを指します。たとえば、飲食料品を扱うECサイトであれば、「食料品」「飲料水」のように属性ごとにカテゴリーを分けて配置します。近い属性のものはまとめ、異なるものは離して配置することで、ECサイト上でユーザーは必要な情報を見つけやすくなります。整列とは、情報を整えて整列することです。ECサイト上のテキストの文字揃えの方法や、画像の余白を均等にすることが整列にあたります。たとえば、ECサイト上のテキストで左揃えと中央揃えが混じっているよりも、左揃えで統一したほうがECサイト全体が整って見えます。ECサイトの目的にもよりますが、整列を意識したECサイトは、テキストを左揃えで統一するのがおすすめです。人の視線は左から右に動くという特性があるため、ユーザーに見やすいECサイトであるという印象を持たせることができます。

コントラストは、ECサイトのある箇所にほかの箇所との強弱をつけ、目立たせることを指します。目立たせたいテキストの文字サイズを変更する・太字にする・配色を変更することでコントラストをつけることができます。コントラストをつけることで、ユーザーにとってECサイト上でどの情報が重要なのかがわかりやすいほか、探している情報を見つけやすいという効果があります。コントラストのないECサイトは、ユーザーがストレスを感じやすく、ECサイトの離脱につながりやすいため注意が必要です。反復とは、ECサイトで使用するフォント・配色・余白・レイアウトなどのデザイン的な構成要素を反復して使用することです。ECサイト全体の配色や背景色の彩度や明度・フォントを合わせることで一貫性を出すことができ、UIを改善することができます。

◎ECサイト構築でのUIの実現にはEC-CUBEが最適

国産オープンソースであるEC-CUBEは、国内トップシェアを誇るECサイト構築プラットフォームです。カスタマイズ性に優れていることが最大の特徴であり、ほかのECサイト構築プラットフォームと比較した強みでもあります。ECサイト上の商品一覧画面・カート・会員画面や管理画面など、ECサイトのあらゆる機能をカスタマイズで変更できます。ターゲット層に合わせた高度なUIを実現できるほか、レスポンシブデザインにも対応できるため、ECサイトにおける顧客満足度を高め、売上アップにつなげることが可能です。

◎まとめ