WebDesigner's Memorandumウェブデザイナーの備忘録

ウェブサイト内の動画キャプチャから保存して共有までをスムーズに行うChrome拡張機能「Screencastify」

Screencastify

ウェブサイト内のアニメーションを伝えたいときなど、静止画ではなく動画で撮影して他人に共有したいことがあります。
その場限りで良いのであればGyazo GIFを使うのも手ですが、動画のファイルとして残しておきたい場合には向きません。

そこで、ScreencastifyというChrome拡張機能がオススメです。

Screencastifyの特徴

  • ウェブページ内のキャプチャが可能
  • マイク音声やウェブカメラを設定して同時に録画可能
  • 保存はGoogle DriveかYouTube
  • 共有用のリンクはすぐに取得可能
  • 収録時にペンツールで線を書ける
  • クリック時のハイライト可能

かなり高機能ですし、収録時にペンツールでウェブページ上に線を描けるのが衝撃的でした。
これを使えばどこを見てほしいのかが伝えやすいですね。

個人的にはDropboxへの保存も欲しいのですが、現時点ではGoogle DriveとYouTubeどちらかへの保存となるようです。

また、無料プランの場合は月に10個までのキャプチャが可能です。

Screencastifyのインストール

ScreencastifyはChrome ウェブストアからインストールできます。

Screencastifyのセットアップ

初回アイコンクリック時はセットアップ画面が表示されます。Googleアカウントでログインする必要があるので、自分のGoogleアカウントでログインします。

Setup Step1

次にマイクの許可をします(使わない場合もとりあえず許可)。

Setup Step2

あとは自分の属性を答えます。

Setup Step3

下記の画面が表示されたらセットアップ完了です。

セットアップ完了

Screencastifyの使い方

Screencastifyを使いたいときはアイコンをクリックして、収録する場所を選択します。ウェブカメラを接続している場合は「Webcam Only」や「Embed Webcam」も使えます。

キャプチャ画面

基本的には「Browser Tab」か「Desktop」のどちらかを選択して、「RECORD」ボタンを押せば開始できます。

キャプチャ中は画面左下に下記のようなツールバーが表示され、ペンツールを使って画面上に線を書けます(キャプチャ終了するためには1番左の停止アイコンをクリック)。

ツールバー

キャプチャを終了したら、動画の確認画面が表示されるので、ここからダウンロードしたり、Google DriveやYouTubeにアップロードしてリンクをコピーすることも可能です。

撮影後の画面

Chrome拡張子なので、アイコンクリックですぐにキャプチャを開始できますし、ペンツールなどの他人に共有することを目的として機能が揃ってあるのは便利です。
無料プランだと制限がありますが、普通に使う分には問題ないですし、1つの選択肢として知っておくと良さそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね