UI / UX デザイン
映像通話ツール通話画面デザイン

映像通話ツール通話画面デザイン

プロジェクト内容

映像通話ツール「LiveTaskyell」通話画面作成
「映像を見ながら話す」以外にも多くある機能(チャット、ペン、画面共有、カメラ操作・音声操作)を分かりやすく配置するUI設計

業務内容

Windows / Android(Google Chrome) / iOS(Safari)でのUIデザイン

担当フェーズ

UIデザイン / コーディング

期間

2022年6月~2022年9月

使用ツール

XD Illustrator Visual Studio Code HTML CSS Javascript

デザインのコンセプト

1

通話映像を最大限まで大きく、多くの機能を持つボタンは押しやすく

遠隔サポートの本質である「見る・見せる」体験を最優先し、画面スペースの70%以上を映像表示に割り当てました。同時に、頻繁に使用する機能(カメラ切替、画面共有、チャット)へのアクセスを容易にするため、ボタンサイズは指標に基づき最適化。特にモバイル環境では誤操作を防止しながらも直感的な操作を実現しています。これにより、ユーザーは映像に集中しながらも必要な機能にストレスなくアクセスできます。

2

異なるデバイスの特性を考慮したUI設計

サポートを提供するオペレーター側はPCを使用し、サポートを受けるユーザー側はスマートフォンを使用するという非対称な利用シナリオに対応するため、デバイス特性に合わせたUIを設計しました。PC版ではマルチタスク操作を考慮した効率的なレイアウト、スマートフォン版では片手操作を想定し、重要機能を画面下部に集約。特にスマートフォンでは、指の可動範囲を考慮した「親指ゾーン」にメイン機能を配置し、高齢者や初心者でも迷わず操作できるよう配慮しています。

3

「アプリ不要でITリテラシーを問わず利用できる」という製品コンセプトに沿って、どんな人手も使いやすいUI

特にITリテラシーの低いユーザーや初めて使用するユーザーでも迷わないよう最小限の操作ステップと明確な視覚的ガイダンスを提供し、ユーザーが躓きやすいポイントを徹底的に排除。これにより、年齢や技術的知識に関わらず、誰もが簡単に利用できるインクルーシブなデザインを実現しました。


工夫した点・実績

スマートフォンで使いやすいUI

利用環境・OSで表示サイズが異なるため、特に表示領域に限りがあるスマートフォンで使いやすくなることを心がけました。スマートフォンの限られた画面サイズを最大限に活用するため、ユーザビリティテストを繰り返し実施し、最適なUI設計を追求しました。特に注目したのは以下の点です:

  1. 操作ボタンを画面下部に集約し、片手操作時の使いやすさを向上
  2. 視覚的な階層構造を明確にし、主要機能と二次機能を区別
  3. 画面共有時の映像品質と操作性のバランスを最適化
スマートフォンで使いやすいUI

幅広いユーザー層を想定

ユーザー層が幅広く、IT機器の操作になれていない方も想定され、さらにユーザーはマニュアルも参照できないため、どんなユーザーであっても一目で使い方が分かるUIを追求。特に以下の点に注力しました:

  1. 専門用語を排除し、誰もが理解できる平易な言葉でUIラベルを設計
  2. タップ可能な要素を直感的に認識できるよう工夫

多くの機能をわかりやすく区別

事業者の契約内容、ユーザーの使用用途などによる機能の利用可否、使用中の機能の表示などを多くのパターンが混在するため、それらが分かりやすくなるデザインに。複雑な機能セットを直感的に理解できるよう、以下のデザイン戦略を実施しました:

  1. 機能をカテゴリー別に整理し、視覚的に区別できるアイコンとカラーコードを採用
  2. 利用可能な機能と利用不可の機能を明確に区別するUI表現
  3. 現在使用中の機能を強調表示し、ユーザーの現在の状態を常に把握できるようフィードバックを提供
多くの機能をわかりやすく区別