認知心理学から学ぶ、効果的なチュートリアル（プロダクトツアー）の作成方法

本記事では、自社のサービスにユーザー向けのチュートリアル（プロダクトツアー）を導入予定、または既に導入している方のために、チュートリアルの作成で意識すべきポイントを事例を交えてご紹介します！

チュートリアル（プロダクトツアー）とは

チュートリアルとは、WEBサービスの画面上でユーザーを導くガイドのことです。画面の指示に従って操作をすれば自然と使い方を覚えられる教育用プログラムで、プロダクトツアーやウォークスルー、ユーザーガイドなどとも呼ばれます。

操作方法が分からない初心者のユーザーでもチュートリアルを活用することで、素早くサービスの価値を感じることができるため、導入初期の印象が肝心なサブスクリプション型のSaaSプロダクトと非常に相性が良いと言われています。

チュートリアルは、直感的に操作を促せる様、人間の認知特性を意識して作成するのが効果的です。 認知特性とは、目で見たり、耳で聴いたりといった感覚器から入ってきた情報をどのように処理し、表現する能力を表す言葉です。

今回は、人間の認知特性を体系化した認知心理学をおり混ぜながら、チュートリアル作成ツール「Onboarding」を例に、チュートリアル作成のコツを紹介していきます。

チュートリアルの作成のコツ①  〜チュートリアルは「おもてなし」〜

初心者ユーザーへのチュートリアルは「おもてなし」であると考えましょう。

せっかくチュートリアルを導入しても、ユーザーが不快に感じてしまうような体験は「おもてなし」とは言えず、逆効果になってしまいます。

よいおもてなしをするために、チュートリアル作成の3つのポイントをご紹介します。

ユーザーの期待値が高いタイミングを逃さない

チュートリアルでユーザーが初めて使うサービスにわくわく感をもって活用してできる様、期待感を醸成することもできます。親しみやすく、信頼できるコミュニケーションが基本。サービスで提供できる価値を手短に伝え、期待値を高めていきましょう！

（例）

ステップ① 挨拶でユーザーを歓迎する

ステップ② 提供価値の説明で、プロダクトの世界観を伝える

ステップ③ サービスへ誘導・案内をする

チュートリアルでの初回設定の例

ユーザージャーニーの中でピーク時と終了時に好ましい体験があり、ポジティブな感情になると、サービス体験全体の印象がよくなるという心理法則があります。（ピークエンドの法則）

そのため、ピーク時とされるサービスの使い始めの際に、ウェルカムメッセージで良い印象を与えることで、ユーザーに全体的に良いサービスだと認識されやすいというメリットがあります。

過度な案内はしない①

フォーム形式の入力など、見たら何をすべきか分かるようなUIの場合は、動作の概要を説明するまでに留めておきましょう。

過度な解説はユーザーのアクションの妨げになってしまいます。特に、フォームの入力を促すツアーなどは大まかな動作の説明だけを表示することで、ユーザーにとってのノイズとなるような設計を避けることができます。

過度な案内はしない➁

難解な用語やアクションには、ツールチップボタンを付け、ヒントを表示させることも有効です。箇所によってはチュートリアルでの説明ではなく、ヒントのツールチップによる説明の方が適している場合があります。

特に、

• 入力方式で間違えやすい箇所

• 言葉が分かりづらい箇所

• 入力例を見せたい時

など、ユーザーによって説明が必要かどうかが分かれる箇所です。

ツールチップによるご案内の例

こういったところにはチュートリアルではなくヒントのツールチップによる案内が適しているでしょう。

説明を必要としないユーザーのアクションを邪魔することなく、説明を必要とするユーザーのサポートをすることができます。

チュートリアルの作成のコツ②  〜ヒトの認知・行動心理から考える〜

人の視覚認知を意識したチュートリアルは、無意識にユーザーに活用してもらいやすくなります。
そのための一部例をご紹介します。

視線誘導

チュートリアルの説明はサービスの右下に配置するのが効果的です。
ヒトの目線は左上から右下へ、「Z型」をなぞって情報をインプットします。（視線の法則）
左上にチュートリアルがあるとサービスの全体像が分からず、ユーザーのストレスに繋がることがあります。ヒトの視線の特性を意識したチュートリアル作成を心がけましょう。

色の統一

ヒトは無意識に色による情報を知覚します。

使用する色は2〜3色までを基本とし、色の使用原則を定義しましょう。サービス/プロダクトカラーを基調とするのも効果的です。

色を多用しすぎると安っぽくなったり、ユーザーを疲れさせてしまうことがあるので注意しましょう。

アイコンを利用する

アイコンや絵文字は一目で情報を伝えることができます。直観的な理解を促進し、チュートリアルがすっきりとした印象になります。

また、アイコンは文字と比較してスペースを取ることなく、デザインの幅を広げてくれます。日常でよく目にするアイコンをチュートリアルに入れてあげることで、視覚的に興味を引き、親しみやすさをもたせることができます。

ルールの統一

特定のルールがあると人は無意識に認識し、条件反射します。（パブロフの条件反射）

例えばパソコンの右下にポップアップ通知が出ると、内容をしっかり見ずに無意識にクリックしてしまうことはないでしょうか。

チュートリアルを作成する上で、反復作業などはルールを作っておくと効果的です。

文字は大きく、分量は短めにする

チュートリアルでの長い説明はユーザーに好まれません。なるべく重要な部分だけを伝えるように心がけましょう。
文字を大きくして見やすくすることが有効です。必然的に分量が削られ、重要なところだけを表示するように意識することができます。

まとめ

ユーザーの直感的なサービス利用を促すことができるチュートリアル（プロダクトツアー）。

人間の認知に関する特性やユーザーの心理を考えずに作成してしまうと、せっかくサービスに導入したとしても良い効果を出すことはできません。

今回は、効果的なチュートリアル作成の方法を、認知心理学の知識をおり混ぜながらご紹介しました！

これからのチュートリアル作成・改善の際にぜひご参考にしてみてください！

【Onboarding】

Onboarding（オンボーディング）は、ウェブサービスにユーザーを導くガイドを設置するUI/UX改善ツールです。
エンジニアのリソースを使わず、ノーコードで簡単にチュートリアル、ヒントなどのガイドを作成することができます。

ユーザー属性や利用状況を分析し、データをもとにした施策を実行・改善といった、PDCAに必要な機能をワンストップで提供しています。

▼サービスページ

【STANDS編集部】

日々の業務で活用いただける実践的なフレームワークや、
知っておきたいSaaSのトレンドワード・キーワードの解説、
CS業務改善のためのヒントなどをお届けいたします。