iPhone・iPad向けの動画編集アプリ「MoShup」を個人開発し、App Storeで公開しました。
今回開発したのは、動画の一部分にモザイク・ぼかし・黒塗りを適用できるアプリです。
動画編集アプリ自体は数多くありますが、今回は 「動画内の隠したい部分を、できるだけ直感的に編集する」 という点を重視しました。
この記事では、アプリの概要と、開発するうえで意識した設計上のポイントについて簡単に紹介します。
なお、内部の実装方法については詳しく触れず、機能や設計の考え方を中心にまとめています。
開発のきっかけ
SNSなどに動画を投稿する際、意図せず個人情報が映り込むことがあります。
例えば、
- 通行人の顔
- 車のナンバープレート
- 画面収録に含まれる名前や通知
- 背景に映った住所などの情報
静止画であれば対象部分にモザイクをかけるだけですが、動画の場合は少し事情が異なります。
動画には時間軸があり、隠したい対象が途中から現れたり、別の場面では不要になったりします。
そのため、単純な画像フィルターとは異なり、「どの領域に」「どのエフェクトを」「いつ適用するか」 を管理する必要があります。
この操作をなるべくシンプルにできないかと考えたのが、MoShup開発のきっかけです。
アプリの概要
MoShupでは、次の3種類のエフェクトを利用できます。
- モザイク
- ぼかし
- 黒塗り
動画のプレビュー上を指でなぞることで、指定した領域にエフェクトを適用できます。
また、複数レイヤーとタイムライン編集に対応しており、エフェクトごとに表示時間を設定できます。
レイヤーと時間軸の管理
今回のアプリでは、エフェクトをレイヤー単位で管理する構成にしています。
各レイヤーには開始時間（In）と終了時間（Out）を設定でき、必要な時間帯だけエフェクトを表示できます。
例えば、動画の前半と後半で異なる領域を隠したい場合、それぞれ別のレイヤーとして編集できます。
タイムライン上で時間範囲を調整できるため、動画全体に同じエフェクトを適用する必要はありません。
開発で意識したポイント
1. 動画の時間軸と編集操作
静止画と動画の大きな違いは、時間によって表示内容が変化することです。
動画編集では、現在の再生位置と編集対象の時間範囲を適切に扱う必要があります。
特に、プレビュー操作とタイムライン操作を組み合わせたときに、ユーザーが現在どの部分を編集しているのか分かりやすいUIを意識しました。
2. タッチ操作を前提としたUI
iPhoneやiPadでの利用を前提としているため、細かな数値入力よりも、画面上で直接操作できることを優先しました。
エフェクトの適用領域は指で描画し、時間範囲はタイムライン上のハンドルで調整できます。
動画編集は操作項目が増えがちですが、必要な機能をなるべく直感的に扱えるようにすることを目指しました。
3. 動画のアスペクト比
動画には縦長・横長・正方形など、さまざまなアスペクト比があります。
編集画面での表示だけでなく、書き出し後も元動画のアスペクト比を維持することを意識しました。
特にスマートフォンでは縦動画を扱う機会が多いため、動画の向きによらず自然に編集できることを重視しています。
4. 複数エフェクトの管理
動画内の複数箇所を編集する場合、エフェクトの種類や適用時間を個別に管理できる必要があります。
MoShupではレイヤー単位で編集内容を分離し、それぞれに異なる設定を持たせています。
ユーザーが複数の編集対象を扱う場合でも、操作が複雑になりすぎないようにすることを意識しました。
現在のバージョン
初回リリースとなるv1.0では、以下の仕様としています。
| 項目 | 内容 |
|---|---|
| 対応OS | iOS 18以降 |
| 対応端末 | iPhone / iPad |
| エフェクト | モザイク・ぼかし・黒塗り |
| 編集方式 | タッチ操作・複数レイヤー |
| 時間制御 | In / Out指定 |
| 動画の長さ | 最大10分 |
| 書き出し | 720p相当 |
| 料金 | 無料 |
| 広告 | なし |
| ウォーターマーク | なし |
まずは基本的な編集機能に絞ったバージョンとして公開しています。
まとめ
今回の個人開発では、動画編集の中でも「必要な部分を隠す」という用途に機能を絞りました。
動画の時間軸、レイヤー管理、タッチ操作、書き出しなど、静止画編集とは異なる点も多く、アプリとしてまとめるうえで考えることがいろいろありました。
一方で、ユーザーにとっては内部の複雑さを意識せず、できるだけ簡単に操作できることが重要だと考えています。
今後も使い勝手を見ながら改善していく予定です。
興味のある方は、ぜひ触ってみてください。
App Store（無料）
公式サイト