4.制作時の注意点③UI

今回はUIに焦点を当てて制作時の注意点について解説させていただきます。

Shopifyデザイン制作に必要なUI

UIは範囲が広いため、Shopifyデザイン制作に必要な内容や言葉を理解しておきましょう。

UIデザインの意味と目的

UIデザインとは、ユーザーにとってシステムやサービスを利用しやすくなるようにわかりやすく使いやすい見た目作りを行うことです。

そしてUIデザインの目的は 、ユーザーが迷ったり考えたりすることなく、快適に操作できるようにすること です。

UIデザインではユーザーがサイト内で目にするボタンやアイコン、フォントなどの見た目を整え、誰にでも理解でき直感的に操作ができる状態を目指していきます。

UIとUXの違い

UIはユーザーインターフェースと呼ばれ、ユーザーとデバイスやシステム、サービスの接点のことを指します。

マウス、サイト内ではボタンやアイコン、テキストリンクなどが該当します。

一方UXはユーザーエクスペリエンスと呼ばれ、ユーザーがサービスや商品を通して得られるすべての体験のことを指します。

ECサイトで例えると、ユーザーがサービスを知ってから購入し、使って問い合わせをし、最終的に忘れてしまうまでの体験がUXに該当します。

共通概念

誰もが理解できるような、または知っているような文化的な共通認識もしくはルールのことを共通概念と呼びます。

例えば、下線付きの青文字はテキストリンク、虫眼鏡のアイコンは検索することができるアイコンだということは、普段からデバイスを利用している人だとほぼ誰もが理解できます。

悩まなくても考えなくても、押すとその次に何が起こるのか予測をすることが可能です。

このような考えなくても操作がわかる見た目にすると、ユーザーの認知にかかる負荷が少なくて済みます。

デザインの制作時には共通概念を取り入れて、ユーザーが考えなくても操作が理解できるような認知にかかる負荷の少ない見た目に仕上げていく必要があります。

特にサイト内で使用するアイコンは、共通概念に基づいて見た目を選定する必要があります。

ただし、国や地域によっては同じアイコンでも解釈のされ方が異なる場合があるため、海外向けのECサイトに携わる場合にはその地域で理解できるアイコンを使用する必要があるため注意が必要です。

インタラクションコスト

インタラクションコストとは、サイトを訪れたユーザーが考えたり判断したりする時に頭にかかる負担と、操作をする時に身体にかかる負荷の合計のことです。

ユーザーにとってわかりにくく使いにくいサイトはインタラクションコストが高いと言うことができ、反対にわかりやすく使いやすいサイトはインタラクションコストが低いと言うことができます。

インタラクションコストが高いサイトではお問い合わせや購入といったコンバージョンに繋がらない可能性が高くなり、また一度購入されてもリピートされない可能性も高くなります。

Shopifyに限ったことではありませんが、ユーザーが悩まず理解できかつ操作をすることができるようなインタラクションコストが低いサイトのデザインを作る必要があります。

一貫性

一貫性とは、サイトやサービスの中で統一された規則性のことです。

サイトの中で一貫性があることでユーザーは操作や意味を予想することができ、認知にかかる負荷と誤動作を減らすことができます。

デザインでは各ページで使用するボタンやテキストリンクの形と色は統一させる、これから制作するサイト以外に他のサイトがすでにある場合は配色やパーツの形を統一させるといったことが挙げられます。

（改めて）コンバージョン率が上がりやすい状態、下がりやすい状態

改めて、コンバージョン率が上がりやすい状態と下がりやすい状態を把握しておきましょう。

上がりやすい状態

下がりやすい状態

ちなみにUIの観点から操作ができるものは、

です。

ノーコードやローコードの案件の場合はデザインの自由度が低くなるため、案件によっては全てを実現することが難しくなってしまいます。
とはいえ少しでも売り上げに繋げられるように、デザイナーはこれらのポイントを抑えながら見た目を作る必要があります。

UIの観点から配慮するべき内容

直帰率を上げる要因、ユーザーを離脱させる要因を作らない

直帰率が高い状態というのは、ユーザーがサイトに訪れた後他のページに移動をせずにそのサイトから離れてしまっている状態です。

どのような状態で直帰率が高くなるのかについては、デザイナーは知っておく必要があります。

なぜかというと、デザイナーが高くなる要因を知らないと気がつかないうちに直帰率をあげてしまう可能性があるためです。

直帰率は、

といった状態で高くなる傾向にあります。

一見デザイナーには関係のなさそうな「ページの表示速度」については使用するフォントの種類と関係があり、使用するフォントの種類を増やすとページの表示速度は遅くなる傾向にあります。

※ページのコンテンツの表示速度については、「Page Speed Insight」(https://pagespeed.web.dev/)で調べることができるようになっています。

またローディングやパララックスは直帰率が高くなる原因になりますので、離脱しやすくなるような要因を取り入れないように気をつける必要があります。

デザインが起因で直帰率が高くなる、つまりサイトを回遊しないユーザーが多いという状態は避けなければならないため、ECサイトの制作では直帰率を上げないように気をつけるようにしましょう。

インタラクションコストを下げる

インタラクションコストを下げることで、ユーザーの頭と身体にかかる負荷を少なくすることが可能となります。

下げるために、例えば認知にかかる負荷を抑えるために予想がつく見た目にしたり、誰もが知っていて内容がわかるアイコンを利用したりして、なるべく悩まずに直感的に判断ができるような見た目にする必要があります。

インタラクションコストに配慮して見た目を作らないと、サイトを訪れてきたユーザーがストレスを感じてしまって再度そのサイトでお買い物をしてくれなくなる可能性も考えられる上、購入をせずに離脱されることもあるかもしれません。

ちなみにSP版で縦の長さが長すぎにならないように工夫をしたり、横スワイプを減らしたりするのは身体的な負担を抑えるための工夫です。

視線の動きに対して自然な配置にする

視線の動きに対して不自然な配置にするとインタラクションコストが上がってしまうため、視線の流れが自然になるようにコンテンツを配置する必要があります。

コンテンツはZの法則、Fの法則といった視線の流れを意識して配置していきましょう。

ただし、これは日本人をターゲットとしたサイトでは有効ですが、他の国の人をターゲットとする場合はその国の人々がどのような向きで普段コンテンツを見ているかということを配慮した上で配置する必要があります。

右から左にテキストを読む国もあり、そのような国では日本人と視線の動き方が異なる可能性が考えられます。

越境ECサイトのデザイン制作に携わる場合は、ターゲットとする国の人がどのようにものを見ているのか視線の動きを確認するようにしましょう。

見にくい、わかりにくい、使いにくい見た目にすることを避ける

• 文字が読みにくい
• 操作がわかりにくい
• 使いにくい

ECサイトに限ったことではありませんが、これらはサイト制作において避ける必要があります。

スタイリッシュでかっこ良さを追求するサイトの場合、フォントを小さめにしてほしいと言われることがありますが、ユーザー視点で小さいフォントは読みやすいとは言えません。

また、大きなアニメーションやパララックスのような動きをリクエストされるケースもありますが、操作がわかりにくく直帰率を上げてしまう原因にもなります。

見た目の良さを追求してデザインカンプを作っていくと、ECサイトの本来の目的である「売り上げの向上」や「利益の拡大」から程遠い見た目となってしまう可能性もあります。

デザインする際は、ユーザー視点で見やすいか、わかりやすいか、使いやすいかを考えて見た目を作り込んでいきましょう。

過去の経験から推測できる見た目にする

「考える」という頭にかかる負荷を下げるために、過去の経験から推測できるような見た目にする必要があります。

例えばアイコンの見た目において押すとその後に何が起こるか想像できる物を選択する、慣れ親しんだ形を採用するなどが挙げられます。

これはヤコブの法則と呼ばれ、カートを見るアイコンはカートもしくは鞄、お気に入りはハートか星、ログインは人といったように、押すと何が起こるか想像がつきやすい見た目の物をデザイン制作では取り入れます。

ちなみに音楽再生機器の場合、「▶️」を押すと再生されると想像が付きますし、「◾️」を押すと一時停止すると想像がつくと思います。

ユーザーが考えなくても使えるように、慣れ親しんだ形のアイコンを利用して制作を行なっていきます。

余談ですがサイト内で使用するアイコンにはデザインに統一感を持たせるため、以下の項目を揃えるようにしましょう。

• アイコンの線の太さ
• 角丸か角が尖っているか
• 線のアイコンか塗りつぶしのアイコンか

読み込むフォントの種類を3つ未満にする

ページの表示速度が遅くなるという理由から、読み込むフォントを3つ以上にするのは望ましくありません。

Shopifyは元々表示速度が早くなく、読み込むフォントの種類を増やすとさらに表示速度が遅くなってしまいます。

ページの表示速度が遅くなるとページに訪れたユーザーの離脱率も高くなるため、読み込むフォントはなるべく2つまでとしましょう。

ちなみにフォントは、「Google Fonts」を利用することが大半です。

アイコンの最小タップエリアの推奨サイズを意識する

アイコンの最小タップエリアの推奨サイズはAppleのガイドラインでは44×44 pt以上、Androidでは48×48 dp以上とされています。

サイズが小さすぎると誤タップの原因になるため、ヘッダーやフッターなどのアイコンの編集が可能とされている案件では48×48 px以上のタップエリアを確保するようにしましょう。

ボタンの文言を最適化する

「商品一覧を見る」、「ブログの続きを見る」、「メールマガジンの登録をする」など、ECサイトではさまざまな用途のボタンを活用しますが、それぞれ解釈しやすい表現とする必要があります。

例えばメールマガジンへの登録を促すボタンの場合「購読する」と表現すると、料金の支払いが発生すると解釈される可能性があります。
そのため表記は「登録する」といったように、誤解を与えないような表記にします。

また、商品一覧を見せたいボタンは「もっと見る」や「商品一覧を見る」といった表記とし、特定の商品単体ページに遷移させたいボタンは「詳細を見る」や「詳しく見る」といった表記とし、ボタンを押した際にどのようなページに切り替わるか予測のつく表現にしてユーザーの認知にかかる不可を下げる必要があります。