ゴリゴリのFlasher+HTML+JSを使ってソーシャルゲームのUIをイチから作ってみた！
•
2 likes•2,100 views
2013年2月2日（大阪）と2月23日（東京）で行われた、ＪＷＳＤＡ×INVOGUEテクニカルセミナー「スマフォで遊ぼ インヴォーグ流スマートフォンソリューション」のセッション2「ゴリゴリのFlasherがHTML+JSを使ってソーシャルゲームのUIをイチから作ってみた！」のスライドです。
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Recently uploaded
Recently uploaded (12)
ゴリゴリのFlasher+HTML+JSを使ってソーシャルゲームのUIをイチから作ってみた！
- 8. ぶっちゃけ、ソーシャルゲーム （以下 ソシャゲ と表記） やらない、知らない、食わず嫌い と、あまりいい印象はありませんでした。
- 9. でも、商品がどうしても欲しかったので頑張りました！ 最初にやった3つのこと ・世のソシャゲを実際に遊んでみる。 食わず嫌いのままでは当然何も作れないので、ソシャゲが実際どう なっているかを、遊んでみて体感する。 ・プレイヤーの気持ちを考えてみる。 プレイヤーは当然、いろいろな人がいる。今回のようにゲームをやらない 人や、ヘビーユーザー、ゲーム自体に興味はないが暇つぶしにやっている人 など、様々な要素を考えてみた。 ・「俺ならもっとよく出来る！」を掘り起こす。 クリエイターたるもの、自分が作るものには自信を持たねば！！ 実際にはあまり関係ないけど、なんかモチベーション上がる。
- 11. ソシャゲ作ってるFlasherに尋問。 ・プレイヤーはどういった部分に価値を感じて 課金しているか？ 例えば、合成結果はご褒美感が大事だと思うので焦らしたり勿体ぶりたいと 思いがちですが、ソシャゲの場合は、コミュニティの中で強いカードを持ってて 頼られるのがすごく気持ちいいとか、ゲーム本編より外側のこと、いわゆる 社会性が課金の動機付けになってます。なので長い演出はウザがられ、短く テンポの良い物が好まれてます。 (結果発表でもテンポ感が重視されていることが見て取れます)
- 12. ソシャゲ作ってるFlasherに尋問。 ・プレイヤーが合成画面で何を期待して操作 しているのか？ ☆たくさんの手持ちのカードから目的のカードを取り出したい。 これがユーザーが期待するキモです。 普通真っ先に思いつくものは「一覧性(できるだけ広く見せてユーザーに選ばせる。)」 だと思いますが、真逆のことをしてます。 流れとしては ベースカードを選ぶ、素材カードを選ぶ、合成結果となると 思うんですが、節々で期待されるものが変化していることがわかります。 ■ベースのカード 期待するもの → 強くしたいカード→レベルの高いカードが手前に欲しい。 ■素材のカード 期待するもの → いらないカード→レベルの低いカードが手前に欲しい。 また、あえて可視範囲をせまくしたのは、これがサーバー側での最適化を行えると 思ったからですね。
- 13. ソシャゲ作ってるFlasherに尋問。 ・ソシャゲがブームになるまでの文化は？ ソーシャルゲームは人気の出たゲームに似たゲームを追いかけるように リリースされてましたので、演出(色使い、エフェクト、動き、)が数ヶ月 刻みで偏ります。 目の肥えたユーザーは数カ月前に流行った演出にすごくがっかりします。 (オワコン感ですね)
- 14. 以上のことを踏まえて、
- 16. カード合成フローを考える。
- 17. 最初に考えたユーザー導線 ベースカードの 素材カードの 合成アニメー 合成結果 選択 選択 ション 最後まで 行かないと選び直せ プレイヤーの要求（欲求） ない・・・ を満たせていない！！
- 18. 最初に考えたユーザー導線 ベースカードの 素材カードの 合成アニメー 合成結果 選択 選択 ション どっちかというとwebっぽい考 え方。 プレイヤーはより良いカード を作りたいのが欲求でそこか ら生まれる要求はカードの選 最後まで び直しというもの。 行かないと選び直せ プレイヤーの要求（欲求） ない・・・ を満たせていない！！
- 19. 改善されたユーザー導線 ベースカードの 素材カードの 合成アニメー 合成結果 選択 選択 ション 追加 やり直し 選んだカードの 確認 確認画面は省略したかったが、プレイヤーの要求を 満たすためにはどうしても必要だった。
- 20. 詰め込みたい情報 ベースカードに何を選んだか 演出 その他インターフェース周りのパーツ 今何枚の素材カードを追加しているか カードの情報 現在の状態 素材カードに何を選んだか
- 21. 試行錯誤の末・・・
- 22. 実際に出来たもの（ベース選択画面） ① ①現在の状態 ② ②③プレイヤーへアクションの促し ④カードの情報 ③ 前段のフローを意識した実装とパーツの配置、 更にはインタラクションの気持ちよさを意識。 ④
- 23. 実際に出来たもの（画面のつなぎ） キーとなる所で、プレイヤーに次の 画面での目的を明示。
- 24. 実際に出来たもの（素材選択画面） ① ①合成待ち風の演出 ②条件を満たした時のみ次の導線 ② を表示させる。
- 25. 実際に出来たもの（確認画面） ① ② ①やり直したい人用の導線 ②追加したい人用の導線 ③合成完了を促す導線 ③
- 26. 実際に出来たもの（合成画面）
- 30. まとめ プレイヤーを中心に考えて、 ゲームとして価値提供をする。 ユーザーを中心に考えて、 広告として価値提供をする。
- 32. まとめ Web制作とほぼ同じ！ Flasherでもできる！
- 33. ありがとうございました！