Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DeNA UIデザイナー 増田直生
DeNAでのサービスの作り方
自己紹介
2013年 12月 DeNA入社
∼2013年 11月 Goodpatch
増田直生DeNA UIデザイナー
アジェンダ
1.プロトタイピングの前に
2.プロトタイピングの進め方
3.ポイント
1.プロトタイピングの前に
1.プロトタイピングの前に
サービスの土台(コンセプト)をしっかりと築く
サービスを作る理由
ペルソナ設計
ユーザーシナリオの作成
サービスのゴール(KPI)
プロトタイピングよりも大切
疑問と課題意識を持って生活してみる
トレーニング
1.プロトタイピングの前に
2.プロトタイプの進め方
2.プロトタイプの進め方
機能を決める
ユーザーの課題や要望、利用シーンを考えながら
どのような機能が必要かを考える。
サービスのコンセプトに立ち返る
リサーチ&スケッチ
・色々なアプリやサービスを使ってみる
・なぜ人気なのかなどを考える
・描き出してイメージを作る
・サーバーエンジニアも開発着手
2.プロトタイプの進め方
サービスのコンセプトに立ち返る
ペーパープロトタイピング
※チームで共有することは少ない
・画面遷移、UIのイメージやインタラクションを確認する
2.プロトタイプの進め方
ワイヤーフレーム & 遷移図作成
・ある程度の精度のワイヤーフレームを作る
・色はモノクロで作る
2.プロトタイプの進め方
※マンガボックスのリニューアルで実際に使った物です
ワイヤーフレーム & 遷移図作成
ワイヤーフレームをProttで共有する
2.プロトタイプの進め方
※マンガボックスのリニューアルで実際に使った物です
デザイン & プロトタイピング
デザイン
プロトタイピング
フィードバック
改善
サービスのコンセプトに立ち返る
2.プロトタイプの進め方
主なデザインツール
Sketch3 Prott
2.プロトタイプの進め方
プロトタイピングツール
遷移の確認
インタラクション/
アニメーション
2.プロトタイプの進め方
開発着手
Web Android iOS
2.プロトタイプの進め方
・Sketchデータをエンジニアへ渡す
・開発途中の物でもチームで触ってフィードバックする
・サーバーエンジニアと認識のズレがないか確認する
リリース
2.プロトタイプの進め方
ここからがスタート
・データ分析
・SNSでの反応
・インタビュー
・ストアレビュー(適度に取り入れる)
2.プロトタイプの進め方
サービスのコンセプトを考え、常に改善・最適化
3.ポイント
・サービスは止まることがない
・動く物を速く作ってフィードバックをもらう
・チーム全員でフィードバックを行う
・サービスのコンセプトに立ち返る
・リサーチを怠らない
リリース後もやるべきこと
3.ポイント
DeNAの強み
3.ポイント
・フィードバックが素晴らしい
・開発スピードが早い
・モチベーションが高い
まとめ
・サービスのコンセプトに立ち返る
・動くものを作る
・多くの人からフィードバックをもらう
・常に改善・最適化を行う
3.ポイント
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

DeNAでのサービスの作り方

2,679 views

Published on

2015年 5/22(水)に行われたAmana Tech Nightで登壇した際に使った資料です。

Published in: Design
  • Be the first to comment

DeNAでのサービスの作り方

  1. 1. DeNA UIデザイナー 増田直生 DeNAでのサービスの作り方
  2. 2. 自己紹介 2013年 12月 DeNA入社 ∼2013年 11月 Goodpatch 増田直生DeNA UIデザイナー
  3. 3. アジェンダ 1.プロトタイピングの前に 2.プロトタイピングの進め方 3.ポイント
  4. 4. 1.プロトタイピングの前に
  5. 5. 1.プロトタイピングの前に サービスの土台(コンセプト)をしっかりと築く サービスを作る理由 ペルソナ設計 ユーザーシナリオの作成 サービスのゴール(KPI) プロトタイピングよりも大切
  6. 6. 疑問と課題意識を持って生活してみる トレーニング 1.プロトタイピングの前に
  7. 7. 2.プロトタイプの進め方
  8. 8. 2.プロトタイプの進め方 機能を決める ユーザーの課題や要望、利用シーンを考えながら どのような機能が必要かを考える。 サービスのコンセプトに立ち返る
  9. 9. リサーチ&スケッチ ・色々なアプリやサービスを使ってみる ・なぜ人気なのかなどを考える ・描き出してイメージを作る ・サーバーエンジニアも開発着手 2.プロトタイプの進め方 サービスのコンセプトに立ち返る
  10. 10. ペーパープロトタイピング ※チームで共有することは少ない ・画面遷移、UIのイメージやインタラクションを確認する 2.プロトタイプの進め方
  11. 11. ワイヤーフレーム & 遷移図作成 ・ある程度の精度のワイヤーフレームを作る ・色はモノクロで作る 2.プロトタイプの進め方 ※マンガボックスのリニューアルで実際に使った物です
  12. 12. ワイヤーフレーム & 遷移図作成 ワイヤーフレームをProttで共有する 2.プロトタイプの進め方 ※マンガボックスのリニューアルで実際に使った物です
  13. 13. デザイン & プロトタイピング デザイン プロトタイピング フィードバック 改善 サービスのコンセプトに立ち返る 2.プロトタイプの進め方
  14. 14. 主なデザインツール Sketch3 Prott 2.プロトタイプの進め方
  15. 15. プロトタイピングツール 遷移の確認 インタラクション/ アニメーション 2.プロトタイプの進め方
  16. 16. 開発着手 Web Android iOS 2.プロトタイプの進め方 ・Sketchデータをエンジニアへ渡す ・開発途中の物でもチームで触ってフィードバックする ・サーバーエンジニアと認識のズレがないか確認する
  17. 17. リリース 2.プロトタイプの進め方
  18. 18. ここからがスタート ・データ分析 ・SNSでの反応 ・インタビュー ・ストアレビュー(適度に取り入れる) 2.プロトタイプの進め方 サービスのコンセプトを考え、常に改善・最適化
  19. 19. 3.ポイント
  20. 20. ・サービスは止まることがない ・動く物を速く作ってフィードバックをもらう ・チーム全員でフィードバックを行う ・サービスのコンセプトに立ち返る ・リサーチを怠らない リリース後もやるべきこと 3.ポイント
  21. 21. DeNAの強み 3.ポイント ・フィードバックが素晴らしい ・開発スピードが早い ・モチベーションが高い
  22. 22. まとめ ・サービスのコンセプトに立ち返る ・動くものを作る ・多くの人からフィードバックをもらう ・常に改善・最適化を行う 3.ポイント
  23. 23. ご清聴ありがとうございました

×