新型コロナウイルスに関係する内容の可能性がある記事です。
新型コロナウイルス感染症については、必ず1次情報として 厚生労働省 首相官邸 のウェブサイトなど公的機関で発表されている発生状況やQ&A、相談窓口の情報もご確認ください。※非常時のため、すべての関連記事に本注意書きを一時的に出しています。
見出し画像

Daily Cocoda! 2周目に取り組んでみた 024

現在、UX/UIデザイナーとして就職を目指している仲田 光佑です!

今日もDaily Cocoda!のお題に取り組んでいきたいと思います。

今日のお題は通話中の画面です。

024 通話中の画面

まずはお題の確認をしていきたいと思います!

誰向け
リモートで働くフリーランス
魅せたい項目
ビジネスシーンで使用できる通話アプリ
雰囲気
どこにいてもオフィスで会議に出ているような雰囲気
参考アプリ
・Skype
・Messanger
appear in.

いつもは参考アプリからトレースするアプリやサービスを選んでいましたが、今回はオンライン通話サービスでのZoomをトレースしました。なお、今回はビジネスシーンでの利用を想定したお題なので、webアプリ版でZoomのトレースを行いました。

トレースは13インチMac Book Proの1440px×900pxサイズで行いました。

Zoomの通話中の画面のトレースと分析

URL一つで誰でも参加できるZoomはZoom Video Communicationsが運営するオンライン通話サービスです。最近では新型コロナウイルスの影響もあり、世界中の会社や学校でZoomは利用されていて、いまや人々の生活に欠かせないものになりました。

そんなZoomの通話中の画面をトレースしたものがこちらです。

zoom トレース用@3x

スクリーンショット 2020-04-20 17.56.51

※このトレースは2020年5月時点のものです。
※会議参加者の画面は会議の参加人数によって大きさが変動するので、トレース時では省略しました。

Zoomの通話中の画面において、重要な機能はユーザーのアクションは画面の下部に固定されています。どのアイコンにも下に機能の説明があるので、ユーザーは迷いなく実行したい機能を使うことができます。

一方で、画面上部は通話中においてそこまで重要ではない機能が配置されていました。右上に「全画面表示の終了」のボタン、左上のアイコンで「URLのリンクをコピー」をすることができます。

競合の通話中の画面

競合の調査として、今回はSkypeとLINEの通話中の画面をスクショしました。

Skype トレース用@3x

LINE トレース用@3x

※グレーのオブジェクトには参加者が表示されます。今回はスクショ用なので、1人仕様です。

Zoomだけでなく、SkypeとLINEでも重要な機能は画面下部に固定されていました。しかし、大きく違う部分は画面下部の構成です。Zoomは画面下部の中心に画面共有などの機能が配置されているのに対し、SkypeとLINEでは音声やビデオのON/OFF、ビデオを終了する機能が配置されています。

理由はおそらくサービスの目的の違いです。Zoomは「会議」をサービスにしていて、ビジネスでの利用シーンを想定しています。

ZoomのLPを確認してみると、

Zoom
リアルタイムメッセージングとコンテンツ共有が可能な企業向けビデオ会議

というメッセージを確認することができます。

そのため、音声やビデオの切り替えよりも、会議のレコーディングや画面の共有の方が重要な機能といえます。そのため、Zoomは会議において重要な機能は真ん中に配置しているのでしょう。

一方で、SkypeとLINEはコミュニケーションを主にサービスの中心としています。

それぞれのサービスのLPを確認してみると、

Skype
「Skype で気軽に連絡を取り合う」
「会話、チャット、コラボレーションしましょう」

LINE
「友だちが遠く離れたところにいても無料ビデオ・音声通話でいつでも話せます。
声が聞きたい、顔が見たいときは、いつでもLINEで」

というコンセプトメッセージでした

つまり、Zoomはビジネスでの利用を、SkypeとLINEはプライベートでの利用を想定した画面構成になっているのではないでしょうか。

そのため、Zoomでは会議で使う機能を画面下部の中心に置き、そこに重要な機能を意識して配置してるのだと思われます。

次にZoomのトレースと分析を終え、ターゲットに合わせたリデザインの方向性を決めました。今回はビデオ通話サービスで重要な画面下部を中心にリデザインをしていこうと思います!

Zoomの通話中画面のリデザイン

完成したリデザインがこちらです。

画像5

※画像はUnsplashのものを使用しました。
※画像はすべて外国人なので、リデザインはテキストを英語に変更しました。

ページだけの画面

画像6

リデザインでは画面下部のアイコンとテキストをフローティング化しました。SkypeやLINEではボタンが一つ一つ独立していましたが、Zoomはボタンをフローティングで統一し、差別化を図りました。ボタンをフローティングにすることで画面全体をすっきりさせつつ、ボタンとしての認知を高めるのが狙いです。このフローティングはdely株式会社CXOの坪田さんのnoteを参考にさせていただきました。

また、当初は右下にあった「ミーティングを終了する」テキストボタンは画面上部に配置を変更しました。フローティングが中心となる画面の下部にテキストボタンがあるとその部分が浮いてしまうと感じたからです。テキストボタンもフローティング化することも考えましたが、フォントカラーが赤なのでそこに視線が誘導されてしまう可能性があります。そのため、テキストボタンの配置は画面上部右上に配置し、会議中に目立たないようにしました。

おわりに

次回は025 リワードモーダルのトレースとリデザインをこのnoteに書いていければと思います!

noteを読んでいただき、ありがとうございます!


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

8
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。