一緒に勉強系や筋トレ系の動画でよく見るカウントダウンタイマー。

実際に自分の動画でも作ろうとしても、素材がフリーではなく有料のものばかりでした。

自分なりに諸々調査した結果、一番楽にカウントダウンタイマーの素材が作れる方法を見つけました。

動画用のカウントダウンタイマー素材の作り方について、本記事にて解説していきます。

この記事は以下のような方を対象者としています。

本記事の対象者

  • Youtuberの方
  • カウントダウンタイマーの素材を欲している方
  • 動画でカウントダウンタイマーを組み込みたい方

目次

前置き : カウントダウンタイマーとは?

最近勉強系や筋トレ、ヨガ系の動画でも表示されているタイマーのことです。
Tranquilpeak
実際に自分でもこのような動画を作りたいと思っても、探してみるとなかなかフリーの素材は少ないと思います。

今回の方法であれば、30分くらいで簡単にタイマー素材作りの準備ができます。

また余談ですが、最近一緒に勉強の動画を作成しチャンネルにアップロードいたしました。

Lofi系BGM(リラックスできるHiphop系のBGM)と雨音をかけ合わせて、なるべく勉強に集中できる動画を作りました。

ぜひよろしければ、動画を見ながら一緒に勉強していただけますと幸いです。

動画用のカウントダウンタイマー素材作りで必要なこと

今回の記事で紹介するカウントダウンタイマーの作り方は下記の通りです。

ポイント

  • Pythonでカウントダウンタイマー用のスクリプトを書く
  • ターミナルの背景色をライトグリーンに変更(透過用)
  • QuickTimerPlayerでタイマーを画面収録する
  • Keynoteに撮影したタイマー動画を添付+動画書き出し

一見難しそうに見えますが、なるべくコピペでできるように解説していきます。

今回の記事のやり方なら、30分用タイマーや5分用タイマーなど自分の用途に合わせて自由に素材を生成することができます。

Python3のパッケージのインストール

まずはカウントダウンタイマーを表示するためのスクリプトを準備しましょう。

プログラミングが必要になりますが、基本的に後述しているソースコードのコピペで終わりです。

また、念のため私のPCの情報も載せておきます。

ポイント

  • OS : macOS Big Sur Ver11.1
  • PC : MacBook Pro (13-inch, M1,2020)
  • chip : Apple M1
  • Memory : 8GM

それではまずはHomebrewを使ってpython3のパッケージをインストールします。

Homebrewとはパッケージ管理ツールのことで、こちらを使って開発で必要なパッケージをインストールできます。

もしbrewをまだインストールされていない場合は、こちらの公式にあるコマンドを実行してHomebrewをインストールしてください。

Homebrewのインストールが完了したら、下記コマンドをターミナル上で実行してください。

1
brew install python3

正常に処理が完了したら、下記コマンドを実行しpython3コマンドがインストールできたことを確認しましょう。

1
python3 --version

上記コマンドで特にエラー等が表示されていなければ、問題なくインストールができていると思って大丈夫です。

Pythonでカウントダウンタイマー用のスクリプトを書く

では続いてカウントダウンタイマー用のスクリプトを準備しましょう。

エディターを開き、timer.pyというファイルを作成し、下記をコピペして保存してください。

下記コードはhowCodeさんの動画を参考にしました。

timer.py
1
2
3
4
5
6
7
8
9
10
11
12
13
import time

while True:
	uin = input("タイマーの時間は?(単位:秒) ")
	when_to_stop = abs(int(uin))
	while when_to_stop > 0:
		m,s = divmod(when_to_stop,60)
		h,m = divmod(m,60)
		time_left = str(h).zfill(2) + ":" + str(m).zfill(2) + ":" + str(s).zfill(2)
		print(time_left, end='\r')
		time.sleep(1)
		when_to_stop -= 1
	print()

保存したら、正常にカウントダウンタイマーが動作するか確認しましょう。

下記コマンドを実行するとユーザ入力が求められると思いますので、自分の設定したい時間(単位:秒)を入力してください。

参考までに1時間の勉強動画用のタイマーなら3600、30分の筋トレ動画用のタイマーなら1800と入力すればOKです。

今回は10秒のタイマーを作る想定で設定します。

1
python3 timer.py

こちらの添付gifのように、タイマーが動作すれば成功です。

ターミナルの背景色をライトグリーンに変更(透過用)

タイマースクリプトの動作確認ができたら、次にターミナルの背景色をライトグリーンに変更します。

理由は動画上でタイマーを表示する際に透過処理をするため、背景を緑色(グリーンバック)にします。

Tranquilpeak

この時、同時にタイマーのフォントも変更することができます。

自分の動画スタイルに合わせて、フォントも変更するとより個性があるタイマーにできると思います。

まずはターミナルを開き、Preference(設定)を開きます。

すると、添付画面の通りフォントの設定とターミナルの背景色の設定ができます。

ここで背景色をライトグリーン、フォントを自分の好きなものに設定します。

また、フォントカラーは白色が見やすくて良いかなと思いましたので白色に変更しています。

ターミナル上のテキストを拡大する

デフォルトではターミナルに出力されるテキストは非常に小さいです。

こちらのテキストのサイズでは動画に実際に貼り付ける場合に文字が小さすぎて見えません。

また、撮影した動画を拡大することもできますが、その場合画質が荒くなるのでおすすめはできません。

そのため、ターミナルの出力されているテキスト表示を拡大しましょう。

Macの場合はCommand+プラス(+)ボタンを押すことでテキストを拡大できます。

Tranquilpeak

QuickTimerPlayerでタイマーを画面収録する

ターミナルの設定を変更したら、次にタイマースクリプトを実行しそれをquickTime Playerで画面収録をしましょう。

この時、必ずタイマーの部分のみ選択して画面収録を行うようにしてください。

こちらの添付gifのようにタイマーのフォント部分を写すようにすれば大丈夫です。

Tranquilpeak

失敗例も載せておきます。

Tranquilpeak

こちらのようにタイマー部分以外は不要ですので、うまく映らないようにQuickTimer側で調整してください。

画面収録が完了したら、そのまま保存してください。

Keynoteに撮影したタイマー動画を添付+動画書き出し

続いて先ほど収録した動画をKeynoteを使ってタイマー動画をmp4形式でファイル出力します。

Keynoteを開いて新規作成を選択し、デフォルトのテキストを全て削除してください。

その後、先ほど収録したタイマーの動画をドラッグ&ドロップで貼り付けます。

そして自分が動画でタイマーを表示したい場所にタイマーを配置します。

続いてKeynoteの背景もタイマー動画に合わせてライトグリーンに変更します。

この時、タイマーの背景と同じカラーコードを設定するようにすると透過時の粗がなくなります。

Tranquilpeak

上記設定が完了したら、ファイルのエクスポートをしてタイマー動画を生成します。

iMovieにてタイマー動画を透過処理する

上記でタイマー動画を作成できたら、あとは自分の使っている動画作成ツールで透過処理を行います。

私はいつもiMovieを使っているので、今回はiMovieを使う前提で説明を行います。

他の動画作成ツールでも、グリーンバックによる透過処理ができれば今回の方法でタイマー素材を使えると思います。

iMovieを開いて、タイマーを表示したい動画を開きます。

続いて、タイマー動画をドラッグ&ドロップしてタイマー表示したい動画の上に持ってきます。

そうしたら、添付赤枠のグリーンバックを選択してください。

これにより、タイマーのライトグリーン部分が透明化しタイマーのテキストのみが表示されるようになります。

Tranquilpeak

さいごに

ここまでお読みいただきありがとうございました。

結構色んな動画でよく見るこのカウントダウン式のタイマーですが、なかなかフリーで素材が落ちていないと思います。

今回紹介した方法を使えば、自分の用途に応じてカスタマイズしたタイマー素材を作れるので便利だと思います。

僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」どのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃

【コピペOK】HUGOでアフィリエイト用ブログサイトを作ろう

手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。

ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。

また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます

以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌

速習!おすすめプログラミング勉強法【Udemy】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。

Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました

Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃

【Udemy】未経験から始める格安プログラミング講座4選

未経験だけどプログラミングを学んでエンジニアになりたい、社会人だから時間もそれほど多く無いので効率よく勉強したい。 私もその内の一人でした。今回の記事で最短でエンジニアになるためのおすすめUdemy講座4選をご紹介したいと思います。

【IT資格は無意味】未経験エンジニアがIT資格の勉強をおすすめしない4つの理由とは?

プログラミングを勉強し始めてIT資格を取ろうか悩んでいる方向け。 プログラミング未経験の方が資格勉強をされることは僕の経験上おすすめしません。 なぜ資格の勉強がプログラミング学習において、エンジニアの就活においてNGかこの記事で解説します。

【個人開発】副業でアプリを作りたいならサーバーは契約しない方がいい理由

個人で副業のためにアプリ開発をしてみたいと考えている方向け。 iOS/Androidの個人アプリ開発の場合データのやりとりを行うため、サーバを契約する人が多いです。 しかし、考えなしにサーバを契約するのは非常に大きなデメリットがあるため、私はあまりオススメしません。 ではどの様にしてお金をかけずにアプリ作りができるか、なぜFirebaseを使うべきなのかこの記事で解説していきます。

【海外にもある!?】海外就活でブラック企業を回避する方法

海外での就活を考えている方向けの記事です。 ブラック企業は日本企業のイメージがありますが、そんなことはありません。 日本の就活とは違う点、また海外の就活で失敗しないために事前に知っておいた方が良い情報を本記事にてまとめていきます。

【ダナンの物価】ダナン在住者が伝える2020年ベトナム最新状況!

最近観光地として人気が高まっているダナンですが、近年物価の変動が大きくなっていっているように感じます。 2019年〜2020年でのダナンの物価はどのようなものなのか、ダナン在住者として現地の声をお届けできればと思います

【残業大国】日本の異常な労働環境をベトナムで働いてみて実感した件

日本ってやっぱり「働く」ことに関しては異常ですよ。 「お客様は神様」精神、残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境。 今回は日本の異常な労働環境をベトナムの労働環境と比較しながら説明したいと思います😱

【海外移住】ベトナムに移住したら日本の8億倍住みやすかった件

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。

【ダナンの家賃】日本相場の半額以下!?ベトナム家賃相場調査!

ベトナム・ダナンへ移住を考えている方向け。 海外移住をする上で家賃相場を事前に知っておくことは生活費がどれくらいかかるのか計算ができるので非常に重要です。 こちらの記事で家賃相場、賃貸契約の流れ、賃貸契約時のトラブルについて解説していきます。

【おすすめ】Udemy講座でAWS ソリューションアーキテクト アソシエイトを一発合格できた件

AWS ソリューションアーキテクトの勉強をしている方向け。
Udemyでのおすすめ講座、一発合格のための勉強方法から受験の手順まで本記事でまとめました。
認定試験の受験を考えている方には必見です。

【python】文字認識で画像からテキストを出力するやり方をわかりやすく【Tesseract&PyOCR】

こんにちはkzyです。 今回は文字認識ライブラリのPyOCRとTesseractを使って画像からテキストを抽出したいと思います。 環境構築含めpythonでの文字認識のやり方を簡潔に説明できればと思います。

【コピペOK】flutterのSizedBoxとExpandedの違いをわかりやすく

flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。 flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

【python】文字認識したテキストをエクセルに出力するやり方をわかりやすく【PyOCR + XlsxWriter】

こんにちはkzyです。 今回はPyOCRで文字認識したテキストをエクセルに出力する方法を解説します。 具体的にはXlsxWriterというライブラリを使用してPythonスクリプトからエクセル操作を行います。