MDN の動画コンテンツ

MDN Web Docs は動画が多いサイトではありませんが、動画コンテンツを記事の一部として使用することに意味がある場所がいくつかあります。この記事では、 MDN の記事に動画を含めることが適切な場合について説明し、シンプルだが効果的な動画を予算内で作成するためのヒントを提供します。

MDN で動画を使用する場合

技術文書、特に参考資料や上級レベルガイドに動画コンテンツを使用することには、いくつかの反対意見があります。

  • 動画は直線的です。 人々はオンラインドキュメントを最初から最後まで直線的に読むことはありません。 彼らは探すのです。 動画は探しにくいので、ユーザーは強制的に最初から最後までコンテンツを消費しなければなりません。
  • 動画はテキストよりも情報密度が低い。 何かを説明する動画を視聴するのは、同等の説明書を読むよりも時間がかかります。
  • 動画はファイルサイズが大きいので、テキストよりもコストがかかり、パフォーマンスも低い。
  • 動画にはアクセシビリティの問題があります。一般にテキストよりも制作費がかかりますが、特にローカライズや画面リーダーの利用者が使えるようにするのが大変です。
  • 最後の点に加えて、動画は、テキストコンテンツよりも編集・更新・保守がはるかに困難です。

Note: 動画を作るときにも、これらの問題を念頭に置いて、少しでも軽減できるように工夫するとよいでしょう。

多くの人気の動画サイトがあり、多くの動画チュートリアルを提供しています。 MDN は動画主体のサイトではありませんが、動画は特定の文脈で MDN に登場することがあります。

私たちが最もよく使うのは、言葉で簡潔に説明するのが難しい、ある種の指示シーケンスや複数ステップのワークフローを説明するときです。「こうして、ああして、こうなる」。 特に、複数のアプリケーションやウィンドウにまたがるプロセスや、簡単には説明できないような GUI 操作を記述する場合に便利です。「左上のアヒルのようなボタンをクリックしてください。」

このような場合、「何を意味しているのか」を見せる方が効果的なことが多いのです。 私たちは、 Firefox DevTools の機能を説明するときに、最もよく動画を使用します。

MDN の動画はどのようなものであるべきか

MDN 用の動画は以下のようにあるべきです。

  • 短い。 30 秒以下、できれば 20 秒以下の動画にするようにしましょう。 これは、人々の注意力に大きな負担をかけない程度の短さです。
  • シンプル。ワークフローはシンプルに、 2 ~ 4 つの明確なピースを作るようにしましょう。 そうすることで、よりわかりやすくなります。
  • 無音。音声は動画をより魅力的にしますが、作るのにずっと時間がかかります。 また、何をやっているのか説明しなければならないので、動画が長くなり、ローカライズのコストが(金銭的にも時間的にも)かさみます。

もっと複雑なことを説明する場合は、短い動画とスクリーンショットを組み合わせて、テキストを挟むとよいでしょう。 テキストは、動画で説明した内容を補強するのに役立ち、ユーザーはテキストと動画のどちらを頼りにしてもかまいません。 良い例として、アニメーションインスペクターの使い方を参照してください。

さらに、以下のことを考慮してください。

  • 動画は、埋め込み前に YouTube にアップロードしてください。 この用途では、アスペクト比 16:9 を推奨します。そうすれば、表示フレーム全体が埋まり、動画の上下(または左右)に醜い黒帯が発生することはありません。 そのため、例えば 1024×576、1152×648、1280×720 の解像度を選択するとよいでしょう。
  • アップロード時に見栄えが良くなるように、動画は HD で録画してください。
  • DevTools の動画では、ページのコンテンツとは対照的なテーマを選択することをお勧めします、例えば、例のウェブページが明るいテーマであれば、暗いテーマを選択してください。 それは、何が起こっているのか、どこで DevTools が始まり、ページが終了するのかを容易に理解することができます。
  • DevTools の動画では、見せたいものをすべて見せながら、 DevTools をできるだけ拡大し、問題なく見えるようにしてください。
  • デモしようとしているものがマウスカーソルで覆い隠されていないことを確認してください。
  • 画面録画ツールで、マウスクリックの視覚的なインジケーターを表示するように設定することが有用であるかどうかを検討してください。

動画ツール

動画を録画するためには、何らかのツールが必要です。 無料のものから高価なものまで、またシンプルなものから複雑なものまで、さまざまなものがあります。 もし、すでに動画コンテンツ制作の経験があるのなら、それは素晴らしいことです。 そうでない場合は、簡単なツールから始めて、動画制作が楽しくなり、より興味深い作品を作りたくなったら、より複雑なものに手を出すことをお勧めします。

次の表は、良いスターターツールのお勧めをいくつか示しています。

ツール OS コスト 後処理機能
Open Broadcaster Software macOS, Windows, Linux フリー あり
CamStudio Windows フリー 限定的
Camtasia Windows, macOS あり
QuickTime Player macOS フリー なし。単純に録画できるだけ
ScreenFlow macOS あり
Kazam Linux フリー 最小限

QuickTime のコツ

macOS をお使いの場合は、 QuickTime Player が利用できるはずです。 実はこれもかなり簡単な簡易録画機能を備えています。

  1. メインメニューから ファイル > 新規画面録画 を選択します。
  2. 画面録画 ボックスで、録画ボタン(赤い丸いボタン)を押す。
  3. 録画したい画面の領域を矩形でドラッグします。
  4. 録画開始 ボタンを押します。
  5. 録画したい動作をする。
  6. 停止 ボタンを押す。
  7. メインメニューから_File_ > Export As... > 1080p を選択し、 Hi Definition として保存します。

その他のリソース

動画を作成するためのワークフロー

以下の節では、動画を作成して MDN ページに表示させるための一般的な手順を説明します。

準備

まず、撮影したい流れを計画します。開始と終了の最適なポイントを検討します。

デスクトップの背景とブラウザーのプロファイルがきれいであることを確認します。 特に複数のウィンドウを使用する場合は、ブラウザーのウィンドウの大きさと配置を計画します。

実際に録画する内容を綿密に計画し、録画する前に何度か手順を練習してください。

  • 手順の途中で動画を開始するようにしないでください。視聴者が操作を理解するのに十分な文脈を持っているかどうかを考慮してください。 例えば、短い DevTools の動画では、 DevTools を開くところから始めて、視聴者が方向感覚を掴めるようにするのがよい考えです。
  • 操作の内容を考え、スピードを落とし、明確にしてください。 ある動作(例えば、アイコンをクリックする)をしなければならないときは、ゆっくり明確に操作してください。例えば、
    • マウスをアイコンの上に移動させる
    • 強調またはズーム(常にではなく、必要性を感じるかどうかによる)
    • 一旦停止する
    • アイコンをクリックする
  • UI を表示する部分のズームレベルを計画します。 すべての人が高解像度で動画を見ることができるわけではありません。 後処理で特定の部分をズームすることができますが、事前にアプリをズームするのも良い考えです。

Note: あまりにズームしすぎて、見せている UI が見慣れなくなったり、醜く見えたりならないようにしてください。

録画

見せたいワークフローを録音するときは、スムーズかつ着実に流れを進めてください。 ボタンをクリックするなど、重要な場面では 1 〜 2 秒の間、一時停止してください。 マウスポインターが、デモを行う上で重要なアイコンやテキストを隠してしまわないように注意してください。

最後に 1 ~ 2 秒の間を置いて、流れの結果を示すことを忘れないでください。

Note: QuickTime Player のような本当にシンプルなツールを使っていて、何らかの理由で後処理ができない場合、見せたい領域を表示するために正しいサイズのウィンドウをセットアップしておく必要があります。 Firefox DevTools の Rulers Tool を使うと、ビューポートが録画に適したアスペクト比になっていることを確認することができます。

後処理

後処理では、重要な瞬間を強調することができます。 ハイライトはいくつかの要素で構成されており、それらを組み合わせて使うことが多いでしょう。

  • 画面の一部を拡大する。
  • 背景をフェードさせる。

ワークフローの重要な瞬間、特に詳細が見えにくい部分を強調します。例えば、特定のアイコンをクリックする、特定の URL を入力するなどです。 ハイライトは 1 〜 2 秒を目安に。 ハイライトの最初と最後に、短いトランジション(200~300ミリ秒)を追加するとよいでしょう。

ズームイン、ズームアウトの連続では、視聴者が船酔いしてしまいますので、ほどほどに。

必要であれば、動画を希望するアスペクト比に切り抜いてください。

アップロード

現在 MDN で動画を表示するには YouTube にアップロードする必要があります。例えば mozhacks チャンネルなどです。 もし適切な場所がなければ、 MDN スタッフにアップロードを依頼してください。

Note: 動画がページの文脈から意味をなさない場合は "unlisted" としてマークしてください(短い動画であれば、おそらく意味をなさないでしょう)。

埋め込み

アップロードした動画は、EmbedYouTube というマクロを使って、ページ内に埋め込むことができます。 これは、ページ内の動画を表示させたい位置に以下のように挿入することで使用します。

{{EmbedYouTube("you-tube-url-slug")}}

マクロ呼び出しで取得されるプロパティは、URL全体ではなく、動画のURLの末尾にある文字列の1つです。 例えば、ページインスペクター 3 ペインモードの記事に埋め込まれている動画は、 https://www.youtube.com/watch?v=ELS2OOUvxIw で公開されているので、必要なマクロ呼び出しは次のようになります。

{{EmbedYouTube("ELS2OOUvxIw")}}