ツールの使い方を記事に書くとき、「ここを押して、次はこっちを開いて……」と説明しているうちに、文章がどんどん長くなっちゃうこと、ありませんか？画像も用意したのに、肝心の動きが伝わらない。それなら、実際に動かしているところを短い動画で見てもらいましょう！
画面録画工房AIちいちゃん Ver.0.1.2 HTML版は、画面を無音で録画し、不要な前後をカットして、必要な四角い範囲だけを残せるツールです。2本の動画をつないで、1本のWebM動画として保存することもできます。ブログの操作説明やマニュアル補助、商品ページのデモ動画を作る用途に使ってください。
HTMLファイルをブラウザで開いて使う単体版なので、WordPressへプラグインを入れる必要はありません。動画の録画・編集はブラウザ内で行い、ツールから外部サーバーへ動画をアップロードする処理もありません。APIキーやログインも不要です。
できることと基本仕様
初号機でできることは、録る・前後を切る・画面を切り抜く・2本をつなぐ・保存する、の5つです。いろんな編集機能を覚えるより、読者さんへ「こう動くのね！」と伝わる短い動画を作りましょう。音声や字幕を付ける機能はありません。
| 項目 | 仕様 |
|---|---|
| 形式 | インストール不要の単体HTML版 |
| 利用環境 | PCのChrome系ブラウザを優先。スマホでの録画は対応を保証しません |
| 録画対象 | ブラウザが提示する画面・ウィンドウ・タブなどから、利用者が選択 |
| 音声 | マイク・PC内部音声は録音しない。読み込んだ動画も保存時に無音化 |
| 前後カット | 開始位置・終了位置のスライダーで指定。0.1秒刻みで設定可能 |
| 画面トリミング | 上下左右から削る量をpx単位で入力 |
| 比率 | 自由な四角形／YouTube 16:9 |
| 連結 | 2本まで。1本目→2本目の順で保存 |
| 動画の読み込み | 端末内の動画を選択。ブラウザが再生できる形式が対象 |
| 保存形式 | 無音のWebM |
| 保存サイズ・フレームレート | 最大長辺1280px・24fps。小さい映像は出力サイズを拡大しない |
| 保存処理 | 映像を再生しながら描き直すため、動画の長さと同じくらいの時間が必要 |
| ファイル名 | 初期値はai-chiichan-screen-recording-001.webm。変更可能 |
動画を小さくしたり無音化したりして保存しますが、容量が必ず元より小さくなるとは限りません。長い動画ほど時間とメモリを使うため、まずは10〜30秒程度の短い操作動画から試すと、使い方をつかみやすくなります。
使い方① HTMLファイルを開く
配布されたHTMLファイルをパソコンへ保存し、Chromeで開いてください。画面上部に「画面録画工房AIちいちゃん」と表示され、「● 録画を開始する」が見えたら、そこから始められます。すでに動画を持っている場合は、録画せず「動画を読み込む」から編集へ進めます。
画面録画に対応していない環境では、録画を利用できない案内が表示されます。録画機能の利用可否はブラウザや開き方の制限にも左右されるので、ボタンが使えない場合はPCのChromeで開いているか確認してください。
使い方② 録画する画面を選ぶ
「● 録画を開始する」を押すと、ブラウザ標準の画面共有選択画面が開きます。表示された候補から、録画したい画面全体・ウィンドウ・タブを自分で選んで、共有を開始してください。表示される選択肢は利用環境によって異なります。
この「共有」は、選んだ映像を録画ツールへ渡すための許可です。ツールが動画を他人や外部サーバーへ配信する操作ではありません。ブラウザのタブだけで完結する操作ならタブ、複数のアプリを行き来する操作なら画面全体、というように見せたい内容から選びましょう。
画面全体を録ると、通知や別のウィンドウも映り込む場合があります。録画前に見せたくないものを閉じ、説明に必要な画面を用意してください。「読者さんに見せたいのはここ！」と決めておくだけで、あとから削る手間も減らせます。
使い方③ 操作して、録画を停止する
録画が始まると「🔴 録画中」と経過時間が表示されます。そのまま説明したいツールを操作しましょう。マイク音声もPC内部音声も録音しないので、周囲の話し声や音楽は動画に入りません。
操作が終わったら工房へ戻り、「■ 録画を停止する」を押します。ブラウザ側で画面共有を停止した場合も、録画の停止処理が行われます。停止後は動画が読み込まれ、プレビューと編集欄が表示されます。
使い方④ 不要な最初と最後をカットする
動画の下にある「開始位置」と「終了位置」のスライダーで、残す時間を指定します。スライダーを動かすと動画の位置も移動するので、どの場面から始めるか確認しながら決めてください。プレビューの再生・一時停止は動画の操作欄から行えます。
たとえば45秒の動画を、開始3秒・終了42秒にすると、残すのは3〜42秒の39秒間です。最初の画面切り替えと、最後に停止ボタンへ戻る場面を外せば、操作だけをすっきり見せられます。動画の途中を何か所も切る機能ではありません。
「カット範囲を確認」を押すと、指定した開始位置から再生し、終了位置で停止します。必要な操作まで切っていないか確認しましょう。この段階では元の動画を書き換えていないので、開始・終了の位置を変更して調整し直せます。
使い方⑤ 上下左右の余計な部分を削る
「画面のトリミング」で「自由な四角形」を選び、左・右・上・下から削る量を入力します。数値の単位は元映像のpxで、画面上の表示倍率に対する値ではありません。入力すると残す範囲が青い枠で示され、枠の外側が暗く表示されます。
| 入力欄 | 削る場所 |
|---|---|
| 左から削る | 左側のサイドバーや余白 |
| 右から削る | 右側の余白や不要なパネル |
| 上から削る | ブラウザ上部など |
| 下から削る | 下側の余白など |
数値を大きくすると、その方向から多く削ります。削りすぎた場合は数値を小さくすると範囲を広げ直せます。全部やり直すなら「トリミングをリセット」を押してください。比率の設定も自由な四角形に戻り、元の画面全体を残す状態になります。
左右の削り量の合計が元の横幅以上、上下の合計が元の高さ以上になると、残す画面がなくなってしまいます。その場合は案内が表示され、入力した無効な範囲は反映されません。数値を減らして、青い枠が狙った場所になっているか確認してください。
使い方⑥ YouTube 16:9にする
「形」から「YouTube 16:9」を選ぶと、横16・縦9の切り抜き枠になります。最初は元映像に収まる中央の範囲が設定され、上下左右の数値で残す位置と大きさを調整できます。Ver.0.1.2では「下から削る」も操作できます。
16:9では、入力した上下左右の範囲の内側に、比率を守った枠を作ります。下を削って高さを小さくすると、比率を保つため幅も狭くなる場合があります。自由な四角形と同じように四辺を独立して動かすのではなく、青い枠を見ながら最終範囲を確認してください。
これは1920×1080pxへ拡大する機能ではありません。保存サイズは最大長辺1280pxで、16:9の比率に合わせて出力されます。大きな解像度の動画が必要な用途では、保存後の動画サイズも確認しましょう。
使い方⑦ 2本目を追加してつなぐ
「2本目の動画を追加」を押し、端末内の動画を選びます。基本は、この工房で作成したWebM動画同士を使ってください。読み込めるかどうかはブラウザの再生対応にも左右されるため、すべての動画形式に対応しているわけではありません。
追加後は「1本目」「2本目」で編集対象を切り替えられます。それぞれの前後カットとトリミングを設定し、保存すると1本目→2本目の順につながります。2本目の内容を変えたい場合は「2本目の動画を入れ替える」、外したい場合は「2本目を外す」を使ってください。
出力する画面の大きさは、1本目のトリミング範囲を基準に決まります。2本目の縦横比が違う場合は、映像を引き伸ばさず黒い余白で合わせます。余白を減らしたい場合は、2本とも同じ比率でトリミングしておくとそろえやすくなります。
同時に扱えるのは2本までです。3本つなぎたい場合はA＋Bを一度保存し、その動画を1本目として読み込み、Cを2本目へ追加してください。ただし、保存のたびに映像を描き直すため、繰り返し保存すると画質が変化する場合があります。
使い方⑧ 編集した動画を保存する
ファイル名を確認して、「動画を保存する」を押します。開始・終了・トリミング・連結の設定を反映した動画が作られます。保存形式はWebM固定なので、MP4変換の設定はありません。
保存処理は、残した動画の長さと同じくらいの時間がかかります。1本目が20秒、2本目が10秒なら、処理にはおおむね30秒と準備時間が必要です。動画を再生しながら保存用の映像を作る仕組みなので、工房のタブを表示したまま待ってください。
処理中は進行率と、何本目を処理しているかが表示されます。途中でやめる場合は「処理を中止」を押します。元動画と編集設定は残るので、短い範囲に直してから再び保存できます。
完成するとダウンロードを開始し、下に完成動画のプレビューと保存リンクが表示されます。ダウンロードされなかった場合は、そのリンクを押してください。保存後に動画を再生し、必要な操作が残っているか、切り抜き位置が合っているか確認しましょう。
保存済みの動画をあとから編集する
最初の画面で「動画を読み込む」を押すと、保存済みの動画を開いて、同じカット・トリミング・連結の操作ができます。音声付きの元動画を読み込んだ場合も、この工房から保存する動画は無音です。元のファイルを上書きする処理はありません。
新しい録画や「動画を読み込む」で1本目を開くと、それまでの動画と編集設定は置き換わります。ブラウザを閉じたり再読み込みしたりしても、作業中のデータは残りません。編集途中のプロジェクト保存機能はないので、残したい内容は完成動画として保存してください。
困ったときの確認ポイント
録画が始まらない
PCのChromeで開いているか、画面共有の選択を確定したか確認してください。共有をキャンセルした場合は「録画は開始されませんでした」と表示されます。OS側でブラウザの画面収録が許可されていない場合や、ブラウザの制限がある場合も録画を開始できません。
トリミングが思った場所にならない
「自由な四角形」か「YouTube 16:9」かを確認しましょう。16:9では高さを減らすと幅も変わる場合があります。数値を減らして範囲を広げるか、「トリミングをリセット」で全体へ戻し、少しずつ調整してください。
保存が遅い・途中で止まる
保存は瞬間的な変換ではなく、動画の長さに近い時間が必要です。タブを表示したまま待ち、進行率が動くか確認してください。失敗する場合は、短い動画1本・小さめの録画範囲で試すと、負荷を減らせます。
短い操作動画で「こう使うのね！」を届けよう
最初はひとつの操作だけ録って、余計な前後を切り、保存するところから試してください。矢印や文字を入れたい静止画は「フォト矢印工房AIちいちゃん」、実際の動きを見せたい動画は「画面録画工房AIちいちゃん」と使い分けられます。
説明を全部動画に詰め込もうとすると、録る側も見る側も疲れちゃうんですよね（笑）。読者さんが迷いやすい操作をひとつ見せられれば、それだけでも記事の説明を助けられます。文章と画像に短い動画を添えて、「ここ、こうやればいいんだ！」と伝えていきましょう。
やることが多すぎてフリーズしてない？」中卒の僕でもできた、ChatGPTを最強の相棒に変えてノウハウコレクターを卒業する秘密のオリジナル特典