こんにちは。デザイナーのなつです。
今回は日々進化を続けるECサイトデザインに注目してみました。
最近では、洋服・アクセサリー・食品・家具家電・アート作品まで……なんでもオンラインで購入できる時代になってきましたよね！
お店で実物に触れなくても、商品の魅力をしっかりと伝え、安心して購入してもらう。そのためにはどんな見せ方がベストか、多くの企業やブランドが試行錯誤し、より良いECサイトを追求し続けていると思います。
私自身、ECサイト制作を担当させていただく機会が多く、デザインインプットをするなかでとくに気になったECサイトや注目したいUIを4つのテーマごとにご紹介していきたいと思います！
目次
サイトのココに注目！ 他サイトに差をつけるUI参考
ZOZOTOWN – 絞り込み検索のユーザビリティ
圧倒的な取り扱いブランド数・商品カテゴリの豊富さを誇るZOZOTOWN。とくに注目したいのは絞り込み検索の利便性です。
検索条件の項目は、洋服の場合ざっと見ただけでも、性別/サイズ/価格/ブランド/ショップ/商品カテゴリ/袖丈/着丈/柄・デザイン/カラー……。
これだけ多くの項目を同時選択で絞り込むことができ、項目を選択するたびに条件を満たす該当商品が自動でサクサク更新されていきます。この機能があれば、膨大な商品数の中からユーザーが見つけたい商品をピンポイントで割り出せる確率はとても高いのではないでしょうか。
商品カテゴリが多い場合や細かい条件で検索させたいときに参考にしたいサイトですね！
IKEA – コーディネートから商品にダイレクトアクセス
行ったことがある方はわかると思うのですが、IKEAの店舗はお部屋やキッチン、ダイニングなどのインテリアコーディネートのブースが並ぶ、とっても素敵な空間。IKEAに行くと気に入ったお部屋のコーディネート一式欲しくなりますよね！
オンラインショップでもおしゃれなコーディネート写真がたくさん掲載され、気になる商品情報にダイレクトにアクセスができるんです。お部屋パターンをまるっとそのままお気に入り保存することもでき、テイストごとに比較したりできるのもイイ！
お手本のようなコーディネートを見て「こんな部屋にしたい！」と思わせ、商品の購入意欲を高める。それがWebでもできるのは魅力ですよね！
Allbirds – ユーザーの行動心理に配慮した商品一覧の工夫
サステナブル素材を利用したスニーカーを開発・販売する「Allbirds」のオンラインショップです。ここで注目したいのは商品一覧のUIです。
商品にマウスオーバーすると、商品画像/商品名や価格情報/カラー展開（サムネイル）/サイズの選択UIが表示されます。ここで下記の3つのアクションができるのですが、それぞれがユーザーの行動心理を反映しているように感じました。
- 商品画像をクリック → 商品の詳細ページへ遷移（商品情報を詳しく知りたい方はまず商品画像をクリックするだろう）
- カラー展開のサムネイル画像をクリック → ページ遷移はせず商品画像のみ切り替わる（別の色の写真をよく見たいだけなのだろう）
- サイズを選択 → 選択していたカラー/サイズの商品がカートに入る（サイズを選んだということはそのサイズで購入したいのだろう）
いかがですか？ ユーザーがなにを思ってどこをクリックするだろうか、という点に向き合った設計になっていて、少ないアクションで理想的な誘導をしてくれています。
Allbirdsは、大手メーカーがしのぎを削るスニーカー市場で創業からわずか2年間で100万足以上を売り上げ、そのうち8割は自社サイトによるオンライン販売だといいます。その勝因の一つとしてこういったUIの仕掛けがあるのではないでしょうか。
MN/エムエヌ – 実際のメイクパターンから似合う色を探せる
自分だけのカスタムパレットをオーダーメイドできるコスメのオンラインショップです。このサイトの大部分を占めているのは、メイクをした女性のビジュアル写真の一覧です。
たとえばユーザーがアイシャドウを買いたいと思ったとき、見たいのは商品画像やパッケージではなく、その商品を使ってメイクしたときの雰囲気や、どんな肌色にはどんな発色をするか、などです。それがモデルなどの憧れの存在の使用感であれば、より購買意欲が上がるのではないでしょうか。
オンライン販売での「思っていたのと違った」というミスマッチを減らし、自分に似合う色を手に入れてほしい！ というブランド側の想いが見えて、素敵だなあと思いました！
PRODUCTS STORE – MVでも魅せる！ファーストビューの工夫
岐阜県にある、陶器を販売するお店のオンラインショップです。イイなあ……と思ったのがトップページのメインビジュアルです。
ECサイトのメインビジュアルって、ブランドのイメージ画像だったり、ショップのイベントバナーをスライドショーにしていたりと、いろいろなタイプがあると思うのですが、このサイトでは複数の商品画像をビジュアル内でカッコよく見せ、クリックすると商品情報に直接アクセスできるようになっています。あくまでビジュアルの一部として見せながらも購入への導線にもなる、ありそうでない素敵な表現だと思いました！
また、「作り手から探す」という検索方法もとっても素敵なのでぜひ見てみてください！
ブランドの世界観の表現が素晴らしいECサイト参考
土屋鞄製造所 – 上質で繊細な世界観
鞄や財布などのレザー製品を中心に製作する土屋鞄製造所のサイトです。土屋鞄の製品は職人によってひとつひとつ想いを込めて丁寧に作り上げられており、その「丁寧なものづくり」にかける想いや、繊細で上質な世界観が見事に表現されています。
サイト上で購入ができるのですが、あえて商品一覧を前面に押し出しておらず、TOPページでは値段などの記載は一切しておりません。ユーザーにまずはブランドとしての想いを受け取ってもらい、共感してくれた方にぜひ手に取ってもらいたい。そんな気持ちが込められているのではないかなと感じます。
VERMILLION – 雑誌を見ているかのような、おしゃれな世界観
“IDENTIFY JEWELRY”をコンセプトとしたジュエリーブランドのサイトです。朱色を使いながらもシックで落ち着いたトーンの中に、大胆で自由なレイアウトを用いてジュエリーの魅力を表現しています。
まさに「内なる煌めきを身にまとう 自分への存在証明」という世界観がしっかり表現されている素敵なサイトですよね。
ECサイトでありながらも、まるで雑誌を見ているかのような、おしゃれなデザインに惹きつけられます。
Factory 43 – 遊び心のあるアーティスティックな世界観
アメリカのアーティストさんがデザインするTシャツやポスターなどのグラフィックグッズの販売をするサイトです。
アーティストさんのブランドということもあって、遊び心があってワクワクするデザインになっており、素敵な作品が並んだギャラリーにきたような気持ちにさせてくれます。
トップページの動画もとっても可愛いですよね！ 作品とサイト全体の雰囲気もマッチして、独特な世界観に引き込まれます！
SWAG – POPで自由を感じる。親しみやすい世界観
“So What, All Good. Goodbye, BAD BREATH.” がコンセプトのオーラルケアブランド「SWAG（スワッグ）」の公式オンラインショップです。
「⿐を刺激するBAD BREATH対策を⾃分らしいスタイルでREFRESH！」というストレートで親しみやすい表現が、若者の心を掴むこと間違いなしですね！
サイト全体の雰囲気もPOPでチャーミングに見せていることで、嫌味のない自由な雰囲気をうまく表しています。モデルの表情など使用しているビジュアル一枚一枚が徹底的にブランドの世界観に合わせて作られていて、素敵です！
ZARA – 店舗を想像させるような世界観
ZARAの実店舗の雰囲気はモノトーンでまとめられ、モードで洗練された雰囲気を感じますが、オンラインサイトでもその世界観が忠実に再現されています。
常に最先端のトレンドでお客様をお迎えするというテーマに沿って、サイトも常に更新され続けている印象です。
UIUXの視点で見ても少しチャレンジングな要素も取り入れており、あえて馴染みがあまりない、他のアパレルECとは違った表現をして「ZARAらしさ」を確立しているように感じます。
お店に行ったような感覚！？ 新技術を取り入れたECサイト参考
UNITED ARROWS – ライブコマース
2020年3月以降、新型コロナウイルスの感染拡大によって実店舗の営業が制限を受け、オンラインの接客手段として「ライブコマース」を取り入れるECサイトが増えてきました。
今回はとくに配信が盛んで、UIもわかりやすく参考になるUNITED ARROWSのページをご紹介いたします。
ライブコマースの特徴としては、ライブ配信で紹介されている商品の情報にそのまますぐにアクセスし、購入ができるという点です。とくにアパレルECで活用されるケースが多いですね！ 洋服の着用サイズ感やコーディネートの紹介を見ながら購入ができるので、これなら店舗に行かずに、不自由なくお買い物ができてしまいます！
ニトリ – バーチャルショールーム
ニトリ目黒通り店の家具フロアがバーチャルショールームとして再現されています。クリックすることで広い店内の全体を隅々まで見て回ることができるんです！
これぞまさに……家にいながらお店にいる感覚の体験ができます。ショールームで気になったコーディネートは、そのままワンクリックでECサイトにアクセスし、商品の購入が可能です。
店内画像もとても綺麗で、商品の色味や質感までリアルに見ることができますし、店頭にある状態を見ることでサイズ感なども把握しやすく、とってもイイですよね！ みなさんもぜひ体験してみてください！
無印良品 – 収納サイズシミュレーター
お部屋の空きスペースや棚に収まる収納アイテムをサイズ基準で探すことができる、無印良品の収納サイズシミュレーターのページです。幅・高さ・奥行を設定することで、無印良品の収納ボックスや家具を導き出してくれる、画期的なサービスです！
画面上で家具のパーツを足したり引いたり、組み合わせて希望のサイズのスペースに合った商品の購入ができるので、家具や収納の買い物でよく起こる「サイズのミスマッチ」を減らし、より有意義な買い物をすることができそうですよね！ お部屋の模様替えを考えている方は必見です。
気になる海外ECの最先端デザイン
海外で最新のイケてるECってどんな感じだろう？ ということで、今回はAwwwardsなど数々の賞を受賞している「Build in Amsterdam」というクリエイティブエージェンシーに注目してみました！ オランダに拠点を置くBuild in Amsterdamは、Eコマースサイトの制作を得意とし数々のECサイトを世に送り出しています。
なかでもECサイトの常識を覆す、今までに見たことのないUIUXを感じることができる制作実績を2つピックアップしてご紹介したいと思います。
moooi – まるで美術館のような空間表現
個性的で象徴的な照明や家具、アクセサリーを展開する「moooi」のオンラインショップです。
ECサイトというよりは、まるで個展を見にきたような気持ちにさせてくれます。掲載されている商品がすべておしゃれで素晴らしいのはもちろんなのですが、サイト全体に繊細な仕掛けがたくさんあり、心地の良いモーションや、音楽を加えた空間デザインとして見せることで、商品の魅力をより一層伝えてくれます。
UI的な面で見るとメニューや絞り込みのボタンは画面の真ん中という、あまり日本では馴染みのないレイアウトを採用していたり、動きに関しても想像を超えてくるので驚きますが、こういった革新的なサイトがどんどん出てくることでデザインの歴史が変わってくるんだな。。と感じさせられますね。勉強になります。
Vitra – 見たことのない検索UI！ 選んでいて楽しくなるサイト
世界的に有名なスイスの家具メーカーによる、小物中心のギフトオンラインショップです。このサイトはECサイトの常識を覆すUIUXにとにかく驚かされます。
検索のUIは画面の真ん中下にとてもシンプルな形で存在し、条件を選択していくごとに、並んでいる商品がスイスイ動いて並び替えられます。ページ遷移をするような動きはほとんどなく、同じ場にいながら商品が次々と動いて来てくれるような感覚になるのですが、とにかく心地良い！！
スマホで見た際もとても操作しやすいように設計されているサイトだと感じました。
まとめ
いかがでしたか？ 思わず購入したくなる素敵なサイトがたくさんありましたね！
最近では若い方だけでなく、ご年配の方までスマホを持ってSNSやショッピングを楽しむ時代。一気に高まってきていると感じるITリテラシーも、世界で見るとまだまだ日本は低いといわれているみたいです。最後にご紹介した、チャレンジングなUIを取り入れる海外のECサイトを見ると、やはり少し日本との差を感じる部分でもありますね。
日本の良さである「わかりやすさ・使いやすさ・ホスピタリティ」といった部分を大切にしながらも、今までにないような新しいUIを生み出し、それがトレンドになるような、そんなサイトづくりにたくさんチャレンジしていきたいです！
