Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

05c96f928d852497bd4c6e9dcdecfc8f?s=47 Akinen
December 23, 2020

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

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

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

05c96f928d852497bd4c6e9dcdecfc8f?s=128

Akinen

December 23, 2020
Tweet

Transcript

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

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

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

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

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

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

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

  8. 実演Time

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

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