【UI考察】クラッシュロワイヤル【遊びたい奴が触って覚えろ】
クラクラのSUPERCELLの新作ゲームのUIを調査！
最近また首都圏駅での広告が目立ってますが。。。
クラッシュオブクランではなく、同開発会社の新作ゲームのUIについて考察したいと思います。
クラロワ概要
キャラクターについては前作クラクラから引き継いでおり、作品の雰囲気等を考慮しても続編・スピンオフのようなゲームです。
以下、詳しくは公式サイト・動画を参照ください。
カードゲーム言うけど、あれですタワーディフェンスゲームです。
一言で言えば、シンプルでよくまとまっているUI
まさにやることは一つしかないぜ！！
と言わんばかりの”バトルボタン”の大きさ。
テーマカラーは青。グリッドデザインで整っている。
ポップなイラストアイコンでテキスト情報は最小限にこそぎ落としている。
読むことによる認識ではなく直感で操作させることを意識しているのだろう。
ページ間の操作も左右のスワイプで読み込みが発生することなく
それこそスマホのように遷移が行える。
ゲームの遊び以外の部分での操作にフラストレーションがたまりにくい。
（この操作はけっこうゲームの中では画期的なのでは）
裏を返せば説明不足で情報が足りない
実はシンプル。とは言っても見た目がシンプルに見えるようで情報量は多い。
画面中央の、右側の2つのアイコンは何を指しているのか検討はつくだろうか？
実は、上が「練習バトル」で下が「達成項目」
触ってみないとわからない。
左下の「ショップ」は実はページへ行くとゲーム内通貨・ガチャ・カード購入と1ページにまとめられてしまっている。
が。よく整理されていて、上記のボタンの大きさを調整し操作できそうな箇所を絞る。目につくようにさせる。
そうすることで意図的にユーザーの行動を誘導しているように思う。
そこで情報量が足りなくとも遊ぶことができ支障がないことによって、さほど気にならないのだろう。
ゲームのコアパート(メインの遊び部分)のUIもいたってシンプルだ。
・ゲージが溜まったら、その消費数のキャラクターが召喚できる。
・破壊対象 ・制限時間 ・コメント機能(スタンプ） ・優劣
必殺技やらもない。行動としてはキャラを選んでタップすればいいだけ
遊び自体も先に相手のメイン塔を破壊すれば勝ち。
という単純明快なので、
説明がなくても、とりあえずタップすれば動くし。遊べる。
という点でカジュアルなゲームという立ち位置にいるのだろう。
とにかく遊んでくれるユーザー優先。実際に触って覚えろスタンス
これはチュートリアル中のマイページ画面である。
通常のマイページとは違い、必要のないものは触れないのではなくそもそも非表示になっている。
これはユーザーのプレイ状況によってUIの表示を変えているのだ。
一見、親切に見えるが。
そもそもそのプレイ状況にならなければ表示されないということは、
そのレベルになるユーザー、インストールした中からそこにたどり着いた人に対してのみスポットを当てているのだ。
（チュートリアル突破率や総DL数からのDAUが知りたいところ）
ユーザー数を確保したい運営にとっては、これはリスクに思える。
同様に、メインメニューの右側二つの「クラン」「クラロワTV」についても最初から閲覧することはできず、代わりに開放条件は記載されているが
果たしてそれが一体何で何の役に立つのかは説明がなされていない。
結局、遊んでみてユーザーが試すしかないのだ。
大分勇気のいる選択をとったUI
クラクラでも同様ではあったが、情報量が少ないUIは
ゲーム初心者やカムバックユーザーに対して操作に迷いをもたせてしまう。
が、そこはそもそもこのゲームをプレイする層をきちんと把握した上でUIを設計しているのではないだろうか。
上記、記事によると売り上げの50％を中国と米国が占めているそう。
そもそも個人的なイメージだが、欧米ではゲームに対する熱量が高い。
そのためその熱量の高さがあれば情報をユーザーは自ら取得していくため、
情報はどこかにおいてはおくが、一度にすべてを見せようとするわけではなく
遊びに必要なものだけを表示するUIになっているのではないだろうか。
上手くユーザーとUIがかみ合った例だろう
少し話がそれるが、テキストを抑えなるべく記号化させることでローカライズの労力も減り、一定のクオリティを保ったままほぼ同時期に世界展開ができたのだろう。
まとめ
遊んでくれる人はちゃんと見てくれている。
どうしても日本のゲームでは1〜10を説明しなければいけない呪いにかかっているような気がする。
それはクレーマー対策なのか、それともおもてなしの国民性なのか。
どちらなのかはわからない。
作り手があれもこれも！！見せたい性分で、実はゲームの売りをわかっていないのかもしれない。
クラロワはゲーム性から考えて、何がメインか。を重きをおいた、わりきったUIだ。
遊んでいるうちに気がついたのだが、案外と人は情報がなくてもそれが楽しめるならばあまり不満を抱かない。ようだ
あーだ、こーだ。と作り手が説明をして価値観を押し付けるよりも
ユーザーが実際に遊んでみて評価を下す。
というのは正常なフローで健全なことだと思う。
いつかこんな風に設計されたUIを自分も作れればと思う。（遠い目
ロマサガ2、日比谷バーコラボ行ってきた
実はロマサガやったことないけど行ってきた。
4月1日-15日まで実施していた日比谷バーコラボに行ってきました。
日比谷バー自体も行くのも初めて。
同じくプレイしたこともない友人を唐突に誘っていざ新宿へ
（いつも付き合ってくれてる友人、ありがとう！！）
平日で早い時間帯だったため、お店の人にもろにロマサガ目当てとバレる。
特別メニューどーん。
店内にはロマサガの広告？などが飾られていました。
Barでロマンシングな出逢いをしてみたいですね（真顔
まずはオリジナルメニューを一人ひとつづつ頼む。
青いドリンクは、クロスクレイモア
紫は新宿店限定のソウルスティール
剣に刺さった鴨肉とニシンはバレンヌ帝国
うーむ。厨二病感たっぷり
ちなみにソウルスティールの上の泡は何ですか？と聞いたところ
カルピスと桃シロップと生クリームのムース。とのこと
焼酎ベースでしたが甘くて飲みやすくクリィミィで美味しかったです。
メニューにも1個1個に何が使われているのかや何をイメージしたのかが記載されてて親切でした。
ウィスキーの飲み比べて銘柄を当てて限定グッズを当てよう
そりゃ、やるに決まっているでしょう。
ということで頼む
量がわからなかったので、1つを2人で分けて〜と頼むと
店員さんが気を利かせてくれてグラスも分けてくれました。親切対応
内容はこちらの三種類！ ラベルは描き下ろし。かっこいいですね！！
そしてさらに気を効かせてくれて、瓶もテーブルに持ってきてくれました！！
プレミアがついて、瓶だけで10万円だそうです（ヒエー
中身含めると40万とか・・・いやはやロマサガ力ぱない・・・
ファイヤーブリンガーは医薬品の匂い。
ということでわかりやすかったですが。。。
ジェラールとイスカンダルの差がとてもわかりにくい…！
パイナップルとアプリコットとか被ってるし…！！
あと香りと味わいの雰囲気がたくさんありすぎてどっちやねん・・・！！
リコリス知ってるよ・・・！あの世界一不味いグミと噂のサルミアッキの原料だよね！
アルコール度数が高すぎて、鼻が…！
と普段酒飲みなれてないことが露骨に分かってしまう体たらく
そしてウィスキー飲んでると確かに甘いものがたべたくなる。
ということでサガ マリアージュセットを注文。
めちゃくちゃ充実してますね…！！確かにウィスキー飲んでると欲しくなるわ！！
とチョコレートをぽりぽり。そして飲み比べはまだまだ続く…！！
果たして結果は？！？！
友人が味ではなくアルコール度数で判断。
という偉業を行い、見事正解。
私はというと自分の舌を信じた結果、あえなくハズレ。。。
正解した人にはオリジナルコースターがプレゼントされました。
イラストかっこいい。
【結果】ロマサガ分かんなかったけど、楽しめた。
日比谷バーの店員の方は、本当に親切で
オリジナルカクテルについての説明やウィスキーの解説などなど
気を利かせてくださっていて、ゲームオタクにとても居心地のよい空間を提供してくださいました。
コラボしてなくても普段使いで行ってみたいですね。
え、ロマサガ？
長く愛されるゲームって良いですよね。（遠い目
そっちもちょっと遊んでみたくなりました。
おまけ
時間も早いし新宿だし！！てことで同じゲーム系列ということで・・・
アルトリアも行ってきました！！新宿楽しい！！
東新宿に突如現れる白いカプセル
エリクサーはまじ草。だった
あのクラウドの大剣をパフェにぶっ刺す。
という衝撃ビジュアル
勇者の行動選択が「たべる」になってるのがいいね！
食後のラテアート
ということで、コラボバーて意外とたくさんあるので。
皆さん是非。小さい頃に遊んでたゲームのBGMとか流れると懐かしい気持ちになります。
初Uniteまとめ
行ってよかったUnite
まとめ遅いですが、個人的なまとめ。
恥ずかしながら、Unityは本格的に触って慣れ始めたのが2015年7月頃から
NGUI、uGUIをいじれるようになって、丁度いいタイミングで
トレーニングデイもありなかなかためになりました。
お土産も豊富
サンプルデータとオリジナルTシャツ
正直5,000円てちょっと高いんじゃね…？
とか思ったけど
このデータとお土産もってことも考えると結構お得じゃないかな
講演も展示も楽しめる
1、2日目は
ユニティちゃんのライブモデリングあり、各デバイスの展示ではミニゲームありで
ちょっとしか遊べなかったですが
2日間行けばもっと楽しめたかなぁ・・・
別のお部屋でゲームコーナー？もあったので
話題の"Back in 1995"を遊んで、操作方法に悪戦苦闘してギャーギャー騒いでたらスタッフの人に笑われた。
各セッション前に流れるゲームタイトルが面白そうだった件
Made with Unityに載ってるゲームタイトル一覧を誰か…！
— 宮国ろーさ@求職中 (@power4game) 2016年4月5日
面白そうだからプレイしたいけど、情報どこ#unite2016tokyo
て呟いたら思いの外、同じこと思ってた人がチラホラいたようだ。
情報提供してくれた人もいたけど、はっきりした情報がほしかったので結局スタッフさんに聞いてきた。
Made with Unityの映像、中の人に聞いてみたら
— 宮国ろーさ@求職中 (@power4game) 2016年4月5日
まだできたばっかりの動画なので
今後公式でyou tubeで配信される。
かも
とのこのらひい#unite2016tokyo
誤字乙
ちょっと調べてみたらGDC2016verとさほど内容は変わらないようなので、ここに貼っておきます。
要チェックや…！！
まとめ
2年くらい前から該当イベントは名前だけは知っていて、ただ会社でデザイナーがいくようなものじゃない。という雰囲気だったんですね
今年はたまたまセクション限っての募集ではなく、広く募集していたので講演決定とかも待たずに申し込んでみたら行けたという顛末
申し込んでた事実も忘れてしまうっていう
行けてよかったな。と思う反面、GDCの経験をしてしまったせいか
日本のカンファレンスってまだまだおとなしいよなぁと感じました。
座った瞬間に隣の人が挨拶してくるって、なかなか日本じゃないよね。
運営として良いなって思ったのは
資料公開すぐするから！！撮らなくていいよ！アナウンスはなかなか親切でしたね。
去年のCEDECは、シャッター音がうざい。と不評でしたからね…
あとアンケートが紙ってイケてない。書く暇ないしデジタル化してほしい
色々言ったけど、来年以降も行けたら行きたいな。
今後、Unityでもっとゲームを作れるよう努力してきたいですね
Unite Training Dayに行ってみたよ[後編]
ゲームアプリのUI考え方と実装
皆様、お待たせしました…Unite2016 Tokyoトレーニングデイの後半レポ始まるよ！！
残り3時間がっつりは皆んな大好き(!?) uGUIを学びます！！
講師は同じくUnityの中の人、池和田有輔氏です。
uGUIを学ぶ際には、こちらの書籍には本当にお世話になりました。はい。
UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード
- 作者: 池和田有輔,時村良平
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2015/03/06
- メディア: 単行本
- この商品を含むブログ (5件) を見る
前半はuGUIの基本的な機能の説明に
uGUIはunity4.6から実装された、割と新し目の機能です。
会社で勉強しろや〜と言われてもなかなか資料がなかったり
あと皆んな、NGUI使ってたりで。まだまだ普及していないかな…？という印象
イケてないと連呼されるかつてのUnity UI
— 宮国ろーさ@求職中 (@power4game) April 3, 2016
それは自虐なのか？と思ってしまう解説がチラホラw
若干、uGUIの基礎知識がある人にとって前半の基本の説明のみというのは辛いかなぁという印象
周りでは「Anchorがサッパリわからん…」という声が聞こえたので、触りながら覚えるのが一番だろうなと感じました。
HTMLなどWeb知識があれば"float段組"って思っておけば良いんじゃないかな
個人的にはそこ聞きたかったんだけど…
気になったのは講師の経歴。
関わっていたプロジェクトがスマートフォンとコンソールのマルチプラットフォームだったらしい
「コントローラーをどうするかとか、落とし込むのに苦労しました。
今日はその話をすると長くなるので割愛します・・・」
割愛しないで！！
後半はいよいよ実践へ
Sprite素材をいただいて、RPG風のキャラ選択とマップ遷移を作りました。
イラストはオインクゲームズ所属の平岡氏
絵本に出ててきそうな可愛いイラストです。
講師の制作したアセットもサンプルでいただき活用したりしました。
だからこそ聞きたかったUIの考え方
テキストのちょっとしたアニメーションなんて一体どこで使えばいいんだ？
「New」マーク程度で、多用したらダサくなっちゃうだろ…
としか考えられなかったのですが、別のサンプルのデモを見せてもらうことで
ああ、こういう使い方もあるのだな…と思い直しました。
（ちょっとした操作に対するフィードバックとしてスパイス的に使用する感じ）
実際に言葉での説明はなかったので、講師の方はどういう思考でこのアニメーションを使用しようと考えるのか
それこそ、タイトルにするからには説明していただきたかったなぁと
2Dゲームでレベルデザインの話があったので、ある程度踏み込んでもらえると嬉しかったです。
こういう表現技法って結局、UIの基本を押さえてから有効活用できるんじゃないかなぁと思うわけです。
UIって難しいなぁ…
もらったサンプルで色々いじいじするしかないですね…！！
てか…youtube漁ってたら、Global Game Jam2015で同じ会場にいた人や…orz
惜しいことをした…！
Unite2016 Tokyo講演覚書き/2D新機能・個人ゲーム開発〜
ビルディング・2Dワールド in Unity ～2D機能のあれやこれや～
※講演資料なし・デモのみ
【9スライスについて】
2Dゲームにおけるspriteの配置や設定などがより便利に。
通常では並べてコピーして…の繰り返しだったが、
uGUIやNGUIの人にはお馴染みの9スライス対応。
drow modeで繰り返しの仕様が可能。サイズ比を変えずストレッチすることも。
回転や引き伸ばしても自由自在
コーナーを変えずに中の部分をストレッチさせることが可能
【タイルマップについて】
タイルマップを作成するとグリッドを表示できる
セルサイズ、数や形（菱型など）は自由に設定できる
グリッドにspriteが吸着するので、ポジショニングができる
スプライトは差し替え可能
パレット上で設定可能しペイント可能
→photoshopのブラシ、パターン登録に似ている
描画したタイルだけに色を反映できる
レイヤーも分けて設定できる
グリッドに沿わなくてもできる→動かせる
回転も可能
アニメーション登録可能
プログラム、スクリプトを追加できる
タイルマップでも重ねて描画していくと空間などが作成可能。
大きさに応じて壁が自動生成される。パイプや地下空間などに仕様できそう
illustratoeのブラシににている
【マスク】
マスクインタラクション
ハイドなど調整可能
グレースケール 、アルファを調整可能
囲ったことを表示可能
【カプセルコライダー2Dについて】
キャラにカプセルコライダー
エッジコライダーに沿わせてカプセルコライダーを合わせられる
キャラクタにいちいちボックス、サークルコライダーを設定しなくて済む
所感
本講演の前にできたばかりのデモを見せながら機能を説明したため
会場の反応もあり、盛り上がりながらとてもワクワクしたものになりました。
実際に実演するため機能も分かりやすく、まるで絵を描くようにUnity上で2Dのスクロールゲームが作れるので
今後、プランナーが2Dゲームのレベルデザインなどを考えるときに使えそうだなと感じました。
デザイナーでもグラフィックを先行したもの・モックを作れるのではないかと感じます。
感覚的にはマリオメーカーのようなものでした。
これからもっと2Dのゲームは時間が短縮して作れるように感じました。
Unityを使った個人ゲーム開発における「収益化」の現状と未来
発表資料
http://japan.unity3d.com/unite/unite2016/files/DAY2_1700_Room2_IchijoTakaaki.pdf
所感
Uniteの中でかなり盛り上がった部類の講演に感じました。
何より内容にメリハリがあり途中と途中に笑いをはさみ、真面目な話もある。
プレゼンがかなり上手いこともあり、観衆の熱量も自然と高まった印象でした。
受けたあとは、「そうだ、個人制作しよう！！」という気持ちになります。
ただ例に出された「Back in 1995」はまだ開発中のゲームであり、収益化の成功については未確定の要素が大きいため今後の動向は注視したく思います。
また個人で名前は聞いたことはあったが、まさか日本のゲームとは思いませんでした。
Kotakuという海外メディアに取り上げられたのが一番大きいところでしょう。
こういった個人制作を取り上げてもらうというのは、なかなか例が少なく稀で難しく感じるところです（言葉や文化の壁など）
そういった点を考えると登壇者の経験のみを一概にマネできるかというとそうでもなさそうであります。（簡単にできるわけでもなく
ただ今後、この講演をキッカケにして、日本の個人制作・インディーズがどう盛り上がるか楽しみではあります。
関東ゲーム制作部、ちょっと覗いてみようかなぁ
Unite2016 Tokyo講演覚書き/FGOのUnity活用術
Fate/Grand Orderにおける、ディライトワークス流Unity活用術
※講演資料・映像共に非公開
【メディア記事】
演出が光る「Fate/Grand Order」のバトルシーンの秘訣とは - GAME Watch
続きを読む
Unite Training Dayに行ってみたよ[前編]
初Unite。わーい！
Uniteとは
毎年開催される、Unityというゲームの開発ツールのカンファレンスです！（ざっくりすぎ
詳しくは公式サイトへ
Training Day0
Uniteは4月4〜5日の2日間ですが
前日にUnityのスキルを集中的に学べるワークショップが開催されました。
（時間はなんと6時間ぶっ通しの長丁場…）
場所は台場ヒルトンホテル。
geek的な催しには似使わない始終フローラルな香りでした。。。
ワークショップ コースBに参加
ゲームアプリ UI ＆ 2D ゲーム作りワークショップ
前半3時間は2Dゲーム作りのワークショップです。
講師はユニティ・テクノロジーズ・ジャパン合同会社の
大野 功二氏
以下の著書でも知られます。（本屋で見たことあるー
Unityではじめる2Dゲーム作り徹底ガイド スマートフォンでも遊べる本格ゲーム開発に挑戦
- 作者: 大野功二
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2014/10/29
- メディア: 単行本
- この商品を含むブログ (2件) を見る
Unityちゃんのガンアクションゲームを作ったよ！
スタンダードな横スクロールのアクションゲームです。
▽こんなの
画像素材等などは配布されたUSBメモリの中にサンプルファイルが事前に格納されており、
それをコピーして自分のPCで実際に作ってみよう！という流れでした。
始めの10分程度はUnityとはという初歩の解説から丁寧にしていただいた印象です。
「周りの人と助け合いましょう」ということでお隣さんと挨拶する時間もあったり笑
実際につくる過程ではかじってないと難しいかも
これについては周りの方の印象ですね。2Dゲームだけどプロジェクトを3Dにしてしまう方がチラホラ
あとは時間がない影響で、C#のスクリプト部分についての解説はざっくり。
最近スクリプト打ち始めたので、タイピングとか追いつかなかったりとかね
（C#勉強しないとなぁ）
ただ周りにスタッフの方もいらしゃったので、随時フォローしてもらったり周りの人に聞くことも可能だったので
体制としては良かったかなと感じました。
（意地で自力でつまづいたところを解決した人←）
レベルデザインのお話もありました！
ゲームぽい格子ができたので…ということで
ちょっとこれは予想外でしたね。
ただ普段「レベルデザイン、レベルデザイン」て言っていましたが、ほぼ難易度に近い意味合いで使っていたので
実はそういうことじゃないんだよ〜ということを知れたので勉強になりました。
ーレベルデザインとは
難易度調整ではなくゲームの場や流れの設計のこと
ストーリー展開や演出等もレベルデザインの一環ということでした。
ああ、うん。なんか言われてみればわかるかも…
ゲームのステージにも確かに盛り上がりや緩急などは必要ですね。ずーっと同じような階層だと飽きちゃいますし。
ドラマティックにゲームをつくるときは「序破急」を意識する。
映画などにあるストーリー展開の”盛り上がり曲線”を真似て、レベルデザインに置き換えてみると
クライマックスを感じるゲームが作れるのだそうです
メカラウロコ｡ﾟ(●'ω'o)ﾟ｡
最後に講師の方が作ったアレンジステージを解説していただき
レベルデザインの工夫の仕方で、今日作った限られた素材の中でも遊びの幅が広がることを教えてもらい終了。
ね？簡単でしょ？
て言われたら
ﾟ+(bﾟｪﾟ*)+ﾟセヤナ
って答えられそうなくらいUnity2Dゲームがぐっと近づいた3時間でした。
ゲームジャムとかではプログラマーさんに任せっぱなしでしたが
今度参加するときには、ちょっとチャレンジしてみようかなっ
※このワークショップで使われた資料や講演内容の動画は後日Unityのサイトで公開されるとのこと。
後編では残りのuGUIのワークショップやら戦利品自慢やらしたいと思います( ^ω^ )( ^ω( ^ω^ )
