Macの画面録画でキー入力を表示する方法
チュートリアル動画やデモ動画を作るとき、画面の操作だけ見せても「今なにを押したの?」が伝わらないことがあります。特にショートカットキーを多用する操作では、キー入力が映像に映っていないと見ている側はついていけません。
Mac標準の画面収録(command+shift+5)にはキー入力を表示する機能がないので、別のツールが必要になります。この記事では、キー入力を画面録画に表示する2つの方法を紹介します。
Mac標準の画面収録にキー入力表示がない問題
Mac標準の画面収録では、キーボードで何を押したかは一切映像に残りません。
たとえば「command+shift+4 でスクリーンショット範囲を選択」という手順を録画しても、動画を見た人にはカーソルが十字に変わったことしかわかりません。ショートカットキーを使った操作ほど、画面上の変化が少ないのでキー入力の表示が欲しくなります。
自分の場合、バグ報告で「command+S を押したらアプリが固まる」と伝えたいのに、録画にはキー入力が映っていないので毎回テキストで補足していました。地味に手間です。
KeyCastrでキー入力を表示する
KeyCastrはmacOS向けのオープンソースのキー入力表示ツールです。起動しておくだけで、押したキーが画面上にオーバーレイ表示されます。Mac標準の画面収録と組み合わせれば、キー入力付きの画面録画ができます。
インストール
Homebrewが入っていれば、ターミナルで1行です。
brew install --cask keycastr
Homebrewを使っていない場合は、GitHubのリリースページから.app.zipファイルをダウンロードして、展開したアプリをApplicationsフォルダに移動します。
入力監視の許可
KeyCastrはキーボード入力を読み取るため、初回起動時に入力監視の許可を求められます。
- KeyCastrを起動する
- 権限を求めるダイアログが表示される
- システム設定 > プライバシーとセキュリティ > 入力監視 でKeyCastrを許可する
許可しないとキー入力が表示されないので、ここは忘れずに設定してください。
基本的な使い方
KeyCastrを起動すると、メニューバーにアイコンが表示されます。あとは普通にキーボードを操作するだけで、押したキーが画面の左下にオーバーレイとして表示されます。
この状態で command+shift+5 などの画面録画を開始すれば、キー入力がそのまま映像に映ります。
表示のカスタマイズ
メニューバーのKeyCastrアイコンから設定画面を開くと、表示をカスタマイズできます。
| 設定項目 | 内容 |
|---|---|
| Display | 表示スタイルの選択。デフォルトはオーバーレイ表示 |
| Font Size | 文字サイズの変更 |
| Fade Duration | キー表示が消えるまでの時間 |
| Bezel Color | 背景色の変更 |
チュートリアル動画で使うなら、Font Sizeを大きめにしておくと視認性が上がります。
KeyCastrの注意点
KeyCastrは無料で手軽に使えるツールですが、いくつか知っておきたい点があります。
- リアルタイム表示のみ。画面上にオーバーレイを表示するだけなので、録画後に表示位置やサイズを調整することはできません。表示位置やサイズは録画前に決めておく必要があります
- 常時表示される。KeyCastrが起動している間は、録画していなくてもキー入力が画面に表示されます。パスワード入力時などは一旦オフにするか、メニューバーから「Stop Casting」で停止しましょう
- 録画ツールは別途必要。KeyCastrはキー表示だけのツールなので、画面録画自体はMac標準やOBSなど別のツールで行います
Hydiのキー入力表示
ここからは自分が開発しているアプリの話になりますが、Hydiでもキー入力を画面録画に表示できます。
KeyCastrとの大きな違いは、キー入力を録画と同時に記録して映像に埋め込む仕組みになっていることです。リアルタイムのオーバーレイではなく、録画データの一部としてキー入力を保持しています。
録画中のキー入力記録
Hydiで画面録画を開始すると、録画中に押したキーが自動で記録されます。特別な設定は不要で、録画ボタンを押すだけです。
録画後にサイズと位置を調整できる
KeyCastrとの一番の違いはここです。Hydiでは録画後にキー入力表示のサイズや位置をドラッグで変更できます。
「録画してみたらキー表示が小さすぎた」というときに、撮り直さずに調整できるのは地味に便利です。自分は録画中はキー表示の見た目を気にせず操作に集中して、サイズ調整は後からやっています。
注釈やズームとの組み合わせ
Hydiにはキー入力表示に加えて、テキスト・矢印・図形の注釈機能やズーム機能もあります。たとえば「ここでcommand+Sを押す」というキー入力が表示されるタイミングに合わせて、保存ダイアログを矢印で指し示す、といった使い方ができます。
操作手順を伝える動画では、キー入力の表示だけでは足りないことがあります。「このボタンを押す」「ここの数値を変える」といった画面上の操作は、注釈で補足した方が伝わります。
Hydiは基本機能を無料で使えます(フリープランでは「Made with Hydi」の透かし入り)。詳しくはHydi LPを見てみてください。
KeyCastrとHydiの使い分け
どちらがいいかは、用途によります。
| KeyCastr | Hydi | |
|---|---|---|
| 価格 | 無料(オープンソース) | 基本無料(透かしあり) |
| キー表示の仕組み | リアルタイムオーバーレイ | 録画データに記録 |
| 録画後の調整 | できない | サイズ・位置を変更可能 |
| 録画ツール | 別途必要 | 録画機能内蔵 |
| 注釈・ズーム | なし | テキスト・矢印・図形・ズーム |
| 動画の出力形式 | 録画ツール依存 | MP4 / GIF |
KeyCastrが向いている場面。すでに使い慣れた録画ツールがあり、キー表示だけ追加したい場合。OBS Studioやその他の録画ソフトと自由に組み合わせられるのが強みです。
Hydiが向いている場面。キー入力表示に加えて、注釈やトリミングもまとめて1つのアプリで完結させたい場合。撮り直しなしでキー表示のサイズ調整ができるのも、試行錯誤が多い人には助かります。
まとめ
Macの画面録画でキー入力を表示する方法を紹介しました。
Mac標準の画面収録にはキー入力表示がないので、KeyCastrのような外部ツールか、Hydiのようなキー入力記録に対応した録画アプリを使うことになります。どちらも無料で始められるので、まずは試してみてください。
画面録画の基本的な使い方はMacで画面録画する方法にまとめてあるので、あわせて読んでみてください。