ue-tourを使って心地よいチュートリアル画面を 〜ユーザー体験の向上へ〜

田原一樹

自己紹介

氏名：田原一樹

出身地：大阪

血液型：B型

所属：レアジョブ/App・UXチーム
→フロントエンドエンジニア

本日のお話

Vue.jsを使用し画面構成されたプロダクト内で、
ユーザーに画面内の説明をするには
vue-tourを使うと幸せになれる!!!可能性があるかもしれない

弊社、レアジョブとは？

その前に

こちらについて

レッスンにおいて

etc

フロントエンドの技術構成

レッスンルーム

Webでの受講の場合

おおぉ！！めっちゃ凄いコレ！！！

ちょっと待て

…ゴクリ

この画面どうやって
使ったらいいんや？
（ユーザー目線）

本日のお話(2回目)

Vue.jsを使用し画面構成されたプロダクト内で、
ユーザーに画面内の説明をするには
vue-tourを使うと幸せになれる!!!

解消に向けての対応

• デモ画面の作成
  → 既存のVueコンポーネントを切り分けて表示させることで対応
   
• チュートリアルアニメーションを実装
  → ユーザーに各ボタン等の説明を促す

デモ画面の作成

• 本番レッスン用のコンポーネントを流用しながら、
  デモ用の画面との分岐を行う
  （データfetch等のデモ時には不要処理を行わないようにするなど）
   
• ドメインが異なるので、vue-routerのpathにてどちらのコンポーネントを呼び出すか判定

デモ画面

チュートリアルアニメーションの実装

• 説明する内容について
  → 各ボタン、各領域に対して説明が入るように
   
• 見せ方について
  → ひと目でわかりやすいチュートリアルへ

上記を担保するために今回、vue-tourを使用しました。

そして、完成したデモ画面がこれだァ！！

vue-tour 使用上での注意点等

・デフォルトコンポーネントは省略せず、全て書く
→ コンポーネントオーバーライド時（slot）のエラーになり、
アニメーションが効かなくなったり、文言変更ができなくなる為。

・発火時に後ろのレイヤーに対してもクリックが効いてしまう
→ 必要に応じて画面を覆うレイヤー等を別に準備する必要がある。

・自動再生は基本機能のとして存在しない
→ setInterval等で調整を行えば容易に実装は可能です。

・GitBooksと合わせてSample実装を見ると使い方の理解が容易
→ GitBooks
→ node_modules/vue-tour/demo/

まとめ

• デモ画面を実装することで、ユーザーに画面構成（使い方）を事前に伝えることができるようになったので、レッスンを受講頂くにあたり、少しでも緊張や不安を解消できていれば嬉しい。
   
• 完璧に分かりやすいかと言われるともっと分かりやすい
  導入にできる余地はあるので今後も改善はしていきたい。
   
• Vueを触り初めて日は浅いですが、楽しい！！

 最後に

そんな思いを持った
エンジニアをレアジョブでは
募集しております！！

最後までご清聴頂き
ありがとうございました。