TikTok アプリの画面遷移

はじめに。

新サービスの検討時には、どういうUI/UXにするか検討するために他社調査をしたり、ワイヤーを作成したりすることが多いと思います。
特に一つ一つ競合アプリの調査をするのは骨の折れる作業であり、どういう機能があるかをまとめるのは大変です。

私は、新サービスの開発やサービス改善などで、アプリやWebサービスの画面遷移を調査をしていますので、一部を公開したいと思います。
よろしければ、参考にしてください。

TikTok概要

開発会社：バイトダンス社
対応OS：iOS / Android 
ダウンロード数：8億5000万件（*参考記事_2020年：こちら）
＊バイトダンス社の年間売上：約350億ドル（約３兆6300億円）
＊中国版：抖音（Douyin）との合算は20億件（参考記事_2020年：こちら）

TikTok アプリ

TikTok アプリの画面遷移を調査しました。
今回は、1-3までの機能を紹介します。

アプリの主な機能を下記7つで分類しました。
- 1. チュートリアル
- 2. サービス（動画閲覧）
- 3. 検索
- 4. 通知/メッセージ
- 5. マイページ
- 6. アカウント登録
- 7. 動画撮影 / 投稿

作成した画面遷移

1. チュートリアル

- 初回アプリ起動直後：アプリ起動直後に、利用規約への同意が求められます。しかし、利用規約の導線がなく、利用規約の確認ができません。（AppStore にあるプライバシーポリシーに遷移するとサービス規約は見ることができます）
- 初回アプリ起動：規約同意後、パーソナライズ用のジャンルを選択します。カテゴリは全25種
- チュートリアル：動画を上にスワイプで変更すること。動画は「視聴」「いいね」「シェア」の行動履歴からパーソナライズされることがアナウンスされます。
- チュートリアル完了後①：この段階で、Push通知の許諾確認をする
- チュートリアル完了後②：チュートリアルが完了し、動画閲覧画面になりますが、その上に半透明で「上にスワイプでさらに表示」を再度表示。先程のチュートリアルの内容を実際の画面でさらにアナウンスしています。

2. サービス（動画閲覧）

- 動画閲覧：サービスのメインページ。動画閲覧は、このページで完結します。
- 下にスワイプで動画がさらに表示され、上にスワイプで前の動画が表示されます。右にスワイプすると、その動画投稿したユーザのページへ移動します。
- 画面上部には、「フォロー中とおすすめ」があり、初期状態は「おすすめ」になっています。
- 画面の右部は、5つのアイコンが並びます。「フォロー/アンフォロー」「いいね」「コメント」「シェア」「再生中の音楽」が表示されます。「フォロー/アンフォロー」「コメント投稿」はアカウント登録が表示されます。（コメント閲覧はアカウント投稿は不要です）
- 画面左部は、動画投稿者のアカウント名、動画の説明、ハッシュタグ、再生中の音楽タイトルが表示されます。それぞれタップするとアカウト名は、動画投稿したユーザページ、ハッシュタグは、ハッシュタグのページ、再生中の音楽は、利用している動画一覧へ遷移します。
- 画面下部は、共通となるフッターメニューが表示されます。
- 動画が中心となるため、メニューは、動画の周りを囲む用に配置されています。メニューは、レコメンドは画面閲覧、トレンドは検索、メッセージは通知/メッセージという主要機能のことです。

3. 検索

- トレンド：画像閲覧のポータルのようなページ。最上部に検索入力ボックス。その右にTicCodeを読み取るカメラの起動ボタン。その下がバナー枠になっています。バナーは全部で16枠あり、自動でスライドしていきます。
バナーの下は、ハッシュタグがついている動画が並んでいます。各ハッシュタグ毎にこの画面で表示している動画は8枠でした。動画は最初の1-2秒だけ動いています。動画は右側にスワイプすると動きますが、8枠を超えるとハッシュタグページへ遷移します。
- #ハッシュタグ ：ハッシュタグのページ。ハッシュタグのアイコン、説明、視聴回数、セーブするボタン、動画一覧が表示されています。また画面下部は動画の上に「動画撮影」アイコンが表示されています。動画一覧は横3列で、下に動画が表示されます。下にスワイプすると動画が読み込まれ続けます。左にスワイプすると前の「トレンド」ページへ遷移します。
- Tikコードスキャン：Tikコードスキャン用のカメラ画面です。TikTokを利用している場合、このTikコードを生成しシェアし、フォローしてもらうことができます。

サービスの特徴

チュートライアルがかなり短く、動画閲覧部分しか説明していません。（それも下にスワイプするだけ）試聴動画のパーソナライズが自動で行われるため、スワイプのみのインプットが一覧離脱が少ない可能性が高いです。
動画視聴ページは、動画にメニューが重なっていますが、視認性はあまり悪くないです。基本メニューは画面の真ん中をあけて端に配置されていて苦になりません。

さいごに。

アプリやWebサービスのUI/UX調査や、実際の新サービスの設計などがあれば、ぜひ、ご相談ください！
https://6guild.com/

調査方法
・調査端末：iPhone12 Pro（iOS 14.5.1）
・調査日：2021/05/13