途中で挫折しないチュートリアルに必要な要素とは？

こんにちは、株式会社スペースマーケットでデザイナーやっている中原です。

最近はJリーグの移籍情報と動物の動画ばっかり見てた気がします。
ステイホーム。

---

新しくプログラミングやツールの使い方について理解するときにお世話になる、チュートリアルが持つべき要素についてちょっと考えてみました。

わかりやすいチュートリアルに出会う

自分の興味ある技術なんかを学ぶ際にチュートリアルによくお世話になるのですが、最近実際に取り組んでみてよくできてるなーとても親切だなーと感じたものがあったので、それらを参考に「チュートリアルにはどんな要素が必要か」をちょっと整理してみることにしました。

最近触ってみてすごく取り組みやすいと感じたチュートリアルが

SwiftUI Tutorials

Next.js のチュートリアル

です。

チュートリアルのポイント：完走しやすさ

チュートリアルを提供する上で大事なのは、いかに完走してもらえるか、かなぁと思っています。

サービス提供者はチュートリアルによって「興味ある人（初心者）」を「実際に使っている人」に変えていきたいので

・使い始めるのに必要なスキル
・使いこなせるという自信
・この技術（ツール）が自分にとって有用だ、という感覚

をチュートリアルで獲得してもらう必要があります。

チュートリアルを進めていく中で「これなら使いこなせるかもしれない」という自信を持ち、実際に必要なスキル・知識が身について「やりたいことが実現できそう！」と感じてもらえることが重要ですよね。

そんな観点でまとめてみました。

1. どんなことが学べるのかわかる

当たり前なんですけど、どんなことが学べるのかがわかりやすく提示されていることは重要です。

チュートリアルで学ぶ内容（目次）を見ることで

・どんなポイントを抑えておけば利用できるのか
・この技術（サービス）のどんなところが売りなのか

ということが把握できます。

Next.jsの内容を見てみると
「この点だけ押さえればとりあえずアプリケーションを公開できるんだな」
「このフレームワークはルーティングやレンダリングの機能が充実してるのかな」
みたいなことがわかりますよね。

また当然ですが、理解しやすくするという意味で大事な部分を残しつついかにボリュームを減らせるか（少ないように見えるか）ということも重要になってきます。

2. 必要な時間が表示されている

やはりどれくらいの時間がかかるのか、目安であってもわかった方がやり遂げるモチベーションに繋がりそうですね。
作業単位を細かくして所要時間を少なく見せてあげることもやりやすさを感じてもらうためのポイントですかね。
（ただ細かくしすぎると逆にやることのボリュームがあるようにみえてしまうのでバランスは考慮する必要がある）

トータルの所要時間の表示

このセクションに要する時間の表示

毎日一時間やれば1週間以内に終わるな…と最初にわかれば結構気楽にはじめられますよね。

3. 準備や重要でない作業を省くことができる

何かを始めようと思ったときに、準備が面倒なものはなかなか取り組みづらいですよね。本当にやりたいことに辿り着く前に挫折してしまう…

チュートリアルで必要なものはダウンロードするだけなどの状態にしておく必要がありますね。
新しく習得したスキルで何かを始めるときには準備は避けて通れない作業ですが、チュートリアルではとにかく完走してポイントを理解してもらうこと、スキルアップを体感してもらうことが最優先だと思います。

必要な部分だけ学びたい人や前のセクションをスキップした人などに向けて、セクションごとに必要なものが手に入る状態になっているとより親切ですね。

4. 自分の進め方が正しいかどうか分かる

チュートリアルは新しいものに初めて取り組むことなので、常に「自分のやっていることは間違っていないか？」と不安に思いながら（大げさか）進めることになります。
自分のアクションが間違っていないかどうか確認できるよう、都度答えを示してあげることが重要です。

必要な場合は動画を交えながら説明したり。

SwiftUI Tutorialはそのへんめちゃくちゃ丁寧で、書いたコードがどう表示されるかをわかりやすく示していたり、

Xcode上での操作も画像で示してくれています。

また内容について理解できたかどうか、簡単なテストを設けることも多いですね。

5. 進捗を共有できる

チュートリアルはまだ学習中の状態なので、これといったアウトプットを生み出せているわけではありません。
頑張っているのにそれが成果にならない段階というのは辛いですね…？

そんな自分を励ますためにも、進捗状況を他の人に共有するというのは有効な手段かもしれません。

Next.jsのチュートリアルは進捗をTwitterで共有できるボタンが付いてました。

6. チュートリアルにはない情報の存在に気がつく

チュートリアルで「トライした人が完走すること」を目的とした場合、必要最低限の情報のみを載せることになります。

もし特定の目的（やりたいこと）がはっきりしていた人がチュートリアルの該当項目を参照した場合に、必要な情報が得られない・期待した機能が存在しないと勘違いしてしまう可能性があります（あるかな？）。

さらに深い情報を知りたい人のために、詳細情報へのリンクを（じゃまにならない形で）添えておくのが良さそうですね。

また「困ったときにどこに行けばいいか」がわかると安心して取り組むことができるかもしれません。

さいごに

今回はプログラミング関連のチュートリアルに関して自分なりに整理してみたのですが、一般的なwebサービスの導入にも活かせるポイントがいろいろありそうでした。

おまけ

学習に疲れたら体を動かそう！
というわけで？スペースマーケットで借りれる都心から近いフットサルコートを紹介しておきます。
（私はサッカー見る専なんですけどね🙂）

都心から近いフットサルコート⚽️🏃🏾‍♂️ | スペースマーケット