こんにちは、シンヤです！
今回は【新しい】やまもとりゅうけんさん発「オンラインクラス」の使い方をスマホで解説を解説いたします。

---

「オンラインクラス」とは

オンラインクラスとは、エンジニア系インフルエンサーの「やまもとりゅうけん」さんが発案したWebサービスです。

サービス内容を簡潔に説明すると、

誰でもオンラインでの学習教材を作れるWebサービス

となると思います。
海外ではありますが、日本では同様のサービスはありそうでなかった印象があります。

詳しくは以下の動画で「やまもとりゅうけん」さんが動画で解説されております。

「やまもとりゅうけん」さんとは

前述の通り、エンジニア系のインフルエンサーの一人です。
フリーランスエンジニアとして、大手企業での案件を請負いつつ、ブログでの情報発信を続けた方です。

有名どころでいうと「人生逃げ切りサロン」という国内最大級のオンラインサロンを運営されております。

---

スマホで使えるかが超重要

現代ではほとんどの人がスマホでインターネットを使います。
つまりネット上に展開される「Webサービス」は、必然的にスマホでの利用者が増えます。

パソコンで使えるより、スマホでも問題なく使えることの方が超重要です。
そのため今回は「オンラインクラス」をスマホで使えるか検証してみました。

ただサービス内容的に、想定されてる顧客は、

• 塾経営者
• 教材販売者

などITリテラシーが高い層と推察されます。
しかし、外出中に講義の補正や確認を行う場合はあるので、スマホ対応は重要となりそうです。

検証のステップは、以下としました。

1. 「会員登録」をする
2. 「プラン」を選択する
3. 「コース」を作成する
4. 「スタッフ」を追加する
5. 「受講生」を追加する
6. 「感想」を閲覧する
7. 「記事」を作成する
8. 「お知らせ」を投稿する
9. 「設定」の項目解説
10. 「マイページ」の閲覧

この4つで解説いたします。

---

1. 「会員登録」をする

Step1
まずこちらのランディングページに飛びます。

Step2
下までスクロールして【無料で使ってみる】をタップします。

Step3
入力画面が表示されるので、情報を入力して【登録する】をタップします。

Step4
メールアドレスに送られたURLをタップして、ログイン情報を入力します。

---

2. 「プラン」を選択する

Step1
お好きなプランをタップします。

私は「フリープラン」を選択しました。
以降はフリープランの場合での画面・機能のご紹介となります。

Step2
情報を確認して【決済を完了する】をタップします。

Step3
登録完了画面が表示されたら【ダッシュボードへ】をタップします。

---

3. 「コース」を作成する

Step1
ダッシュボードが表示されたら【コースを作成する】をタップします。

Step2
コース名と日数を入力して【コースを作成する】をタップします。

Step3
【講座カテゴリを新規作成】をタップします。

Step4
情報を入力し【カテゴリを作成】をタップします。

Step5
【講座ブロック追加・編集】をタップします。

Step6
【先頭にブロックを追加】をタップします。

Step7
お好きなブロックを選択します。

Step8
情報を入力して【保存】をタップすると、ブロックが保存されます。

Step9
Step6〜Step8を繰り返し行いコンテンツを追加します。 全て追加したら【編集完了】をタップします。

「カテゴリーのプレビュー」を表示する

編集内容を確認したい場合は【プレビュー】をタップします。

「公開・非公開」の設定

カテゴリの編集が完了したら、コースから【公開・非公開】の設定が行えます。

「コースのプレビュー」を表示する

コースの【プレビュー】をタップすると、公開中のカテゴリをまとめて確認できます。

---

4. 「スタッフ」を追加する

Step1
左上の三本線をタップして【スタッフ】をタップします。

Step2
【スタッフ新規登録】をタップします。

Step3
情報を入力して【登録】をタップします。

Step4
登録が完了しメールアドレス宛に認証メールが送信されます。

上記で講師側の対応は完了になります。
次は招待されたスタッフがオンラインクラスに登録する手続きを解説します。

招待されたスタッフがオンラインクラスに登録する

Step1
招待メールに記載されたリンクをクリックして、パスワードを設定します。

Step2
ダッシュボードが表示されたら、オンラインクラスへの登録は完了となります。

スタッフの詳細情報を見る

【スタッフ情報】をタップすると、スタッフの詳細な情報が表示されます。

---

5. 「受講生」を追加する

Step1
メニューから【受講生】をタップして【受講生新規登録】をタップします。

Step2
情報を入力して【受講生登録】をタップします。

Step3
受講生が登録されます。

受講生としてログインする

パスワード設定をするとログインができます。

しかしなぜか、ログインが失敗してしまいました。
もしかしたら、私の受講生登録のやり方が悪かったのかもしれません💦

---

6. 「感想」を閲覧する

Step1
メニューから【感想】をタップします。

余談ですが、メニューを開くたびに右下に現れる「お知らせ」が表示されるので、「使い勝手」を著しく損なわせています💦

Step2
コースを選択し、カテゴリーとブロックを選択します。

実際に講義を公開しているわけではないので、感想は届いておりません。
よって実際に感想が寄せられた画面は、確認することができませんでした🙇

---

7. 「記事」を作成する

Step1
メニューから【記事】をタップします。

Step2
【作成】をタップします。

Step3
フォルダ名を入力し【作成】をタップします。 フォルダの作成が完了します。

なぜがリンク切れになっている画像が表示されます💦

Step4
記事の内容を入力して、完了したら【新規投稿】をタップします。

記事にはMarkdown記法を使うこともできます。

Step5
画面が切り替われば記事の投稿が正常に完了しています。

カテゴリーに投稿した記事を紐付ける

Step1
カテゴリーに移動し【記事】のブロックをタップします。

Step2
内容を入力し【保存】をタップすると、記事の紐付けが完了します。

---

8. 「お知らせ」を投稿する

Step1
メニューから【お知らせ】をタップします。

Step2
【新規作成】をタップします。

Step3
記事の内容を入力します。

記事にはMarkdown記法を使うこともできます。

Step4
下までスクロールし【新規作成】をタップします。 記事の投稿が完了します。

---

9. 「設定」の項目解説

メニューから「設定」の変更ができます。

引継ぎ

引き継ぐカリキュラムを指定できます。

引き継ぐカリキュラムがないので、該当画面の写真のみ記載いたします。

API設定

【APIキーを新規に作成する】をタップします。 APIキーの作成が完了します。

Qiitaの公式リファレンスを見る限り、外部から講義や講師を取得できるようになるAPIキーのようです。

コース招待URL

Step1
【新規作成】をタップします。

Step2
情報を入力し【作成】をタップすると、招待URLが作成されます。

Stripe連携

チェックをONにすることで、Stripe連携が使えるようになります。

手持ちのサロンやコミュニティStripeを使っている場合、サロンのユーザーがオンラインクラスの講座を閲覧できるようになるみたいです。

---

10. 「マイページ」の閲覧

右上のアイコンから、マイページを閲覧できるようになります。

プランの変更

「契約プラン」の【決済プランを変更する】から、プランを変更することができます。

---

考えうる改善点

サービスを一通り使ってみて、私は以下のような課題を感じました。

サービスの戦略を、私は熟知しておりません。
あくまで表面上に現れるUIを通じて、課題感だと感じるもののみ記載いたします。

スマホ時でのUXはあまり良くない

上記に尽きると思います。
おそらくPCでの利用を想定しているかと思います。

以下に「なぜそう感じるか」を具体的に列挙いたします。

• トップページの目立つ場所に「会員登録」「ログイン」の動線がない
• フリープランがあるなら、早急に「会員登録」させても問題ない。
  また「ログイン」の動線がなく、再度ログインするにはURLを叩かなくてはいけない。
• ダッシュボードからメニューを開くと、毎回右下のお知らせと被ってしまう
• こちらはおそらく考慮漏れ。
• 画面右下のお知らせが、何回消しても再表示されてしまう
• こちらもおそらく考慮漏れ。
  ユーザーは再度表示させたくなくて消しているのに、ダッシュボードを開くたびに「お知らせ」が表示されるのは、使い勝手が悪い印象を与える。
• サービスの設計が「非同期通信」ではない
• おそらく技術的に負荷が高いからだと思われる。
  非同期通信であれば外部のAPIを使用でき、かつレスポンスが高い画面遷移が実現できる。
  UXにこだわり抜くなら、非同期通信を採用したい。
• ヘッダーに表示されるコース名の存在価値
• ダッシュボードやコースを選択した際に、ヘッダーに表示されるコース名。
  スマホだと右端にくると字面が省略され、使い勝手が悪い印象を与える。
  かつコース名はファーストビューに表示されているので、ヘッダーに表示される必要性はあまり感じない。
• 「記事」や「お知らせ」の画面での使い勝手が悪い
• 表を使ったレイアウトを採用してしまったからだと思われる。
  縦長のスマホだと横幅が少なすぎて狭苦しい印象を与え、結果として使い勝手が悪い印象を与える。
• 「記事」や「お知らせ」の投稿画面の使い勝手が悪い
• おそらくスマホでの利用を想定していないと思われる。
  左右二画面にしたことにより、縦長のスマホだと横幅が少なすぎて文字が打ちにくく、結果として使い勝手が悪い印象を与える。
• なお「非同期通信」であれば、noteのような一画面でスマホでも使い勝手が良い記事投稿画面を作ることも可能。

上記の課題を感じました。
同時に解決可能か、解決させるべきかを判断します。

• ⭐️トップページの目立つ場所に「会員登録」「ログイン」の動線がない
• 対処可能。
  目立つ場所、例えば「ヘッダー」などに2点の動線を追加すれば良い。
• ⭐️ダッシュボードからメニューを開くと、毎回右下のお知らせと被ってしまう
• 対処可能。
  暫定的な対応として、お知らせかメニューの「z-index」を調整すれば対処は容易。
• ⭐️画面右下のお知らせが、何回消しても再表示されてしまう
• こちらもおそらく対処可能。
• ❌サービスの設計が「非同期通信」ではない
• 対処不可能。
  サービス全体を同期通信から非同期通信へ移行するのは、技術的難易度が高く、かつ成果も未知数な為現実的ではない。
• ⭐️ヘッダーに表示されるコース名の存在価値
• 対処可能。
  影響範囲を調査し、消しても問題ないなら削除すれば良い。
• 表示させる必要性があれば、用途を再検討の上続投を考える。
• ⭐️「記事」や「お知らせ」の画面での使い勝手が悪い
• 対処可能。
  スマホでも崩れない表組みのレイアウトを考えれば良い。
  例えば、PCでは左右二画面だが、スマホでは横一画面となるレイアウトなど。
  レスポンシブデザインを応用すれば対処可能。
• ⭐️「記事」や「お知らせ」の投稿画面の使い勝手が悪い
• 対処可能。
  記事投稿画面など、一画面を「非同期通信」に設計し直すのは容易。
  非同期通信での使用を前提の元、UIを組みなおせば対処は可能。

仮に私がプロジェクトを指揮していたら、上記のような意思決定をすると思います。

かつ上記のような「マトリクス図」を使い、洗い出した課題に優先順位をつけて、一つずつ対処していきます。

---

まとめ

• やまもとりゅうけんさんが「オンラインクラス」というサービスをリリースした
• 独自に講座を作れるサービス
• スマホ時での使い勝手をチェック
• 結果、使い勝手はあまりよくなかった
• おそらくPCでの利用を想定していると思われる

今回は以上になります。