アプリ模写100本ノック_CapCut #56

今回はCapCut(iOSアプリ)です。
CapCut(iOSアプリ)は、無料の動画編集アプリです。AIを搭載しており、ブラウザやWindows、Mac、Android、iOSなどさまざまなデバイスで利用できます。初心者でも数秒で使い始められ、TikTokやInstagramリールなどの動画作成にも活用されています。

TikTokを運営するByteDanceがリリースしており、TikTokの互換性が高い印象を受けました。普段はこちらのサービスを使用することはないのでですが、今回よく使われているアプリということで対象にしました。

アプリ模写100本ノックとは

目的

1. そのアプリのコア体験について製作者の意図を考察し、気づきを通じてデザインパターンの引き出しを広げることが狙い。

2. 自分の知識として定着させる

なんでやるのか

デザインを作る上で瞬発力が必要
そのために以下のスキルが重要になる
・対象を観察する
・事象から法則性を見つけ出す
・即興で形にする

参考文献

Miwa Kuramitsuさんのこちらの記事です。頑張ります。

アプリ模写100本ノックやり方

上記の後にまとめとして「やってみて感じたこと・気づいたこと」を画面ごとに書き出しています。

アプリを触りながら、気になったことをメモ

• 編集

  • ナビゲーションバーは固定ではない

  • コンテンツエリアの上部に配置されたたぶの「展開」ボタンもしくは、タブより下のエリアを下にすワイプすると隠れているタブが表示される

    • 展開するタイミングでバイブレーションが起きる

  • 「新しいプロジェクト」ボタン

    • アイキャッチになってる

    • ボタンのサイズが大きい

    • グラデーションがボタンにかかっていて、視覚的な情報量を増やしているイメージ

    • 下にスワイプすると、ボタン内の文字が右にスライドし、非表示になる。アイコンの「+」が真ん中に移動する。また、ボタンの縦幅が狭まり、画面上部に固定される

  • プロジェクト

    • エクスポートにしていない作品も下書き保存状態で保存される

    • 表示方法をリストとカードで切り替えられる

    • オリジナルの並び替えはできない

    • 作品を長押しすると、「０個のプロジェクトが選択されました」という文言が表示される

      • キャンセルボタンと重なっている

やってみて感じたこと・気づいたこと

　動画制作アプリを対象にしたのが今回が初めてだったため、作成画面を分析できるか不安だったのですが、なぜ動画作成したことがない人が直感的に触ることができるのかがわかりました。また、なぜユーザー数が多く評価が高いのかも少しですが理解できたと思います。

　編集画面では、過去に作成したプロジェクト（作品）が表示されている画面です。アイキャッチに「新しいプロジェクト」ボタンが配置されており、どこで作品作成ができるのかが一目でわかる設計になっています。ボタンの大きさや背景のグラデーションアニメーションなどでアイキャッチとして成立させている印象です。
面白いなと思った点はFVと上にスワイプした状態としたニスワイプした状態の３段階に分かれた要素の見せ方です。上にスワイプすると各種機能の一覧が表示されます。下にスワイプすると「新しいプロジェクト」ボタンの縦幅がほぼ半分になり、ボタン内の文言が消えて画面上部に固定されます。この見せ方から、TikTokで使用されている親指のフリックだけで操作ができる設計を思い出しました。この編集画面の操作だけでも気持ちが良いなと感じました。
ただ、画面名が「編集」なのが適切ではないような気はしました。

　作成画面では、選択した画像もしくは写真を利用し、制作をすることができます。テキストやオーディオ、エフェクトの追加などが簡単にできることに驚きました。
この画面で良いなと思った点は、中央軸を現在見ている状態としている点です。コンテンツエリア上半分に選択した写真もしくは動画が表示されます。下半分で再生/停止や編集を行うことができ、下での操作と上のビジュアルが連動しています。今再生されている箇所を中央に配置し、上半分も中央一点に揃えて表示されていることで、視線の無駄な移動が減り、真ん中にあることで指での操作がしやすいなと思いました。
気になった点は、拡大ボタンタップ後の画面です。プレビュー機能の役割を持っているのですが、画面の離脱方法が画面右下の縮小ボタンしかないため、上スワイプで離脱できても良いのになと感じました。

　テンプレート作品画面では、どなたかが作成した作品をテンプレートとして作品を作れます。クオリティがある程度あるテンプレートがたくさんあるため、動画編集に対しての難易度が低く、これを利用してTikTokに投稿することを勧めているため、ユーザー数が多いのかなと思いました。
上下左右のフリックで表示される画面はTikTokと同じです。上下に不透明度のある黒のグラデーションがかかっており、ボタンや文字の要素が映像で埋もれることがないようになっています。
僕個人の推測ですが、あくまで基準はTikTokで、TikTokの操作に慣れたユーザーが、よりクオリティの高い動画を作成するためにこのアプリを利用して欲しいと考えているのかなとこの画面からより感じました。

TikTokはたくさん動画を投稿してもらうことが必須のため、エフェクトを試す感覚で動画の投稿ができるのに対し、CapCutはクオリティの高い動画を投稿したい人向けにテンプレートを多数用意し、１から自作したい人向けの画面もあり、幅広い層の獲得を２つのアプリで行なっている印象を受けました。
以上です。