永和システムマネジメント × クラスメソッド 共催セミナー

クラスメソッド株式会社 技術部 マーケティング担当

小さく作って大いに役立つ スマートフォンアプリ

for iOS, Android, Windows Phone

2011.12.7 クラスメソッドセミナールーム

嵩原 將志 認定スクラムプロダクトオーナー

タケハラ マサシ (Tw:@take3000)

第4セッション

自己紹介

職人(LT,KPT,釣り)ADK48/ナナナナ会

FxUG/DevLOVE /要求開発アライアンス

http://twitter.com/#!/take3000 http://takelog3000.blogspot.com http://slideshare.net/takelog3000

http://design.classmethod.jp/

Project Management /Agile(Scrum)/RIA

/UX Design

Marketing/Procurement

タケハラ マサシ

嵩原 將志 Takehara Masashi

本日のアジェンダ

1.スマートフォンアプリの概要 2.モバイルOS、開発ツール 3.クラスメソッドのプロセス 4.まとめ

今日のテーマ

やってみよう （さわってみよう）

いいかえると…、

カタログスペックだけで 大事なことを決めない

アジェンダ

1.スマートフォンアプリの概要 2.モバイルOS、開発ツール 3.クラスメソッドのプロセス 4.まとめ

スマートフォンアプリ

の状況をおさらい

日本国内のスマートフォン利用者数

（2011年3月）

Android 4,601,000

iOS(iPhone) 3,906,000

その他 1,257,000

総数 9,764,000

3プラットフォームのアプリ数

Apple

アプリ数20万本 2010年6月

総DL数100億 2011年1月

Android

アプリ数20万本 2011年1月

総DL数60億 2011年9月

Windows Phone

アプリ数3万本 2011年8月

スマートフォンの業務利用

・在庫管理

・営業ツール

・トレーディング

・決済

・グループウェア

かかえる問題

・プラットフォームの選択

・開発ノウハウ

・運用ノウハウ

（特にセキュリティ）

アジェンダ

1.スマートフォンアプリの概要 2.モバイルOS、開発ツール 3.クラスメソッドのプロセス 4.まとめ

現在、主要なモバイルＯＳ

（iPhone, iPad）

Develop for iOS iOS SDK、Xcode、Objective-C

http://developer.apple.com/jp/technologies/tools/whats-new.html

Android

Android

Android SDK(Java)

Android NDK(C++)

Windows Phone

Windows phone Silverlight for WP(XAML) Visual Studio 2010 Expression Blend 4

Design Language

“Metro”

http://www.microsoft.com/windowsphone/en-us/features/default.aspx

─ Principles ─ Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital

http://everystockphoto.s3.amazonaws.com/favourite_tools_739247_o.jpg

その他の実装方法

AIR for Mobile Device OS

(iOS、Android、Blackberry)

Adobe Muse

Adobe Edge

HTML5 + Javascript

Web or HTML Desktop App

Touch

多用なプラットフォーム

Web か ネイティブアプリ か

スマートフォンアプリに限らず

技術選択の際に考えること

① 移植容易性

② 開発生産性（向き不向き）

③ テスト（環境種類別）

④ 技術習得難易度

⑤ 技術者数

⑥ 開発期間＋稼働期間

① 移植容易性

② 開発生産性（向き不向き）

③ テスト（環境種類別）

④ 技術習得難易度

⑤ 技術者数

⑥ 開発期間＋稼働期間

ストーリー

開発のサイクル ストーリー

開発のサイクル ストーリー

開発のサイクル ストーリー タスク

開発のサイクル ストーリー タスク

開発のサイクル ストーリー タスク サブタスク

開発のサイクル ストーリー タスク サブタスク

開発のサイクル ストーリー タスク サブタスク

出荷可能な (利用可能)な プロダクト

プロダクト開発のサイクル

開発のサイクル ストーリー タスク サブタスク

出荷可能な (利用可能)な プロダクト

開発のサイクル ストーリー

タスク サブタスク

出荷可能な (利用可能)な プロダクト

向いていない技術を選択した場合

プロダクト開発のサイクル

開発のサイクル ストーリー

タスク サブタスク

出荷可能な (利用可能)な プロダクト

向いていない技術を選択した場合

プロダクト開発のサイクル

ストーリー タスク サブタスク

更に分割された サブタスク

開発のサイクル

出荷可能な (利用可能)な プロダクト

向いていない技術を選択した場合

プロダクト開発のサイクル

開発のサイクル ストーリー

タスク サブタスク

出荷可能な (利用可能)な プロダクト

更に分割された サブタスク

向いていない技術を選択した場合

プロダクト開発のサイクル

間延びしたプロダクト開発のサイクル

開発のサイクル ストーリー

タスク サブタスク

出荷可能な (利用可能)な プロダクト

更に分割された サブタスク

採用した技術によっては必要以上の タスク分割が発生し、リリースのス ピードを下げてしまう。

向き不向きも大事

そして

本当に使えるのか？

はさらに大事

Suica 改札機の

読み取り角度は

13.5度

傾いている。

「本当に使える」

かどうかは

やってみなければ

わからない

・どのような場所で

使うのか？

・利用者は誰か？

・使い慣れているのか？

・片手で使うのか？

両手で使うのか？

屋外で使うなら色調を強くしなければ視認性を損なう

片手で使うならコントロールは画面下部に寄せる

環境によっては情報の取り方も考える

今日のテーマ

やってみよう （さわってみよう）

1.スマートフォンアプリの概要 2.モバイルOS、開発ツール 3.クラスメソッドのプロセス 4.まとめ

実装してほしい要求がある

（例）よくある話

実装してほしい要求がある

要求が正しい前提で作る

（例）よくある話

実装してほしい要求がある

要求が正しい前提で作る

（例）よくある話

①要求のリストを渡す

実装してほしい要求がある

要求が正しい前提で作る

（例）よくある話

①要求のリストを渡す

②要件定義書 を作る

実装してほしい要求がある

要求が正しい前提で作る

（例）よくある話

①要求のリストを渡す

③要件定義書を レビューする

細かく書いてあるけ ど、これが欲しかった んだっけ…？

②要件定義書 を作る

実装してほしい要求がある

要求が正しい前提で作る

（例）よくある話

①要求のリストを渡す

②要件定義書 を作る

③要件定義書を レビューする

弊社の購買と法務が チェックするので 体裁を直して下さい

④ツッコミを入れる

実装してほしい要求がある

要求が正しい前提で作る

（例）よくある話

①要求のリストを渡す

②要件定義書 を作る

③要件定義書を レビューする

弊社の購買と法務が チェックするので 体裁を直して下さい

④ツッコミを入れる ⑤承諾

はいわかりました。

ちゃんと読んだ のかなあ…？

ビジネスの専門家とＩＴの専門家のコミュニケーションは難しい

要求仕様書や要件定義書でコミュニケーションをしている、これを作っている間にアイデアの大事な部分が逃げてしまう(あるいは冷めてしまう)

〜私たちが抱えている課題〜 ・細かいところまで詰める 時間はない ・要件定義に半年、一年も かけてられない（その間 にニーズが変化する） ・テクノロジーの進化が早 すぎて、時間をかけすぎ ると陳腐化してしまう

サイクロンロゴ

( f o r M o b i l e D e v i c e s )

サイクロンロゴ

クラスメソッドが創業以来実践し 続けてきたシステム開発における デザインのプロセスを体系化した

( f o r M o b i l e D e v i c e s )

大切なことは

1. 「本当に使える」のか？

2. 現実的な期間とコストの範疇で実現できるのか？

Scrum Framework

Scrum Framework

ここをどうやって決める？

クラスメソッドでよくある パターン ・◯◯までに何かやらないと いけない ・予算は◯◯ぐらいで決まっ ている （開示されるとは限らない） ・実現できて上手く行きそう なアイデアがほしい

Scrum Framework

ほとんど決まってない

クラスメソッドの対処法 ・要求を整理する ・要求を元に、画面デザインを 行う。必要なら人の動線も含 めてシナリオを描く ・実装可能か調査をする サンプルプログラムを構築し 選定技術の比較をする ・この活動を繰り返す

クラスメソッドの対処法 ・要求を整理する ・要求を元に、画面デザインを 行う。必要なら人の動線も含 めてシナリオを描く ・実装可能か調査をする サンプルプログラムを構築し 選定技術の比較をする ・この活動を繰り返す

クラスメソッドの対処法 ・要求を整理する ・要求を元に、画面デザインを 行う。必要なら人の動線も含 めてシナリオを描く ・実装可能か調査をする サンプルプログラムを構築し 選定技術の比較をする ・この活動を繰り返す

クラスメソッドの対処法 ・要求を整理する ・要求を元に、画面デザインを 行う。必要なら人の動線も含 めてシナリオを描く ・実装可能か調査をする サンプルプログラムを構築し 選定技術の比較をする ・この活動を繰り返す

徹頭徹尾 現物主義

サイクロンロゴ

この一連の現物主義なサイクルを体系化し、より効率的なプロセスをデザインしたものが、

( f o r M o b i l e D e v i c e s )

（提案）考え直す

実装してほしい要求がある

要求が正しい前提で作る

①いきなりこの二者で話をしない

「ビジネスの専門家」に専門外の技術文書を書かせたり読ませたりしている時点で重大な無駄を発生させている

課題を もっている

②現実を認める（要求は固まってない）

昔と違って、あらゆることが複雑で多くの選択肢をもつようになった。電子化すれば結果が必ずでるような単純な世の中ではない。

課題を もっている

あるべき姿を 描ける

③視覚化をして認識を共有を徹底する

③視覚化をして認識を共有を徹底する

・ストーリーボード（シナリオ）

・ユーザー調査

・ペルソナ分析

・デザインラフ（コンセプト）

・ワイヤーフレーム

・ペーパープロトタイピング

※都度、適したツールを選んで使う

ドキュメントの体裁よりも全員が ゴールを正しく認識できること。

ユーザー調査

ペルソナ

ストーリーボード

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

④「あるべき姿」の実現方法を考える

④「あるべき姿」の実現方法を考える

制約（コスト・期間）の下で、実現

できる方法を考える。場合によって

は、ＩＴの専門家としてより良い解

決方法を提案する。

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

⑤見通しを確認し投資に値するか検討

⑤見通しを確認し投資に値するか検討

システムにプロダクト（サービスや

アプリケーション）を組み込んだ時、

それがユーザーに対してどのような

インパクトを与えられるのかを再度

考える。

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

⑥このサイクルを繰り返す(一定期間)

⑥このサイクルを繰り返す(一定期間)

・本当に役立つのか？を問い続ける

・本当に役立つ状態を模索し続ける

「Unityではじめるゲームづくり」 ミシェル・メナード (著), (監修), 湊 和久 (翻訳),

大西 康満 (翻訳), 放課後Unity倶楽部 (翻訳)

ソフトバンククリエイティブ (2011/11/2)

ゲームアイデアの最初の一歩を創り出すのに、焦りは禁物です。無理に出したアイデアが楽しいものになるわけがありません。そのゲームに、これから長い時間（数週間、数ヶ月、大きいプロジェクトの場合、ひょっとしたら数年）関わり続けることを忘れないでください。それが、制作期間を通して興味を持ち続けられるアイデアだということをよく確かめましょう。

ゲームアイデアの最初の一歩を創り出すのに、焦りは禁物です。無理に出したアイデアが楽しいものになるわけがありません。そのゲームに、これから長い時間（数週間、数ヶ月、大きいプロジェクトの場合、ひょっとしたら数年）関わり続けることを忘れないでください。それが、制作期間を通して興味を持ち続けられるアイデアだということをよく確かめましょう。

本当に役立つのか？

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

⑦サイクルを軌道に乗せる

ファシリテートする

⑥サイクルを軌道に乗せる

通常、オーナー(発注者)は忙しく、

デザイナ／技術者と頻繁なコミュニ

ケーションをとることが難しい。

ここにファシリテーターを入れるこ

とで調整役とオーナーの代弁者を兼

ねることで、サイクルのスピードを

下げないようにする。

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

３＋１の視点

ファシリテートする

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

テクノロジストの 専門アクティビティ

ビジュアライザーの 専門アクティビティ

オーナーの 専門アクティビティ

共通の アクティビティ

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

テクノロジストの 専門アクティビティ

ビジュアライザーの 専門アクティビティ

共通の アクティビティ

オーナーの 専門アクティビティ

問題の提起 事業化への組織内調整 事業領域における法令の確認

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

テクノロジストの 専門アクティビティ

オーナーの 専門アクティビティ

共通の アクティビティ

ビジュアライザーの 専門アクティビティ

デザインコンセプト提案 インフォメーションアーキテクチャ インタラクションデザイン

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

ビジュアライザーの 専門アクティビティ

オーナーの 専門アクティビティ

共通の アクティビティ

テクノロジストの 専門アクティビティ

実装方式の提案 フィージビリティスタディ プロジェクトマネジメント計画

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

テクノロジストの 専門アクティビティ

ビジュアライザーの 専門アクティビティ

オーナーの 専門アクティビティ

共通の アクティビティ

ビジネスゴールの設定 ゴールの認識を共有する ペルソナ作成 ストーリーマッピング プロダクトバックログの作成 妥当性の検証

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

テクノロジストの 専門アクティビティ

ビジュアライザーの 専門アクティビティ

オーナーの 専門アクティビティ

共通の アクティビティ

２種類のアクティビティ

ファシリテートする

課題を もっている

あるべき姿を 描ける

あるべき姿を を作れる

テクノロジストの 専門アクティビティ

ビジュアライザーの 専門アクティビティ

オーナーの 専門アクティビティ

共通の アクティビティ

明確なゴール設定と効率的な開発チーム

サイクロンロゴ

CYCLONEの導入を しやすくするためのツール群

ＴＯＯＬＳ

ペーパープロトタイピング

支援ツール

鋭意製作中!!

・個々のツールや技法は普通

・ＣＹＣＬＯＮＥはそれらを

体系化し、誰でもはじめや

すいようにしている

このサイクルを効果的に回すには経験と、これを良しとする組織の文化が必要

1.スマートフォンアプリの概要 2.モバイルOS、開発ツール 3.クラスメソッドのプロセス 4.まとめ

今日のテーマ

やってみよう （さわってみよう）

初期の無駄を排除し本質に踏み込むこと

体裁にとらわれ過ぎな要件定義のあり方を変えること

ＣＭのような開発会社が、これまで以上にお客様のビジネスの成功に寄与すること

１日でも早く「本当に役立つ」システムを届けること

オープンな発想と 高い技術力により、 すべての人々の創造活動に貢献し続ける

サイクロンロゴ

( f o r M o b i l e D e v i c e s )

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

お問い合わせはこちらまで info@classmethod.jp