UX · UI

UXとUIは具体的に何が違う？

UIは「どう見えるか」を、UXは「どう使われるか」を扱います。同じ予約ボタンでも、色・形・文字はUIの仕事で、そのボタンがお客様の探す場所にあるかどうかはUXの仕事です。

この2つは別々の作業ではありません。ふつうはUXでお客様の動線と画面の順番を先に決め、その上にUIで色や文字をのせていきます。順番が逆になると、見た目はきれいでも使いにくいホームページになりがちです。

デザイン案を見るときに2つを分けて考えると、フィードバックがぐっと楽になります。「色が気に入らない」はUIについての意見で、「料金が見つけにくい」はUXについての意見です。

UXには画面の外での体験も含まれます。予約の後に届く確認メッセージや、お問い合わせへの返信の速さまで、お客様にとってはすべてが「このお店を利用した体験」です。

良いUXはどんな基準で判断する？

良いUXとは、お客様が「考えなくても」したいことを終えられる状態です。ユーザビリティ研究機関のNielsen Norman Groupはこれを10の原則（ユーザビリティヒューリスティクス）にまとめており、多くのデザイナーがこの原則をチェックリストのように使っています。

お店のホームページに当てはめると、以下のいくつかが特に重要です。難しい理論ではなく、店頭でお客様に接するときの常識とほぼ同じです。

原則をすべて覚える必要はありません。デザイン案を見るとき、「初めてのお客様がこの画面で何をすればいいか、すぐにわかるだろうか？」という1つの問いを繰り返すだけで、ほとんどの問題はふるい落とせます。

• 今どこにいるかを伝える：予約の途中なら「2ステップ中1ステップ目」のように進み具合を見せます。
• お客様の言葉で書く：「サービス紹介」より「施術メニュー・料金」のように、お客様が探す言葉を使います。
• やり直しやすく：間違えて押した日付を、最初から選び直さなくて済むようにします。
• 同じものは同じに：ページごとにボタンの形や位置が変わらないようにします。
• ミスを未然に防ぐ：定休日はそもそも選べないようにしておく、といった工夫です。
• 本当に必要なものだけ見せる：ファーストビューに情報を詰め込むより、いちばん重要なものから見せます。

自分のお店のホームページのUXはどうチェックする？

いちばん確実なのは、ほかの人が実際に使う様子を見守ることです。デザインの専門知識がなくても、以下の手順で30分ほどやってみると、直すべき箇所がかなり見つかります。

チェックの間は、説明したり手助けしたりしないことが大切です。お客様は、隣で教えてくれる人なしに一人でホームページを使うからです。

数字でも確認できます。アクセス解析で、予約ページまで来た人のうち実際に予約を完了した割合を見れば、どのステップでお客様が離れているかの見当がつきます。

1. 01お店をよく知らない知人を2〜3人選びます。年代がばらけているとなお良いです。
2. 02スマホを渡して、「今週土曜の午後に予約してみてください」「駐車できるか調べてみてください」のように、やることを1つずつ伝えます。
3. 03隣で黙って見守り、手が止まったところ、押し間違えたところ、戻るボタンを押したところを書き留めます。
4. 04終わったら「どこがわかりにくかったですか？」と短く聞きます。
5. 05複数の人が同じところでつまずいたなら、その部分から直します。
6. 06直した後、別の人に同じことをもう一度試してもらって確認します。

業種によってUXで気をつける点は違う？

はい、お客様がホームページに来て「最初にしたいこと」は業種によって違います。そのことをいちばん短い道のりで終えられるようにするのが、UX設計の核心です。

そのため、同じデザインのひな形を使う場合でも、メニューの順番やファーストビューのボタンは業種に合わせて変える必要があります。他の業種のホームページをそのまま真似すると、自分のお店のお客様には合わないことがあります。

同じ業種でも、客層によって変わります。年配のお客様が多いお店なら文字を大きくして電話ボタンを前に出すのが、20代のお客様が多いお店ならカカオトーク・Instagramへの導線を前に出すのが合っているかもしれません。

• カフェ：場所・営業時間・メニューの写真を真っ先に探します。地図と「道順を調べる」が上のほうにあると便利です。
• 美容室：施術ごとの料金とスタイリストを比べてから予約します。料金表からそのまま予約へ進める流れが大切です。
• 工房：クラスの日程と残席を確認して申し込みます。日付を選ぶ画面がわかりやすくなければなりません。
• オンライン販売：商品を比べてカートに入れます。検索・分類・決済のステップが短くなければなりません。

UXは検索順位（検索表示）にも影響する？

間接的には影響します。Google検索セントラルは、ページエクスペリエンス（速い読み込み、スマホで見やすい画面、安全な接続など）が優れたページを評価しようとしていると案内しています。

ただしGoogleは、ページエクスペリエンスが多少劣っていても、検索キーワードにいちばん関連する内容を優先して表示すると説明しています。同じくらい良い内容が多いときにページエクスペリエンスが差を生むことがある、という意味なので、お客様が探している情報をしっかり載せることが先です。

検索順位よりも直接的な効果は、お問い合わせ・予約の数です。同じ訪問者数でも、UXが良ければ連絡までしてくれるお客様が増えます。

制作会社とやり取りするとき、UX・UIでよくある失敗は？

いちばん多い失敗は、デザイン案から見て決めてしまうことです。画面の骨組み（ワイヤーフレーム）を飛ばすと、色や写真に目が行き、メニューの順番やボタンの位置といった重要な問題を見落としがちです。

また、パソコンの画面だけでデザイン案を確認するケースも多いです。お店のお客様はほとんどがスマホからアクセスするので、デザイン案も必ずスマホで開いてみてください。

UIの好みに関するフィードバックは、例と一緒に伝えるのがおすすめです。「高級感のある感じで」より、「このホームページのように余白が広くて文字が細い感じ」のように参考サイトを一緒に見せると、修正回数が減ります。

UXは公開後も磨き続けるものです。お客様から電話でよく聞かれる質問は、ホームページでその情報が見つけにくいというサインなので、その内容をもっと目立つ場所に移せば大丈夫です。

• デザイン案の前に、画面の骨組み（ワイヤーフレーム）を先に見せてもらえますか？
• スマホ画面のデザイン案を別に作ってもらえますか？
• お客様が予約・お問い合わせまで何回タップする必要があるか、説明してもらえますか？
• 公開前に、実際のスマホで使ってみるチェックをしますか？
• 公開後にお客様の反応を見て直せる方法（修正回数・保守管理）はありますか？