動画編集アプリのデザイン:エディター画面のリデザイン、ビフォーアフター

動画エディターの仕事はひとつだけ。映像を見ながら、動画を形にさせること。下の初稿にはクリエイターが求めそうなツールがすべて揃っていますが、映像は黒帯の間で小さくなり、14個の小さなツールが親指を奪い合い、トラックには名前がなく、誰も離れようとしていない画面でタブバーが場所を取っています。

修正版はすべての機能を残したまま、場所を映像に返します。InstagramのEditsアプリのエディターを手本にしていて、以下の変更はどれもそのままコピーできます。

画面全体のビフォーアフター

ジュニアの初稿

修正版

左では、映像が画面で一番小さいものになっています。映像は黒帯の間の幅164pxの細い帯で、それ以外のほぼすべてがコントロールです。4つのドロップダウン、14個のツール、5つのボタン、5つのスライダー、メディア行、アップグレードバナー。

右では、画面がクリエイターの作業順に上から下へ読めます。離れるか書き出す、映像を見る、プレイヘッドを動かす、クリップを選ぶ、操作する。プレビューは390×404、文字は初稿の7〜11pxに対して11〜17px、タブバーはありません。

変更点を数字で見る

修正1:上部バーを必要最小限に絞る

ビフォー

アフター

戻る矢印、Cutlineのロゴ、名前Untitled Project 1 (edited)、元に戻す・やり直し・ヘルプ・設定のアイコン、小さなオレンジのEXPORT 1080Pボタン。それに対して、シンプルな閉じるアイコン、キャレット付きの名前Road trip、1080p、より大きなコーラル色のExportボタン。

初稿のバーは高さ26pxに8個のものを詰め込んでいて、自分のエディターの中で誰も必要としないロゴのせいでプロジェクト名が圧迫されています。Exportは画面で一番大事なボタンなのに、一番小さいものの1つで、端っこにある小さなピルです。

修正版のバーは4つだけ残します。閉じる、名前、画質、Export。Exportは高さ33pxでコーラル色ベタ塗り、上部で唯一の目立つ存在です。名前の横のキャレットでプロジェクトメニューが開き、ヘルプ、設定、ループ、アップグレードはそこに入りました。元に戻す・やり直しは、手がすでにあるプレイヘッドの横へ下ろしました。

再利用できるルール:上部バーは「今どこにいて、どう終わらせるか」に答えるもの。それ以外は名前の裏に入れます。

修正2:映像に全幅を与える

ビフォー

アフター

両側に黒帯があり、中央に幅164pxのオレンジのバンの縦長映像が入った低いフレーム。それに対して、同じ映像が幅390px、高さ404pxの全幅で表示され、角は直角、上にコントロールは何もありません。

映像を小さく見せる動画エディターは、自分の仕事を読み違えています。初稿ではフレームが16:9で映像が縦長なので、黒帯が幅の半分以上を食っています。しかもフレームには枠線と角丸があり、透かしとタイムコードのピルまで映像の上に描かれています。

修正版ではプレビューが画面幅いっぱいに広がり、角も枠線もなく、何も重なりません。ピントや構図を判断できるサイズで、カットしているフレームを見られます。タイムコードはプレビューの下へ移し、透かしはエディターから消しました。

再利用できるルール:ユーザーが変えに来たものを画面で一番大きくし、その上には何も描かないこと。

修正3:選んだクリップのツールを見せる

ビフォー

アフター

Aspect 16:9、Quality 1080p、FPS 30、Color Rec.709の4つのドロップダウン、その下に8pxのラベルの14個の小さなツールが7個ずつ2行で並びます。Trim、Split、Speed、Volume、Filters、Adjust、Crop、Text、Stickers、Effects、Music、Voice、Mask、Rotate、さらにClip 2のラベルとDelete、Duplicate、Copy、Replace、Reverse。それに対して、左に戻るシェブロンがあり、右端からはみ出す、Split、Volume、Speed、Effects、Deleteの5つの大きなツールのフラットな1行。

初稿は、選んだものに使えるかどうかにかかわらず、すべてのツールを一度に画面に出しています。16pxのアイコンに8pxのラベルが14個では、読むのも大変で、押すのはもっと大変。クリップのボタンはその下の別の行にあります。

修正版には2つの状態があります。クリップを選ぶと、そのクリップに対してできることがフラットな1行で並びます。Split、Volume、Speed、Effects、Delete、Adjust。行は端からはみ出していて、スワイプできるとわかります。左のシェブロンで、Text、Stickers、Music、Voice、Filters、Crop、Rotate、Maskのメイン行に戻ります。アイコンは太いウェイトで22px、ラベルは12pxに大きくなりました。

削ったものはありません。Trimはクリップ自体の黄色いハンドルになり、クリップのプロパティはAdjustの裏に、アスペクト・フレームレート・カラーは上部バーの画質ボタンの裏に入っています。

再利用できるルール:選択中のものに合わせたツールを見せる。選択に作用できないツールはノイズです。

修正4:タイムラインを読めるようにする

ビフォー

アフター

00:00から00:40までのルーラー、5枚のスチールの小さなフィルムストリップ、紫のトラック、緑のトラック、緑の波形。どれにも名前がなく、1pxの赤いプレイヘッドがあります。それに対して、より細かいズームのルーラー、名前付きのFilm Grainレーン、Road tripというコーラル色のテキストレーン、波形付きのGolden Hourというマゼンタのミュージックレーン、両端からはみ出すフィルムストリップ、選んだクリップの黄色いハンドルと10.0sのタグ、そしてすべてのレーンを貫く3pxの白いプレイヘッド1本。

ここはエディターが生きる場所なのに、初稿は飾り扱いです。4本のトラックは高さ18pxでラベルがなく、どれがテキストで、どれが音楽で、どれがエフェクトか、1本ずつタップしないとわかりません。プレイヘッドは幅1px、フィルムストリップは隙間のある角丸サムネイルで、ステッカーが並んでいるように見えます。

修正版のタイムラインには名前付きのレーンがあります。Film Grain、Road tripというテキストレーン、Golden Hourというミュージックレーン。それぞれ高さ24〜36pxで、角丸なしで端から端まで伸び、間隔は4pxです。

フィルムストリップは高さ58pxで、ひとつながりの映像として読めます。選んだクリップにはシェブロンと長さタグ付きの黄色いハンドルが付き、3pxの白いプレイヘッド1本がすべてを貫きます。

時間も正直です。ズームは1秒あたり153ptなので、プレイヘッドは12秒を少し過ぎたところにあり、2行の時間表示は00:12の下に00:48と読めます。

再利用できるルール:名前のないレーンは謎です。すべてのトラックにラベルを付け、選択には目立つ色を1つ与えましょう。

細かい修正

• タブバーなし。 エディターは留まる場所なので、Home、Projects、Editor、Templates、Profileは、カット中に誰もタップしないバーのために72pxを失っていました。
• 役割ごとにアクセント1色。 コーラルはExportとテキストレーン、黄色は選んだクリップ。初稿は、何なのか説明しないトラックにオレンジ、紫、緑、赤を使っています。
• シンプルなコントロール。 再生、元に戻す、やり直しの背後の円は消えました。暗い背景にはプレーンなアイコンの方がすっきり読めます。
• 透かしとタイムコードのピルをプレビューから外す。 時間は映像の下に置き、透かしのメッセージはアップグレードリンクと一緒にプロジェクトメニューへ移しました。
• ズームはピンチ。 ズームスライダーとプラスマイナスで1行丸ごと使っていましたが、タイムラインのピンチで同じことができます。
• スキップはドラッグ。 タイムラインをドラッグすればプレイヘッドが動くので、スキップボタンは不要になりました。
• メディア追加はストリップ上のプラス。 クリップを選んでいないときに表示されます。
• タイプスケール。 文字は7〜11pxではなく11〜17px、タイムラインのルーラーは数字が跳ねないよう11pxの等幅フォントにしました。

自分のエディターを監査する

Figmaファイルを手に入れる

無料ファイルには、ジュニアの初稿、修正版の画面、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

動画エディター画面のリデザイン、ビフォーアフター

両方の画面とすべてのパーツをFigmaコンポーネントとして収録。無料、閲覧専用、複製して自分のドラフトに入れてください。

Figmaで開く

FAQ

モバイルの動画エディター画面はどうデザインすべき?

プレビューに画面の全幅を与え、上部バーは閉じるボタン、プロジェクト名、画質、Exportボタン1つに絞り、選んだクリップのツールをフラットな1行に置きます。そこに、名前付きのレーンと1本のプレイヘッドを持つタイムラインを加えます。

動画編集アプリのプレビューはどれくらいの大きさにすべき?

画面が許す限り大きく、理想は角丸なしで何も重ねない全幅です。黒帯の間で小さく表示される映像では、構図やピントを判断しにくくなります。

動画エディターにタブバーは必要?

たいてい不要です。動画をカットしている人は離れようとしていないので、タブバーは使われないナビゲーションに約72pxを費やします。Home、Projects、Templatesはプロジェクト名か閉じるボタンの裏に置きましょう。

動画エディターで、散らからずにツールを見せるには?

選択中のものに適用できるツールだけを見せます。クリップを選んだら、Split、Volume、Speed、Effects、Delete、Adjustの1行で十分で、シェブロンでText、Stickers、Music、Voice、Filtersのメイン行に戻ります。

動画のタイムラインUIはどんな見た目であるべき?

時間ラベル付きのルーラー、テキスト・音楽・エフェクトの名前付きレーン、端から端まで続くフィルムストリップ、選んだクリップのハンドル、すべてのレーンを貫く太いプレイヘッド1本です。

出典

• 両方の画面は私たち自身のもので、Figmaでデザインし計測しました。アプリのCutline、プロジェクト、トラックは架空です。タイムラインは、InstagramのEditsアプリのエディターを写した実際のiPhoneスクリーンショット2枚を基にしていて、ズームは同アプリ自身の1秒あたり153ptです。
• アイコンはPhosphor(MIT)のものです。ステータスバーは、計測した実際のiPhoneのスクリーンショットから描いています。
• 写真はPexelsから:Roman Odintsov、Hector Perez、Thang-Nhat Tran、Airam Dato-on、Sokil。
• 最初にApp Brainyでカルーセルとして公開しました。