コミックマーケット83のマイクロソフト企業ブースで使われたアンケートシステムを実例にWindowsストアアプリのコンセプトメイクを解説します。

1. Claudia Enqueteの作り方
教えます
2013.03.09 わんくま勉強会東京
初音玲

2. Microsoft MVP for
初音玲 Visual Basic
(2008～)
Oracle ACE Windows Phone
(2008～) Arch
同人サークル 最近は
「わんくま同盟」 「開発が分かる」
代表 クラウドインフラ屋

3. 書籍でました
• VB2012本

4. 2012/11/30
MS担当者さんから１通のメールを受信
コミケ83に向けたご相談、ご協力依頼

5. 2012/11/30
デザインしてくれそうな人に打診
みつばたん！一緒にアプリつくろう！

6. エレベータピッチ作成
1. 『 アプリケーション名』は、
2. 『 アプリを利用する人物像』に対して、
3. 『 アプリの説明』を提供します。
4. このアプリは『切実なニーズや課題』という問題
に対し、
5. 『 競合する他のアプリ』などと異なり、
6. 『 差別化する要素や優位性』という価値を提供で
きます。

7. エレベータピッチ作成
1. 『Claudia Enquete』は、
2. 『MS企業ブースにきた一般参加者』に対して、
3. 『アンケート入力とプレゼント選び』を提供します。
4. このアプリは『従来のアンケート方式では対応で
きない人数』という問題に対し、
5. 『紙やWebのアンケート用紙』などと異なり、
6. 『Win8の操作体験、電波不要、コンパニオンさん
と会話できる楽しさ』という価値を提供できます。

8. 2012/12/2
MS担当者さんにストーリーボード送付
pptxのストーリーボードつけました。
ご確認ください。

9. クラウディアアンケート

10. 私のこと、知ってるわよね？
よく
知ってる ふつう
知ってる
あんた
知らない
だれ？

11. 好きなOSを全部選んでね
Windows MacOS Linux
Windows
iOS Android
Phone

12. 職業を教えてくれるかな？
クリエー
IT関連 予備
ター
学生 その他 予備

13. マイクロソフトって好き？
大好き 好き ふつう
だいだい
嫌い だいーっ
きらい

14. また、参加してもいいかな？
どちら もう
もちろん
でも くんな

15. 今年最後の運試しはいかが？
あたり～
６ １
ちょっと早い私からのお年玉
５
○○○をあげるわッ ２
べ、べつに特別な感情なんてなんだから、
もらってよねっ！
４ ３

16. スタート

17. 2012/12/7
認識共有
ストーリーボードばっちりです

18. 2012/12/7
V1.0.0.0提供
まだ、全然デザインしてません、項目選べません、質
問ファイル入力、回答ファイル出力、ルーレットなど
ありません な状態ですが、とりあえずイメージ共有

19. 2012/12/10
V1.0.0.1提供

20. 2012/12/11
V1.0.0.2提供

21. 2012/12/17
V1.0.0.3提供

22. 2012/12/19
MS品川本社にてミーティング
名だたるMSエヴァからのフィードバックをいただく

23. 2012/12/23
V1.0.0.4提供

24. 2012/12/27 0:47
ストア申請

25. 2012/12/27 14:05
認定→公開

26. 2012/12/28
MS担当者さんがメディアでのインタビューで
「はずれたときにもチョコを」

27. 2012/12/28
急遽対応してストア再申請
(申請14:08→認定15:45)

28. http://hatsunejournal.jp/w8/Claudia
Enquete/

29. 2012/12/29-31
C83開催

31. 完成までのマイルストーン
29 30 1
依頼受領 PowerPoint PowerPoint
2 3 4 5 6 7 8
資料送付 確認受領
V1.0.0.0作成 V1.0.0.0送付
9 10 11 12 13 14 15
V1.0.0.1送付 V1.0.0.2送付
V1.0.0.1作成 V1.0.0.2作成 V1.0.0.3作成
16 17 18 19 20 21 22
V1.0.0.3送付 レビュー
V1.0.0.3作成 V1.0.0.4作成 V1.0.0.4作成
23 24 25 26 27 28 29
V1.0.0.4送付 ストア登録 追加仕様実装 コミケ本番
ストア登録
30 31
コミケ本番 コミケ本番

32. Windows 8 ストアアプリ
• 開発言語:VB, C#, C++
• 画面定義:XAML

33. なにがなにやら？
従来型
Windowsストアアプリで配布
配布
Windows 8
デスクトップアプリ
ストアアプリ
Microsoft Design Style UXガイド
WinRT
.NET Framework
(Windows Runtime)

34. デザイナとのコラボが成功した理由
• Model – ViewModel – View構造
• Binding要素をまず作成
• デザイナはBlendでViewをデザイン
• TFServiceで共有＆バージョン管理

35. ロジックのキモ
• 回答の単一選択と複数選択の混在
• Bindingだけで乗り切りたかったけれど…

36. 単一選択と複数選択の混在に発生した問題
×単一と複数の２つのVisibleを制御
○複数選択コントロールの無理やり単一抑止
×Binding+Convertorで制御
○コードで制御

37. 操作性のキモ
• 登録操作の明確化
• 画面クリーニングタイミングの創出

38. 実運用で分かった点
コミケで使用した実機
• ASUS VivoTab RT TF600T
• Samsung Slate 7 Series
• NEC Lavie Y

39. ソリューション構成
• ４画面
• ２ロジック
• １テストデータ(初期化)

45. Demo:
Claudia Enquete

47. FIN