こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から使用されているフォントを紹介します。「ブルーロックPWC」ではいくつかのフォントが使われていますが、今回は『数字』に注目してみました。 以下、目次です。 世界観を伝えるフォントを採用 事例１：ゴールスコアは原作やアニメと同じ7セグメントフォント 事例２：戦力の数字はユニフォームの数字と似たフォント 余談（ユニフォームに使われるフォントについて） 世界観を伝えるフォントを採用 「ブルーロックPWC」のゲーム内で使われるフォントには主に以下の2つの要素が含まれています。 読ませるために使用するフォント 世界観を伝えるため

こんにちは！ちょこです！ 「この素晴らしい世界に祝福を！ファンタスティックデイズ」のアドベンチャーパートにて力を入れていると感じたところがあったので紹介します。 該当の演出は以下の演出です。 このように会話中にムービーが挿入される演出が実装されていました。 このムービーはバトル中のカットインアニメーションなのですが、それを流用しています。 スチル絵も実装されていますが、動画が挿入されるのはソシャゲでは初めて見たかも。 ▲生餌にされる女神 必殺技発動前のエフェクトも専用のものです。 このように「この素晴らしい世界に祝福を！ファンタスティックデイズ」ではアドベンチャーパートに力を入れている様子が伺えます。 整理すると… シーンに合わせた専用のエフェクトを用意する 他のタイトルにはないリッチな演出を実装する アニメを観た人がより楽しめるような演出にする という部分で注力されていると感じました。

こんにちは、ちょこです！ 2020/6/5に発売された、 「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」 買いました！読みました！感想書きます！紹介します！ リンク：オブジェクト指向UIデザイン ▲こちらの書籍です こんな方に読んで欲しい！ 書籍の内容について 1：はじめに 2：オブジェクト指向UIについて 3：オブジェクト指向UIの練習問題 4：モードレスについて 5：参考文献 さいごに こんな方に読んで欲しい！ UIの中でも設計中心の話なので「グラフィックに興味あります！」という方よりは「設計や広義のデザインに興味あります！」という方にオススメしたいです。 使っている単語や言い回しが独特なので、一見して難解に見えるかもしれません。 しかし、主張自体はシンプルなものなので、理解できそうな部分だけマークしておけば良い気もします。 分からなかったら時間をおいて読み直すくらい

こんにちは、ちょこです！ 「アズールレーン」の新兵任務(初心者ミッション)画面が独特だったので紹介します！ 新兵任務画面はこんな感じです！ アズレン自体はフラット寄りのデザインで構成されている場面が多く、こういったスキューモーフィズム的な表現があるところは限られます。 ▲スクロールできることにはちょっと気付きづらい 例えば似た役割を持つ「任務画面」を見てみましょう。 ▲同じゲームに見えない…。アズレンは基本的にはこういった要素で構成されています 汎用素材で作られることが多い設定画面はこんな感じです。 この通りフラットなデザインで構成されていることが分かるかと思います。 サイバーとかSF系によくある液晶ディスプレイのようなデザインを目指す際、相性が良いんですよね。 新兵任務画面のデザインの話に戻ります。 フラットデザインのようなスキューモーフィズムデザインのような不思議な感じですが、押せると

こんにちは、ちょこです！ 「VOEZ」プレイしているのですが 楽曲プレイ前後に画面が回転するのがストレスに感じます。 どういうことかと言うと… まず、楽曲前に180度回転します。 ▲ぐるーん 楽曲をプレイした後にも再度回転します。 ▲ぐるーん 再プレイを選ぶと再度回転します。 ▲ぐるーん これ、映像で見てるとそうでもないかもですが、楽曲が始まる直前に回転するので手元がバタバタするんですよね。 ネットで調べてみると既知のバグなのですが、かなりのストレスです。 VOEZという音ゲーアプリについてです。曲の選択まではホームボタンを右側にし... - Yahoo!知恵袋 これを見ると2017年10月には現象が報告されていた様子。 没入感を著しく下げるので改善して欲しい… …と思ったのですが、記事書いてる最中にアップデート入って、今は改善されている様子。多分。。。 (アップデート内容に書いてないので

こんにちは！ちょこです！ 「VOEZ」のタイトル画面に入る時の画面遷移がきれいでした！ ▲タイトル画面。淡く水彩のような質感 遷移はこんな感じです！ ▲イラストがにじみ出るような演出 アニメーションの尺はそこまで長くなくテンポも良いです。 尺が短いとインパクトが強くなってしまったり、鋭く印象を与えてしまうことがあります。 逆に尺が長いと冗長な印象になってしまいます。 短い尺の中で水彩らしさを出しつつ、柔らかい印象を残している良い演出だと感じました。 画面遷移演出を見ていると、どこまでユーザーにアピールするか、という軸があるように感じます。 アピールする例だとこんな感じ。 ▲「戦国アスカZERO」のバトル中の遷移演出 ▲「マギア カルマサーガ」のクエスト選択画面の遷移演出 ▲「七つの大罪 光と闇の交戦」のメール画面への画面遷移演出 (※実機だと爆速なのでスロー再生してます) とか。 見て分か

こんにちは！ちょこです！ 「VOEZ」で動画広告を観ると楽曲がプレイできる仕様があったのが気になったので紹介します！ 上の画面は「楽曲選択画面」です。 複数のカテゴリで楽曲をフィルタリングすることができるのですが、いくつかの楽曲は動画を視聴することでプレイできる実装になっています。 ▲枠をタップすると展開したり畳めたりします ▲広告を観るフィルタ これはちょっと意外でした。 今までのゲームでは動画広告を視聴する主なメリットは以下のようなものが多い印象でした バフ効果やクエスト報酬倍増などのボーナスが付く 課金石などのアイテムが付与される 召喚が回せる ゲームのコンティニューができる など。あくまでゲームの優位性や効率、ちょっとした報酬程度という位置付けのものです。 「VOEZ」のようにゲームのプレイ条件の中に動画視聴があるゲームは初めて見たかもしれません。 カジュアルゲームだと一定のプレイ

こんにちは、ちょこです！ 「ビーナスイレブンびびっど！」のSDキャラのモーションが丁寧に作られていたのが良かったです！ 具体的には試合準備の直前の画面での待機モーションです。 動きとしてはこんな感じです。 ▲ぴょーん シンプルに可愛い！ ▲足元の影が動いてないのは並べたときの動きがうるさかったのかな… どこが丁寧に作られていると感じたか、ですが… ジャンプしたあとに僅かに頭を下に傾けているところです！ ▲ちょっと下を向いている 何度も同じモーションを飽きるほど見られるので、丁寧に作らないとちょっとした違和感が目立ってしまいます。そういった事情もあるので、丁寧に作られているのかな、と感じました。 「キャラモーションとUIって関係なくない？」と思われるかもしれませんが、 キャラモーションは格闘ゲーム、アクションゲームだとプレイ感、触り心地、テンポ感に直接的に作用します。それは結果的に没入感、ユ

こんにちは！ちょこです！ 「ビーナスイレブンびびっど！」でミッションを達成するための導線があるのが便利だと感じました！ 任意のミッションを選択し詳細を開くと、ミッション達成のための導線が配置されています。 結構見かけるというか、もはや一般的なデザインですが改めて便利な導線だな、と感じたので紹介します。 流れで見るとこんな感じです。 ▲手数がかからず便利です！ ゲームアプリのＵＩに関してどこにどういった導線を設置するのか、というのは体系化された資料を見たことが無いんですよね…。 文字や色、レイアウトなんかは知見も多いのですが、導線に関してはwebベースの情報でしかないので、ゲームアプリに関してはその応用だったり、コンシューマの流れ、ＰＣの流れもあってかなり学びづらい環境です。 なので、今のフェーズは他のゲームをよく見て一般的な導線を把握する、淘汰される導線と残る導線を見極めて取捨選択するなど

こんにちは、ちょこです！ 「ビーナスイレブンびびっど！」のキャラクターのプロフィールで「あだ名」という情報があることに驚きました！ キャラクターのプロフィールが表示される画面ですが「あだ名」という情報があることに気付くかと思います。 ▲ゆうかりん これ興味深い！ 実際のスポーツでも選手にあだ名をつける文化があるので、おそらくそれをリスペクトした仕様だと考えられます。これによって親密感を演出することもできます。 また、選手の個性を捕捉することもできます。 ▲そば屋さん この辺は選手の個性タイプから見えるあだ名ですね。 現実だと「ハンカチ王子」とかに近い特性がありそう。(野球ですが) ▲ぐるぐる ▲あやかめ これらは名前由来のあだ名ですね。 現実だと三浦知良選手の「カズ」も名前由来のあだ名で親しまれています。 ▲アルねえ これは役割由来かな…。 現実社会だと「ハマの守護神」とかそういう感じなの

こんにちは、ちょこです！ 「ビーナスイレブンびびっど！」の会話ウィンドウの種類が多く用意されていたのでご紹介です！ 見た感じ以下のようなデザインがありました。 1：通常デザイン 2：シャウト 3：不安 4：心理描写(主人公) こういった表現を用いることによるメリットは？ 早速紹介していきます！ 1：通常デザイン よくある吹き出しを模したデザインです。 2：シャウト 大声で叫ぶときのデザイン。 フォントサイズを大きくするゲームもあります。 3：不安 心配、不安などを中心に様々な場面で使えるデザインですね。 4：心理描写(主人公) 主人公側の場合、吹き出しの向きが変わるのが特徴的です。 ▲話者が手前側にいるので、吹き出しが画面外に向いている 以上です。 こういった表現を用いることによるメリットは？ こういった表現を用いるメリットは何かを考えてみましたが、大きく分けると… キャラクターの感情表現

こんにちは！ちょこです！ 選択肢を見るだけでユーザーが何をしたら良いのか分かるデザインが良いと感じたので紹介します！ こちらの画面です。 レビューをするかしないか、選択肢を見ただけで分かるデザインになっています！ こちらは他タイトルのレビューを促す画面のデザインです ▲「ワンダータクティクス」の例 このように選択肢が「はい」「いいえ」だと、文章を読み、意味を理解する手間が発生してします。 ▲選択肢だけ見ても、何をする選択肢なのか分からない。 それに対して「ビーナスイレブンびびっど！」の場合は選択肢だけでも何をする選択肢なのかが伝わります。 ▲「ビーナスイレブンびびっど！」の例 すべての選択肢のラベルを固有にすると、それはそれで制限が生まれてしまったり、手間が膨大になってしまいます。 ユーザーに悩んでほしくないところに絞って、実装を検討するのが現実的かもしれません。 UIのボタンに表示する選

こんにちは、ちょこです。 「KING OF PRISM プリズムラッシュ！LIVE」のショップの仕様が興味深いです。 世界観に寄せる機能だけど、手数が増えてしまうのもストレスだな、という気持ち。 ▲流れはこんな感じです 入場時のあいさつと… 退場時のあいさつがあります。 このようにショップに遷移する前後にキャラから歓迎のあいさつがあります。 こういった仕様はIPならではの強みかな、と思います。 手数がストレスになる ただ、世界観に寄せてサービスするのは良いのですが、必ず一手増えるので手数としてはストレスなんですよね…。 ▲一回ならいいけど毎回はストレス プリズムストーンを経由するとキャラクターに差し入れが出来る 一応、プリズムストーン経由で遷移すると商品の購入だけではなく、店員へ差し入れ、というコマンドが実行できるので、そういった意味では機能として差異はあります。 ▲店員への差し入れ機能が

こんにちは、ちょこです。 「Chess Rush」の図鑑画面の星押しづらいし、情報隠れるんじゃー！ どういうことかと言うと… この星の部分、タップ判定あるんですけどね。 ▲進化度合いを示す星 押そうと思うとこのようになります。 ▲キャラが指でがっつり隠れます。 アニメーションさせるとこんな感じになります。 ▲星の数を変えると、星の数に応じた情報に切り替わります この画面の場合、星はキャラクターの足元に表示した方が情報が変化していることに気づきやすくなるかな、と思います。 スマホでは、情報を配置する際に情報の優先度だけではなく、指で情報が隠れないかどうかも意識してレイアウトをする必要があります。 PCやゲーム機だと(タッチできるデバイスがあるにせよ)そういったことは少ないので忘れがちです。 PCでデザインしている時につい抜けてしまうことがあるので、改めて注意したいな、と思いました。

こんにちは、ちょこです。 「Chess Rush」のホーム画面が季節感あふれてたので紹介します。 他にもお知らせ画面であったり… 訴求画像のデザインも雪化粧がされています。 ▲「バナナ～」は一見すると意味不明ですがキャラクターの名前です。 アニメーションを見るとこんな感じです。 後ろの電飾と蝋燭がアニメーションしていることが分かるかと思います。 個人的にはもう少し分かりやすいアニメーションをさせてあげたほうが賑やかで楽しく見えるんじゃないかなと思いました。 とはいえ、本質的にユーザーに見せたい情報でもないので、匙加減は控えめになるのかな…。 色はきれいにまとまっていて、赤があまり使われていないのが意外でした。 「Chess Rush」のベースカラーが青なので、赤系は強すぎて使いづらかったのかな…。

こんにちは、ちょこです。 「アークナイツ」のメニューが凄いって話をします。 1：画面上部にある 2：上下二段に分かれている 1：画面上部にある ▲画面上部にメインメニューが表示されます 開閉アニメーションはこのようになっています。 ▲普段は隠れていて、呼び出すと上から出てくる これ初めて見たときに目からウロコでした。 単純に、 「横画面の場合、画面下部より画面上部にあった方が押しやすいよね」 という話ですが、私の場合ついつい画面下部か左右のどちらかにレイアウトしがちでした。 メニューを開閉するデザインと上部に配置するデザインを掛け合わせる発想がなかったです。 なぜ画面上部に配置する発想が無かったかと言うと… 画面上部のリソースやステータス情報と被るから キャラクターの頭に表示すると画面が重くなるから(足元にあるほうが重心が安定する印象を受ける) …などが主な理由です。 ゲームの仕様が複雑に

こんにちは、ちょこです。 「アークナイツ」の潜在能力強化のデザインが良いなー、と感じました。 ▲「潜在能力強化」は日本でいうところの「上限解放機能」です。 これです！星のデザインがモチーフになっています。カッコいい！ 一覧で表示した時にも面積が狭く済むのがメリット。 ピックアップします。下の方に小さく表示されています。 強化演出はこんな感じです。 ▲演出は地味でした。意外。 強化を進めていくとこんな感じになります。 上限まで上げると光ったような表現になります。 こんな感じです。 ん～、新しい。 日本国内の上限解放のマークのデザインの発想が固定化しちゃっている気がしたので、アイディアのヒントとして紹介してみました。 上手くメンタルモデルを活かしつつ、新しいデザインにまとめあげているのがすごいです。

こんにちは、ちょこです。 「アークナイツ」のガチャ画面で左右にスワイプする時の挙動が気持ち良かったです。 斬新ですが、パララックス表現として認識すると理解しやすいかもです。 ▲こんな感じで多層に作られています。パララ。 ▲ページャー(？)の表現も細かい…！ やー、手が込んでる。 運営するにつれ、結果的にいくつかのテンプレが出来て、それを差し替える形式なのかな…。 見た感じ階層は以下の6つの階層に分かれています。 手前に散っているエフェクト ボタンUIやキャラクターのレアリティ、SDキャラ 左下にある提供割合の情報 ピックアップキャラ近景 ピックアップキャラ中景 ピックアップキャラ遠景、背景 細かく見ていきます。 1:手前に散っているエフェクト 2:ボタンUIやキャラクターのレアリティ、SDキャラ 3:左下にある提供割合の情報 4:ピックアップキャラ近景 5：ピックアップキャラ中景 6:ピッ

こんにちは、ちょこです。 「アークナイツ」でボタンの配置が良くなく、指でボタンを隠してしまう画面がありました。 フレンド申請を承認するかどうかの画面右側にある「承認する」か「申請を拒否する」のボタンです。 これです。 ▲上下に並んでるぞ！ 指を被せるとこんなイメージです。 ▲右側のオレンジ色の部分が親指のイメージ 「OK」を押そうとすると、その下にある「キャンセル」のボタンが指で隠れちゃうんですよね。 なので、誤タップしないようにボタンを押すときに慎重になります。 また、もし間違ってキャンセルの方を押してしまった場合もその取り消しが出来ません。 そういった意味でも ボタンを配置する時は「指でボタンが隠れないようにするために」左右に配置するのがセオリーです。 ただし、PC操作の場合はこういった問題がおきず、上下に配置する方がマウスの操作も簡単です。 PC版、スマホ版の両方を用意する際はどちら

こんにちは、ちょこです。 「アークナイツ」の会話シーンのUIが気になったので、特徴を書いてみます。 1：ログが見れない 超意外…！なんでこの機能がないんだろう…。 ここまで会話シーンが凝られていてログが見れないゲームってちょっと記憶にないです。 意図的な仕様だと思いますが、ログ機能を「実装しない」という選択が良い、とされる理由って何だろう…。 ちょっとタップしすぎちゃった、という時に遡れないとストレスに感じてしまうんですよね…。そう感じる頻度はそれほど多くもないけど。 肯定するのであれは、ログが見れないとわかったら、ユーザーはテキストに集中する、って結果でもあるのかな。日常会話やテレビ番組なんかは当たり前ですがログが見れません。 なので、ログが見れないことにより安易なタップがなくなり、シナリオを読むことに集中する、的な…。 余程シナリオに自信がないとできないことです。 2：UIの非表示がな