SlideShare a Scribd company logo
Jumvo 2.0 における

             デザイナーとエンジニア
             の連携

             ジェネシックス 伊野・永野




12年4月3日火曜日
• こんなことを話します 永野,伊野 (1分)

             • Jumvoとは
             • プロトタイピング(永野)
             • Jumvo 1.0まで (永野)
             • Jumvo 2.0 / UX + Prototype + UI (伊野)
             • まとめ
12年4月3日火曜日
Jumvoとは

             • iPhoneアプリ
             • http://jumvo.com
             • ボイスメッセージング・サービス
             • 友だちと声を送りあう、声のSMS
             • 友だちリストにFacebookを使う
12年4月3日火曜日
目指したこと
             • 毎日使う、電話/SMSのようなサービス
             • なので高度なインターフェイスが必要
             • 使い勝手が超重要
             • 高度 == 使いやすい、楽しい、やりたい
              ことがすぐにできる、気持ちがいい、
              かっこいい、がゆえに手になじむ
12年4月3日火曜日
• SMS(現、Messages)のようにシンプルで
              使いやすい

             • Tweetie(現、Twitter公式)みたいに高度な
              インターフェイスを持つアプリは

             • いったい、どうやったら作れるのか?
12年4月3日火曜日
高度なUIを実現するには
         1. 世界のすべてを完全に把握した、完全な
             るデザイナー(ネ申)が (天地を創造するよ
             うに) 仕様のすべてを決定する

         2. (優秀な?)デザイナーとあーだこーだ言
             いながら磨き上げていく
             => ネ申 はいないので2しかないよね!


12年4月3日火曜日
2でいくとして
             • これまでの経験上、動かしてみないと
              分からない部分が多いし、だから仕様
              はゴロゴロ変わる。そして柔軟に変え
              ていかないとよいものはできない

             • つまり、仕様はなかなか決まらない
              し、あーだこーだ言うプロセスが重要


12年4月3日火曜日
• 仕様を確定させることが難しいのだ!
              • 仕様 == UIのすべてのヴィジュアルと
               動き、 サウンドエフェクトなど

             • 仕様が決まれば、(誰でも)作れる


12年4月3日火曜日
ここまでのまとめ
             1. 結局動かしてみないと分からない部分
              が多い

             2. あーだこーだ言いながら磨き上げてい
              く必要がある
              => 変更を前提とした動くものベースの
              開発をやればいいんじゃないか
              =>プロトタイピング・ベースの開発!

12年4月3日火曜日
プロトタイピング
             •   プロトタイピング(Prototyping)とは、実
                 働するモデル(プロトタイプ)を早期に製
                 作する手法およびその過程を意味する。そ
                 の目的は、設計を様々な観点から検証する
                 ためだったり、機能やアイデアを形にする
                 ことでユーザーから早めにフィードバック
                 を得るためだったり様々である。
                 http://ja.wikipedia.org/wiki/プロトタイピング

12年4月3日火曜日
プロトタイピング

             • 広い意味で使っちゃってますが概ね
              • (変更前提で)動くものベースで開発
              • 迷ったら複数パターン動かしてみる
              • ひとまず動くようにして操作の流れ
               を繋ぐ

12年4月3日火曜日
お断り

             • プロトタイピングの手法を勉強したわ
              けではないので手法や用語に詳しいわ
              けではありません。あくまで(特に
              iPhoneアプリでは) 仕様を決めるのが難
              しいので、動くものベースでやっただけ



12年4月3日火曜日
• 実際にどうやって作っていったのか




12年4月3日火曜日
Jumvo 1.0
             • デザイナーのアサイン予定が1ヶ月先
              だった

             • 企画は出したが、面白いかは不明で
              あった

             • 企画段階から、開発手法を模索してい
              るので、と言われてプロトタイピング
              を提案していた
12年4月3日火曜日
4月末∼5末
             •   スケッチ描いて + 藤井幹大さ
                 ん、伊野さんに相談しつつ
                 コア機能を実装

                 => 声を送れるようにしてDemo
                 => g6みんな「面白い!」
12年4月3日火曜日
12年4月3日火曜日
6月∼6月下旬

             • デザイナー アサイン(カルビン)
             • 動かしては検証。デザイン案 => 実装
              => デザイン案 => 実装 => デザイン案
              =>実装 (2, 3周?)



12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
6月末~7月上旬


             • いい加減、仕様決めないと終わらない
              よ => まとめ作業

             • 1.0完成 (8月にリリース)

12年4月3日火曜日
• そんな感じで動かしてはあーだこーだ
              言いつつ、開発

             • スピード感をもって (2ヶ月半ぐらい)
              使いやすいものが作れたと自負




12年4月3日火曜日
問題点
             • Jumvo 1.0は後半、動かしてみて試せば
              いい、の方向によりすぎて、デザイ
              ナーが決めきれない状態があった(軸)

             • すべての判定が動くものベースに行くと
              まずい(まずはこうあるべき、がないと)

             • デザイナーがプロトタイプに引っ張ら
              れる危険性が高い

12年4月3日火曜日
• 評判




12年4月3日火曜日
• この体験は、おそらく多くの人に衝撃
              を与えるだろう (Techwave)




12年4月3日火曜日
• このアプリはとても使いやすくていい
              ですね!すばらしいアプリです。
              (AppBank)




12年4月3日火曜日
Apple Rewind 2011受賞




12年4月3日火曜日
• が、しかし、ダウンロード数伸びず....




12年4月3日火曜日
UXデザイン




      もう一段上のレベルのGUIを所望され、
      2.0開発へむけアサインされる。




12年4月3日火曜日
UXデザイン




      あまりうまく回ってなかった1.0の問題

      ・UXDとUIDとプロトタイピングがバラバラに機能していた…
      ・動くからといってプロトタイピングに頼りすぎて仕様が
       決められず…
                          体験することが仕様決定につながらない
                          逆に時間ばかりとられる




      もう一度ぐるぐるをうまく機能させるために、死ぬ気でUX・UI
      のデザイン主導体制に。



12年4月3日火曜日
UXデザイン




      その前に、UXデザインってなに?

      【 Wikipedia 】
      ユーザーがある製品やシステムを使ったときに得られる経験や満
      足
                            ゴール例
                            使う人が認識してることではないか
                            も。無意識。調査・インタビュー


                            Jumvo
      【 genesix 】           エモーショナル

      使う人の「ゴール」を発見して道筋を設定すること!
                            ストレスなくコミニュケーションが
                            とれる。
                            ファンクショナル
                            今より気軽かつ手軽にもっと感情豊
                            かなメッセージングとそれを通じたコ




12年4月3日火曜日
UXデザイン




      なんでUXデザインが必要なのか?

      ◎ 使う人を使う人の「ゴール」に導く
        → プロダクトにとって必要

      ◎ 開発チーム内の「道しるべ」になる
        → 対開発チームにとって必要

        ・ドライブで言うと「目的地」みたいなもの
        ・これを共有して同じ車に乗る感じ
        ・道に迷った時、意見が割れた時に目的地を意識する


12年4月3日火曜日
もっと気持ちを伝え合いたい人のため
                            のもっと気軽で手軽なボイスメッセー
                            ジングアプリ




             アプリケーション定義ステートメント



                    ゴール




 ペルソナ

12年4月3日火曜日
UIデザイン




                                UXはゴール

      さらに、UIデザインってなに?           UIはその到達方法




      使う人が「ゴール」を達成するための手助けとしてインターフェ
      イスを設計すること

      (UIデザイン   インタラクションデザイン)




12年4月3日火曜日
UIデザイン




      なんでUIデザインが必要なのか?
                                かっこ良くするためでは
                                ない。


                                あくまでゴール。

      ◎ 使う人を「ゴール」に辿り着く手助けをする    ゴールがかっこわるいな
                                らかっこ悪くする。




      ◎ ドライブでいうと、「ハンドルさばき」「ギヤチェンジ」
        などの専門技術のこと
        → いくら技術があってもUXデザインがないと目的地には
         辿りつかない




12年4月3日火曜日
UIデザイン



                                デザイン主導ではある
                                が、それぞれ自立して動
                                いてた




                    UXデザイン
             ぐるぐる               ぐるぐる




             プロトタイピング          UIデザイン

                        ぐるぐる




12年4月3日火曜日
UIデザイン




      UXDとUIDの間における
      プロトタイピング開発の効果

      ◎ リアルな体験による体験の検証
      ◎ 仕様のスムーズな決定
      ◎ ドライブ感のある開発(実際に見れると楽しい)
      ◎ 不確実性の回避




12年4月3日火曜日
UIデザイン




      UXD PT UID 例1

      ◎ 大きくて、同じ位置に(親指の
        届く範囲に)メインボタンを設置

      UXDのゴール
      ・「もっと気軽で手軽な」
      ・ストレスなくコミニュケーションがとれる∼

                直感的
                簡単に見ただけで分かるような


                会社帰りに歩きながらでもミス
                タップしないように



12年4月3日火曜日
UIデザイン




      UXD PT UID 例2

      ◎ 送信までのタップ数を最小限に
       (対SMS)

      UXDのゴール
      ・「もっと気軽で手軽な」
      ・ストレスなくコミニュケーションがとれる∼


      SMS:6タップ
      Jumvo:5タップ
                      5タップ!

12年4月3日火曜日
UIデザイン




      UXD PT UID 例3

      ◎ セグメントによる利用シーンの
        切り分け

      ペルソナ(マネキン)の配役による機能の共存
      ・主役:仲のいい人と親密なコミニュケーション
      ・脇役:友だちとワイワイ楽しむ

                    両方を一緒くたにす
                    ると使いにくくなる
                    両方ダメになる




12年4月3日火曜日
UIデザイン




      UXD PT UID 例4

      ◎ 送信中のプログレスバーの削除

      UXDのゴール                       いきなり完了
      ・ストレスなくコミニュケーションがとれる∼


      「普通はあるけど、ほんとにいるの?」

                使う人にはこっちの処理中は関係ない
                そういう時にゴールを参照して


                ここのは一例
                実際のぐるぐるの中ではもっと細かく
                色々やってた



12年4月3日火曜日
UIデザイン



      ちょっと脱線して…

      UI設計する時に気をつけてること

      1) 触りたくなるビジュアルであるか
        …直感的に美しく、ダイレクトに訴える(短期的な関係の構築)
                              1)出会ってすぐ「お!」や親しみやす

      2) デザイン(設計)は透明であるか      い
                              使いやすくて目に止まらないのじゃ意

        …プロダクトの目的に集中(中期的な関係の構築)
                              味ない/触るのがイヤじゃないっていう
                              のは案外重要(アイコン・質感)


                              2) エモーショナルな感動のあとに残

      3) 温かみがあるか              るのは使いやすいUIであるべき(UI)
                              モリモリデザインで賞味期限が短いと飽

        …使う人をもてなしているか(長期的な関係の構築)
                              きられてしまう


                              3) インターフェイスとの長い信頼関
                              係、思想


                                  3つのバランス

12年4月3日火曜日
UX + Prototyping + UI




      デザイナーから見た、ぐるぐるの良い点

      ◎ 体験しながらUIのブラッシュアップができる
      ◎ チーム内でずれた意見が出にくい
      ◎「ゴール」とずれていないか逐一検証できる
      ◎ チーム内の合意が容易




12年4月3日火曜日
UX + Prototyping + UI




      なぜうまくいったのか(たぶん)

      ◎ プロトタイピングをやったことで
        ・「体験の検証」「仕様の決定」をその場で素早く行えた


      ◎ UXデザインがあったことで
        ・常に「共通のゴール」を見ていることができた


      ◎ UX・プロトタイピング・UIを常にぐるぐる回すことで
        ・色々試せるから、どんどんよいものになっていった
        ・早い段階で「不確実性を回避」できた

12年4月3日火曜日
問題点

             • 動くものがあるとそれにひっぱられる
             • 何をしたいのか明確な意思がなけれ
              ば、おそらく仕様爆発する
              (捨てられない)

             • コードを倍ぐらい書くことになる

12年4月3日火曜日
言いたいこと(永野)

             • 「仕様が来なくて締め切りに間に合わな
              いよー」と嘆いている時間があるなら
              ば、何か動かしみれば

             • この機能は絶対ある!というのが1個は
              あるはずなので何か作れば

             • 動かさないと分からないことが絶対ある
12年4月3日火曜日
言いたいこと(伊野)



             • 目的の共有をしてないとプロダクトも
              チームもブレる




12年4月3日火曜日

More Related Content

What's hot

How to inspect complete scenes with Unity?
How to inspect complete scenes with Unity?How to inspect complete scenes with Unity?
How to inspect complete scenes with Unity?
小林 信行
 
UX Design とは何か?
UX Design とは何か?UX Design とは何か?
UX Design とは何か?
Hiroshi Obayashi
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
Yu Morita
 
これからのUIデザインを考える
これからのUIデザインを考えるこれからのUIデザインを考える
これからのUIデザインを考える
Yu Uno
 
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
Rie Tokumi
 
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについてDesign Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
Takaaki Umada
 
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクトUnityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
小林 信行
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
 
UXデザイナー1年生の1年間
UXデザイナー1年生の1年間UXデザイナー1年生の1年間
UXデザイナー1年生の1年間
JustSystems Corporation
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
Masaya Ando
 
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザイン
Saori Baba
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
 

What's hot (13)

How to inspect complete scenes with Unity?
How to inspect complete scenes with Unity?How to inspect complete scenes with Unity?
How to inspect complete scenes with Unity?
 
UX Design とは何か?
UX Design とは何か?UX Design とは何か?
UX Design とは何か?
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
 
これからのUIデザインを考える
これからのUIデザインを考えるこれからのUIデザインを考える
これからのUIデザインを考える
 
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
 
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについてDesign Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
 
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクトUnityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 
UXデザイナー1年生の1年間
UXデザイナー1年生の1年間UXデザイナー1年生の1年間
UXデザイナー1年生の1年間
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
 
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザイン
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 

Viewers also liked

V15preprint44(1)
V15preprint44(1)V15preprint44(1)
V15preprint44(1)
Al Baha University
 
Cardiology manscript from medical school
Cardiology manscript from medical schoolCardiology manscript from medical school
Cardiology manscript from medical school
Kate Moreng
 
The giralda
The giraldaThe giralda
The giralda
amjordan22
 
Double page spread - analysis
Double page spread - analysisDouble page spread - analysis
Double page spread - analysis
jlimbmedia
 
ضوء الحقيقه بالحقيقه قام - و العمى يبصرون
ضوء الحقيقه   بالحقيقه قام - و العمى يبصرونضوء الحقيقه   بالحقيقه قام - و العمى يبصرون
ضوء الحقيقه بالحقيقه قام - و العمى يبصرون
Ibrahimia Church Ftriends
 
اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...
اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...
اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...
Ibrahimia Church Ftriends
 
My five friends
My five friendsMy five friends
My five friends
aroraamita
 
Best traffic
Best trafficBest traffic
Best traffic
Education952
 
Managing for the First Time
Managing for the First TimeManaging for the First Time
Managing for the First Time
globe
 
As media studies music magazine evaluation
As media studies music magazine evaluationAs media studies music magazine evaluation
As media studies music magazine evaluation
jordanporrino
 
Urban consulting
Urban consultingUrban consulting
Urban consulting
Сергей Пилоян
 
1 1 pw-aftermath
1 1 pw-aftermath1 1 pw-aftermath
1 1 pw-aftermath
ssclasstorremar
 
6701732721 f
6701732721 f6701732721 f
6701732721 f
Al Baha University
 
Pc hardware overview part 2
Pc hardware overview  part 2Pc hardware overview  part 2
Pc hardware overview part 2
Duy Hieu
 
Inv pres q32014_final
Inv pres q32014_finalInv pres q32014_final
Inv pres q32014_final
CNOServices
 
Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...
Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...
Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...
Sean Bradley
 
Magazine prices and where they’re sold
Magazine prices and where they’re soldMagazine prices and where they’re sold
Magazine prices and where they’re sold
charlottejoyce95
 

Viewers also liked (20)

V15preprint44(1)
V15preprint44(1)V15preprint44(1)
V15preprint44(1)
 
Cardiology manscript from medical school
Cardiology manscript from medical schoolCardiology manscript from medical school
Cardiology manscript from medical school
 
The giralda
The giraldaThe giralda
The giralda
 
Double page spread - analysis
Double page spread - analysisDouble page spread - analysis
Double page spread - analysis
 
ضوء الحقيقه بالحقيقه قام - و العمى يبصرون
ضوء الحقيقه   بالحقيقه قام - و العمى يبصرونضوء الحقيقه   بالحقيقه قام - و العمى يبصرون
ضوء الحقيقه بالحقيقه قام - و العمى يبصرون
 
اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...
اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...
اسكاتولوجى علم الكلام فى الامور الاخيره - العهد الجديد - القس د فاروق الديرى ...
 
Corrosion Inhibitors for Z
Corrosion Inhibitors for ZCorrosion Inhibitors for Z
Corrosion Inhibitors for Z
 
My five friends
My five friendsMy five friends
My five friends
 
Best traffic
Best trafficBest traffic
Best traffic
 
Managing for the First Time
Managing for the First TimeManaging for the First Time
Managing for the First Time
 
As media studies music magazine evaluation
As media studies music magazine evaluationAs media studies music magazine evaluation
As media studies music magazine evaluation
 
Urban consulting
Urban consultingUrban consulting
Urban consulting
 
1 1 pw-aftermath
1 1 pw-aftermath1 1 pw-aftermath
1 1 pw-aftermath
 
6701732721 f
6701732721 f6701732721 f
6701732721 f
 
Pc hardware overview part 2
Pc hardware overview  part 2Pc hardware overview  part 2
Pc hardware overview part 2
 
Inv pres q32014_final
Inv pres q32014_finalInv pres q32014_final
Inv pres q32014_final
 
афганская война
афганская войнаафганская война
афганская война
 
диаграмм
диаграммдиаграмм
диаграмм
 
Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...
Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...
Jim Flint: How the Rubik's Cube Can Help You Solve Your Retail Advertising Is...
 
Magazine prices and where they’re sold
Magazine prices and where they’re soldMagazine prices and where they’re sold
Magazine prices and where they’re sold
 

Similar to Jumvo 2.0 における デザイナーとエンジニアの連携

ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGitライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
Tomohiro Oda
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
 
Weekend Androidのススメ
Weekend AndroidのススメWeekend Androidのススメ
Weekend Androidのススメ
Suzuki Junko
 
Go azure5 16 9_提出用
Go azure5 16 9_提出用Go azure5 16 9_提出用
Go azure5 16 9_提出用Mami Shiino
 
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
GoAzure
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923Hub DotnetDeveloper
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてlychee .
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
 
魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)
魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)
魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)
Junichi Izumi
 
体験をデザインするとは何か
体験をデザインするとは何か体験をデザインするとは何か
体験をデザインするとは何か
Sunami Hokuto
 
Uxデザイン定義書ワークショップ201207
Uxデザイン定義書ワークショップ201207Uxデザイン定義書ワークショップ201207
Uxデザイン定義書ワークショップ201207VOYAGE GROUP
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
Sunami Hokuto
 
UDトークアプリ新たな機能
UDトークアプリ新たな機能UDトークアプリ新たな機能
UDトークアプリ新たな機能
marutatu
 
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップアジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
You&I
 
いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介
Kouji Hosoda
 
コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考
Yuudai Tachibana
 
Kwc uxjam160831
Kwc uxjam160831Kwc uxjam160831
Kwc uxjam160831
Takami Yusuke
 
MY JOB WEND TO VIETNUM? DevSumi ver.
MY JOB WEND TO VIETNUM? DevSumi ver.MY JOB WEND TO VIETNUM? DevSumi ver.
MY JOB WEND TO VIETNUM? DevSumi ver.
Ryo Amano
 

Similar to Jumvo 2.0 における デザイナーとエンジニアの連携 (20)

ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGitライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
Weekend Androidのススメ
Weekend AndroidのススメWeekend Androidのススメ
Weekend Androidのススメ
 
Go azure5 16 9_提出用
Go azure5 16 9_提出用Go azure5 16 9_提出用
Go azure5 16 9_提出用
 
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまで
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
 
Ui研究会#1
Ui研究会#1Ui研究会#1
Ui研究会#1
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
 
魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)
魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)
魅力を感じる、伝わるポートフォリオ作成講座 (シェア版)
 
体験をデザインするとは何か
体験をデザインするとは何か体験をデザインするとは何か
体験をデザインするとは何か
 
Uxデザイン定義書ワークショップ201207
Uxデザイン定義書ワークショップ201207Uxデザイン定義書ワークショップ201207
Uxデザイン定義書ワークショップ201207
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
 
UDトークアプリ新たな機能
UDトークアプリ新たな機能UDトークアプリ新たな機能
UDトークアプリ新たな機能
 
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップアジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
 
いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介いろいろ見せますLord of Knightsのクライアント開発事例紹介
いろいろ見せますLord of Knightsのクライアント開発事例紹介
 
コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考
 
Kwc uxjam160831
Kwc uxjam160831Kwc uxjam160831
Kwc uxjam160831
 
MY JOB WEND TO VIETNUM? DevSumi ver.
MY JOB WEND TO VIETNUM? DevSumi ver.MY JOB WEND TO VIETNUM? DevSumi ver.
MY JOB WEND TO VIETNUM? DevSumi ver.
 

Jumvo 2.0 における デザイナーとエンジニアの連携

  • 1. Jumvo 2.0 における デザイナーとエンジニア の連携 ジェネシックス 伊野・永野 12年4月3日火曜日
  • 2. • こんなことを話します 永野,伊野 (1分) • Jumvoとは • プロトタイピング(永野) • Jumvo 1.0まで (永野) • Jumvo 2.0 / UX + Prototype + UI (伊野) • まとめ 12年4月3日火曜日
  • 3. Jumvoとは • iPhoneアプリ • http://jumvo.com • ボイスメッセージング・サービス • 友だちと声を送りあう、声のSMS • 友だちリストにFacebookを使う 12年4月3日火曜日
  • 4. 目指したこと • 毎日使う、電話/SMSのようなサービス • なので高度なインターフェイスが必要 • 使い勝手が超重要 • 高度 == 使いやすい、楽しい、やりたい ことがすぐにできる、気持ちがいい、 かっこいい、がゆえに手になじむ 12年4月3日火曜日
  • 5. • SMS(現、Messages)のようにシンプルで 使いやすい • Tweetie(現、Twitter公式)みたいに高度な インターフェイスを持つアプリは • いったい、どうやったら作れるのか? 12年4月3日火曜日
  • 6. 高度なUIを実現するには 1. 世界のすべてを完全に把握した、完全な るデザイナー(ネ申)が (天地を創造するよ うに) 仕様のすべてを決定する 2. (優秀な?)デザイナーとあーだこーだ言 いながら磨き上げていく => ネ申 はいないので2しかないよね! 12年4月3日火曜日
  • 7. 2でいくとして • これまでの経験上、動かしてみないと 分からない部分が多いし、だから仕様 はゴロゴロ変わる。そして柔軟に変え ていかないとよいものはできない • つまり、仕様はなかなか決まらない し、あーだこーだ言うプロセスが重要 12年4月3日火曜日
  • 8. • 仕様を確定させることが難しいのだ! • 仕様 == UIのすべてのヴィジュアルと 動き、 サウンドエフェクトなど • 仕様が決まれば、(誰でも)作れる 12年4月3日火曜日
  • 9. ここまでのまとめ 1. 結局動かしてみないと分からない部分 が多い 2. あーだこーだ言いながら磨き上げてい く必要がある => 変更を前提とした動くものベースの 開発をやればいいんじゃないか =>プロトタイピング・ベースの開発! 12年4月3日火曜日
  • 10. プロトタイピング • プロトタイピング(Prototyping)とは、実 働するモデル(プロトタイプ)を早期に製 作する手法およびその過程を意味する。そ の目的は、設計を様々な観点から検証する ためだったり、機能やアイデアを形にする ことでユーザーから早めにフィードバック を得るためだったり様々である。 http://ja.wikipedia.org/wiki/プロトタイピング 12年4月3日火曜日
  • 11. プロトタイピング • 広い意味で使っちゃってますが概ね • (変更前提で)動くものベースで開発 • 迷ったら複数パターン動かしてみる • ひとまず動くようにして操作の流れ を繋ぐ 12年4月3日火曜日
  • 12. お断り • プロトタイピングの手法を勉強したわ けではないので手法や用語に詳しいわ けではありません。あくまで(特に iPhoneアプリでは) 仕様を決めるのが難 しいので、動くものベースでやっただけ 12年4月3日火曜日
  • 14. Jumvo 1.0 • デザイナーのアサイン予定が1ヶ月先 だった • 企画は出したが、面白いかは不明で あった • 企画段階から、開発手法を模索してい るので、と言われてプロトタイピング を提案していた 12年4月3日火曜日
  • 15. 4月末∼5末 • スケッチ描いて + 藤井幹大さ ん、伊野さんに相談しつつ コア機能を実装 => 声を送れるようにしてDemo => g6みんな「面白い!」 12年4月3日火曜日
  • 17. 6月∼6月下旬 • デザイナー アサイン(カルビン) • 動かしては検証。デザイン案 => 実装 => デザイン案 => 実装 => デザイン案 =>実装 (2, 3周?) 12年4月3日火曜日
  • 23. 6月末~7月上旬 • いい加減、仕様決めないと終わらない よ => まとめ作業 • 1.0完成 (8月にリリース) 12年4月3日火曜日
  • 24. • そんな感じで動かしてはあーだこーだ 言いつつ、開発 • スピード感をもって (2ヶ月半ぐらい) 使いやすいものが作れたと自負 12年4月3日火曜日
  • 25. 問題点 • Jumvo 1.0は後半、動かしてみて試せば いい、の方向によりすぎて、デザイ ナーが決めきれない状態があった(軸) • すべての判定が動くものベースに行くと まずい(まずはこうあるべき、がないと) • デザイナーがプロトタイプに引っ張ら れる危険性が高い 12年4月3日火曜日
  • 27. • この体験は、おそらく多くの人に衝撃 を与えるだろう (Techwave) 12年4月3日火曜日
  • 28. • このアプリはとても使いやすくていい ですね!すばらしいアプリです。 (AppBank) 12年4月3日火曜日
  • 31. UXデザイン もう一段上のレベルのGUIを所望され、 2.0開発へむけアサインされる。 12年4月3日火曜日
  • 32. UXデザイン あまりうまく回ってなかった1.0の問題 ・UXDとUIDとプロトタイピングがバラバラに機能していた… ・動くからといってプロトタイピングに頼りすぎて仕様が  決められず… 体験することが仕様決定につながらない 逆に時間ばかりとられる もう一度ぐるぐるをうまく機能させるために、死ぬ気でUX・UI のデザイン主導体制に。 12年4月3日火曜日
  • 33. UXデザイン その前に、UXデザインってなに? 【 Wikipedia 】 ユーザーがある製品やシステムを使ったときに得られる経験や満 足 ゴール例 使う人が認識してることではないか も。無意識。調査・インタビュー Jumvo 【 genesix 】 エモーショナル 使う人の「ゴール」を発見して道筋を設定すること! ストレスなくコミニュケーションが とれる。 ファンクショナル 今より気軽かつ手軽にもっと感情豊 かなメッセージングとそれを通じたコ 12年4月3日火曜日
  • 34. UXデザイン なんでUXデザインが必要なのか? ◎ 使う人を使う人の「ゴール」に導く   → プロダクトにとって必要 ◎ 開発チーム内の「道しるべ」になる   → 対開発チームにとって必要   ・ドライブで言うと「目的地」みたいなもの   ・これを共有して同じ車に乗る感じ   ・道に迷った時、意見が割れた時に目的地を意識する 12年4月3日火曜日
  • 35. もっと気持ちを伝え合いたい人のため のもっと気軽で手軽なボイスメッセー ジングアプリ アプリケーション定義ステートメント ゴール ペルソナ 12年4月3日火曜日
  • 36. UIデザイン UXはゴール さらに、UIデザインってなに? UIはその到達方法 使う人が「ゴール」を達成するための手助けとしてインターフェ イスを設計すること (UIデザイン インタラクションデザイン) 12年4月3日火曜日
  • 37. UIデザイン なんでUIデザインが必要なのか? かっこ良くするためでは ない。 あくまでゴール。 ◎ 使う人を「ゴール」に辿り着く手助けをする ゴールがかっこわるいな らかっこ悪くする。 ◎ ドライブでいうと、「ハンドルさばき」「ギヤチェンジ」   などの専門技術のこと   → いくら技術があってもUXデザインがないと目的地には    辿りつかない 12年4月3日火曜日
  • 38. UIデザイン デザイン主導ではある が、それぞれ自立して動 いてた UXデザイン ぐるぐる ぐるぐる プロトタイピング UIデザイン ぐるぐる 12年4月3日火曜日
  • 39. UIデザイン UXDとUIDの間における プロトタイピング開発の効果 ◎ リアルな体験による体験の検証 ◎ 仕様のスムーズな決定 ◎ ドライブ感のある開発(実際に見れると楽しい) ◎ 不確実性の回避 12年4月3日火曜日
  • 40. UIデザイン UXD PT UID 例1 ◎ 大きくて、同じ位置に(親指の   届く範囲に)メインボタンを設置 UXDのゴール ・「もっと気軽で手軽な」 ・ストレスなくコミニュケーションがとれる∼ 直感的 簡単に見ただけで分かるような 会社帰りに歩きながらでもミス タップしないように 12年4月3日火曜日
  • 41. UIデザイン UXD PT UID 例2 ◎ 送信までのタップ数を最小限に  (対SMS) UXDのゴール ・「もっと気軽で手軽な」 ・ストレスなくコミニュケーションがとれる∼ SMS:6タップ Jumvo:5タップ 5タップ! 12年4月3日火曜日
  • 42. UIデザイン UXD PT UID 例3 ◎ セグメントによる利用シーンの   切り分け ペルソナ(マネキン)の配役による機能の共存 ・主役:仲のいい人と親密なコミニュケーション ・脇役:友だちとワイワイ楽しむ 両方を一緒くたにす ると使いにくくなる 両方ダメになる 12年4月3日火曜日
  • 43. UIデザイン UXD PT UID 例4 ◎ 送信中のプログレスバーの削除 UXDのゴール いきなり完了 ・ストレスなくコミニュケーションがとれる∼ 「普通はあるけど、ほんとにいるの?」 使う人にはこっちの処理中は関係ない そういう時にゴールを参照して ここのは一例 実際のぐるぐるの中ではもっと細かく 色々やってた 12年4月3日火曜日
  • 44. UIデザイン ちょっと脱線して… UI設計する時に気をつけてること 1) 触りたくなるビジュアルであるか   …直感的に美しく、ダイレクトに訴える(短期的な関係の構築) 1)出会ってすぐ「お!」や親しみやす 2) デザイン(設計)は透明であるか い 使いやすくて目に止まらないのじゃ意   …プロダクトの目的に集中(中期的な関係の構築) 味ない/触るのがイヤじゃないっていう のは案外重要(アイコン・質感) 2) エモーショナルな感動のあとに残 3) 温かみがあるか るのは使いやすいUIであるべき(UI) モリモリデザインで賞味期限が短いと飽   …使う人をもてなしているか(長期的な関係の構築) きられてしまう 3) インターフェイスとの長い信頼関 係、思想 3つのバランス 12年4月3日火曜日
  • 45. UX + Prototyping + UI デザイナーから見た、ぐるぐるの良い点 ◎ 体験しながらUIのブラッシュアップができる ◎ チーム内でずれた意見が出にくい ◎「ゴール」とずれていないか逐一検証できる ◎ チーム内の合意が容易 12年4月3日火曜日
  • 46. UX + Prototyping + UI なぜうまくいったのか(たぶん) ◎ プロトタイピングをやったことで   ・「体験の検証」「仕様の決定」をその場で素早く行えた ◎ UXデザインがあったことで   ・常に「共通のゴール」を見ていることができた ◎ UX・プロトタイピング・UIを常にぐるぐる回すことで   ・色々試せるから、どんどんよいものになっていった   ・早い段階で「不確実性を回避」できた 12年4月3日火曜日
  • 47. 問題点 • 動くものがあるとそれにひっぱられる • 何をしたいのか明確な意思がなけれ ば、おそらく仕様爆発する (捨てられない) • コードを倍ぐらい書くことになる 12年4月3日火曜日
  • 48. 言いたいこと(永野) • 「仕様が来なくて締め切りに間に合わな いよー」と嘆いている時間があるなら ば、何か動かしみれば • この機能は絶対ある!というのが1個は あるはずなので何か作れば • 動かさないと分からないことが絶対ある 12年4月3日火曜日
  • 49. 言いたいこと(伊野) • 目的の共有をしてないとプロダクトも チームもブレる 12年4月3日火曜日