新規事業におけるUIプロトタイピングの実践例 / Examples of UI prototyping practices for new businesses

本スライドは「第26回ゆるはち.it: プロトタイピングについてゆるく話す」の登壇用資料です。
https://yuruhachi-it.connpass.com/event/197257/

10月にリリースされた 気づきの習慣化アプリ「Stockr」について、プロトタイプを作成してUI/UXを検証した事例をご紹介します。

Transcript

1. 新規事業における
   
   UIプロトタイピングの
   
   実践例
   第25回 ゆるはち.it 登壇資料
   Twitter: @_akinen
   

   View Slide

2. あきねん
   株式会社ビルディット／デザイナー
   
   長野県諏訪市 出身 → 八王子市 在住
   
   現在は「Stockr」のUI/UXデザイン
   （小澤 晶徳）
   

   View Slide

3. Stockrについて
   気づきの習慣化をサポートするアプリ。
   ・日々の「気づき」をストックして
   
   　時々ふりかえることで、
   
   　自己成長を促進するアプリ
   
   ・2020年10月にリリースし、
   
   　現在は機能を改善中
   
   ・Figmaでデザインし、Flutterで開発
   

   View Slide

4. 今回はFigmaでプロトタイピングした
   
   事例をご紹介します
   

   View Slide

5. ありがちなこと
   これでいかがでしょうか？
   

   View Slide

6. デザイナーの脳内にはあるけど・・・
   
   画面を見せられただけでは
   
   どう動くかイメージできない！
   想像で実装 → 修正箇所が増大
   ありがちなこと
   

   View Slide

7. 動作イメージも含めて議論することで、
   
   実装前に検証できる ＆ 認識を合わせられる
   投稿を複数選択 →コピー／シェアができるUI
   
   (後ほど画面をお見せします)
   
   ・Figmaでプロトタイプを作成
   
   ・URLをSlackに共有して触ってもらう
   
   
   Stockrの場合
   

   View Slide

8. 実演Time
   

   View Slide

9. つくる前に分かる部分
   ・複数画面に渡るデザインをつくる際、
   
   　動作イメージを共有するのにプロトタイプは効果的。
   
   
   ・「つくってから考える」という方法もあるが、
   
   　 は検証しておきたい。
   まとめ
   

   View Slide

10. ご清聴
    
    ありがとうございました
    

    View Slide