1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="XzfdpdjQOX"><a href="https://uxdaystokyo.com/articles/ec-immediate-repair/">アマゾンのAIデザインの進化</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/ec-immediate-repair/embed/#?secret=XzfdpdjQOX" width="600" height="338" title="“アマゾンのAIデザインの進化” — UX TIMES" data-secret="XzfdpdjQOX" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2020/06/amazon-choses-image.png25601243コロナ禍でオンラインでの商売へ転機する事業も多くなってきました。オンラインでの商品販売というと「ECサイト」になります。世界最大手のアマゾンは日々進化していますが、日本のECサイトでは良くない例もあります。 アマゾンはAI（データ）を駆使してUI改善している まだ日本では正式なUIではありませんが、アマゾンは5月25日に好みでない商品として「いいね！」や、その反対マークをクリックすると他の商品が出てくるというデザインに進化しました。動画で確認するとわかりやすいので見てください。 自分の好きな商品を選択すると、より好みに近い商品を出す ＞＞好みの商品に近づけるためのアマゾンデザイン まだ、試験的なデザインかもしれませんが、ページを渡ることなく商品を選択できるのはユーザーのストレスが軽減されています。ページをめくる動作は、ページの全ての情報が掲載されるので、本当に僅かな秒数でも待つ必要があります。あまり好きじゃない商品や好きな商品を選択するだけで違う場所に好みの商品が掲示されるのは、商品だけの差し替えでスピードも早くユーザーのストレスは軽減されます。 ECサイトで使えるUX設計 あるECサイトのスクリーンショットです。この画像は、同じ商品の色違いが並んでいます。5回スクロールして、3つの商品の色違いがずっと並んでいます。商品点数にして24点掲載されていますが、商品の種類は3つだけです。あとは色違いです。 同じ商品のカラー違いがずっと続く この形式の表示が、なんと！445点並びます。ページネーションは、18ページ以上も続きます。仮に、ユーザーの好きなクッションのデザインが最後にあったとしても、その商品にたどり着く人は、ほぼいないと言えます。なぜなら、必ずしも好きなデザインが最後にあると、ユーザーが理解していないからです。そのため、当然離脱します。 カテゴリのクッション選択から、このデザイン 画像のデザインは、検索結果のデザインと考えられがちですが、「カテゴリ：インテリア＞クッション」を選択で、このレイアウトが表示されます。つまり、どのユーザーでもこのレイアウトを目にすることになります。 改善は簡単！ 改善方法として、同じ商品の色違いを詳細ページ側で表示させれば、たくさんの商品を表示させることができます。 他にも問題点はある 比較検討ページは比較する内容を表示させよう 商品一覧は比較検討するページでもあるため、出荷予定などの情報は、ここに表示させる必要はありません。拡大の虫眼鏡も、詳細ページに行ってから表示されても良い可能性が高いです。なぜ、このデザインになったのかは不明ですが、ユーザー視点で、どのページで何をしているのかを考えてUI設計をしていきましょう。 無料で入れられるカートデザイン BASE (ベイス)のグローバルナビゲーションは英語がデフォルト ネットショップを無料で簡単に作成できるBASE (ベイス) は、ECサイトを開設したい人にとってハードルが低く、拡がりを見せています。 しかし、グローバルナビゲーションはデフォルトで「英語表示」となり、日本語にするにはそれなりの知識がないとできないようになっています。無料で敷居が低いため導入する人が多いのですが、その敷居が低い分、リテラシーが低い方もターゲットになっているので、日本語にしたくてもできないという状態に陥っています。 先日、私の知人数名もECサイトを作っていました。「なぜ、日本語にしなかったの？」と質問したら、自分では変えられないと返事をもらいました。 グローバルナビゲーションが日本語の方が良いのは、以前もご案内していますので、下記の記事や動画を参考にしていただきたいです。日本語サイトでの英語表示のグローバルナビゲーションは、ユーザー視点とは言い難いです。ちょっとしたことではありますが、ユーザーに考えさせるUIや面倒な操作をさせるUIから、脱却していきましょう。 ＞記事＞動画 ECサイトの売上はUI次第 ECサイトはUI設計で売上が極端に変わってきます。今回は本当に基本的なことなのでぜひ改善していきましょう。