ユーザーを迷子にさせないためにホームページに施しておきたい5つの工夫

始めたばかりのブログサイトやリリースしたてのオウンドメディアなど、ホームページを立ち上げたころはまず記事を量産しようと躍起になることがおおいでしょう。
しかし、ホームページが成長してきてサイトの量が膨大になると、ユーザーは自分の探しているコンテンツを見つけるために検索をかけたりしますが、うまく見つけられないことがあります。

ナビゲーションの役割が低下してしまうと、ホームページの回遊時間が下がったり、離脱してしまう割合が高くなります。
いくら日頃からSEO対策をして、検索エンジンでの順位が高くなっても、ユーザーが定着しなければ再訪する可能性もなくなってしまいます。

そこで今回は、ユーザーを迷子にさせないためにホームページに施しておきたい5つの工夫を紹介していきます。
ユーザーの立場に立って使いにくいところを改善すれば、ブログサイトであれオウンドメディアであれ、解決できるようになります。

ユーザーを迷子にさせないためにホームページに施しておきたい5つの工夫

1. 適切なオンボーディングを徹底する

▲ Dropboxのオンボーディングツアー (モックアップ) / Credit：Brandon Land on Dribbble

オンボーディング(Onboarding)とはもともと、組織やコミュニティなどに新たに参加した人に手ほどきを行い、慣れさせるプロセスのことを言います。
もともとは「新人研修」の意味で、新規に採用して配属した従業員を、いち早く組織に定着させる研修プロセスをオンボーディングと呼びます。

転じて、*ユーザーオンボーディング(User Onboarding)*とは、アプリやサービスを利用する初回ユーザーが、たった1回の利用で離脱してしまわないように、使い方を紹介しながらプロダクトのよさについての理解を深め、利用定着させるためのプロセスです。

こうしたオンボーディングプロセスを取り入れているホームページも増えていますが、「適切に」行えているサイトはどれくらいあるでしょうか。
情報ばかりを与えすぎてユーザーをうんざりさせてしまったり、オンボーディング作業を部分的にスキップすることを禁止したり、ざっくりすぎる説明をしてユーザーを当惑させてしまった、というのはよくある過ちです。

また、Webサービスだけでなく、ブログサイトやオウンドメディアでも、カテゴリの位置や検索機能などをユーザーに知らせておいたほうが、サイトの回遊率が上がります。
上手にオンボーディングを行うことができれば、ユーザーの離脱率を大きく抑えることができるでしょう。

2. 検索プロセスを最適化する

▲ Airbnbの検索結果 (モックアップ) / Credit：Vlad Tyzun on Dribbble

どんなジャンルのホームページでも重要ですが、とりわけコマースサイトや複雑な検索を必要とするデータベースを使ったホームページにとって、検索窓が使いやすくデザインされているかは重要な問題です。

明瞭で直感的に検索できるようにデザインするのは最初の第一歩で、UX上の驚きを与えたいのであれば、もう一歩踏み込む必要があるでしょう。
例えば、検索結果として該当するものがなかったとして、たいていの場合は空白の検索結果ページが出てきます。
しかし、いくつかの検索結果の候補をユーザーに提案できたら、ユーザーは欲しい情報を探しやすくなります。

あるいは、Googleの検索画面で経験したことがあるかもしれませんが、ヒットが見込まれないキーワードを誤って打ってしまったときに、*「次の検索結果を表示しています：」といった形でヒットが見込まれるキーワードで検索しなおしてあげる、といったこともユーザーの利便性を高めます。
このときに、「元の検索キーワード：」*と本来検索すべきキーワードでも検索をかけなおすことができるようにしましょう。
これがないと、もしユーザーが本当にそのキーワードで検索をしたかったときに、代替キーワードで検索をかけてしまうと、単なる余計なお節介になってしまいます。

3. エラーメッセージを再定義する

▲ バルーンをクリックすることでホームボタンに戻る404エラー / Credit：Anastasiia Andriichuk on Dribbble

404ページをはじめとして、何らかのエラーが発生したときに表示するメッセージも、工夫次第で*「迷子のまま」にも「とても役にたつ案内板」*にもなります。

エラーが起きてしまったときに、実際にそれがサービス側の問題であってもユーザー側の問題であっても、ユーザーに非はないと伝えることは、素晴らしいUXを作りだす上で重要な点です。
そんなことを伝えるのであれば、今何が起こっているか、そしてそれに対してどんな解決策があるかを伝える方が、よっぽどお互いにとって生産的です。

先ほど見たGoogleの代替キーワードも一つの具体的な例ですが、あまりユーザーを驚かせないようにしながら、さりげなく解決策へ誘導してあげましょう。
情報構造のヒエラルキーを決め、端的に何をすべきかを伝えることが大切です。

4. マイクロコピーを簡潔に言い換える

▲ 何をすべきかが明確なマイクロコピー / Credit：Eric van Eekelen on Dribbble

ユーザーに行動を促す際に重要なのは、どうしてほしいかをはっきりと伝えることです。

はっきりと伝えないと、問題も発生します。
ユーザー側の視点で言えば、文脈によって肯定的にも否定的にも受け取れるようなコピーはWeb上にたくさんあります。
例えば、*「メールボックスは空です」「チェックリストにアイテムがありません」というのはあまり否定的な印象を受けません(それどころかいいことにも思えます)。
一方で、「銀行口座の残高は空です」「求人情報に掲載されている案件はありません」*というのはかなりネガティブです。

どちらの表現にしても、ユーザーの立場に立って適切なマイクロコピーを作り上げることが大切です。
メールボックスやToDoリストのアイテムが空になった時にはユーザーを褒めてあげればいいですし、銀行残高や求人情報はゼロになる前にユーザーに警告して「少なくなっていますよ」と伝えたほうが賢明でしょう。

また、マイクロコピーの中で*「何が」(What)「どのように」(How)「なぜ」(Why)*を明確に示すことも重要です。
「何が」起きているのかを伝え、「どのように」それを行うのかを伝え、「なぜ」それをユーザーがすべきなのかを伝えるのです。
特に、最後の「なぜ」が欠けてしまうと、いくらユーザーが使い始めても、オンボーディングの段階で離脱してしまう可能性が高くなってしまうでしょう。

5. デザインパターンを決める

▲ デザインパターンを統一しておけばユーザーを驚かせなくて済みます / Credit：Hanna Jung on Dribbble

一見関係ないと思うかもしれませんが、デザインパターンを統一することによってユーザーがサイト上を迷子にすることの防止になります。
デザインパターンが統一化していれば、エラーメッセージが出た時にユーザーを驚かせることもなく、安心して本来乗るべき軌道にユーザーを再び戻すことができます。

しかし、デザイナーがスラングとして使っているように、*「デザインシュガー」「ビジュアルシュガー」*と呼ばれるような、余計に装飾をしたりやたら画像を使って飾り立てるのは、かえって逆効果です。
むしろシンプルに起きていることと次に何をすべきかのアクションをさりげなく提示するほうが、ユーザーに喜ばれます。