1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="WSuqQ1XMJF"><a href="https://uxdaystokyo.com/articles/ec-information-design/">ECサイトは、UIよりまずはカテゴリの情報設計とアルゴリズムを設計せよ</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/ec-information-design/embed/#?secret=WSuqQ1XMJF" width="600" height="338" title="“ECサイトは、UIよりまずはカテゴリの情報設計とアルゴリズムを設計せよ” — UX TIMES" data-secret="WSuqQ1XMJF" 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/2021/02/ec_img02.png1200628格言・記事作成:大本あかね / イラスト:nayumi. ECサイトだからと、作ろうとしているサイトの規模が商店街のお店のサイズくらいなのにも関わらず、アマゾンなどの巨大ECサイトの見た目だけを真似てサイトを構築しているケースがありますが、それは良い手法ではありません。 仮に真似るにしても、何をどのように真似るか、なぜ真似る必要があるのかを検討する必要があります。 商品点数によって階層も操作も異なる 商店街にある鮮魚店のサイトを考えてみましょう。リアル店舗で言えば、50㎡（平米）くらいの店舗であれば、毎日の水揚げで魚の種類が異なったとしても、せいぜい30種類の商品くらいでしょう。 一方、アマゾンのようなECサイトは、販売できる商品であればありとあらゆるものを扱っています。当然カテゴリの種類も増えます。ユーザーがほしいと思っている商品にたどり着ける導線もかわります。 商品によって見せ方が変わるので、レイアウトがまるっきり変わります。ただ、１つ言えることは、どちらも情報設計が肝になるということです。 見た目だけを真似るのではなくユーザーがたどり着きやすい設計が大切 どこの案件でも同じというわけではありませんが、見た目のデザインをいきなり実装してほしいと言われる案件が日本ではまだまだ多く存在します。 デジタルデザインツールでの納品物は、モックアップとも言われ、現物のサンプルとして考えてしまう方が多くいます。もちろん、ユーザビリティテストを実施する上で、リアルと遜色ないデザインを実装するのは当然ですが、デザイン実装自体はHTMLなどのコーディングで実装されるため、すべてのページで、1pxのズレもなくすような労力は不毛になります。 このような意味のない間違ったマインドが存在すると、ユーザー導線の設計がなおざりになってしまいがちです。まずは、ユーザーが操作しやすく、行動が楽になる設計を実装することに注力しましょう。 まつげ美容液は美容液かメイクアップか商品か？ 化粧品関係のECサイトを構築しようとしています。しかし、見た目だけで情報設計をしていないと「まつげ美容液」が、基礎化粧品の美容液にあるのか？はたまたメイクアップなのか？それとも単独にまつげ美容液のカテゴリを作るのか、後々になってどこの入れるか迷ってしまうことがあります。 アパレルでも同じで、ジーンズは、単独のカテゴリにするのか？それともズボンの中に入れてしまうのかは、そのお店がジーンズの扱いがどのくらいあるかで決定してきます。 スーパーでコーヒー豆が、モカとオジリナルブレンドしかないのに対して、コーヒー専門店では、コーヒー豆の種類が何種類もあるように、そして、味や産地、アイスコーヒー・カフェオーレなどの用途によって選び方も変わってくるはずです。ECサイトは、ユーザー視点で商品にたどり着ける設計をまず行いましょう。 関連格言 情報設計こそが、ウェブデザインである