CEDEC20110908_Greeスマフォ制作事例

	A	B	C	D	E	F
1
2		グリーのスマートフォンにおけるソーシャルゲーム開発制作事例
3
4		9/8/11
5
6
7		はじめに
8		FPからSPに順次移行がはじまっている中で、どのような事を考えて作成しているのか、移植方法の解説。
9		またUIにおいて、どのようなフローで作成しているのか。
10
11
12		UIデザイン編
13		まず、ガラケーで作成していたものを、スマフォに移植する際にでた問題。
14		■ガラケーで遊んでいたアプリをスマフォで全く同じように遊べる事が前提。
15		↓
16		設計から、UIデザイン、ビジュアルデザインなど色々と一新しなければならなかった。
17		↓その結果として、
18		人手が足らなくなった。
19		マルチタスクで対処。
20		二つのプロダクトが同時並行ダミーデータの作成と、実装とをかぶるようにスケージューリング
21
22		また優先順位付けを行い対処していった。
23		・根幹となるゲームシステムなのか。
24		・クリック、ページビューなどのLogはどうなのか。
25		・今後の運営方針は？
26
27		■UIデザイン
28		スマフォがフューチャフォンやPCと違い、十字キーでの操作がなかったり
29		マウスオーバーのインタラクションがない。その為、下記のような事に注意して作成されたそうです。
30
31		・ゲームの進行に迷わないように、１画面１操作
32		・なるべく、ボタンアイコンの周りには情報をなくす。
33		・隠れた情報にたいする配慮
34		→FP　　画面端までいくとオートスクロール
35		→PC　　スクロールバー
36		→SP　　下部の情報を意図的に、中途半端にきり、
37		続きがあるようにする。
38		つつかれ帳？をタップすると、スライドするようにする
39
40		■ビジュアルデザイン
41		特に注意する点は、Displayのサイズがバラバラな事。
42		↓
43		・CSSを活用
44		転送データの削減や、コストの削減につながる。
45		アイコンなどは、パーツ素材に分けて組み合わせ、色の数値指定や
46		上下左右反転、透明度を使い、ボタンなどを作成する。
47
48		・TEXTリンクも、TEXTのお知らせもCSS。→その為、運営していく中で、
49		新規画像を作成しなくても済む。
50
51		・ボタンはわかりやすく、種類も少なくする。２種類ぐらい。
52		↓
53		こうすることで、認知性をあげ、コストを下げる
54
55		・高速でスライドする事を想定し、色は目立つ色で作成する。
56
57		■UserのLogによる改善
58		ユーザーのログ情報を解析して、デザインにも反映させていく
59
60		ケース１
61		アンドロイドユーザーの各ゲームのTOPページかたの離脱者が多かった
62		↓
63		なぜ？
64		↓
65		・ｉｐｈｏｎｅは上部をタップすると、ファーストビューに戻る機能がある。
66		・アンドロイドデバイスの不具合で離脱。
67
68		↓対処方法
69		・ヘッダー同様のフッターを付けた
70
71		↓結果
72		改善された！　アンドロイドユーザーの５０％はフッターを使用しているという
73		データがとれた。
74
75		ケース２
76		優先順位のつけられないボタンに関して。
77
78		たとえば、上下に、同じ優先順位のボタンを並ばせると、上方が高いと認識しやすいですが、
79		平行にならんでいた場合、どちらのほうが、よく押されるボタンなのか？
80
81		↓結果
82		右のボタンの方が、より多く押される事がわかった。
83
84		※スピード＝品質
85		と考え、ログによるスピーディーなチェックと、アクションを大切にする。
86
87
88		Ｆｌａｓｈ→ＨＴＭＬ５
89		ソーシャルゲームのアニメ部分は、Ｆｌａshで作成されています
90		↑
91		iOSではFlashが使えない。
92		スマフォではHTML５を使用する方向に
93		■FlashからHTML５の移行に関して
94		まず、２つのアプローチを考えた
95		①自動変換
96		むずかしく、時間がかかるうえに、できるか分からない！
97		しかし、長期に見た場合、大幅なコストダウンを見込める、
98		②手動変換
99		ゴールに近く、短期できる、確実に実現可能。
100		しかし、長期で見た場合、移植コストが高い。