ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。
ユーザーにとって使い勝手の良いサイトを作る為には、まず、ターゲットユーザーの絞り込みと想定を行いましょう。
最初に、ユーザー導線の設計までに行う具体的な手順を確認しておきましょう。
ユーザー導線とは
ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。
その為には、以下の点を明確にしておく必要があります。
- 想定されるユーザーの性別や年齢
- サイトに訪れて何をしたいのか(目的)
- 上記を踏まえたうえで、ユーザーがどのような行動をとるか
これらは、サイト制作にあたって１番初めに考えるべきものです。
では、ユーザー導線設計までに行うべき具体的手順を確認しておきましょう。
- ユーザー層や目的を考える
- コンテンツ内容の決定や作成
- コンテンツの重要度で優先順位をつける
- １～３を踏まえたうえで最適なレイアウトを決める
- ユーザー導線設計
こういった流れで制作していくことで、ユーザーにとって使い勝手の良いサイトを作ることが出来ます。このレッスンではユーザー導線設計の流れを学んでいきます。
設計の為にユーザー層や目的を考える
たとえば、以下のようなユーザーがターゲットの美容室があるとします。
- 主婦
- ２０代後半～４０代
ではユーザーの人物像を予測し、ユーザーの目的・行動を考えてみましょう。
| 目的
(知りたいこと・したいこと) |
・髪や皮膚に良い施術か？ ・子供を連れていけるか ・料金はどのくらいか ・気に入ればネットから予約したい |
| 行動
(サイト内での動き) |
・サロンの雰囲気を確認 ・料金 / メニューを確認 ・店舗情報(営業時間など)の確認 ↓ 予約 |
このようにユーザーがどのような事を考え何をしたいのかを書きだしていきます。ユーザーの目的の達成や使い勝手をしっかり考えるという事です。この点を考えていけば、コンテンツの優先順位やレイアウトも見えてくるかと思います。
ペルソナとは
ペルソナとは、実在のユーザーの情報を元に作成した、架空のユーザーです。実在する人物かのように具体的に作成します。このペルソナを作成する目的は、ユーザーの思考や行動について理解を深め、ユーザーの求めるものを知る為です。
それにより、ユーザー目線で使い勝手の良いサイトを制作する事が出来るのではないかというものです。
では、美容室の例でペルソナを設定してみましょう。
イメージをしやすいよう、実際のユーザーに近い人物の写真を使用します。
このような、実在するユーザーに基づいたペルソナを作成する事で、制作のポイントが見えてきます。
たとえば、この美容室に訪れるユーザーは小さな子供を持つ主婦の方が多いのではないでしょうか。とすると、以下のような点を持つ美容室だと仮定した場合、これらをアピールできるデザインが良いという事が想定できます。
- キッズスペースあり
- 子供にも優しい薬剤を使っている
- 通いやすい料金設定である
- セットしやすいヘアスタイルを提供できる
- ネットからも予約できる
このように、ユーザーについて深く考えていくことで、コンテンツの重要度の優先順位を明確にすることが出来ます。また、気づかなかった重要点に気づく事も出来るかもしれません。次に学ぶカスタマージャーニーマップは、このペルソナを元に作成していきます。
カスタマージャーニーマップとは
カスタマージャーニーマップとは、ユーザーの思考・行動、それに対する施策などを具体化したものです。前項目の表をより具体化したものですね。以下のように表で作成する事が多いです。下記は簡単な例ですが、たとえば美容室来店後の項目などがあっても良いでしょう。
また、既存サイトのリニューアルなどでの制作だとします。その場合は、電話予約よりウェブ予約の件数の方が多いというような情報を載せるのもよいでしょう。具体的にユーザーの思考や行動を書きだすことが重要です。
コンテンツの作成やユーザー導線設計は、この情報を元に行っていきます。こうしてユーザーにとっての使い勝手や有益性を高めていきます。これらは、美容室サイトの例であれば「予約」「来店」をしてもらうという目的達成に繋がります。
ユーザー導線に沿ってコンテンツを決める
冒頭のユーザー導線設計の流れの表でいうと２と３にあたる部分です。
前項目の情報を元にコンテンツの詳細や、優先順位を決めていきます。また、美容室のサイトの例で言えば、最終的にユーザーに店舗に来店してもらう事が目的となりますね。
その場合、必要なコンテンツは以下のようになるでしょう。
| コンテンツ | ポイント |
|---|---|
| サロン情報(コンセプトや店内写真) | お店のイメージを掴んでもらい、安心感を与える |
| メニュー/料金 | 求めているメニューがあるかを示し、料金を明示して安心感をもたせる |
| お店のアピールポイント | 体に優しい薬剤、キッズスペースありなど、ターゲットユーザーに合わせてアピールポイントを伝える |
| ヘアスタイルギャラリー | 技術のレベルや、ターゲットユーザの好みに合うヘアスタイルを示す |
| web予約フォーム | 最終的な目的 |
| アクセス(住所や地図) | 駐車場の情報や、最寄り駅なども記載 |
導線に基づいたワイヤーフレームを作る
ワイヤーフレームとは、サイトの設計図の様なものです。このワイヤーフレームは先ほどの情報を元に作成します。また、ファーストビューやユーザーの視線の動きなども考慮してコンテンツのレイアウトを決めていきます。
ワイヤーフレームについては次レッスンで詳しくご紹介します。
ワイヤーフレームを元にプロトタイプを作る
プロトタイプとは、ワイヤーフレームを元に実際の動きを再現し試すことです。実際の動きというのは、たとえば「トップ」というリンクをクリックしたらトップページに戻るというような画面遷移のことです。
このプロトタイプを作成し試すことで、ユーザー目線に立って改善点などを見つけることが出来ます。このプロトタイプの作成はいろいろなツールで行う事が出来ます。たとえば「Adobe XD」というソフトや、「Marvel」というweb上で作成できるサービスなどがあります。
Marvel
まとめ
ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。これは、ユーザーの情報を明確にしたうえで設計しなければなりません。
また、ユーザーの思考などまで深く掘り下げていくことが大切です。そして、コンテンツの作成・優先順位決定はユーザー情報を元に行いましょう。