ユーザー導線とは？ユーザー導線の設計・作り方

ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。このレッスンではユーザーにとって使い勝手の良いサイトを作る為に必要な事を学んでいきます。ユーザー導線の設計・作り方はこのレッスンで学ぶことが出来ます！

• ユーザー導線とは
• ユーザー層や目的を考える
• ペルソナ
• カスタマージャーニーマップ
• コンテンツ
• ワイヤーフレームを作る
• プロトタイプを作る
• まとめ

 

ユーザー導線とは

ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。その為には、以下の点を明確にしておく必要があります。

• 想定されるユーザーの性別や年齢
• サイトに訪れて何をしたいのか(目的)
• 上記を踏まえたうえで、ユーザーがどのような行動をとるか

これらはサイト制作にあたって１番初めに行うべきものです。では、上記からユーザー導線設計までに行うべき具体的手順を確認しておきましょう。

1. ユーザー層や目的を考える
2. コンテンツ内容の決定や作成
3. コンテンツの重要度で優先順位をつける
4. １～３を踏まえたうえで最適なレイアウトを決める
5. ユーザー導線設計

こういった流れで制作していくことで、ユーザーにとって使い勝手の良いサイトを作ることが出来ます。このレッスンではユーザー導線設計の流れを学んでいきます。

設計の為にユーザー層や目的を考える

たとえば、以下のようなユーザーがターゲットである美容室があるとします。

• 主婦
• ２０代後半～４０代

ではユーザーの人物像を予測したうえで以下のようにユーザーの目的などを考えてみましょう。

目的 (知りたいこと・したいこと)	・料金は安く、高い技術のお店であるか ・キッズスペースの有無の確認 ・上記を手間をかけずに確認したい ・気に入れば予約したい
行動 (サイト内での動き)	・料金 / メニューの確認 ・店舗情報(キッズスペース・営業時間など) 　　　　　　　  　↓ 　　　　　　　　 予約

このようにユーザーがどのような事を考え何をしたいのかを書きだしていきます。ユーザーの目的の達成や使い勝手をしっかり考えるという事です。この点を考えていけば、コンテンツの優先順位やレイアウトも見えてくるかと思います。

ペルソナとは

ペルソナとは、実在のユーザーの情報を元に作成した、架空のユーザーです。実在する人物化のように具体的に作成します。このペルソナを作成する目的は、ユーザーの思考や行動について理解を深め、ユーザーの求めるものを知る為です。

それにより、ユーザー目線で使い勝手の良いサイトを制作する事が出来るのではないかというものです。では、美容室の例でペルソナを設定してみましょう。

イメージをしやすいよう、実際のユーザーに近い人物の写真を使用します。このような、実在するユーザーに基づいたペルソナを作成する事で、制作のポイントが見えてきます。

たとえば、この美容室に訪れるユーザーは小さな子供を持つ主婦の方が多いのではないでしょうか。とすると、以下のような点を持つ美容室だと仮定した場合、これらをアピールできるデザインが良いという事が想定できます。

• キッズスペースあり
• セットしやすいヘアスタイルの提供
• 落ち着いたデザイン
• 昼間の時間帯も営業していること

このように、ユーザーについて深く考えていくことで、コンテンツの重要度の優先順位を明確にすることが出来ます。また、気づかなかった重要点に気づく事も出来るかもしれません。次に学ぶカスタマージャーニーマップは、このペルソナを元に作成していきます。

カスタマージャーニーマップとは

カスタマージャーニーマップとは、ユーザーの思考・行動、それに対する施策などを具体化したものです。前項目の表をより具体化したものですね。以下のように表で作成する事が多いです。下記は簡単な例ですが、たとえば美容室来店後の項目などがあっても良いでしょう。

また、既存サイトのリニューアルなどでの制作だとします。その場合は、電話予約よりウェブ予約の件数の方が多いというような情報を載せるのもよいでしょう。具体的にユーザーの思考や行動を書きだすことが重要です。

コンテンツの作成やユーザー導線設計は、この情報を元に行っていきます。こうしてユーザーにとっての使い勝手や有益性を高めていきます。これらは、美容室サイトの例であれば「予約」「来店」をしてもらうという目的達成に繋がります。

ユーザー導線に沿ったコンテンツの決め方

冒頭のユーザー導線設計の流れの表でいうと２と３にあたる部分です。前項目の情報を元にコンテンツの詳細や、優先順位を決めていきます。また、美容室のサイトの例で言えば、最終的にユーザーに店舗に来店してもらう事が目的となりますね。その場合、必要なコンテンツは以下のようになるでしょう。

コンテンツ	ポイント
サロン情報(コンセプトや店内写真)	お店のイメージを掴んでもらい、安心感を与える
メニュー/料金	予約をしてもらうには、事前に料金が分かることが必要
お店のアピールポイント(低価格/キッズスペースありなど)	ターゲットユーザーに合わせてアピールポイントを伝える
ヘアスタイルギャラリー	技術のレベルを伝える。
web予約フォーム	最終的な目的
アクセス(住所や地図)	駐車場の情報や最寄り駅なども記載するとよい

導線に基づいたワイヤーフレームを作る

ワイヤーフレームとは、サイトの設計図の様なものです。このワイヤーフレームは先ほどの情報を元に作成します。また、ファーストビューやユーザーの視線の動きなども考慮してコンテンツのレイアウトを決めていきます。

では、ワイヤーフレーム作成のポイントを見てみましょう。

• 視線の動きに合わせた配置
• コンテンツの優先順位
• どのページにどのコンテンツに載せるか

このような点に注意しながらワイヤーフレームを作成していきましょう。ワイヤーフレーム作成手順は次の章で詳しく学びます。

ワイヤーフレームを元にプロトタイプを作る

プロトタイプとは、ワイヤーフレームを元に実際の動きを再現し試すことです。実際の動きというのは、たとえば「トップ」というリンクをクリックしたらトップページに戻るというような画面遷移のことです。

このプロトタイプを作成し試すことで、ユーザー目線に立って改善点などを見つけることが出来ます。このプロトタイプの作成はいろいろなツールで行う事が出来ます。たとえば「Adobe XD」というソフトや、「Marvel」というweb上で作成できるサービスなどがあります。

Marvel

https://marvelapp.com/

まとめ

ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。これは、ユーザーの情報を明確にしたうえで設計しなければなりません。

また、ユーザーの思考などまで深く掘り下げていくことが大切です。そして、コンテンツの作成・優先順位決定はユーザー情報を元に行いましょう。