効率的なシステムを構築する（３）UI・UX設計

消費者の環境に最適化したUI、UX か

もう一度、UIとUXについて軽くおさらいしておきましょう。UIとはユーザーインターフェースのことで、ユーザーとサービスの接点を指します。UXはユーザー体験のことで、ECサイトを利用することによってユーザーが得る体験のことです。

売上をあげるためには、UIやUXが消費者の環境に最適化していることがとても重要です。そして、そのポイントは3つです。

・情報が整理されていてわかりやすいか(わかりやすさ)

・ボタンの位置や色、動線がスムーズで使いやすいか(使いやすさ)

・文章が読みやすいか(読みやすさ)

<情報が整理されていてわかりやすいか(わかりやすさ)>

カテゴリーごとにまとめて商品を閲覧することはできるものの、全ての商品をまとめて一覧にして見られる機能がない。ヘルプページはあるものの、検索機能がないために上から順に読んでいかなければならない。

このように、情報がカテゴライズされていなかったりいろいろな場所に分散していたりすると、ユーザーがいちいち迷ってしまい、ユーザーに「使い勝手が悪い」「イライラする」という体験を与えてしまいます。

<ボタンの位置や色、動線がスムーズで使いやすいか(使いやすさ)>

私たちは無意識に、前のページに戻るときには「←」次のページに進むときには「→」という矢印の方向で理解しています。「戻る」「進む」という日本語がなく「←」「→」だけが表記されていても、直観的に次のページに進みたいときには「→」のボタンを押すものです。そのため、戻るときに「→」進むときに「←」と逆向きの矢印を使用しているサイトでは、しばしば操作を間違えてしまいます。

また、顧客情報を入力する画面においてしばしば見られるのが、英数字を半角で入力しなければエラーが出るというものです。使いやすいサイトでは、電話番号の欄やメールアドレスの欄に「半角で入力」などのサポートがついていますが、こうした案内がなく、しかも入力が完了して画面遷移をしたらエラーになって入力済みの項目が全てリセットされ、また最初から入力していかなければならないようなサイトもあります。

こうした使いづらさもまた、ユーザーにとっては不快を感じるものです。ユーザーが不快を感じるようなサイトは、消費者の環境に適したUXとは言えません。

<文章が読みやすいか(読みやすさ)>

改行が全くない長文のテキストや漢字が多いテキストは、パッと目に入ってきたときに圧迫感が強く、読みにくいためになかなか内容が頭に入ってきません。文章の読みやすさも非常に重要です。

デザインを重視したECサイトによく見られるのが、文字が小さくて読みづらい、文字の色が薄くて読みづらいといったケースです。たとえば、グレーの背景に少し濃いグレーのテキストを重ねると、背景と同化してテキストが目立ちません。デザイン性は高くても実用性が低くなってしまうと、やはり消費者の環境に適したUXとは言えません。

とくに健康食品のECサイトではターゲットの年齢層が高くなることから、読みやすい文字サイズなどの考慮も必要です。

化粧品EC は、9割スマホで閲覧されている

消費者がECサイトを閲覧する環境として、今主流なのがスマホです。

化粧品に関しては、9割以上のユーザーがECサイトを見るときにパソコンやタブレットではなくスマホで閲覧しているというデータがあります。そのため、UIやUX設計についても、スマホでタップしやすい位置にボタンがあるか、文字が見やすい大きさになっているかなど、スマホでサイトが見やすいか、使いやすいかを最優先に考えなければなりません。

デザイナーをはじめ、ECサイトをつくる側はパソコンを使って作り込んでいきますから、どうしても「ユーザーのほとんどがスマホで閲覧している」という視点が抜けがちになってしまいます。

レスポンシブデザインといって、ユーザーの環境に合わせてサイトのデザインを自動で調整する機能を使ってサイトをつくる人も多いものですが、9割以上がスマホからの閲覧のような状況であれば、いっそスマホでの閲覧に最適なサイトしかなくても構いません。

レスポンシブデザインですらなく、スマホで閲覧するのと全く同じデザインでパソコン上でも展開する。ユーザー側からすると、スマホでもパソコンでも同じデザインの画面が表示されるので、統一感がありスムーズにサイトの中を移動できます。また、ECサイトをつくる側もスマホとパソコンの両方に適したサイトをつくる必要がないため、コストも時間も効率化することができます。

とくに、10代、20代の若年層はパソコン自体を持っていない人も増えています。もしブランドのターゲットが若年層なのであれば、なおさらスマホの閲覧に特化したサイトデザインでも支障はありません。

一方で、ターゲットによってはスマホオンリーではなく、パソコン用のサイトデザインも重視した方がいいこともあります。たとえば健康食品のECの場合、一般的に年齢層が上の方や男性客が多く、化粧品とはターゲット層が異なります。この場合は、パソコンからのサイトの見え方も重視する必要があります。

スマホを重視するのか、レスポンシブデザインにしてパソコンのデザインも重視するのかは、ターゲットに合わせて調整するとよいでしょう。

Google はモバイルファーストインデックスを推奨している

従来、Googleではパソコン版のコンテンツを基に順位を評価していました。しかし、ユーザーのほとんどがスマホなどのモバイルデバイスを使っていることを受け、モバイルファーストのインデックス登録に向けて実験を始めました。また、将来的にはモバイル版コンテンツをアルゴリズムの主な評価対象にすることも発表しています。

このように、検索エンジンであるGoogleも、スマホで閲覧したときのわかりやすさ、使いやすさ、読みやすさを重視し、評価が高いものを検索上位に表示するという流れになってきています。

たとえば「青汁」で検索したときに上位表示されるサイトは、検索ワードである「青汁」と関連性が強いサイトであるだけでなく、モバイルビューが優れているという要素も加味して上位表示されています。

さらにGoogleが評価の対象にしているのが、読み込みスピードです。ページ遷移に何秒もかかる、モバイル(スマホ)サイトがなかなか表示されないといった場合も検索順位に影響します。

読み込みスピードが遅いと、検索順位に影響するだけでなく、ユーザーの離脱率も高まります。読み込みスピードが3秒を超えると直帰率が増加し、読み込みに5秒かかると38%のユーザーが離脱するというデータもあります。