1. 2011.12.7 クラスメソッドセミナールーム
永和システムマネジメント × クラスメソッド 共催セミナー
第4セッション
小さく作って大いに役立つ
スマートフォンアプリ
for iOS, Android, Windows Phone
クラスメソッド株式会社 技術部 マーケティング担当
認定スクラムプロダクトオーナー
嵩原 將志
タケハラ マサシ (Tw:@take3000)

2. 自己紹介
タケハラ マサシ http://twitter.com/#!/take3000
http://takelog3000.blogspot.com
嵩原 將志 http://slideshare.net/takelog3000
Takehara Masashi http://design.classmethod.jp/
Project Management
FxUG/DevLOVE
/Agile(Scrum)/RIA
/UX Design /要求開発アライアンス
職人(LT,KPT,釣
Marketing/Procurement
り)ADK48/ナナナナ会

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

4. 今日のテーマ
やってみよう
（さわってみよう）

5. いいかえると…、
カタログスペックだけで
大事なことを決めない

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

7. スマートフォンアプリ
の状況をおさらい

8. 日本国内のスマートフォン利用者数
（2011年3月）
Android 4,601,000
iOS(iPhone) 3,906,000
その他 1,257,000
総数 9,764,000

9. 3プラットフォームのアプリ数
Apple
アプリ数20万本 2010年6月
総DL数100億 2011年1月
Android
アプリ数20万本 2011年1月
総DL数60億 2011年9月
Windows Phone
アプリ数3万本 2011年8月

10. スマートフォンの業務利用
・在庫管理
・営業ツール
・トレーディング
・決済
・グループウェア

11. かかえる問題
・プラットフォームの選択
・開発ノウハウ
・運用ノウハウ
（特にセキュリティ）

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

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

14. （iPhone, iPad）

15. Develop for iOS
iOS SDK、Xcode、Objective-C
http://developer.apple.com/jp/technologies/tools/whats-new.html

16. Android

17. Android
Android SDK(Java)
Android NDK(C++)

18. Windows Phone

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

20. ─ Principles ─
Clean, Light, Open, Fast
Design Language
Celebrate Typography
“Metro”
Alive in Motion
Content, Not Chrome
Authentically Digital
http://www.microsoft.com/windowsphone/en-us/features/default.aspx

21. その他の実装方法
http://everystockphoto.s3.amazonaws.com/favourite_tools_739247_o.jpg

22. AIR for Mobile Device OS
(iOS、Android、Blackberry)

23. Adobe Muse
Adobe Edge

24. HTML5 + Javascript

25. Web or HTML Desktop App

26. Touch

28. 多用なプラットフォーム
Web か ネイティブアプリ か

29. スマートフォンアプリに限らず
技術選択の際に考えること

30. ① 移植容易性
② 開発生産性（向き不向き）
③ テスト（環境種類別）
④ 技術習得難易度
⑤ 技術者数
⑥ 開発期間＋稼働期間

31. ① 移植容易性
② 開発生産性（向き不向き）
③ テスト（環境種類別）
④ 技術習得難易度
⑤ 技術者数
⑥ 開発期間＋稼働期間

32. ストーリー

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

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

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

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

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

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

39. 出荷可能な
(利用可能)な
ストーリー 開発のサイクル プロダクト
タスク サブタスク

40. プロダクト開発のサイクル
出荷可能な
(利用可能)な
ストーリー 開発のサイクル プロダクト
タスク サブタスク

41. プロダクト開発のサイクル
出荷可能な
(利用可能)な
ストーリー プロダクト
タスク サブタスク 開発のサイクル
向いていない技術を選択した場合

42. プロダクト開発のサイクル
出荷可能な
(利用可能)な
ストーリー プロダクト
タスク サブタスク 開発のサイクル
向いていない技術を選択した場合

43. プロダクト開発のサイクル
出荷可能な
更に分割された (利用可能)な
ストーリー サブタスク プロダクト
タスク サブタスク 開発のサイクル
向いていない技術を選択した場合

44. プロダクト開発のサイクル
更に分割された 出
サブタスク (利
ストーリー
タスク サブタスク 開発のサイクル
向いていない技術を選択した場合

45. 間延びしたプロダクト開発のサイクル
出荷可能な
更に分割された
(利用可能)な
ストーリー サブタスク
プロダクト
タスク 開発のサイクル
サブタスク
採用した技術によっては必要以上の
タスク分割が発生し、リリースのス
ピードを下げてしまう。

46. 向き不向きも大事
そして
本当に使えるのか？
はさらに大事

48. Suica 改札機の
読み取り角度は
13.5度
傾いている。

49. 「本当に使える」
かどうかは
やってみなければ
わからない

50. ・どのような場所で
使うのか？
・利用者は誰か？
・使い慣れているのか？
・片手で使うのか？
両手で使うのか？

51.  屋外で使うなら色調
を強くしなければ視
認性を損なう
 片手で使うならコン
トロールは画面下部
に寄せる
 環境によっては情報
の取り方も考える

52. 今日のテーマ
やってみよう
（さわってみよう）

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

54. 実装してほしい
要求がある
（例）よくある話

55. 実装してほしい
要求がある
要求が正しい前
提で作る
（例）よくある話

56. 実装してほしい
要求がある
①要求のリストを渡す
要求が正しい前
提で作る
（例）よくある話

57. 実装してほしい
要求がある ②要件定義書
を作る
①要求のリストを渡す
要求が正しい前
提で作る
（例）よくある話

58. 細かく書いてあるけ
③要件定義書を
ど、これが欲しかった レビューする
んだっけ…？
実装してほしい
要求がある ②要件定義書
を作る
①要求のリストを渡す
要求が正しい前
提で作る
（例）よくある話

59. 弊社の購買と法務が
③要件定義書を
チェックするので レビューする
体裁を直して下さい
実装してほしい
要求がある ②要件定義書
を作る
①要求のリストを渡す
④ツッコミを入れる
要求が正しい前
提で作る
（例）よくある話

60. 弊社の購買と法務が
③要件定義書を
チェックするので レビューする
体裁を直して下さい
実装してほしい
要求がある ②要件定義書
を作る
①要求のリストを渡す
⑤承諾
④ツッコミを入れる
はいわかりました。
要求が正しい前
ちゃんと読んだ 提で作る
のかなあ…？
（例）よくある話

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

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

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

64. サイクロンロゴ
(for Mobile Devices)

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

66. 大切なことは
1. 「本当に使える」のか？
2. 現実的な期間とコストの範疇
で実現できるのか？

67. Scrum Framework

68. Scrum Framework
ここをどうやって決める？

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

70. Scrum Framework
ほとんど決まってない

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

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

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

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

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

76. （提案）考え直す

77. 実装してほしい
要求がある
要求が正しい前
提で作る
①いきなりこの二者で話をしない

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

79. 課題を
もっている
②現実を認める（要求は固まってない）

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

81. 課題を
もっている
あるべき姿を
描ける
③視覚化をして認識を共有を徹底する

82. ③視覚化をして認識を共有を徹底する
・ストーリーボード（シナリオ）
・ユーザー調査
・ペルソナ分析
・デザインラフ（コンセプト）
・ワイヤーフレーム
・ペーパープロトタイピング
※都度、適したツールを選んで使う

83. ストーリーボード
ペルソナ
ユーザー調査
ドキュメントの体裁よりも全員が
ゴールを正しく認識できること。

84. 課題を
もっている
あるべき姿を あるべき姿を
描ける を作れる
④「あるべき姿」の実現方法を考える

85. ④「あるべき姿」の実現方法を考える
制約（コスト・期間）の下で、実現
できる方法を考える。場合によって
は、ＩＴの専門家としてより良い解
決方法を提案する。

86. 課題を
もっている
あるべき姿を あるべき姿を
描ける を作れる
⑤見通しを確認し投資に値するか検討

87. ⑤見通しを確認し投資に値するか検討
システムにプロダクト（サービスや
アプリケーション）を組み込んだ時、
それがユーザーに対してどのような
インパクトを与えられるのかを再度
考える。

88. 課題を
もっている
あるべき姿を あるべき姿を
描ける を作れる
⑥このサイクルを繰り返す(一定期間)

89. ⑥このサイクルを繰り返す(一定期間)
・本当に役立つのか？を問い続ける
・本当に役立つ状態を模索し続ける

90. 「Unityではじめるゲームづくり」
ミシェル・メナード (著), (監修), 湊 和久 (翻訳),
大西 康満 (翻訳), 放課後Unity倶楽部 (翻訳)
ソフトバンククリエイティブ (2011/11/2)

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

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

93. 本当に役立つのか？

94. 課題を
もっている
ファシリテートする
あるべき姿を あるべき姿を
描ける を作れる
⑦サイクルを軌道に乗せる

95. ⑥サイクルを軌道に乗せる
通常、オーナー(発注者)は忙しく、
デザイナ／技術者と頻繁なコミュニ
ケーションをとることが難しい。
ここにファシリテーターを入れるこ
とで調整役とオーナーの代弁者を兼
ねることで、サイクルのスピードを
下げないようにする。

96. 課題を
もっている
ファシリテートする
あるべき姿を あるべき姿を
描ける を作れる
３＋１の視点

97. オーナーの
専門アクティビティ
課題を
もっている
共通の
アクティビティ
ファシリテートする
あるべき姿を あるべき姿を
描ける を作れる
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

98. オーナーの
専門アクティビティ
問題の提起
課題を
事業化への組織内調整
もっている
事業領域における法令の確認
共通の
アクティビティ
ファシリテートする
あるべき姿を あるべき姿を
描ける を作れる
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

99. オーナーの
専門アクティビティ
課題を
もっている
共通の
アクティビティ
ファシリテートする
デザインコンセプト提案
あるべき姿を あるべき姿を
インフォメーションアーキテクチャ
描ける を作れる
インタラクションデザイン
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

100. オーナーの
専門アクティビティ
課題を
もっている
共通の
アクティビティ
ファシリテートする
実装方式の提案
あるべき姿を あるべき姿を
描ける
フィージビリティスタディ
を作れる
プロジェクトマネジメント計画
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

101. ビジネスゴールの設定 オーナーの
ゴールの認識を共有する 専門アクティビティ
ペルソナ作成
課題を
ストーリーマッピング
もっている
プロダクトバックログの作成
妥当性の検証
共通の
アクティビティ
ファシリテートする
あるべき姿を あるべき姿を
描ける を作れる
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

102. オーナーの
専門アクティビティ
課題を
もっている
共通の
アクティビティ
ファシリテートする
あるべき姿を あるべき姿を
２種類のアクティビティ
描ける を作れる
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

103. オーナーの
専門アクティビティ
課題を
もっている
共通の
アクティビティ
ファシリテートする
あるべき姿を あるべき姿を
描ける を作れる
ビジュアライザーの テクノロジストの
専門アクティビティ 専門アクティビティ

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

105. サイクロンロゴ
ＴＯＯＬＳ
CYCLONEの導入を
しやすくするためのツール群

106. ペーパープロトタイピング
支援ツール
鋭意製作中!!

107. ・個々のツールや技法は普通
・ＣＹＣＬＯＮＥはそれらを
体系化し、誰でもはじめや
すいようにしている

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

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

110. 今日のテーマ
やってみよう
（さわってみよう）

111.  初期の無駄を排除し本質に踏
み込むこと
 体裁にとらわれ過ぎな要件定
義のあり方を変えること
 ＣＭのような開発会社が、こ
れまで以上にお客様のビジネ
スの成功に寄与すること
 １日でも早く「本当に役立
つ」システムを届けること

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

113. サイクロンロゴ
(for Mobile Devices)

115. ご清聴
ありがとうございました
お問い合わせはこちらまで
info@classmethod.jp