原文: How to Create a Great Technical Course

(翻案・編集: Yoko Matsuda)

この記事では、優れた技術講座動画の作り方を学びます。

私は freeCodeCamp.org の YouTube チャンネル (英語版) を運営しています。freeCodeCamp.org の YouTube チャンネルでは、さまざまなコントリビューターによって作成された技術・プログラミングに関する講座の動画を投稿しています。多くの場合、この記事のガイドラインに沿った動画が freeCodeCamp チャンネルに適しています。

技術的な YouTube 動画講座を設計する方法

トピックの選択

あなたの講座に適したトピックを選ぶことが重要です。あなたが上手に教えられると思うトピックを選びましょう。

トピックについて豊富な経験があるとベストですが、事前の経験が必須というわけではありません。トピックについての知識が十分でないなら、そのトピックについてしっかり教えられるように多くのリサーチを行う必要があります。

また、人気のあるトピックについての講座は人気のないトピックよりも多く視聴される傾向にあります。たとえ人気のないトピックの講座の方が優れた講座であってもです。

トピックを選ぶ上で人気だけが唯一の基準ではないものの、一つの判断要素として役立ちます。人気のあるトピックを見つけるには、Google Trends を利用する、YouTube で検索して他のチャンネルで最も多く視聴されているトピックを調べるなどの方法があります。

freeCodeCamp チャンネルでは、比較的マイナーなトピックも含め、幅広い種類の講座を投稿しています。また、90 分から 24 時間の長さの包括的な講座を投稿しています。短い動画に適したトピックは freeCodeCamp チャンネルには適さない可能性が高いです。

freeCodeCamp チャンネルで投稿している動画には、大きく分けて下記 2 つのタイプがありますが、両方の要素を持つ場合もあります。

  1. ある技術・プログラミング言語・フレームワークなどについての総合講座
    例:
  2. 現実的、実用的なプロジェクトの開発についての講座
    例:

講座のタイトルとサムネイルの作成

講座のタイトルとサムネイルはとても重要です。

freeCodeCamp チャンネルで講座動画を公開する場合、タイトルとサムネイルは freeCodeCamp 側で作成します。その場合もご意見、ご提案は歓迎します。

講座を作成する前にタイトルを決めると良いでしょう。そうすることで、講座のトピックに集中しやすくなります。トピックにフォーカスした講座は視聴者にとっても理解しやすいものになります。

ほとんどの場合、長くあいまいなタイトルよりも、視聴者が学ぶ内容を明確に伝える簡潔なタイトルの講座の方がはるかに優れたパフォーマンスを発揮します。

タイトルには検索キーワードとなる語をできるだけ先頭近くに含めると良いでしょう。視聴者はプログラミング言語名を目に留めたり、検索したりする傾向があります。そのため、特定のプロジェクトを作成する内容の講座の場合、プログラミング言語の名前をプロジェクトのタイトルより前に配置すると良いでしょう。

また、視聴者は「チュートリアル」や「講座」といった用語を含めて検索することが多いため、タイトルにこれらを追加することも役に立ちます。

良いタイトルの例:

  • 「HTML Full Course - Build a Website Tutorial」(HTML 完全講座 - ウェブサイト制作チュートリアル)
  • 「Native Android App Tutorial: WhatsApp Clone」(Android ネイティブアプリのチュートリアル: WhatsApp クローンの作成)
  • 「OpenGL Course - Create 3D and 2D Graphics With C++」(OpenGL 講座 - C++ で作る 3D & 2D グラフィックス)

悪いタイトルの例:

  • 「How to build a social media app with Python (Django) - Setting up the project」(ソーシャルメディアアプリを Python (Django) で作成する方法 - プロジェクトのセットアップ)
  • 「Creating a Flappy bird game for an Android phone」(Flappy bird ゲームを Android スマートフォン向けに作成)
  • 「Number Systems」(記数法)

視聴者層を見極める

視聴者を念頭に置いてください。あなたの講座のターゲットは、初心者、中級者、上級者のどの視聴者でしょうか?

タイトルと講座内容の両方においてターゲット層をはっきりさせましょう。

講座全体の設計

講座は導入部から開始します。導入部でははっきりと簡潔に、学習者にとってその講座が重要である理由を伝えるようにしましょう。

その講座を見るべき理由と、何が学べるのかが、視聴者にすぐ分かることが重要です。

導入部は短くし、できるだけ速やかに実際の講座内容に入ることも重要です。視聴者が目的としている情報を教える前に時間を長く取りすぎると、視聴者が引き返して別の講座を選ぶリスクが高まります。

導入部の長さについて厳密なルールはありませんが、動画の最初の 10 秒で講座の概要が説明されていると良いでしょう。

講座を設計する際には、印象的でクリエイティブな例と、必要に応じて図表も用いるようにしましょう。講座では必ず、何をどうやるかだけでなくなぜやるかが伝わるようにしてください。

最後に、動画の終わりでは必ず講座で学んだ重要な点の要約を提供しましょう。

スライドの設計

スクリーン上のスライド、またはテキストを設計する際は、すべてのテキストをできるだけ大きくすることを心がけましょう。また、テキストと背景のコントラストを適切につけましょう。コントラストや配色が近すぎると読みづらくなります。特に視覚障害を持つ人々にとっては尚更です。

もし freeCodeCamp のデザインに合わせたければ freeCodeCamp スタイルガイドに記載されている色やフォントを使用しても構いません。

図表・画像・色は、動画内で話している内容を補完・補強するような使い方をしてください。

視聴者の興味を持続させるため、画面に表示されるものを頻繫に変化させるようにしてください。原則として、同じスライドや映像に 15 秒以上とどまらないようにしましょう。ただし、画面上でコードを入力している間はその限りではありません。

コードの準備

講座で使用するコードは必ず前もって準備してください。特定のプロジェクトを作成する方法を教える講座の場合、特に重要です。

コードはクリーンで読みやすいものにしましょう。複雑にする理由がない限りは、視聴者が理解しやすいように、できるだけシンプルなコードを用いるようにしてください。

講座の内容によってはユーザーがダウンロード可能なスターターコードを作成すると良いでしょう。

完成形のコードはぜひ、ユーザーが入手可能な形で公開してください。GitHub での公開が一番シンプルで一般的な方法でしょう。

YouTube の技術講座を収録する方法

収録の際に最も重要なことは以下の 3 つです。

  1. 良いマイクを使用すること。
  2. コードを画面に表示する場合は、できるだけ大きく表示すること。
  3. 解像度が 1080p (最低でも 720p) であること。

音質が悪かったりコードの表示が小さいと、視聴者は動画の内容をよく見る前に視聴をやめてしまうでしょう。

収録の際、考慮すべき 3 つの分野があります。音声、映像、画面キャプチャーです。

講座の音声

パソコンに内蔵されているマイクより、USB マイクの方がほぼ確実に良い音質で録音できます。もし予算に余裕があれば以下のマイクを検討してみてください。

マイクを買う余裕がない場合は、スマートフォンでの録音を試してみましょう。機種によりますが、スマートフォンで録音された音声のほうがパソコンのマイクより音質が良いことがあります。

image-65
マイク

音声がはっきりとクリアに聞こえるように録音しましょう。クリッピング、音声のひずみ、気が散るバックグラウンドノイズなどがないようにしてください。バックグラウンドノイズが目立つ場合は、必要に応じて編集や再録音を行ってください。

聞く人が引き込まれるような、自信に満ちた調子で話すことを心がけてください。自然なペースで、会話調で話しましょう。ぎこちない空白や「えー」「あー」のような言葉は避けましょう。

講座の動画

必須ではありませんが、少なくとも動画の始めと終わりにはあなた自身がカメラに映るようにすると良いでしょう。

教えている人の姿が見えると視聴者は講座をより身近に感じることができます。

チュートリアル全体を通して自分を画面に映すのを好む人もいます。それもすばらしいです!

ここだけの話ですが、私がコードの入力中に自分を画面に表示しないのには理由があります。それは、私がたくさん失敗するからです。私は講座をスムーズに見せるために多くの編集を加えています。もし私が画面に表示されていたら、たくさんのジャンプカットが挟まれることになり、どれだけ多くの編集が必要かということと、実はコードを書くのが下手なことが視聴者にバレてしまうでしょう。😜

もし自分をカメラに映す場合、最も安く済む方法はパソコンのウェブカメラまたはスマートフォンのカメラを使用することです。多くのスマートフォンはかなり高品質の動画を撮影できます。

動画の品質を更に上げたい場合は以下のカメラを検討してみてください。 (訳注: 2021年6月時点の情報です。)

image-66
カメラ

動画を撮影する前に、撮影場所の背景を慎重に検討してください。画面の中に視聴者の気が散るものがないようにしましょう。

動画のフレーミング (構図) についても考慮しましょう。あなたが話している場面であれば、頭の上に余白を少しだけ空けると良いですが、空けすぎないようにしてください。

image-97
動画の構図

画面の録画

Windows の場合、画面録画を開始するショートカットキーがあります。Windows キー + Alt + R です。

macOS では、コンピューターにインストールされている QuickTime を用いて画面を録画できます。

あなたが話している映像と同時に画面の映像を表示したい場合は、無料の OBS Studio で設定できます。

とはいえ、OBS はライブ動画での使用のみをおすすめします。画面の録画と話している映像の録画は個別に行った方が良いでしょう。後で 2 つの映像を編集ソフトウェアでまとめることができます。その方がより柔軟性が高くなります。

画面を録画する際には、常にメインの内容が画面のできるだけ多くのスペースを占めるようにしてください。意外なことに、プログラミングチュートリアル視聴者の約三分の一はスマートフォンで視聴しています。すべてのテキストをできるだけ大きく表示してください。適切な理由がない限り、ウィンドウは全画面表示してください。

フォントサイズに関する厳密なルールはありませんが、テキストがスマートフォンの画面上で読めるかどうかを常に考慮してください。

チュートリアルを収録する際には、モニターを 2 つ使用すると便利です。ひとつは動画用に録画して、もうひとつは台本や完成形のコードの表示用に使うと良いでしょう。

プログラミングチュートリアルの音声をより洗練された物にするために、一部の人が実践している秘密の方法があります。まずは、プログラミングチュートリアルを収録してください。次に、話したセリフを書き起こし、その文字起こしに細かな編集を加えて流れを改善します。

最後に、編集したセリフを再録音し、最初に録画した動画に追加します。チュートリアルで次に何を説明するかを考えながら話していたときよりも表現力豊かに、面白く話すことができるでしょう。

画面録画についての最後のアドバイスがこちらです。

  • スライドショーの録画中はカーソルをウィンドウの外に置くようにしてください。
  • タスクバー、アプリのアイコン、通知、時計など不要なものはすべて隠してください。

YouTube の技術講座を編集する方法

動画は必ず編集し、流れをよりスムーズにしたり、ミスをした部分をカットしたりしましょう。

ファンの音、咳、その他視聴者の気が散るような雑音は編集によって除去するか低減してください。連続的なハムノイズ (ブーンという音) や残響は編集ソフトウェアやプラグインで除去できます。

単純な編集ならば、Mac の iMovie や Windows のムービーメーカーでも可能です。しかし、これらのプログラムの機能は非常に限られたものです。

最も人気がある動画編集ソフトウェアの 2 つは、Premier Pro と Final Cut Pro でしょう。どちらも必要な機能のすべてを備えています。ただし、高額です。

無料の動画編集ソフトウェアには以下のような選択肢があります。

動画編集にどのソフトウェアを使うか決めたらいくつかチュートリアルを見て基本機能を学ぶと良いでしょう。

できれば、ジャンプカットを使って編集するのは避けてください。ジャンプカットとは連続した動画からある部分を切り出すことで、そこがカットされたことが明らかに分かります。

ジャンプカットを避けるため以下 2 つの方法がよく使われます。

  1. カットが発生するところに画像や他のビデオクリップを配置する
  2. カットの後にズームインして、カットが元から意図していたものであるように見せる

技術講座の作成におけるその他のヒント

  • 各講座の内容をできるだけ独立させるようにしてください。特に初心者向けの講座の場合は重要です。ソフトウェアをインストールしたり、依存関係を解決するところから、プロジェクトを完成させるまで、すべてのプロセスを見せるようにしましょう。視聴者はすでにやり方を知っている部分を飛ばして視聴できます。
  • 講座には必ず実際の人間の声を使用してください。コンピューターによる合成音声を使用したり、ナレーション無しで音楽だけを使用することは避けてください。(訳注: 以下は英語版チャンネルへのコントリビューションを検討している場合) もし英語が非常に苦手であれば、あなたの母語で動画を作成することを検討するか、または英語のネイティブスピーカーにあなたの書いた台本を読んでもらうようにしましょう。
  • プログラミングチュートリアルに BGM は使用しないでください。気が散る原因となります。チュートリアルを見ながら音楽を聴きたい視聴者は各自で音楽をかけることができます。
  • 講座の中であなたの年齢について言及しないでください。

優れた技術講座の例

以下は、参考になる優れた講座の例です。

終わりに

優れた講座を作成するには、単にその技術について詳しく知ること以上に練習も必要です。より多くの講座を作成すれば、より良い講座が作れるようになるでしょう。

この記事のガイドラインに沿った講座を作成し、freeCodeCamp.org チャンネルで公開することに興味がありましたら、下記担当者までメールにてお問い合わせください。

  • 日本語版チャンネル
    担当: 松田 (日本語・英語対応可) yoko [at] freecodecamp [dot] org
  • 英語版チャンネル
    担当: Beau Carnes (英語対応のみ) beau [at] freecodecamp [dot] org