はじめまして。こんにちは。
株式会社タクスタ デザイナーの中江（@mknakae）です。
7月にリリースしたライブ配信サービス「宅スタ」の UIデザインを担当いたしました。
今回は簡単にですが、ユーザにとって居心地の良いデザインを心がけて如何にデザインの決定を行ったかを、ライブ画面に絞ってご紹介したいと思います。
これを根本として、迷った時の裏のコンセプトとして「1日10回起動しても疲れないか？」を目標としていまし、ユーザーが何度見ても飽きないインターフェイスを目指しました。
あとはライブストリーミングとしての最大限居心地が良いように機能をどのように見せるかでした。
まず、配信／視聴側の画面のすべての機能はこちらです
・全画面で動画が見える
・コメントが出来る、読める
・エールと呼ばれる★が飛ぶ
・誰が入室したかがわかる
・視聴数
・（配信者をフォローしてみよう！などの）チャットプツと呼ばれる自動的に入れる文章
・配信タイトル
・配信者情報
・配信時間
視聴側のみの機能
・★をとばして応援する機能
配信側のみの機能
・終了する
・配信情報を編集する
まず、配信タイトルや配信社情報はライブ視聴中にはあまり見ない情報として優先順位を下げ、左スワイプすると表示されるようにし、その他の情報はコメントと同じ場所に集中させました。
主に操作を要するコメントとエールの位置も、操作しやすい指が届くエリアに収めました。
コメントは配信社と視聴者とのコミュニケーションとしてもっとも重要なものなので、当初あった黒透過の上に白抜きの文字を表示させる案から、無透過の白背景を敷き、配信中の読みやすさを重視しました。ここまでで途中段階のUIです。
他にはこんなことをしています
・コメント表示エリアに、チャットオプツや入室情報も流れるようにし、配信、視聴中の情報はこのエリアを見れば良いように
・コメントエリアは全画面に対して60％もの表示領域をとっているので、画面をタップするという簡単な操作で表示／非表示を切り替えられるように
・閉じるボタンやコメント入力欄も、背景を敷くなどして見やすくしていましたが、動画の邪魔しないような表現に変更
・動きやインタラクションはなるべく自然に
・★（エール）は当初は1色でしたが、ここは盛り上げるポイントでもあるので入室したときに12色の中からランダムで色が振られる仕組みにし、視覚的に盛り上がる仕組みづくりを
・配信時間の情報優先度を下げ、画面に最下部に2pxのバーで簡略表現
・ユーザー情報は配信者も含め統一してモーダルで表現
・配信中でも配信情報を編集できる機能は配信画面を完全に隠さないように透過画面で
などなど
ユーザーにとって居心地のよいものにするために、こんな感じで1画面内の1機能ごとに、丁寧に細かく作り込んでいきました。
ここは配信中のフィルター選択すると同時に、ホーム画面に表示される写真の撮影も行います。
タイトルが画面下部に入るため、なるべく画面上部に顔の目線を持って行って欲しかったので、下の方には薄くですが黒背景を敷き、ここより上に持ってくように自然と誘導しました。
もちろん美肌が叶えられる動画のフィルターも必見です！
ぜひ1度アプリをダウンロードして使用していただけたらと思います。
最後まで読んでいただき、誠にありがとうございました。
株式会社タクスタ デザイナーの中江（@mknakae）です。
7月にリリースしたライブ配信サービス「宅スタ」の UIデザインを担当いたしました。
今回は簡単にですが、ユーザにとって居心地の良いデザインを心がけて如何にデザインの決定を行ったかを、ライブ画面に絞ってご紹介したいと思います。
宅スタとは
縦画面&業界初のフィルターで美肌加工することが可能なのが特徴の動画をライブ配信サービスです。
チームでのコンセプト
宅スタのコンセプトはおしゃれに動画配信ができること。これを根本として、迷った時の裏のコンセプトとして「1日10回起動しても疲れないか？」を目標としていまし、ユーザーが何度見ても飽きないインターフェイスを目指しました。
居心地の良い縦配信を！
宅スタの最大の特徴である縦画面で配信するスタイルは私がチームにジョインしたときにはすでに決まっていました。あとはライブストリーミングとしての最大限居心地が良いように機能をどのように見せるかでした。
まず、配信／視聴側の画面のすべての機能はこちらです
・全画面で動画が見える
・コメントが出来る、読める
・エールと呼ばれる★が飛ぶ
・誰が入室したかがわかる
・視聴数
・（配信者をフォローしてみよう！などの）チャットプツと呼ばれる自動的に入れる文章
・配信タイトル
・配信者情報
・配信時間
視聴側のみの機能
・★をとばして応援する機能
配信側のみの機能
・終了する
・配信情報を編集する
まず、配信タイトルや配信社情報はライブ視聴中にはあまり見ない情報として優先順位を下げ、左スワイプすると表示されるようにし、その他の情報はコメントと同じ場所に集中させました。
主に操作を要するコメントとエールの位置も、操作しやすい指が届くエリアに収めました。
コメントは配信社と視聴者とのコミュニケーションとしてもっとも重要なものなので、当初あった黒透過の上に白抜きの文字を表示させる案から、無透過の白背景を敷き、配信中の読みやすさを重視しました。ここまでで途中段階のUIです。
他にはこんなことをしています
・コメント表示エリアに、チャットオプツや入室情報も流れるようにし、配信、視聴中の情報はこのエリアを見れば良いように
・コメントエリアは全画面に対して60％もの表示領域をとっているので、画面をタップするという簡単な操作で表示／非表示を切り替えられるように
・閉じるボタンやコメント入力欄も、背景を敷くなどして見やすくしていましたが、動画の邪魔しないような表現に変更
・動きやインタラクションはなるべく自然に
・★（エール）は当初は1色でしたが、ここは盛り上げるポイントでもあるので入室したときに12色の中からランダムで色が振られる仕組みにし、視覚的に盛り上がる仕組みづくりを
・配信時間の情報優先度を下げ、画面に最下部に2pxのバーで簡略表現
・ユーザー情報は配信者も含め統一してモーダルで表現
・配信中でも配信情報を編集できる機能は配信画面を完全に隠さないように透過画面で
などなど
ユーザーにとって居心地のよいものにするために、こんな感じで1画面内の1機能ごとに、丁寧に細かく作り込んでいきました。
シンプルな画面を
文字で説明しなくても良い表現をさがしたり、インターフェースの構成要素に優先順位を付け、下げれるものをとことん下げたり。削れるところはとことん削って、ユーザーに考えさせず、気軽に使ってもらうために非常にシンプルに見えるUIになっていると思います。例えば配信開始フローの最初の画面。ここは配信中のフィルター選択すると同時に、ホーム画面に表示される写真の撮影も行います。
タイトルが画面下部に入るため、なるべく画面上部に顔の目線を持って行って欲しかったので、下の方には薄くですが黒背景を敷き、ここより上に持ってくように自然と誘導しました。
最後に
このように、宅スタは「1日10回使っても疲れない」居心地のいいUIデザインに細部にこだわって作りました。もちろん美肌が叶えられる動画のフィルターも必見です！
ぜひ1度アプリをダウンロードして使用していただけたらと思います。
最後まで読んでいただき、誠にありがとうございました。