SlideShare a Scribd company logo
なぜUX?




スマートフォンは、ユーザの生活によりそい、いつでもどこでも
    サービスへのアクセスを可能にしています。
  「デバイスとユーザ」の1対1の関係性ではなく、
   「ユーザの行動」から考え、サービス全体の設計や
   機能、導線を検討することの重要性が高まっています。

写真出典: http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
どうやって?
大塚製薬様の「ヘルシー大豆レシピ」
       (iPhoneアプリ)構築事例をシェアします


                リ リース !
               した てです




https://itunes.apple.com/jp/app/
id628311086?mt=8




「大豆レシピ」で検索
やったことです

1. ファクト収集

2.ファクト整理

3.仮説づくり

4.プロトタイプ作成
(普通ですが)競合調査
 レシピサイト・アプリ 20個くらい
社員インタビューと観察

   1. 事前に用意した質問項目で、
    普段の料理に関する行動や
    レシピとの接し方を聞き出します。

   2.同時に普段のようにスマホでレシピ
    を探してもらいその時の行動(どう
    やって検索するか)を観察します。
質問項目&シナリオ

1. 普段料理していますか?

2.料理しているときにレシピを見ますか?

3.食方面での健康に対して気をつけてることがあ
 りますか?(大豆というテーマだったため)

4.いつものようにレシピを探してもらう
集めたファクトを整理します




   まずはばーっと事実を書きだして、
    徐々にグループにまとめます。
その後、気づいたことを箇条書きで整理します。
写真出典: http://www.slideshare.net/clevergirl/tokyo-1-day-9327971   ※イメージ




ファクトの最大公約数をペルソナとして落とします。
ペルソナがとると思われる行動のシナリオを
       ファクトを元に策定します。
行動シナリオがあることで、ユーザが具体的にどのシーンで
    どんな機能が必要なのかがわかります。
紙を写真に撮るだけで動きをつけて簡易プ
                ロトタイプを作れる無料iPhoneアプリ
                「POP」を使用しました。
                http://popapp.in/




   行動シナリオで出てきた必要機能を元に
    ペーパープロトタイプを作成します。
プロトタイプツールを使用し、手書き段階で動かして
     アプリの全体観を確認します。
その後実装の中でブラッシュを
繰り返し、リリースバージョン完成です
UXの先生たち(一例)




                LeanUX
http://www.slideshare.net/clevergirl/tokyo-1-
day-9327971
メンバーズのアプリ開発サービス提供フロー
      №    フェーズ         施策              具体実施事項

                                 既存資産を拝見したり、インタビューを行
      1            ユーザー調査        なって、想定ユーザ(ペルソナ)を作成しま
                                 す。

          ①企画/プロ                 ペルソナがアプリを利用する際のシナリオ仮
      2            ユーザ利用シナリオ策定
          トタイプ                   説を策定します。


                                 利用シナリオ仮説にもとづくアプリのプロト
      3            アプリプロトタイプ作成
                                 タイプを作成します。


                                 プロトタイプ/改善のプロセスを経て、リ
      5   ②開発      開発
                                 リース版のデザイン/開発を行います。


                                 ペルソナの利用シナリオ仮説と実際のアプリ
      6            モニタリング/効果検証
                                 の使われ方を比較し、課題を抽出します。
ループ
          ③運用/改善
を回す
                                 課題の改善案を策定し、実装/リリースを継
      7            改善案の策定/開発
                                 続的に行います。

More Related Content

Similar to UXから考えるスマホアプリ〜レシピアプリ構築事例〜

アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
 
AppPot製品概要
AppPot製品概要AppPot製品概要
AppPot製品概要
Ryohei Sogo
 
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティスアプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
Yuichi Kato
 
Kddi∞labo entry
Kddi∞labo entryKddi∞labo entry
アプリケーションを管理するノーツデータベースについて
アプリケーションを管理するノーツデータベースについてアプリケーションを管理するノーツデータベースについて
アプリケーションを管理するノーツデータベースについて
健補 萩原
 
Pepper アプリデベロッパーのための NAO アプリ開発講座1
Pepper アプリデベロッパーのための NAO アプリ開発講座1Pepper アプリデベロッパーのための NAO アプリ開発講座1
Pepper アプリデベロッパーのための NAO アプリ開発講座1
Takuji Kawata
 
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
インフラジスティックス・ジャパン株式会社
 
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
Kenichi Kambara
 
Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発
アシアル株式会社
 
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめiPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめHiramatsu Ryosuke
 
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
20180206 Lay App  Grow App で進める DevOps アプリ開発アプローチ20180206 Lay App  Grow App で進める DevOps アプリ開発アプローチ
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
Shunsuke Kawai
 
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
 
通常の3倍の速度で プログラミング!? 「 Emacsキーバインドのすすめ」
通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」
通常の3倍の速度で プログラミング!? 「 Emacsキーバインドのすすめ」
KinkumaDesign
 
2019年版 Infragistics Ultimate UI for WPF概要
2019年版 Infragistics Ultimate UI for WPF概要2019年版 Infragistics Ultimate UI for WPF概要
2019年版 Infragistics Ultimate UI for WPF概要
インフラジスティックス・ジャパン株式会社
 
Eggplant Functional - Lesson 1 (Japanese slides)
Eggplant Functional - Lesson 1 (Japanese slides)Eggplant Functional - Lesson 1 (Japanese slides)
Eggplant Functional - Lesson 1 (Japanese slides)
Eggplant
 
App inventorで想いを形に
App inventorで想いを形にApp inventorで想いを形に
App inventorで想いを形に
Takeaki Tada
 
iOSアプリ開発 脱初心者に向けて
iOSアプリ開発 脱初心者に向けてiOSアプリ開発 脱初心者に向けて
iOSアプリ開発 脱初心者に向けて
Kosuke Ogawa
 
Wankuma0402
Wankuma0402Wankuma0402
Wankuma0402
c-mitsuba
 

Similar to UXから考えるスマホアプリ〜レシピアプリ構築事例〜 (20)

アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 
AppPot製品概要
AppPot製品概要AppPot製品概要
AppPot製品概要
 
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティスアプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
 
Kddi∞labo entry
Kddi∞labo entryKddi∞labo entry
Kddi∞labo entry
 
アプリケーションを管理するノーツデータベースについて
アプリケーションを管理するノーツデータベースについてアプリケーションを管理するノーツデータベースについて
アプリケーションを管理するノーツデータベースについて
 
Pepper アプリデベロッパーのための NAO アプリ開発講座1
Pepper アプリデベロッパーのための NAO アプリ開発講座1Pepper アプリデベロッパーのための NAO アプリ開発講座1
Pepper アプリデベロッパーのための NAO アプリ開発講座1
 
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
 
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
 
Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発
 
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめiPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
 
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
20180206 Lay App  Grow App で進める DevOps アプリ開発アプローチ20180206 Lay App  Grow App で進める DevOps アプリ開発アプローチ
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
 
Localytics 資料
Localytics 資料Localytics 資料
Localytics 資料
 
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
 
通常の3倍の速度で プログラミング!? 「 Emacsキーバインドのすすめ」
通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」
通常の3倍の速度で プログラミング!? 「 Emacsキーバインドのすすめ」
 
OpenSpan_PreMarketing
OpenSpan_PreMarketingOpenSpan_PreMarketing
OpenSpan_PreMarketing
 
2019年版 Infragistics Ultimate UI for WPF概要
2019年版 Infragistics Ultimate UI for WPF概要2019年版 Infragistics Ultimate UI for WPF概要
2019年版 Infragistics Ultimate UI for WPF概要
 
Eggplant Functional - Lesson 1 (Japanese slides)
Eggplant Functional - Lesson 1 (Japanese slides)Eggplant Functional - Lesson 1 (Japanese slides)
Eggplant Functional - Lesson 1 (Japanese slides)
 
App inventorで想いを形に
App inventorで想いを形にApp inventorで想いを形に
App inventorで想いを形に
 
iOSアプリ開発 脱初心者に向けて
iOSアプリ開発 脱初心者に向けてiOSアプリ開発 脱初心者に向けて
iOSアプリ開発 脱初心者に向けて
 
Wankuma0402
Wankuma0402Wankuma0402
Wankuma0402
 

More from Mari Takahashi

明日からデキるUXデザイン #2ワークショップ編
明日からデキるUXデザイン #2ワークショップ編明日からデキるUXデザイン #2ワークショップ編
明日からデキるUXデザイン #2ワークショップ編
Mari Takahashi
 
明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編
Mari Takahashi
 
Lean UX 読書会vol1
Lean UX 読書会vol1Lean UX 読書会vol1
Lean UX 読書会vol1
Mari Takahashi
 
iOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザインiOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザイン
Mari Takahashi
 
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
Mari Takahashi
 
「デザインの教室」読書会
「デザインの教室」読書会「デザインの教室」読書会
「デザインの教室」読書会
Mari Takahashi
 
UX研修「UXからサイトを考える!」2013新卒向け
UX研修「UXからサイトを考える!」2013新卒向けUX研修「UXからサイトを考える!」2013新卒向け
UX研修「UXからサイトを考える!」2013新卒向け
Mari Takahashi
 
O2O施策事例集
O2O施策事例集O2O施策事例集
O2O施策事例集
Mari Takahashi
 
ビジネスモデル・ジェネレーション読書会資料
ビジネスモデル・ジェネレーション読書会資料ビジネスモデル・ジェネレーション読書会資料
ビジネスモデル・ジェネレーション読書会資料
Mari Takahashi
 
「リーンスタートアップ」5章6章サマリー
「リーンスタートアップ」5章6章サマリー「リーンスタートアップ」5章6章サマリー
「リーンスタートアップ」5章6章サマリー
Mari Takahashi
 
読書会Vol6
読書会Vol6読書会Vol6
読書会Vol6
Mari Takahashi
 
iPhone UI勉強会資料
iPhone UI勉強会資料iPhone UI勉強会資料
iPhone UI勉強会資料
Mari Takahashi
 

More from Mari Takahashi (12)

明日からデキるUXデザイン #2ワークショップ編
明日からデキるUXデザイン #2ワークショップ編明日からデキるUXデザイン #2ワークショップ編
明日からデキるUXデザイン #2ワークショップ編
 
明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編
 
Lean UX 読書会vol1
Lean UX 読書会vol1Lean UX 読書会vol1
Lean UX 読書会vol1
 
iOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザインiOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザイン
 
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
 
「デザインの教室」読書会
「デザインの教室」読書会「デザインの教室」読書会
「デザインの教室」読書会
 
UX研修「UXからサイトを考える!」2013新卒向け
UX研修「UXからサイトを考える!」2013新卒向けUX研修「UXからサイトを考える!」2013新卒向け
UX研修「UXからサイトを考える!」2013新卒向け
 
O2O施策事例集
O2O施策事例集O2O施策事例集
O2O施策事例集
 
ビジネスモデル・ジェネレーション読書会資料
ビジネスモデル・ジェネレーション読書会資料ビジネスモデル・ジェネレーション読書会資料
ビジネスモデル・ジェネレーション読書会資料
 
「リーンスタートアップ」5章6章サマリー
「リーンスタートアップ」5章6章サマリー「リーンスタートアップ」5章6章サマリー
「リーンスタートアップ」5章6章サマリー
 
読書会Vol6
読書会Vol6読書会Vol6
読書会Vol6
 
iPhone UI勉強会資料
iPhone UI勉強会資料iPhone UI勉強会資料
iPhone UI勉強会資料
 

UXから考えるスマホアプリ〜レシピアプリ構築事例〜