メインカテゴリーを選択しなおす
「アークナイツ」ガチャ画面が6つの多層構造になっている。パララックスみたいな感じか…？
こんにちは、ちょこです。 「アークナイツ」のガチャ画面で左右にスワイプする時の挙動が気持ち良かったです。 斬新ですが、パララックス表現として認識すると理解しやすいかもです。 ▲こんな感じで多層に作られています。パララ。 ▲ページャー(？)の表現も細かい…！ やー、手が込んでる。 運営するにつれ、結果的にいくつかのテンプレが出来て、それを差し替える形式なのかな…。 見た感じ階層は以下の6つの階層に分かれています。 手前に散っているエフェクト ボタンUIやキャラクターのレアリティ、SDキャラ 左下にある提供割合の情報 ピックアップキャラ近景 ピックアップキャラ中景 ピックアップキャラ遠景、背景 細…
こんにちは、ちょこです。 「アークナイツ」のスキルランクの数字のデザインがかっこいい！ おしゃれ！ これはちょっと敗北感すら感じました。 自分がデザインするとした場合、「効率的にタスクを処理できるためにどうするか」的な発想で「ここで必要なのはスキルランクをアップさせるかどうかなので、消費リソースを見やすくしたり、増加のパラメーターを見せたりするデザインを提案する」とかになりそう。 こういった見せ方もあるんですね。 情報が多いとグラフィックが犠牲になりがちで、つまらない画面になることもあるのですが、数字をかっこよく見せるだけでこんなに印象が変わるんですねー…。 もし「情報が多くてビジュアルが無い…
こんにちは、ちょこです。 「アークナイツ」の潜在能力強化のデザインが良いなー、と感じました。 ▲「潜在能力強化」は日本でいうところの「上限解放機能」です。 これです！星のデザインがモチーフになっています。カッコいい！ 一覧で表示した時にも面積が狭く済むのがメリット。 ピックアップします。下の方に小さく表示されています。 強化演出はこんな感じです。 ▲演出は地味でした。意外。 強化を進めていくとこんな感じになります。 上限まで上げると光ったような表現になります。 こんな感じです。 ん～、新しい。日本国内の上限解放のマークのデザインの発想が固定化しちゃっている気がしたので、アイディアのヒントとして…
こんにちは、ちょこです。 「アークナイツ」のメニューが凄いって話をします。 1：画面上部にある 2：上下二段に分かれている 1：画面上部にある ▲画面上部にメインメニューが表示されます 開閉アニメーションはこのようになっています。 ▲普段は隠れていて、呼び出すと上から出てくる これ初めて見たときに目からウロコでした。 単純に、「横画面の場合、画面下部より画面上部にあった方が押しやすいよね」という話ですが、私の場合ついつい画面下部か左右のどちらかにレイアウトしがちでした。 メニューを開閉するデザインと上部に配置するデザインを掛け合わせる発想がなかったです。 なぜ画面上部に配置する発想が無かったか…
こんにちは、ちょこです。 購買部のカテゴリのアイコンのアニメーションが素敵だったので紹介です。 こんな感じでタブを切り替えるんですが… アップ！ 非アクティブだと28°くらい？傾いていて、アクティブになるとそれが正位置になるアニメーション。ついでにアクティブだと若干大きく表示もされています。 「これが何の意味がるの？」と思うかもですが、明確な意味なんてないです。 「こうした方が面白いじゃん」で済む話です。 こういった作り込みのひとつひとつの遊び心がプレイしている時間を楽しいものにしてくれると思っています。
こんにちは、ちょこです。 「アークナイツ」の図鑑の下位階層にキャラクターのプロファイル画面があるのですが、そこで面白い挙動があったので紹介します。 右側にあるボタンをタップするとそれぞれ「プロファイル」「ボイス」の情報が表示されます。 ▲動くとこんな感じ このようにプロファイルとボイスのボタンの位置が動的に切り替わり、情報を閲覧しようとした際、指の移動距離がゼロで済む、という特徴があります。 ここで謎に気付く 書いてて気づいたのですが、この挙動、スマホではなくPCでマウス操作した時の方が利便性高いですね。 というのも、情報開いておいて、その情報を見ずに切り替える、というのはイレギュラーな操作で…
「アークナイツ」強化素材が1つずつではなく、4つずつカウントアップされる実装がテンポ良くて
こんにちは、ちょこです。 「アークナイツ」で強化を実行する時に一度に4枚アップする実装になっており。テンポの良さを感じました。 強化画面はこんな感じ。 拡大！ ▲こんな感じでカウントアップされます。 最大40枚までセットできます。 また以前プレイしていた「ゴエティアクロス」の場合、押しっぱなしの状態だと後半にテンポアップする実装になっていました。 育成に係る時間は膨大なので少しでもテンポよく進めたいですよね。gifだと伝わりませんがSEも軽い質感で小気味良く、操作していて疲れません。 素材選択を作業ではなく、少しでも楽しくさせよう、という意思が感じられました。 疲れないUIってホントに大事です…
「アークナイツ」自動指揮にエラーが発生する、ってどういうこと？レアな仕様の紹介
こんにちは、ちょこです。 「アークナイツ」の自動指揮モード中に変わったエラーが表示されました。 っていうか、オートモードでエラーって出るんですね。 「自動指揮にミスが生じました」「手動操作を推奨します」と表示されています。 要するに「自動指揮にエラーが発生したのでクリアできるか怪しい、手動に切り替えたほうが良い」ということですね。 エラーが発生した理由は分かりませんが、クリティカルや確率発生型のスキルの発動有無だったり、倍速にするとFPSが変化することがあるみたいなので、それ関連で発生したのかな…。 (※倍速再生すると奇数のフレームが省略される実装をしていた場合、そこを補正する際に記録されてい…
「アークナイツ」スタミナ配布をするだけでもキャラクターを絡ませるだけでこんなにも楽しくできる
こんにちは、ちょこです。 「アークナイツ」にてスタミナ配布のキャンペーンがあったのですが、バリエーションが用意されていて凝っていたので紹介します。 ただ配布するのではなく、キャラクターからの差し入れ、というコンセプトが設定されています。 丁度今の時期だとバレンタイン企画でキャラクターからアイテムが貰えるソシャゲもあると思いますが、それに近い印象かも。 バリエーションがある理由 バリエーションがある理由ですが、システムではなく世界観に寄せているからだと考えられます。 以下、世界観寄りになっている箇所です。 運営からではなくキャラクターから手紙が届く設定 手紙なので文面が毎回異なる 配布アイテムが…
「アークナイツ」ブルーム効果の効果が見えない…どこで効果が実感できるんだろう
こんにちは、ちょこです。 「アークナイツ」のゲームオプション画面で「ブルーム効果」という項目がありました。 ▲「ブルーム効果」ってなんだろう…？ グラフィック設定のブルームとは ゲーミングPCなう ブルームとは、光源から光があふれ出るようなエフェクトのことを指します。ゲームでは光源は数えきれないほど存在します。太陽の光、反射するミラーやガラス、スポットライトやサーチライトといったオブジェクトの光だけでなく、シューティングゲームの弾幕や、スキルエフェクトなども光源として扱われます。 な…なるほど？要するにエフェクトの類なのかな…。アークナイツでそんなの使うシーンあったかな？ と思ってクエスト…
「アークナイツ」NEWの表現が独特だったので紹介。情報の優先度を下げる時に良いかも。
こんにちはちょこ。 一般的に、新しいキャラクターを獲得した際に「NEW」とか付くちょこが、「アークナイツ」のデザインは変わっていたので紹介するちょこ。 単一のデザインとしては以下のような見た目になっているちょこよ。 ▲右から左に文字が流れてる このようにサムネイルの下部に文字が流れていることが分かるちょこ。 画面に配置した時のイメージはこのようになるちょこ。 個別の画像で見たときと印象違うちょこね。 面積が小さく、レアリティを示す色の方が明るいちょこ。静止画だと見落としそうになりますが、アニメーションもされているので多少フォローはされているちょこ。 私の場合、つい、サムネイルの上の方に「NEW…
「アークナイツ」地図情報と敵情報は監視カメラの映像と言う設定になっている？
こんにちは、ちょこです。 「アークナイツ」でクエスト画面から見れる「地図情報」の画面の下にある文字列が気になっていました。 ▲画面右側にある「地図情報」から遷移できます ▲こちらが地図情報 気になった文字列はこちらです。 ▲「EYSSOFPRIESTESS-RI03-CCTV」 この「EYESOFPRIESTESS-RI03-CCTV」の文字列を整理すると… 「EYES OF PRIESTESS - RI03 - CCTV」 となります。分解すると… 「EYES OF PRIESTESS」はプリーステスの目？「RI03」は管理番号？「CCTV」は監視カメラ(Closed Circuit Tel…
「アークナイツ」ショップのコスチューム画面の表現がやはりパララックス的。コスチュームの色数を絞るところからデザインされていてきれい。
こんにちは、ちょこです。 「アークナイツ」でコスチュームのショップのデザインが超良かったので超紹介します。 こちらの画面です。静止画でもかっこ良いです。見せたいものが明確で情報もシンプルにまとまっています。 「静止画でも」と書いたのは、動かしてもかっこ良いからです。 ▲こんな感じで動きます 構図さえ決めちゃえばあとはフォーマットに従うだけなので、かなりの工程が自動化されていると推測できます。 ガチャのパララックスと同じ発想です。 今後、グラフィックにコストを割かないで、こういったビジュアルデザインにコストを割くのが一般的になっていく気がします。 参考までにグラクロのコスチュームの画面 ▲これも…
「アークナイツ」情報が指で隠れてしまう強化画面。実機プレビューも重要
こんにちは、ちょこです。 「アークナイツ」強化画面ですが、レイアウトが原因でストレスに感じる場面があります。 強化画面のデザイン 強化画面はこんなデザインになっています。 操作するとこんな感じです。 ストレスに感じた箇所 前提として、横画面のゲームなので基本的に両手持ちになっているかと思います。 素材を選択する際は右手だと遠いので左手で操作しやすいデザインです。 そうなると「龍門幣」の値が左手で隠れて見えなくなります。 実際に再現すると以下のような操作になります。 ▲すっごい隠れる！ このように親指で素材を選択する際に、左側の情報が隠れてしまいます。 ▲「所持龍門幣」が隠れて見えない また、必…
「アークナイツ」エラーメッセージをキャラクターが伝えることにより、ゲームへの没入感を高める説
こんにちは、ちょこです。 「アークナイツ」でFPと呼ばれるリソースがあるのですが、それが所持上限を超えて1日過ぎるとキャラクターからメッセージが届く仕様になっています。 ドクター！昨日もらった92FPが無駄になったじゃない！もう、FPの保存上限は300！しかないんだから気を付けてよね！交換所の決まりで、毎朝4時にはそれまでに手に入れたFPのうち300を超えた分が破棄されて消えちゃうんだってさ。もったいないよね……だからFPをゲットしたら交換所でガンガン使っちゃって！一回しか注意しないから忘れないでねっ！ いや、かわいい。 FPが破棄される理由も軽く触れられていて、ここでも世界観に寄せてるなぁ、…
「アークナイツ」【シナリオを読む】画面のUIがビジュアル優先だった。これを成立させることが出来るのは至難だと思う
こんにちは、ちょこです。 「アークナイツ」の「シナリオを読む」のUIが意外なUIだったので驚きました。 画面デザインはこんな感じです。 ビデオフィルムを用いることによって過去のシナリオを見れる＝「記録映像」と言うデザインになっていると推測します。 アニメーションとしてはこんな感じ。 ▲アドベンチャーパートに遷移する場合 シナリオ読まずに戻ると引っ込みます。 ▲シナリオを読まずにキャンセルする場合 画面としては割とシンプルなデザインです。 情報を整理して画面が広く使える、その分をビジュアルに使うという発想でデザインされています。 この「シナリオを読む」画面は比較的深い階層にあり、ゲームをプレイす…
こんにちは、ちょこです。 「アークナイツ」のガチャ結果画面がオシャレでヤバい。 アニメーションで見るとこんな感じです。 表示されている情報はシンプルです。・レアリティ・キャラクターのビジュアル・兵の種別(近接タイプなのか、遠距離タイプなのかなど) です。 ガチャTOPで訴求されている情報も同程度なので、表示する情報としてはそれで十分なのかな。 ちなみにキャラクターの以下の階層にある情報としてはこんな感じです。 ガチャ結果画面はゲームの中でもSNSで投稿されやすい画面です。ゲームの広告になり得るので、ここのビジュアルを魅せることは個人的にはかなり重要視しています。 この画面の場合、出来ることはキ…
「Chess Rush」ホーム画面が季節感あふれてたので紹介します
こんにちは、ちょこです。 「Chess Rush」のホーム画面が季節感あふれてたので紹介します。 他にもお知らせ画面であったり… 訴求画像のデザインも雪化粧がされています。 ▲「バナナ～」は一見すると意味不明ですがキャラクターの名前です。 アニメーションを見るとこんな感じです。 後ろの電飾と蝋燭がアニメーションしていることが分かるかと思います。個人的にはもう少し分かりやすいアニメーションをさせてあげたほうが賑やかで楽しく見えるんじゃないかなと思いました。 とはいえ、本質的にユーザーに見せたい情報でもないので、匙加減は控えめになるのかな…。 色はきれいにまとまっていて、赤があまり使われていないの…
「Chess Rush」シェア機能を入れるだけではシェアされない？ユーザーに相応のメリットを与える必要がある
こんにちは、ちょこです。 「Chess Rush」スクショ撮ったらシェア訴求するUIが表示されました。 ▲画面下部に外部SNSの導線が表示される スクショの撮影をトリガーにした仕様って結構珍しい。 ▲スクショを撮ると画面にメッセージが表示されます Chess Rushの仕様 「Chess Rush」に話を戻します。 「Chess Rush」の場合、シェアしようとすると、詳細なアクションを選択する画面が表示されます。 左から順に messenger Facebook その他(デバイス側のシェア機能) に並んでいます。 Twitterはないんですね。公式も運用止まってるし、日本はそんなに力を入れて…
「Chess Rush」スマホの画面をデザインする際は情報が指で隠れてしまわないように気を付けたい事例
こんにちは、ちょこです。 「Chess Rush」の図鑑画面の星押しづらいし、情報隠れるんじゃー！ どういうことかと言うと… この星の部分、タップ判定あるんですけどね。 ▲進化度合いを示す星 押そうと思うとこのようになります。 ▲キャラが指でがっつり隠れます。 アニメーションさせるとこんな感じになります。 ▲星の数を変えると、星の数に応じた情報に切り替わります この画面の場合、星はキャラクターの足元に表示した方が情報が変化していることに気づきやすくなるかな、と思います。 スマホでは、情報を配置する際に情報の優先度だけではなく、指で情報が隠れないかどうかも意識してレイアウトをする必要があります。…
「Chess Rush」PCゲームっぽいUIデザインだと感じた理由？ボタンや文字が小さかったから。でも将来的には垣根がなくなると思う
こんにちは、ちょこです。 「Chess Rush」ですが、しばしばデザインがPCっぽい印象を受けました。プラットフォームが違うとUIの考え方も変わるのでスマホを操作して違和感を覚えました。 どういった部分でPCっぽいなと感じたのかメモを残してみます。 1：ボタンが小さい 1番はこれです。添付はホーム画面ですが、どの画面でもボタンがとにかく小さい。マウスであればカーソル位置を微細にコントロールできるのですが、指で操作するのはストレスです。 どれくらいのボタンのサイズが適切なのかに関しては以下のページを参照しています。 モバイルアプリの最小タップサイズを考える dotproof Microso…
「Chess Rush」フォント界のnullこと【豆腐】が表示されている。なるべくなら表示されたくない文字なので滅ぼしたい
こんにちは、ちょこです。 「Chess Rush」にて日本語のフォントに文字が格納されてないケースがありました。 ▲言語設定画面 ソシャゲで「豆腐」が表示されるのは初めて見たかも。 ▲豆腐 これは「指定されている文字が表示できないので、ダミーの文字を置いている」という状態です。 文字がないのは大体はフォントデータが対応していないのが原因です。 代替フォントで表示されていないのは代替フォントの指定ミスとか、代替フォントが機能していないとか、そんな感じです。たぶん。 基本的にはデバイスに入っているフォントを表示するようにしておけば良いはずなんですが、実装方法まで詳しくは分からず…、言語によってはこ…
「Chess Rush」デザインが凝っている画面の紹介。ガチャ周りは上手にカルチャライズしてるかも
こんにちは、ちょこです。 「Chess Rush」で凝ったUIがいくつかあるので紹介してみます。 1：碁霊士画面 2：スーパーガチャ機 3：宝さがしの冒険 4：ラッキー居酒屋 5：実績表示 1：碁霊士画面 早速ですが、なんなんですかね「碁霊士」って…。そんな「碁霊士」画面がこちらです。 報酬 循環ミッション チャレンジミッション くじ引き 以上の4つのメニューがあります。…あんまりメンタルモデルが働かない。それぞれの画面はこんな感じ。 で、今回紹介するのは「報酬」の中の一部UIです。 この中の一部報酬の詳細を確認しようとすると、虫眼鏡のUIが表示されます。 こんな感じです。ん～、凝っているけど…
「Chess Rush」アウトゲームの画面が多い気がしたので分類わけしてみました
こんにちは、ちょこです。 「Chess Rush」の導線どうなってるのかよくわからなかったので画面の遷移図をまとめてみました。 今回の記事は以下の図でほぼ全てです。 ざっくりこんな感じ。分類は無理やり当てはめました。情報整理は発展途上という印象。 以下はゲームを未プレイの方向けに、各々どういった画面なのか簡単に書き出しました。ゲームをプレイ済みの方は既知の内容となっています。 1：階層情報 2：各画面の特徴など ホーム画面 ログインボーナス プロフィール画面 チャージ画面 ランキング画面 アイテム画面 メール画面 フレンド画面 シーズンのチャージボーナス 宝探し 碁霊士画面 ショップ イベント…
「COUNTER: SIDE（カウンターサイド）」スクロールバーが無くてもスクロールすることが分かるデザインの事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「COUNTER: SIDE（カウンターサイド）」から、スクロールできることを仄めかすデザインをご紹介します。 リストでよく見かけますが情報をあえて中途半端に途切れさせ、続きがあることを暗に伝えるデザインです。 綺麗に配置することに集中すると見落としてしまったり、自然に溶け込んでいるので意識しないと見過ごしてしまう部分かなと思います。 該当の画面はこちらです。今回はショップを事例に紹介してみます。 この画面でスクロー…
「Chess Rush」ヘルプに動画が採用されていた。静止画と上手に使い分けたい。
こんにちは、ちょこです。 「Chess Rush」のヘルプが動画になっているの良いですね。 ▲ヒーローを選択して盤面に配置するところまでの説明 ただ、全部アニメーションしているわけではない様子。 ▲静止画のヘルプ項目もあります。 ▲いくつかは静止画です 動画にすることによるメリットですが… 文字が読めない年齢のユーザーにも理解できる 手順が複雑な時は理解の助けになる とかかな… 逆に動画にするデメリットとしては… そもそもヘルプは読まれないので、動画にするには作成コスト、運用コストが高い 文字や画像と比較して通信費がかかる 求めている情報が得られるか不明瞭 文字検索の機能が使えない とかかな……
「Chess Rush」図鑑画面が図鑑っぽく見えなかったのはパラメーターを載せすぎているから？他タイトルのデザインと比較してみました
こんにちは、ちょこです。 「Chess Rush」にて、画面下部のメニューに図鑑という項目がありました。 ▲画面下部のメニューに「図鑑」がある ただ、画面を見ると全然図鑑って感じがしないんですよね。 ▲図鑑？本の形をしていないので、イマイチ図鑑という気はしない。 気になったので英語版にしてみたら「codex」という単語が割り当てられていました。 ▲codexってなんだろう 「codex」を調べると写本とか古本っぽい。 ▲codecの画像検索結果 コデックス - Wikipedia コデックス（羅：Codex 西：Códice）とは写本の形状の一種で、古代末期から中世にかけてつくられた冊子状の写…
「Chess Rush」インゲームの画面構成をまとめてみました
こんにちは、ちょこです。 先日、「Chess Rush」のアウトゲームの画面をまとめてみたけど、今回はインゲームの画面の構成を見てみます。 ▲図にするとこんな感じ。 グラフィカルな見せ方ではなく、情報も画面遷移ではなく、ポップアップ表示が多いように伺えます。 また、いずれも階層が浅く、情報にアクセスするための手数は少なめ。 以下、詳細です。 1：マッチング演出 2：ロード演出 3：インゲーム 4：ヒーロー図鑑 5：ヘルプ図鑑 6：設定 7：メンバーリスト 8：ヒーロー選択 9：オススメ陣容 10：他人のチェス盤 11：シナジー詳細 12：ヒーロー詳細 13：人口詳細 14：MPクリスタル詳細 …
「エピックセブン」画像を潰して表示するとゲームが面白さに関わらずクオリティが低く見えてしまいがち…
こんにちは、ちょこです。 「エピックセブン」で一番最初に気になったのはお知らせ画面の画像が潰れていることです。 ▲潰さないでー 私の表示環境のせいもあるのかな…。画像が横に潰れてしまっています。 ずっと見てるとよくわからなくなってきた…。 正しい比率は多分こっち。 …逆にこっちが伸ばしてたらもう分んないです。 画像を潰して表示していると 「このアプリ大丈夫かな？」「見てすぐ分かるような場所も整えられてないのに、技術的に難しいバグが対応できるのかな？」 など、いずれにしろ信頼性が下がります。 例えるなら、素晴らしい文章が綴られている小説があったとしても、そこに誤字脱字が多く含まれていたら読者とし…
こんにちは、ちょこです。 「エピックセブン」ですがロードがない！ もうこのご時世、ロードがないのは当たり前になってきてますね。同じYosterのアークナイツは若干ロードあったけど、「Now Loading」ってデザインじゃなかったし…。 …エンジンのせいもあるのかな。 いくつか主な画面を紹介してみます。 ホーム画面⇒クエスト よくありがちな画面遷移ですが、ロードがみられません。厳密にはどこかで読み込みを行っているはずなのですが分からず…。 会話シーン⇒バトル 会話シーンからバトルシーンもシームレスです。というかバトルの上に会話シーンを乗っけています。 クエスト終了⇒マップ クエストが終了し、マ…
「エピックセブン」シームレスに次のクエストに進めるデザインが素敵です
こんにちは、ちょこです。 「エピックセブン」ですが、次のクエストに遷移するのがとても楽です。 クエストマップの端に立ち、更に進もうとすると次のクエストに遷移することができます。 ▲この辺を長押ししてキャラクターを移動させると次のクエストに進めます 逆方向に行ったり、ロビーに戻るとクエストから抜けることができます。 ▲クエストクリア後に更に進むと、次のクエストに進みます。 「次のクエストへ進む」のボタンを配置するのでも良いのですが、このようにシームレスに進行すると没入感が維持され、快適にゲームがプレイできて、とても素敵なデザインだと思います。
「エピックセブン」ユナエンジンってなに？劇中のキャラと関係があるの？
こんにちは、ちょこです。 今回はちょっとUIから離れてしまうかもしれませんが、エピックセブンのタイトル画面に「ユナエンジン」って表示されるのが気になりました。 ▲企業ロゴとタイトルロゴの間に表示される「YUNA ENGINE」 ▲ユナエンジンって何？ ユナエンジンとは… お知らせ｜株式会社Yostar 本作は、開発会社SUPER CREATIVEが手がける美麗アニメティックRPG。4Kグラフィックスにも対応した美麗かつ高速なアニメーション描画は、自社開発によるグラフィックスエンジンYUNAエンジンによるものです。 とあります。 読み取りづらいけど、SUPER CREATIVEが開発したグラフィ…
「エピックセブン」キャラクター個別にスキルの自動発動の設定が切り替えられる
こんにちは、ちょこです。 「エピックセブン」の戦闘中のシステムで、自動でスキル発動させる機能が実装されていました。 それ自体は珍しくもない機能ですが、エピックセブンの場合はキャラクター別に設定することができます。 ▲ここから設定できます 戦闘中にリアルタイムで切り替えることが可能です。 拡大！ チェックボックスではなくトグルボタンの挙動になっていますね。 また、浅い階層に配置することにより、スピーディーに設定を切り替えることが可能です。 多くのゲームは一律でスキル発動の有無を管理していて、個別の管理をしているタイトルは珍しいかもしれません。 個別管理だと、回復やバフなどのタイミングを調整できる…
「エピックセブン」時間経過によるデザインがホーム画面以外にも共有されていた。没入感に対するデザインがちゃんとしていると感じました。
こんにちは、ちょこです。 「エピックセブン」のホーム画面で時間経過による演出がありました。 日中はこんな感じです。 ▲ホーム画面でしばらく待機するとUIが非表示になります。きれい。 gifだとこんな感じです。 キャラクターのアニメーション シャンデリアなどの小物のアニメーション 光やパーティクルなどの演出 などの演出があります。 単純にきれいですが、特に空気感が良いなと感じます。なんだろう…光が直接差し込んでいるというより、水面に反射した光が映り込んでいるような不思議な光です。 見た感じ大部分はシェーダーではなく焼き込みか、ふつーに描いているように見えます。 日没後はこんな感じ。 全体的に暖色…
「エピックセブン」色んなゲームのメッセージ送りのデザインを調べて分類分けしました
こんにちは、ちょこです。 「エピックセブン」のメッセージ送りのUIパーツのデザインが気になりました。 ▲会話シーンのメッセージ送りのUIパーツ… ▲これ このデザインの意味するところって、元々はアーケードで物理ボタンを押すことを明示しているのかな、という認識でした。 www.inside-games.jp ▲こういう物理ボタン それが簡略化され、記号化したデザインがこれ。 ▲これ 自分の認識を捕捉すると、こんな感じです。 ▼＝矢印の簡略化 ＿＝物理ボタンの簡略化 起こりを説明してみると象形文字みたいだな、って思いました。 このメッセージ送りのUIパーツのデザイン。特に正解というものが無いのです…
「エピックセブン」期間を限定したキャラ評価機能の紹介。これで評価の精度は高まりそう
こんにちは、ちょこです。 「エピックセブン」にて英雄の評価機能がありました。 定期的に再評価できるのが大きな特徴かな、と感じました。 他に新しいキャラクターが追加されるなり環境が変化することによって評価が変わることがあります。 例えば、登場したては強かったけど、一年経ったら他にも強いキャラクターが出てきて埋もれる、など。 これによって評価の精度が高まります。 ただ、あまりやりすぎるとキャラクターをキャラとして見ずに性能だけ見てしまいます。 そうなると没入感が無くなりゲームの世界観から外れるので、見せ方や使い分けが必要かもしれません。 余談ですが、以前に書いた記事を見返したら大体同じこと書いてあ…
こんにちは、ちょこです。 各種設定の内容がよくわからなかったので確認してみました。UIデザイナーとして、ゲームにどういった設定が用意されているのか知ることは大変重要です。 それは利便性に繋がる機能であり、また暗黙知でもあるからです。では早速紹介していきます。 大きくは 選択 画像 音声 言語 にグループ分けされています。各グループの詳細な項目を見ていくと以下のようになっていました。 1：選択 ┗アカウントバインド┗操作 ┗ダブルタップでクイック出陣/戻す ┗ドラッグし位置を直接交換する ┗自動出陣 ┗指手の移動┗クイック合成機能┗絆対象との連結機能┗装備表示機能┗人口ヒント┗uiの調整 2：画…
「Ink,Mountains and Mystery」オプションのアイコンが世界観ゴリゴリでやばい
こんにちは、ちょこです。 ちょっと前にTwitterで流れてきた「Ink,Mountains and Mystery」をプレイしてみました。 超世界観寄りのゲームです。内容としては「謎解きゲーム」で数時間ほどで全てクリアできる程度のボリュームです。 その中でオプションのアイコンのデザインが特徴的だったので紹介させてください。 アニメーションもかっこ良いです。 こんな凝ってるオプション初めて見た…UIが少ないので集中的に凝れるのかな…。画面のオプションはシェーダーなのですが、華をモチーフにするのは凄い。 世界観寄りのUIをデザインしたい方の参考までに！
「Ink,Mountains and Mystery」スクショを加工できる仕様が凄い。ここまで世界観に寄せたUIが作れるのか…
こんにちは、ちょこです。 「Ink,Mountains and Mystery」ですがスクショの設定が凄いです…！ これはシェアしたくなります…！ 先日のChess Rushの仕様は「どこにシェアをしますか ？」という圧力が凄かったけど、 これは自身で編集することによって、自然とシェアしたくなる動機を生んでいます。 オープンワールド系のソシャゲと相性が良いので、今後こういった仕様は増えてくるんじゃないかなと考えられます。 ただ、かなりクオリティの高い先行者がいるので、後続のタイトルはきちんとしたデザインにしないと苦しいものになるかもしれません。 ただ唯一の誤算は、このタイトルは普通に撮影しても…
「Ink,Mountains and Mystery」没入感を大事にするUIを作りたいなら訴求を控えめに
こんにちは、ちょこです。 「Ink,Mountains and Mystery」のストーリーの見せ方が絵巻です。完全に世界観に寄せていくスタイル。 ▲章別に登場する人物が並びます 絵巻っぽい！ 未登場だと顔が描かれていなかったり、色が塗られてなかったりするのも良い感じです。 特に顔を描かない表現は斬新。下手するとホラーになるので、顔を描かなくてもホラーにならない下地や世界観が必要になってきます。 ▲画像単体で見ると若干怖い ストーリーだとこんな感じのデザインです。 これも絵巻みたいにまとめられています。 動かすとこんな感じ。 よくあるソシャゲと違って、どうしてここまで没入感が得られるのか考えて…
「Ink,Mountains and Mystery」筆文字の出方のアニメーションの紹介
こんにちは、ちょこです。 引き続き「Ink,Mountains and Mystery」ですが、タイトルの文字の出方がカッコいい！ 動かすとこんな感じです。 かっこ良い…手法わかりませんが、簡単にやるならアルファ値を参照してアニメーションつけるとかかな…。 微妙に煙もあるので3Dかエフェクト系のツールも使ってるのかな…。それなら全部3Dで処理したほうが楽そう。 こういった演出はUIデザイナーが担当するしないに関わらず、UIの範疇だと思っているので紹介してみました。 これくらいのクオリティのアプリがどんどん出てきているので、来年はどれくらいのクオリティのゲームが配信されるのか楽しみです。
「KING OF PRISM プリズムラッシュ！LIVE」世界観に寄せるデザインも大切だけど導線や手数を意識するバランスも大切
こんにちは、ちょこです。 「KING OF PRISM プリズムラッシュ！LIVE」のショップの仕様が興味深いです。 世界観に寄せる機能だけど、手数が増えてしまうのもストレスだな、という気持ち。 ▲流れはこんな感じです 入場時のあいさつと… 退場時のあいさつがあります。 このようにショップに遷移する前後にキャラから歓迎のあいさつがあります。 こういった仕様はIPならではの強みかな、と思います。 手数がストレスになる ただ、世界観に寄せてサービスするのは良いのですが、必ず一手増えるので手数としてはストレスなんですよね…。 ▲一回ならいいけど毎回はストレス プリズムストーンを経由するとキャラクター…
「KING OF PRISM プリズムラッシュ！LIVE」編成画面のデザインが独特。編成上限が可変なのが原因なのかな。
こんにちは、ちょこです。 「KING OF PRISM プリズムラッシュ！LIVE」の編成画面がかなり独特な仕様だと感じました。同様の仕様で悩んでいるゲームがあったら参考に。 楽曲によって編成上限数が1名～4名の可変になるデザイン どういった部分が独特だと感じたかと言うと、編成上限が1名～4名の可変になっている部分です。 ▲1名の時 ▲2名の時 ▲3名の時 ▲4名の時 デザインのバリエーションもある さらにデザインのバリエーションも用意されています。 ▲3パターンほどデザインのパターンが用意されています。 楽しそうな画面デザインだけど情報整理としては厳しいデザイン デザインがこうなった経緯は分…
「KING OF PRISM プリズムラッシュ！LIVE」色数を絞ることは情報を整理するために必要な要素だと感じました。
こんにちは、ちょこです。 「KING OF PRISM プリズムラッシュ！LIVE」のUIデザインの色数が絞られているのが好きです。 ▲基本的には絞ってる。レインボーもあるけど。 たくさんの色を使って賑やかに見せる手法もあります。 しかし、多くのソシャゲの場合は登場するキャラクターの数や色数が多くなりがちです。そこに加えてUIにも積極的に色を使っていくと、画面の中で見せたい情報が埋もれてしまいます。 いくつか画面を紹介してみます。 どこの画面も大体こんな感じです。 ベースカラーとメインカラーを決めて情報を綺麗にまとめているな、と感じました。
「KING OF PRISM プリズムラッシュ！LIVE」汎用ボタンの挙動が不統一だったけど、今回はバリエーションが過去イチ
こんにちは、ちょこです 「KING OF PRISM プリズムラッシュ！LIVE」のボタンの挙動が気になりました。 1：色変化(薄茶色) 2：色変化(濃茶) 3：色変化(濃茶2) 7：色変化(グレー) 4：ボタンが消える 5：大きくなるだけ 6：変化なし 8：下にさがる 1：色変化(薄茶色) 2：色変化(濃茶) 文字の色が少し濃くなる 3：色変化(濃茶2) 文字の色はそのまま 7：色変化(グレー) 4：ボタンが消える 5：大きくなるだけ 6：変化なし 8：下にさがる いや、種類多すぎ！ 流石にこの不統一は驚きました。 こうなってくると何が正解か分からないですし、統一する意義も感じられなくなって…
「マギア カルマサーガ（Magia Charma Saga）」誤字脱字は没入感を阻害するので無くして欲しい
こんにちは、ちょこです。 「マギア カルマサーガ（Magia Charma Saga）」の会話シーンでの誤字脱字が凄い… ▲語尾にnが付くキャラ ▲「右装備」ってなに？ 他にも翻訳文が不自然だったり、ボイスとテキストが一致していなかったり、そもそも主人公の名前を言い間違えたり… ▲ルデルと言ったら、ルーデルと言ったり… ▲彼自身もルデルかルーデルかで揺れている UIが関わる部分はとても広い UIがここまで見るの？と思う人がいるかもしれません。 しかし、没入感、世界観の担保という意味ではテキストの中身もUIの範囲ではあるので、翻訳文のクオリティはもちろん誤字脱字には十分気を付けたいです。 ただ、…
「マギア カルマサーガ（Magia Charma Saga）」動画広告を見るとログボが2倍になる機能。広告インセンティブの新しい利用の仕方
こんにちは、ちょこです。 「マギア カルマサーガ（Magia Charma Saga）」にて、動画広告を見るとログボの報酬が2倍になる、という機能が実装されていました。 ▲天使像を選択し… ▲一定時間ゲームをプレイしていると報酬が受け取れます ▲その際に広告を視聴すると報酬が2倍になります 動画広告の実装はカジュアルアプリが中心になっていた印象だった こういった仕様は先日のペンギンの島でも紹介しましたが、動画広告の実装はカジュアルアプリが中心になっていた印象でした。 しかし、近年は比較的大型のタイトルでも実装されてきたように感じます。 ▲「ペンギンの島」ではログインした際に報酬が獲得できます …
「マギア カルマサーガ（Magia Charma Saga）」キャラ選択画面がかっこいい！用件だけ満たすならリストでも良いのに、楽しそうな画面になっている
こんにちは、ちょこです。 「マギア カルマサーガ（Magia Charma Saga）」のキャラ変更画面がカッコいいので見て欲しい！ 最初、画面だけ見てたらホーム画面だと思ってたのですが、実際はシナリオ選択画面というか、主人公を選択する画面でした。 キャラクターを選択すると詳細が表示されます。 他のキャラも見てみます。 こんな感じでプレイする主人公を選びます。 ▲動きがかっこいい！ キャラクターによってアクションが異なるので、操作難易度も変わるようです。 また、良し悪しは別にして、主人公の特徴にハッシュタグを用いるのがなんとも現代的に感じます。 ゲームをどれだけ楽しそうに見せるか シナリオを選…
「マギア カルマサーガ（Magia Charma Saga）」広告召喚と言う今はまだ没入感がないけど、将来的にはクリアしたいデザイン
こんにちは、ちょこです。 「マギア カルマサーガ（Magia Charma Saga）」で広告召喚なるものがありました。 何かというと、動画広告を見るとガチャが引ける機能です。 リチャージは5分で、1日に5回まで引けます。 ▲「プレイ」を押すとこんな感じで動画が流れて… ▲動画が終わるとアイテムゲット！ 没入感皆無！！ 没入感皆無ではあるのですが、ユーザーのメリットやカタルシスがそれを上回ればそれはそれで良いUXとも評価されるんだろうな…。 これは通常のUIの教科書では紹介されないような事例だと思います。ですが、こういったことが実際の現場では起きます。 個人的な心情としては複雑なものがあります…
「マギア カルマサーガ（Magia Charma Saga）」シームレスな画面の遷移アニメーションはゲームUIにとって没入感を得る大事な実装
こんにちは、ちょこです。 「マギア カルマサーガ（Magia Charma Saga）」の画面遷移の演出が面白かったので紹介します。 ▲エリアマップ。空中に空いてるのは世界観なのか、そういう地形なのかは不明。 ▲遷移アニメーションはこんな感じ 要素としては… この空間にある小物をカメラ手前に持ってきて、黒なり白なりでフェードする、という考え方です。 他タイトルの例ですが、雲フェードとかもありますね。 ▲キングスレイドの画面遷移 画面内に存在するパーツを利用することにより、遷移がシームレスになります。これにより画面の変化量が抑えられ、没入感の阻害をせずに画面が切り替えられています。 仮に急に画面…
