自作動画編集アプリチュートリアルようつべでよく見るショート動画編

投稿日 : 2026/9/29 | 0 日前

文字数(だいたい) : 9416

今回作る動画
読み上げ機能は今のところないです
手順
アプリを入れる
今回の元ネタはここです
動画を用意する
プロジェクトを作る
動画を置く
画面の説明
付録プレビューもしくはタイムラインを大きく表示したい
タイムラインを操作する
動画を間違えて追加した
タイムラインの上にある UI
位置と時間を合わせる
文字を追加する
文字の表示時間を変えたい
上級者向けフォントを追加する
余計な部分をカットしたい
ここまでで一度再生したい場合
ナレーションを入れる
(追加したい場合は) BGM を追加する
素材にライセンスがあるなら動画の中 or 説明欄に記載する
最終的な動画の時間を決める
編集内容を保存したい
動画を保存する
保存した動画を見る
おわり

チュートリアル第三弾

今回作る動画

今回はようつべでよく見るショート動画を作ってみます。まじで投稿してるの何者？？？

読み上げ機能は今のところないです

それぞれ用意してください；；

よく聞く男の音声はVOICEVOXの青山龍星ってキャラクターの声らしいです！。
このアプリには読み上げ機能がないため、よくある動画に真似る真似ないに関係なく、別のアプリで音声を生成する必要があります；；

手順

アプリを入れる
取り上げる動画を見つける
(変更したい場合は) フォントファイルを探す
(入れたい場合は) BGM も探す
動画を切り取ったりして短くする
読み上げ音声を作ってタイムラインに取り込む
文字とか書いてそれっぽくする
エンコードする

アプリを入れる

リンクです。

AkariDroid - Video editing app - Apps on Google Play

You can overlay text, images, and videos. Processing is done on the device.

https://play.google.com/store/apps/details?id=io.github.takusan23.akaridroid&hl=en_US

ソースコードからビルドしてもよいです、なかみはPlayStoreとおなじです。

GitHub - takusan23/AkariDroid: お正月なので動画の上にCanvasで落書きしてエンコードする

お正月なので動画の上にCanvasで落書きしてエンコードする. Contribute to takusan23/AkariDroid development by creating an account on GitHub.

https://github.com/takusan23/AkariDroid

今回の元ネタはここです

https://www.youtube.com/watch?v=uJED53Y_hVc

動画を用意する

よういしてください

プロジェクトを作る

アプリを開いて、適当な名前を付けて、プロジェクトを作成します。
そしたら動画情報編集が出るので、動画の縦横サイズを決めます。今回は縦動画なので、1920x1080を逆にして横1080x縦1920にします。

間違えて消したら、スマホの場合はメニュー→動画情報の編集、タブレット（おりたたみ）の時は右上のメニューから動画情報の編集を押します。

動画を置く

動画をタイムラインに追加してください。
スマホの場合はメニュー→動画を追加、タブレット（おりたたみ）の時は右上のメニューから動画を追加を押します。

また、どこかで説明した通り、ドラッグアンドドロップでも追加できます。
例えばGoogle フォトなら写真・動画を長押しすると移動出来て、このアプリの下半分まで持ってきて離すと追加できます。ドラッグ中は下半分がピカピカします。

追加するとタイムライン（後述）に追加されます。そして動画がずれてるのも後で治します！

画面の説明

前書いたやつ再掲

スマホの縦画面の場合は、上半分がプレビューと位置調整、下半分がタイムラインになります。
スマホが横画面の場合は、左半分がプレビューと位置調整、右半分がタイムラインになります。

そしてタブレット、折り畳みスマホ展開時は、左上がプレビューと位置調整、右上がメニュー兼追加になります。メニューが常に表示されるため、スマホ縦横画面にあった左上と中央下のメニューボタンは表示されません。
そして下半分を占めるタイムラインで構成されています。

詳しくは必要になったら！別に難しくはないハズ！

付録プレビューもしくはタイムラインを大きく表示したい

もしiPhone DuoとかGalaxy Z Fold 8のような正方形に近い画面比率の場合、縦長/横長前提のレイアウトは使いにくい可能性があります。
そのため、タイムラインもしくはプレビュー（もしくはメニュー）の表示割合を調整する機能があります。パソコンみたいにドラッグ操作でそれぞれのUIの大きさを変えられる機能です。

タイムラインとプレビューの間にあるタイムラインメニューを押して、サイズ変更機能を有効にするを選びます。
これで、それぞれのUIの境界に何やら掴めそうな棒が表示されます。これをドラッグすることで、プレビューやタイムラインの表示割合を自由に変更できます。

・・・といっても2割くらいは残るようになっています。該当部分のソースコードはこの辺

AkariDroid/app/src/main/java/io/github/takusan23/akaridroid/ui/component/timeline/VideoEditorLayout.kt at 1f65493b6b33f3ab6c258df41243e9be6e950a7a · takusan23/AkariDroid

お正月なので動画の上にCanvasで落書きしてエンコードする. Contribute to takusan23/AkariDroid development by creating an account on GitHub.

https://github.com/takusan23/AkariDroid/blob/1f65493b6b33f3ab6c258df41243e9be6e950a7a/app/src/main/java/io/github/takusan23/akaridroid/ui/component/timeline/VideoEditorLayout.kt

タイムラインを操作する

先述の説明より、タイムラインを見てください。
動画を追加したので、追加した分だけ動画と音声が追加されていると思います。

タイムラインと聞いて、AviUtlとかゆっくりムービーメーカーを想像した皆様、それと全く同じものです、頑張ってそれっぽく作りました。
もう説明は不要そうですね。

そうでない方向け、
タイムラインは、動画に表示・再生したい動画、音声、画像、文字、エフェクトを配置する場所です。
これは上下左右のスクロールできます。

まず左右方向。これは時間です。
一番左が0秒になり、右に行くほど時間が進みます。上に時間が表示されるので、どの時間に表示したいかはここを見て配置します。

上下方向にもスクロールできます。これは、動画に同時に動画や音声、画像、文字、エフェクトを表示するためです。同じ時間の縦に並べる感じ。
ほかの動画編集アプリではPinP (ピクチャーインピクチャー)とか言われている機能は、ここでは縦方向に並べることと同義になります。
下方向につれて上に重ねて表示されます。PowerPoint的な言い方だと0が最背面、20が最前面になります。

動画の再生位置を変えたい場合は、タイムラインに表示されている動画をドラッグすればよいです。
また、動画のX/Y位置を変えたい、複製したい、削除したい場合は、その動画を押すことでコンテキストメニューが表示されます。

また、赤色の縦棒があります。これは今の再生位置で、これを動かすと、上か左のプレビューがその位置の動画のプレビューになります。
これとは別に青色の縦棒が出ていることかもしれません。これは動画を保存するときの時間になります。
ほかの動画編集アプリによっては一番最後の動画の時間に自動で設定されることがありますが、このアプリでは手動で設定する必要があります。後で説明します。

（つまりAviUtlを使ったことがあれば一度はやらかすであろう？、ダーク尺余りを引き起こす可能性を同じく抱えていることになります）

動画を間違えて追加した

タイムラインの動画をおすと、コンテキストメニューが表示され、削除を選ぶことで間違えて追加した動画を削除できます。
同様に音声も消しましょう。

タイムラインの上にある UI

タイムラインメニューから、複数選択モードに切り替えたり先述の通りサイズ変更を有効にできたりします。
今回はそこまで使わないので省略します。

タイムラインの右上にある虫メガネのアイコンを押すことで、タイムラインの拡大縮小が出来ます。カーナビみたいですね。

虫メガネの隣が戻る・進むボタンです。
パソコンにもあると思いますがそれと同じです。一個戻すと、戻すのをやめるボタンです。

位置と時間を合わせる

プレビューの左上にある再生マーク・指のマークから指のマークの方を押してください。
これでプレビューの素材を移動できるようになります。

まずは再生位置を合わせますか。
今回は0秒地点に表示したいので一番端っこに動かします。音声も。

つぎに、動画が真ん中に来るようにします。
プレビューに動画が出てるので、いい感じに真ん中にします。

動画を囲うように黄色い枠が出ています。これが動画の縦横と位置です。動画以外の文字や画像でも出ます。
この右下に白色の四角形が出てると思います。これを動かすことで大きさを変えることが出来ます。

いい感じに真ん中に置きました。スクショの通りですね

また、サイズと大きさの数値を直接いじることが出来ます。
タイムラインの動画を押して値の編集を押すと編集画面が表示されます。そこでX/Y座標と大きさを変更できます。

文字を追加する

動画と同じように追加ボタンから文字を追加します。（タブレットなら左上のタイムラインへ追加を押して文字を選択）

ここで文字を入力します。もちろん後からでも変更できるので、気が済んだら完了を押してください。
この編集画面をもう一度出したい場合は、タイムラインから今追加した文字を探して押して、値の編集を押すことで表示されます。

位置とサイズは動画と同じように、黄色い枠の左下の四角い奴をつかむことで変更できます。

値の編集から開く画面で色変更も可能です。枠取りの文字にもできます。
色が同化しちゃって見えないときは枠取りするといいかも？

文字の表示時間を変えたい

タイムラインを操作します。

表示開始は、タイムラインの各素材（文字によらず動画もですが）の左端になります。
縦の軸が00:10の位置に、それぞれの素材の左側を合わせると表示開始時間になります。

で表示終了時間が、右端になります。右端には明らかに掴めそうなアイコン？が出てると思いますが、それを長押しすると左右に動かせて、表示時間を延ばしたり短くしたりすることが出来ます。

上級者向けフォントを追加する

そういえばこの手の動画編集アプリでは、アプリに組み込まれたフォントを選べる場合が多いです。
ところで、このアプリではフォントは自分で用意しないと選べません！！！

アプリのサイズが大きくなってしまうので仕方ない（~~し普通にめんどい~~）

ところで自分でフォントを追加することもできます。ttf形式で！
追加方法は、アプリ起動時のプロジェクトが並んでる画面で歯車を押して、フォント設定を選び、フォントを追加で自分で用意したフォントを選んでください。

これで、タイムラインから開ける文字編集画面で追加したフォントを選べるようになります。

余計な部分をカットしたい

タイムラインの何もないところを押すと、赤色の縦棒が押した位置に移動すると思います。これがプレビューの位置であり、タイムラインに追加した素材の分割にも使われます。
動画を分割したい位置まで赤色の縦棒を移動させ、タイムライン上の動画を選択してこの位置で分割するを押すと、その地点で二つに分裂します。

いらない方はもう一度選択して削除を押すと消せます。