アプリ模写100本ノック_YouTube #53

今回はYouTube(iOSアプリ)です。

　YouTube(iOSアプリ)は、ユーザーが動画を投稿・閲覧・共有できるオンラインプラットフォームです。個人や企業、タレントなどがチャンネルを持ち、動画を投稿・閲覧することができます。ユーザーは、スマホやパソコンなどから無料で視聴でき、コメントやチャット機能で他のユーザーとコミュニケーションをとることもできます。
普段からよく利用しているサービスなのですが、使いにくいと感じたことはあまりないなと思う一方でどういった意図でこのデザインにしたかなどは考えたことがありませんでした。利用ユーザーが多いかつ長く愛されているサービスなので、新規ユーザーに対してどのような対応をしているのかも気になり、今回対象にしました。

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

目的

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

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

なんでやるのか

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

参考文献

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

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

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

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

• ホーム

  • ナビゲーションバーにロゴ、デバイス選択、通知、サーチ、アカウント

    • 下にスワイプしても固定されていないためついてこないが、上にスワイプすると再度表示される
      →上にスワイプ = ここにない動画を探したいというユーザー心理？

  • タブ（ゲーム、音楽、野球、etc…）がスライドでナビゲーションバー下に配置されている
    →YouTubeに慣れていない人、あまり伝ってない人向けの機能？

  • コンテンツエリアに「動画サムネイル」「広告」「アカウントの投稿」、ショート」「続きを見る」が動画サムネイル→広告→動画サムネイル→ショート→動画サムネイルのように動画サムネイルでサンドイッチになっている

  • タブバーに「ホーム」「ショート」「＋ボタン」「登録チャンネル」「マイページ」

    • ＋ボタン（動画作成&投稿）が中央配置されており、使って欲しい機能感がある

  • コンパスアイコンが一番左にあり、タップすると左からサイドメニューのドロワーが表示される

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

ホーム_動画視聴_登録チャンネル

他のサービスで見るような機能を多く含んでいて、アプリのUIにベーシックになるものがあるのかわからないですが、YouTubeは他のサービスが参考にしているベーシックにあたるのかなと感じました。ただ、他では見ないような機能を実装していたり、チャレンジしている部分も見つけ面白かったです。

ホーム画面では、おすすめの動画のサムネイルがフィードで表示されます。動画サムネイルに限らず、「広告」「アカウントの投稿」、ショート」「続きを見る」も表示されています。
まず、広告の面積がかなり大きいことが気になりました。広告を出した側と利用者側との表示面積に対する不満の調整が縦幅のサイズに出ている気がして面白かったです。また、動画サムネイルとその他の要素でサンドイッチのように交互に配置されてフィードになっていることが面白かったです。これによって、ホーム画面で見たい動画を探す際にいろんな情報が入ってくるのでアプリから離脱しない仕組みになっているんだろうなと感じました。情報を詰め込んであるサムネイルが並んでいても、広告やショートなどで視線の区切りを管理者側でコントロールができるのもメリットなのかなと感じました。

動画視聴画面では、選択した動画を見ることができます。動画に対して評価をつけたり、共有ができたり、リミックスという機能で切り取り投稿のようなものができたりします。
コア機能にあたるこの画面には、ユーザーが行う指の動きを考慮した設計になっていると感じました。例えば、動画が再生される領域外がハーフモーダルのような左右上が角丸になって入り、動画再生領域外で下にスワイプをすると、動画が画面全体に表示されます。動画以外の情報をスワイプで非表示にできるのがすごいなと思いました。
また、シークバーを上にスワイプすると、iPhonenの写真アプリでの動画調整のように、各画面の静止画が並んでおり、見たい箇所への調整が簡単になっていました。便利ではあるものの、気づきにくいため、一般ユーザーが気付いやすい仕組みがあれば良いなと思いました。

登録チャンネル画面では、自分がフォローしているチャンネルの最新動画を探すことができます。この画面によって毎回検索せずともみたい動画を見つけやすくなります。
いいなと思った点はコンポーネントの使い方です。登録チャンネル画面で利用しているコンポーネントの全てがホーム画面で利用されているものになるのですが、組み合わせ方や見せ方、文言で別ページと判断させていて良いなと思いました。基礎ではあるものの、タブバーに用意したメイン画面５つのうち全く同じコンポーネント要素で組んでいるサービスは今のところ見てないような気がします。全て同じコンポーネントのみを別画面でも利用しているけど、移動した感がないのはよく見かける気がします。
なんで移動したと感じたのかはヘッダー領域の要素や、ショートの見せ方、マージンの取り方など色々ありそうだなとは思いつつ、シンプルかつ洗礼されているのかなと思いました。

初めてYoutubeを触る人にも直感的に目的の動画を探せるようなタブがホーム画面のナビゲーション領域に配置されていたり、親切だなと思いました。以上です。