そのためには指定の認定プロジェクトを完成させる必要がありますが、いざ取り組もうと思ってもどこから手を付けたらいいか分からなくて挫折してしまう人も多いようです。

そこで、YouTube チャンネル freeCodeCamp Japanese にて HTML と CSS を扱う新講座を公開しました。日本語チャンネルとして初のオリジナル講座です。

この講座では、レスポンシブウェブデザイン認定証に必要な最初の認定プロジェクト「アンケートフォーム」に実際に取り組みながら、HTMLとCSSの基本、問題の解決方法、作業に役立つツールなどについて学習します。

認定プロジェクトに限らず、自分の力でウェブ開発に取り組むために役立つ知識が学べます。

この講座は私、松田が作成しました。私自身も freeCodeCamp カリキュラムを通してウェブ開発を学んだのですが、他のプログラミング教材にない freeCodeCamp の魅力だと感じたのが、この認定プロジェクトでした。

ざっくりとしたユーザーストーリーを基に自分で考えてコードを書いていく経験は、ただチュートリアルをこなしているだけでは得られない実力を付けるためにとても役立ったと感じています。

その経験を通して得たものを、この講座で解説しています。

この講座では以下の流れでプロジェクトに取り組みます。

• Visual Studio Code の導入
  • 日本語言語パック、拡張機能のインストール
• HTML ボイラープレートを書く
• ユーザーストーリーの確認
• 最低限のコードを書く
  • プレビューと自動テストの活用方法
  • MDN Web Docs の紹介
• HTML の改善
• CSS を書く
  • 開発者ツールの活用
• 画像の追加方法
• フォーラムでの質問方法

本講座は YouTube で全編無料公開されています。(全 2.5 時間)

この度、YouTube チャンネル freeCodeCamp Japanese にて C++ 入門講座を公開しました。

この講座では、C++ の基礎の基礎として、環境構築の手順から、さまざまなデータ型の扱い方、if 文、for 文などの制御構文、ポインタやクラスの説明など、プログラミング言語を学び始めるにあたって押さえておきたい文法の基礎を中心に学びます。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている「C++ Tutorial for Beginners - Full Course」を元にした日本語版として作成されました。

日本語版動画は、今回も freeCodeCamp コントリビューターの Besshy さんにより作成されました。Besshy さんは慶應義塾大学の大学院生で、「KCS :: Keio Computer Society」という YouTube チャンネルも運営しています。

プログラミング言語入門シリーズ第三弾として、英語版チャンネルでも人気の高い C++ の入門講座を日本語化してくださいました。

この講座では以下のトピックを学習します。

• 環境構築 (Windows / macOS)
• [演習] 三角形を書く
• 変数
• データ型
• 文字列を扱う
• 数値を扱う
• ユーザーの入力を受け取る
• [演習] 計算機を作る (1)
• 配列
• 関数の定義と引数
• 関数の戻り値
• if 文
• 比較演算子
• [演習] 計算機を作る (2)
• switch 文
• while 文
• [演習] 推理ゲームを作る
• for 文
• [演習] 累乗を計算する関数
• 二次元配列と for 文のネスト
• コメントアウト
• ポインタ
• クラスとオブジェクト指向
• クラスとコンストラクタ
• オブジェクト内の関数
• Setter と Getter
• クラスの継承

本講座は YouTube で全編無料公開されています。(全 5 時間)

この度、新たに JavaScript 入門講座を YouTube チャンネル freeCodeCamp Japanese にて公開しました。

この講座では、JavaScript の学習を始めるにあたって知っておきたい基礎として、コードの実行方法やコメント、簡単な四則演算、if 文や for 文などの基本的な文法から、近年主流となっている ES6 のアロー関数、クラス、import/export などの新しい文法まで段階を追って学習します。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている「Learn JavaScript - Full Course for Beginners」を元にした日本語版として作成されました。

日本語版動画は freeCodeCamp コントリビューターの Besshy さんにより作成されました。Besshy さんは慶應義塾大学の大学院生で、「KCS :: Keio Computer Society」という YouTube チャンネルも運営されています。

freeCodeCamp Japanese チャンネルの第一弾動画「Python 入門: 基礎から始める集中講座」に続き、今回は JavaScript の入門講座を作成してくださいました。

この講座では以下のトピックを学習します。

• JavaScript の環境構築、実行
• コメントアウト
• データ型と変数
• 代入演算子 (=)
• 四則演算 (足し算、引き算、掛け算、割り算)
• インクリメント・デクリメント
• 浮動小数点
• 余りの計算
• 複合代入演算子 (+= -= *= /=)
• エスケープシーケンス
• 文字列の連結
• 文字列の長さの取得
• 文字列の要素を取り出す (ブラケットノーテーション)
• イミュータブルな文字列
• 配列、多次元配列
• インデックスを使った配列の要素へのアクセス
• 配列の操作 (push() pop() shift() unshift())
• 関数
• 引数
• スコープ (グローバルスコープ、ローカルスコープ)
• 真偽値 (Boolean)
• if 文を使った条件分岐
• 比較演算子 (== === != !== > <)
• 論理演算子 (&& ||)
• switch 文
• JavaScript のオブジェクト
• オブジェクトの値の変更、追加、削除
• while ループを使った繰り返し処理
• for ループを使った繰り返し処理
• do...while 文を使った繰り返し処理
• 乱数を発生させる
• parseInt() 関数
• 条件 (三項) 演算子
• var、let、const
• オブジェクトが変更されることを防ぐ
• アロー関数
• 関数の default 引数
• Rest 演算子
• Spread 演算子
• 分割代入
• テンプレートリテラル
• オブジェクトの簡潔な作り方
• オブジェクト内での関数の定義の仕方
• コンストラクタ関数とクラス
• getter と setter
• require と import

本講座は YouTube で全編無料公開されています。(全 4.5 時間)

この度、日本語版 YouTube チャンネル「freeCodeCamp Japanese」として初の動画講座「Python入門: 基礎から始める集中講座」を公開しました。

この講座では、Python の基礎を環境構築と Hello World から、条件分岐などの基本的な構文、クラスとオブジェクトの利用まで総合的にカバーします。Python に初めて触れる人、今一度基礎をしっかり固めたい人におすすめの講座です。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている一番人気の動画「Learn Python - Full Course for Beginners [Tutorial]」 を元にした日本語版として作成されました。

日本語版動画作成者の Besshy さんは慶應義塾大学の大学院生で、AI や量子コンピューターの研究をされています。また「KCS :: Keio Computer Society」という YouTube チャンネルも運営されており、そちらでもプログラミングやコンピューターサイエンスに関する動画を多数投稿されています。この度動画講座作成という形で freeCodeCamp コミュニティに貢献してくださいました。

この講座では以下のトピックを学習します。

• Python と PyCharm のインストール、環境構築
• Hello World
• [演習] 三角形を書いてみる
• 変数とデータ型
• 文字列を扱う
• 数値を扱う
• ユーザー入力を受け取る
• [演習] 基礎的な計算機を作る
• リスト
• リストを操作する関数
• タプル
• 関数
• Return 文
• If 文
• If 文と比較演算子
• [演習] 計算機を改善する
• 辞書
• While ループ
• [演習] Guessing Game を作る
• For ループ
• [演習] 累乗を計算する関数を書く
• 二次元配列と For 文のネスト
• [演習] 翻訳機を作る
• コメント
• Try / Except
• ファイルの読み込み
• ファイルの書き込み
• モジュールと pip
• クラスとオブジェクト
• [演習] クイズゲームを作る
• メソッド
• 継承
• Python のインタープリター

本講座は YouTube で全編無料公開されています。(全 6.5 時間)

(翻案・編集: Yoko Matsuda)

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

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

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

トピックの選択

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

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

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

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

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

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

1. ある技術・プログラミング言語・フレームワークなどについての総合講座
   例:
   • Learn Python - Full Course for Beginners (Python を学ぶ - 初心者向け完全講座)
   • Postman Beginner's Course - API Testing (Postman 入門講座 - API テスト)
   • Flask Course - Python Web Application Development (Flask 講座 - Python によるウェブアプリ開発)
2. 現実的、実用的なプロジェクトの開発についての講座
   例:
   • Create an Instagram Clone with React, Tailwind CSS, Firebase (React, Tailwind CSS, Firebase で作る Instagram クローン)
   • Code a Discord Bot with JavaScript (JavaScript で作る Discord Bot)
   • E-commerce Website With Django and Vue Tutorial (Django と Vue で作る EC サイトのチュートリアル)

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

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

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 マイクの方がほぼ確実に良い音質で録音できます。もし予算に余裕があれば以下のマイクを検討してみてください。

• Blue Yeti マイクロフォン
• オーディオテクニカ AT2005USB マイクロフォン
• Blue Snowball

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

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

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

講座の動画

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

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

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

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

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

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

• Canon EOS 80D デジタル一眼レフカメラ
• Canon EOS Rebel T6 デジタル一眼レフカメラ
• Panasonic LUMIX DMC-FZ1000

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

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

画面の録画

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• DaVinci Resolve
• OpenShot
• VideoPad
• Lightworks

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

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

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

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

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

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

優れた技術講座の例

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

終わりに

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

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

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