$30 off During Our Annual Pro Sale. View Details »

声でつながる、 優しい世界を創るUI/UX

stand.fm
March 01, 2021

声でつながる、 優しい世界を創るUI/UX

stand.fm

March 01, 2021
Tweet

More Decks by stand.fm

Other Decks in Design

Transcript

  1. 声でつながる、
    優しい世界を創るUI/UX
    デザイナー Mio Oishi
    2021年2月26日

    View Slide

  2. 大石 未央

    stand.fm創業メンバー

    stand.fmに関わるデザインを全て担当

    前職はMERYのデザイナー

    mikuso


    View Slide

  3. 今日話すこと
    声でつながる、優しい世界をどう表現しているか?


    1.色の見せ方

    2.数字を見せない

    3.声でつながる


    エンジニアとのコミュニケーションのとり方


    View Slide

  4. 声でつながる、優しい世界を創る
    だれでも気軽に発信できることで、

    多彩なコンテンツが生まれ、だれもが声で繋がれる

    自分の居場所に出会えるような

    優しい音声プラットフォーム作りを目指しています。

    View Slide

  5. 1.色の見せ方

    View Slide

  6. 色の見せ方
    アプリで主に使用しているカラー


    View Slide

  7. 色の見せ方
    初期イメージ
 改善後


    View Slide

  8. 色の見せ方
    アプリ全体を白基調に

    ユーザーに与える印象をニュートラルに。 

    プラットフォーム感を出す。 

    ピンクの比率は白10に対して2までに留める 


    View Slide

  9. 色の見せ方
    配信者が表現する場所を

    大切にする


    LIVEや放送、シェアした画面は 

    ユーザーが世界観を一番表現できる場所 

    画像を大きく表示


    View Slide

  10. 色の見せ方
    外部のSNSシェア時

    stand.fmの投稿と他の投稿が混ざっても 

    違和感が出ないように 


    View Slide

  11. 2.数字を見せない

    View Slide

  12. SNSには、数値化され過ぎた弊害もあると考えています
    炎上が起こりやすい、過度に敏感になる、”ギスギスした”空気感が漂っている

    フォロワー数/再生回数が過度に意識される 


    発言や投稿に過激なものが増える 


    揚げ足をとったり、文脈を無視される 


    炎上してしまうことが増える 

    現状のインターネットコンテンツの課題

    Infographic vector created by alvaro_cabrera - www.freepik.com:https://www.freepik.com/vectors/infographic


    View Slide

  13. 2.数字を見せない
    プレッシャーになる数字を非表示に


    配信者がプレッシャーを感じないように 

    フォロワーやフォローの数、再生数などは 

    リスナー側から見えないように 


    View Slide

  14. 2.数字を見せない
    数字を気にせず好きな配信ができる


    配信したいコンテンツだけを配信して 

    それを聞きたいファンが集まる 


    View Slide

  15. 3.声でつながる

    View Slide

  16. 3.声でつながる
    アプリの利用者同士が

    かんたんにつながれる

    配信者
 リスナー

    招待
    参加

    View Slide

  17. 3.声でつながる
    ライブ配信中に参加リクエストを
    送って一緒に配信


    View Slide

  18. 3.声でつながる
    離れていてもいつでも

    つながっている安心感


    View Slide

  19. エンジニアとの

    コミュニケーションのとり方

    View Slide

  20. エンジニアとのコミュニケーション


    View Slide

  21. エンジニアとのコミュニケーション
    コード/デザイン管理

    Github
 Figma

    Slack
 Discord
 Tandem

    コミュニケーション


    View Slide

  22. エンジニアとのコミュニケーション
    新機能を作る時はデザイナーとPMが決める?

    Designer
    PdM Engineer

    View Slide

  23. View Slide