「ブルーアーカイブ」アドベンチャーパートで、キャラクターがSF的な表現になっている。その構成要素の分析紹介
こんにちは、ちょこです。 アドベンチャーパートのフィルタがSFっぽい 該当の画面はこちらです。 動画で見るとこんな感じです。 右側のキャラですね。 拡大します！ SFっぽい表現は最近になってよく見かけるようになりました。「ブルーアーカイブ」の表現の特徴として以下が挙げられます。 走査線 通信の歪みや不安定さ 発光 青みがかった色味 他の特徴として「ファイナルギア」の例を紹介すると 色収差 の表現が使われていますね。流行りを取り入れているので、新しさが感じられます。 具体的にどのような表現にするかについては、 ゲームの世界観 実装可能な表現 開発者のアイディア などが関係してくると思います。リリ…
「ブルーアーカイブ」ユニバーサルデザインの観点から、アドベンチャーパート中の効果音を文字化する事例の紹介
こんにちは、ちょこです。 「ブルーアーカイブ」のアドベンチャーパートで効果音が文字化されている場面がありました。 今回は劇中の効果音を文字化することによるメリットを紹介します！ 該当の画面はこちらです。 「ゴゴゴゴゴゴゴー」って書いてありますね。 以前(「ラストエピック」効果音を文字起こしする意味と、ユニバーサルデザインの話)にも記事にしたのですが、効果音を文字化することによって、 音を消してプレイしている方 耳が不自由な方 など、効果音が聞こえない環境や身体的な制限がある場合へのアプローチが可能です。 効果音が文字化されていると、具体的な音の情報だけではなく、どういった音が鳴っているのか想像…
「魂器学院」縦に長くなっていく端末でタブはどこに置けばよいのか
こんにちは！ちょこです！ 「魂器学院」は縦画面のゲームなのですが、タブが側面についていたのが気になりました！ 該当の画面例を紹介します。 横タブは画面左端にあるこの部分ですね。 色んなタブデザインの思想があるなぁ…。 なんとなくのデザインの思想の経緯ですが、 ガラケーの頃はタブは画面上部にあった ボタンを選択する時に上から順にカーソルを移動させていた スマホゲーになり、画面上部のタブは片手操作の時に押しづらいと感じられるようになった 横画面のゲームでは左右に広くスペースが使える そういった経緯から、画面の左右や下部にタブを配置するゲームが増えてきた …という感じでしょうか。 体感による仮説です…
こんにちは！ちょこです！ 「魂器学院」にてキャラクターのグラフィックを切り替える際にノイジーなフィルターがかけられていました。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。タイミング的には、文字情報なども出揃った後にキャラクターのグラフィックが表示される感じでしょうか。 最後に表示されるため、視線も自然とキャラクターの方に向くように仕向けているのかもしれません。 この手のフィルタはSF系のゲームだと、もはや当たり前のように実装されているように見えます。 実装した上で、あとは他のゲームとどう差別化させるのか、という部分が重要になりそうです。 例えば「ファイナルギア」は以下の様…
「魂器学院」お正月の特設ページがカッコ良かったので説明してみた
こんにちは！ちょこです！ 「魂器学院」の正月特設ページのデザインがかっこ良かったので紹介します。ビジュアルを強く訴求したいときの画面デザインの参考になれば幸いです。 該当の画面はこちらです。 ひとつずつ説明します。 1：「行く年来る年」の筆の跡と、SFっぽいサイバー感が組み合わせられている 2：フラット感とスクリーン感の組み合わせ 3：干支モチーフのデザイン 4：アニメーションでネオンっぽい質感が表現されている 1：「行く年来る年」の筆の跡と、SFっぽいサイバー感が組み合わせられている 「行く年来る年」の筆の跡と、SFっぽいサイバー感が組み合わせられています。これにより世界観をお正月感の両方が…
「魂器学院」起動直後のロードゲージのUIにキャラクターがランダムで表示される。繰り返し見る画面だからこそ飽きさせないようにする意図が感じられる
こんにちは！ちょこです！ 「魂器学院」 のロードゲージがランダムで変化するデザインでした。あまり見ないデザインだったので、アイディアを出す際の参考になれば幸いです。 該当の画面はこちらです。ゲーム起動直後のデータロード画面です。画面下部にロードゲージが表示されています。 アニメーションを見るとこんな感じです。 分かりやすく大きくしてみました。 ロードゲージの進捗と共に、SDのキャラクターが表示されていることが分かります。 何度か画面遷移を繰り返していく内に気付いたのですが、他にも何パターンかあります。 パンダの格好をしたキャラクターです。 背中にジェットパックを背負ってるようなキャラクター。 …
こんにちは！ちょこです！ ここでは過去に紹介した記事がどういった問題解決に繋がるのか、という視点でまとめたものです。主観です。備忘録を含みます。 CVが未実装のままリリースしなければならない時、どう表記すれば良いのか キャラクターが建物で隠れて見えない時はどうすればいいの？ キャラクターのフィルタ機能でオススメってありますか？ ゲームらしいエラーの伝え方にはどういったものがあるのかな？ ゲーム内の動画広告を表示する時に、できるだけ没入感を損なわせないようにしたい CVが未実装のままリリースしなければならない時、どう表記すれば良いのか コロナ禍なのでCVが間に合わない時もあると思う次第。 「神無…
こんにちは、ちょこです。 ここでは、普段私が考えていることのメモを残している場所です。 ゲームUIについて話し合う際のネタなどに。 ソシャゲのゲームUIにフラットデザインは合うのか？ ゲームの場合はキャラクターや世界観を表現する側面がある フラットデザインの場合はそういった表現に制限が生まれてしまう 表現したいことがフラットデザインの制約に縛られてしまう可能性がある 制限の中で世界観を担保することはできると思うが、バランスが難しい ソシャゲの場合は訴求、プロモーションという側面がある フラットデザインは情報を盛ることが難しいので相性が悪いと感じる ソシャゲにはフラットデザインは使えないのか？ …
「魂器学院」縦画面で横方向にパララックス表現をした時の見た目
こんにちは、ちょこです。 「魂器学院」のガチャ画面でパララックスの表現が使われていました。 該当の画面はこちらです。 動かすとこんな感じです。 「魂器学院」を見た感じ階層は以下の3つの階層に分かれています。 手前にある文字列 中間層にあるキャラクター 背面にある背景グラフィック この表現は「アークナイツ」でも見かけました。流行っているのかな…？ 「アークナイツ」を見た感じ階層は以下の6つの階層に分かれています。 手前に散っているエフェクト ボタンUIやキャラクターのレアリティ、SDキャラ 左下にある提供割合の情報 ピックアップキャラ近景 ピックアップキャラ中景 ピックアップキャラ遠景、背景 「…
「魂器学院」ニコニコ動画のようにコメントが流れる機能が実装されていました
こんにちは！ちょこです！ 「魂器学院」のバトル画面でニコニコ動画のように画面上にコメントが流れる機能が実装されていました。 該当の画面はこちらです。 画面上部のこちらにコメントが流れていきます。表示されている行数は9行前後に見えます。 動きで見るとこんな感じです。コメントが流れる速度は以前紹介した「神無月」より速いですね。 以前紹介した「神無月」のコメントが流れる速度はこれくらいです。 「神無月」アドベンチャーパート中にニコニコみたいなコメント流す機能が実装されてて驚きました - ゲームアプリのUIデザイン 「魂器学院」における、バトル中にコメントが流れる機能の所感をまとめると以下です。 放置…
こんにちは！ちょこです！ ここでは私がaltタグを入力している際に気を付けていることを記載します。調べた感じ、SEO的に何が正しいのかは曖昧な部分がありますが 画像検索時に参照されている 読み上げツールで読み上げられる ということを重要視しました。SEO的な有用性については度外視しています。 altタグを入力する際の参考になれば幸いです。 以下、altタグを入力する際に気を付けていることです。 視覚障碍者の方が分かりやすくなるように、丁寧に記載する アルファベットは使わない 読み上げ困難な用語は読み方を添える 文末に「。」は使わない ですます調で書く 以下、それぞれの項目の補足です。 1：視覚…
「魂器学院」ゲーム画面におけるエンプティステートの事例紹介。画面によってデザインに差を持たせている。
こんにちは！ちょこです！ 「魂器学院」 でエンプティステートがデザインされていました。 エンプティステートがあるとエンタメ感が表現され、楽しい気持ちになります。 まずはエンプティステートについて簡単に説明します。 エンプティステートの役割 エンプティステートを使うメリット エンプティステートが使われる場面 どういった時にデザインを採用すれば良いか？ エンプティステートをデザインする際に注意したいこと 「魂器学院」のデザインの事例 フレンドリスト お願いボード メールボックス 魂器画面 まとめ 参考事例 エンプティステートの役割 エンプティステートの役割は基本的には以下です。 情報が空であること…
こんにちは！ちょこです！ タグ一覧ページです。追加したら随時更新します。 ゲームタイトル プレイしたゲーム一覧 - ゲームアプリのUIデザイン ゲーム画面 LIVE画面 お知らせ画面 アバター作成画面 エンプティステート オプション/設定画面 ガチャ画面 ガチャ画面_排出数表示 ガチャ結果画面 キャラ一覧画面 キャラ交換画面 キャラ詳細/プロフィール画面 キャラ選択画面 クエスト一覧画面 クレジット画面 サーバー選択画面 サービス終了画面 シナリオ選択_登場人物プレビュー ショップ画面 タイトル画面 チャット画面 データ削除 パーティ編成画面 フレンド画面 プレゼント画面 プロフィール画面 ヘ…
「魂器学院」エラーメッセージがゲームの世界観に沿ったメッセージになっていました。ゲーム内のUXライティングの事例紹介。
こんにちは！ちょこです！ 「魂器学院」のエラーメッセージでゲームらしいUXライティングがあったので、事例として紹介します。 該当の画面はこちらです。 概要としては通信接続エラーですね。エラーメッセージとしては以下のように書かれています。 魂器端末に接続失敗、ネット環境をご確認ください>_< この「魂器端末」とはサーバーのことを指しているのだと思います。念のためゲーム内における「魂器端末」の意味を確認するためにヘルプを探してみたのですがヘルプ機能自体が見つかりませんでした。 Googleでも検索したのですが、エラーメッセージの内容以上の情報は見つからず。 恐らく「魂器機器」はサーバーのことを指し…
「魂器学院」ゲーム起動直後の画面をリッチにすると初頭効果により、コンテンツの印象もきっと爆上がり
こんにちは！ちょこです！ 「魂器学院」でゲームにログインした時の復帰ボーナスの演出が世界観に合わせたデザインになっていました。 今回はそのデザインを紹介します！ 該当の画面はこちらです。 少しだけ画面の説明をすると「魂器学院」は放置した時間に応じて復帰ボーナスが獲得できます。 その際、獲得したボーナスを示す演出がこちらです。 AFKアリーナだと、宝箱と財宝が配置されているデザインでした。 個人的には、汎用的なダイアログで済ませない、という点に注目しています。 獲得した報酬を表示させるだけであれば、アイテム獲得した時の汎用的な演出があるので、そちらにあわせることも出来ます。 汎用演出を使わずに専…
「魂器学院」画面遷移をする際は映像的な繋がりを意識することが大切
こんにちは！ちょこです！ 「魂器学院」で画面遷移する際に、その画面デザインに沿った画面遷移演出がありました。 ゲームの世界観、没入感を意識したデザインの事例として紹介します。 演出は以下のような演出でした。 画面は過去のイベントを視聴することができる画面(放映所画面)から、視聴したいイベントを選択する画面へ遷移する場面です。 その際に、このようにオープンリールが反時計回りで回転する演出が表示されています。 あれ？反時計回り？ と思い、気になって調べたところ、機構、機種にもよるのかもしれませんが、オープンリールは反時計回りが主流な気がします。ざっと見た限りは時計回りのものは見つからなかったです。…
「魂器学院」webビューで疑似シェーダーっぽい表現手法の事例紹介
こんにちは！ちょこです！ 「魂器学院」のお知らせバナーが切り替わる演出がSFっぽい演出で、世界観を表現しているように感じました。 切り替え演出はこちらです。 ちっさい！ 小さいので大きくしてみます。 最初はシェーダーかな？と思ったのですが、 これシェーダーじゃなくてgifアニかスプライトで実装してる気がします。 webビューベースで実装してると仮定すると、ここにシェーダー当てることなんてしないよなー…、と不思議に思ってました。 実際のところどうやって実装してるかは分からないので、詳しい人がいたらコメントお待ちしています。 今思うと「ガール・カフェ・ガン」も似たような実装だったのかな…。 「ガー…
こんにちは！ちょこです！ 「魂器学院」のバトル結果画面で縦書きの文字がありました。珍しい！ 該当の画面は以下です。ボス戦後のリザルト画面です。 「バトル勝利」の部分だけ抜粋してみました。 縦書きのデザインってあまり見ないです。 事情はそれぞれにあると思いますが、パーツで見たときは問題なくても… 他のパーツとの組み合わせた時の視線の流れを阻害する ローカライズする話が出た時に困る などの事情が考えられます。 しかし「魂器学院」の場合は… 縦画面であることを利用してグラフィックを大きく使っている 大きく配置できるため、ジャンプ率が高いメリハリのついたデザインになっている 画面上から下に大きく視線が…
こんにちは！ちょこです！ 今回は「魂器学院」のボスのHPゲージのデザインについて語ってみたいと思います。 該当の画面は以下です。 HPゲージはこちらですね。 「×8」というのは、HPゲージが8本分あるということを示しています。96％というのは「現在HP/最大HP」の値です。 この「×8」というデザインを採用するメリットなどを紹介します。 アニメーションで見るとこんな感じです。 HPゲージ。特にボスのHPなどは物語が進むにつれ最大値が多くなりがちです。そういった時に、複数ゲージのデザインを採用すると以下の様なメリットがあります。 HPの多い敵だということが伝えやすい 与ダメージに対するフィードバ…
こんにちは！ちょこです！ ゲームUIデザイナーの参考になりそうな他社事例の記事です。 随時追加、更新します。 UI/UX テーマは“UI、UXの衝撃” CROOZ主催の開発者向け技術勉強会“第4回テックヒルズ” [ファミ通App] 任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】｜Goodpatch Blog グッドパッチブログ ［CEDEC 2016］UIデザインの品質を効率的に向上させるため，グリーが行ってきた「UI Discussion」 - GamesIndustry.biz Japan Edition ゲームタイトル毎の事例 『…
「魂器学院」ゲーム独自の遊び心のあるテキストライティングの例。目立たない場所にチョコっと書くのが良さそう
こんにちは！ちょこです！ 「魂器学院」のテキストライティングで面白い部分がありました。 該当のテキストはこちらです！ このテキストが表示される画面はこちらです。 キャラクターの詳細情報が表示される画面のスキルの説明文が表示される画面です。 さて、ゲーム中には以下のように書かれています。 ポンコツこの魂器は怠け者なので、何も勉強できませんでした。 サボるこの魂器はやる気があまりないため、これ以上スキルを習得することができません (よく見ると文末の「。」の有無は脱字ってますね) 要するに「このキャラクターは有益なスキルを有していません」というテキストです。 スキルがないことを伝える際に、多くのゲー…
「創世記戦：アンタリアの戦争」報酬を獲得させることを動機としてユーザーの行動をデザインする
こんにちは！ちょこです！ 「創世記戦：アンタリアの戦争」をプレイしていて、色んな画面で報酬が受け取れるのが気になりました。まだ上手く落とし込めていないのですが、備忘録を兼ねて記事にしてみます。 早速ですが「創世記戦：アンタリアの戦争」の場合は以下のページで報酬が受け取れます。 1：ポスト画面（プレゼント画面） 2：VIP報酬受け取り 3：施設報酬 4：各種イベント報酬 5：クエストクリア報酬 6：初討伐報酬 7：各種ミッション報酬（デイリー/メイン/サブ/実績） 8：サブストーリー読了報酬 9：ギルドミッション（デイリーギルド/リーダー／ギルド実績） 10：動画広告視聴 11：ギルドフェスタ …
ゲームUIデザイナー未経験者だけでなく経験者にもオススメできます「売れるゲームのUI/UX 制作現場の舞台裏」
こんにちは、ちょこです！ 今回はゲームUIデザインの参考になりそうな書籍を紹介します！ 「売れるゲームのUI/UX 制作現場の舞台裏」です！ 売れるゲームのUI/UX 制作現場の舞台裏 中古価格￥1,294から(2021/2/11 23:20時点) 未経験者から経験者までおすすめ！ 本の内容は開発現場の事例共有！ ゲーム画面を多数掲載！ 事例に基づく総括はゲームUIならでは！ Web記事でも補える 未経験者から経験者までおすすめ！ おすすめしたい対象ですが、 「ゲームUIの業務内容が分からない！」という未経験者の方から、 「他社はどういった開発をしているのか？」など気になる経験者の方までオスス…
「創世記戦：アンタリアの戦争」画面を拡大した時、追加で情報を表示させると楽しい演出が出来そう
こんにちは、ちょこです！ ホーム画面で画面拡大すると、船体の内部が透けて見えるデザインになっていました。 該当の画面はこちらです！船体の内部がホログラム的に表示されています。 カメラを引くとこんな感じです。特にホログラムは見えません。 船体の中身を示すホログラム表現ですが、船体を拡大表示した時だけではなく、画面遷移した直後にも表示されています。 分かりやすいように該当シーンだけ抽出します。 このアニメーション演出があることによって、船体の中身がある ということに気づくことができます。 逆に、このアニメーションがなかったらと情報が隠されていると感じます。 船体を拡大した時に、船体の中身がホログラ…
「創世記戦：アンタリアの戦争」多言語対応をしているゲームのキャラレビュー機能について
こんにちは、ちょこです。 「創世記戦：アンタリアの戦争」にてキャラクターに対してレビューを残せる機能がありました。 該当の画面は以下です。「英雄評価」という画面名になっていますね。 この英雄評価の機能。 なんとなくの肌感ですが、韓国のゲームに特に多く実装されている印象です。調べてみたら「創世記戦：アンタリアの戦争」の開発も韓国でした。 MMORPG「創世記戦: アンタリアの戦争」では株式などのシミュレーション要素を導入。開発チームを率いるキム・テゴン氏へのインタビューを掲載 韓国のゲームメーカーJOYCITYは，スマートフォン向け向けアプリ「創世記戦：アンタリアの戦争」（iOS / Andro…
「創世記戦：アンタリアの戦争」飛空艇にテキストが流れるUIが実装されていた。流れるUIの利便性などを考えてみました
こんにちは、ちょこです。 「創世記戦：アンタリアの戦争」にて飛空艇の船体にテキストが流れるUIが実装されていました。 該当の場面はこちらです。 アニメーションで見ると以下の見た目になります。 流れてますね。 テキストを流すUIデザインは古くからあります。 しかし、「創世記戦：アンタリアの戦争」のデザインは古いデザインではなく新しい見せ方になっていると感じました。 このデザインについて分解していくと、 SF世界に存在しうる技術のメタファーを取り入れている メタファーを取り入れることによってユーザーの理解を手助けしている ゲームの世界観に溶け込んでいる 世界観の中に溶け込むデザインにすることによっ…
「創世記戦：アンタリアの戦争」クエスト攻略したときの情報を残すことによって、クエストが詰んだ時の参考になる。結果、ゲームの離脱が抑えられるのではないか
こんにちは！ちょこです！ 「創世記戦：アンタリアの戦争」にて、ユーザーがクエスト攻略に対してヒントやメモを書き残すことができる機能が実装されていました。 該当の画面はこちらです。 アニメーションで見るとこんな感じですね。 ユーザーが攻略情報を残すメリットはいくつか考えられますが、 例えば以下の4つがあげられます。 育成するキャラの優先度を決める際の参考になる ユーザーが攻略法を検索する手間を省ける 色んな攻略の仕方が分かる 難度の高いクエストを攻略した時の達成感を記せる 中でも「育成するキャラの優先度を決める際の参考になる」というのは重要だと考えられます。 ユーザーがゲームをプレイして強くスト…
こんにちは、ちょこです。 ゲームUIデザイナーの役に立ちそうなYoutubeの再生リストを作成しました。 全部日本語です。たぶんある程度なら独学でも行けるはず。 人間中心設計/HCD ヒューマンエラー アフォーダンス ゲームUI 人間中心設計/HCD www.youtube.com ヒューマンエラー ヒューマンエラーの話。認識と処理なのでUIにも結構関わるのではないかな、と www.youtube.com アフォーダンス www.youtube.com ゲームUI www.youtube.com
「創世記戦：アンタリアの戦争」DAUを維持するためにはユーザー同士の繋がりが重要。カスタムストーリーモードの事例紹介
こんにちは、ちょこです。 「創世記戦：アンタリアの戦争」をプレイしていて「カスタムストーリー」という変わった機能があったので紹介します。 カスタムストーリー機能について 二次創作を運用することについて プラットフォームの融合を意識していることについて カスタムストーリーの編集がガチすぎる カスタムストーリー機能について この「カスタムストーリー」はユーザーがアドベンチャーパートを作成、配信、閲覧、レビューなどができる機能です。 作成画面はこんな感じです。 この「カスタムストーリー」機能の特徴としては… 二次創作をオフィシャルで運営している ゲームアプリとプラットフォームの融合を意識している と…
こんにちは、ちょこです。 「創世記戦：アンタリアの戦争」の導線設計が綺麗だと感じた部分があったので、紹介します。 導線には目的があります。 今回の記事で扱う導線の目的は以下の2つとします。 ユーザーの問題解決 商品の購入 そして、適切に導線設計がなされていると、以下のようなメリットが考えられます。 ユーザーの問題解決の手間が短縮される 商品の購入につながりやすくなる 離脱率が抑えられる などです。 どれも魅力的なメリットです。 では、「創世記戦：アンタリアの戦争」の場合、どういった導線設計をされているか見てみます。 まずは問題解決についてです。 「創世記戦：アンタリアの戦争」での問題はユーザー…
初心者にはオススメしづらいけど、参考資料を当たりたい場合に便利「人間工学の基礎」
こんにちは！ちょこです！ 「人間工学の基礎」買いました！読みました！紹介します！ 2021/1時点でAmazonでレビューは付いてないので購入を検討する際の参考になれば幸いです。 目次としてはこんな感じです。 人間工学序論 人間工学のアプローチ 人体の仕組み 人間の形態・運動機能特性と設計 人間の感覚・反応特性と設計 ヒューマンエラーと信頼性設計 官能評価と感性工学 自動車と人間工学 高齢者・障害者と人間工学 ユニバーサルデザイン 基本的なところは触れられているのかな、という印象です。 この中から業務に関わりが深い部分に目を通すのが良いかと思います。 ゲームUIの場合、視覚情報をどう認知、処理…
「創世記戦：アンタリアの戦争」多言語対応のチャットでの翻訳機能の評価軸
こんにちは！ちょこです！ 「創世記戦：アンタリアの戦争」のチャット機能の中に文章の翻訳機能が実装されていました。 該当の画面はこちらです！ 翻訳された部分を抜粋するとこんな感じです。テキスト右側の矢印ボタンを押すと原文から設定した標準言語に翻訳されます。 原文と翻訳文が表示されているのがとても便利です。原文が表示されていると翻訳文が適切でないときの手掛かりになります。 翻訳の挙動はこんな感じです。瞬時に翻訳されていることが分かるかと思います。 この翻訳機能は割と良く見るようになってきています。ゲームが多言語対応するのであれば実装を強く推奨する機能なのかな、と思います。 あとは… どれだけ使いや…
「創世記戦：アンタリアの戦争」起動直後に開催中のイベント一覧をまとめてポップアップするデザイン
こんにちは、ちょこです。 「創世記戦：アンタリアの戦争」にて、ゲーム起動後、ホーム画面に遷移した直後に「開催中のイベント」が案内されました。 ここから各イベントに遷移できます。 導線としては以下があげられます。 デイリーイベント「英雄装備の強化」 デイリーイベント「英雄装備の製作」 週間イベント「飛空艇マラソン」 購入ボーナス「今すぐ召喚しよう」 などなど… 見た感じ、開催中のセール、期間限定イベントなどが表示されていました。 この画面の情報の目的としては訴求だと思います。 ソシャゲでありがちな「起動直後に訴求画像がたくさん表示される」実装よりは手数がかからない分だけ良いのかな。 「創世記戦：…
「創世記戦：アンタリアの戦争」機能が多いと行動を指標してくれるゲームガイドがあると便利
こんにちは、ちょこです！ 「創世記戦：アンタリアの戦争」にゲームガイド機能がありました！ 該当の画面はこちらです。 挙動としてはこんな感じです ホーム画面からナビキャラを選択すると以下のサブメニューが表示されます。 お知らせ ご意見BOX ゲームガイド ゲームガイドはそこから遷移できます。 ソシャゲを運用していくと機能が増えていきます。なぜ機能が増えるか、主な理由としては以下の3つがあげられます。 ユーザーからコンテンツを求められるため トレンドに合わせるため 機能は削除されず累積するため それゆえに機能が増え、機能が多くあることによってユーザーが意思決定をする負荷も増します。 また、ゲームア…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からトグルボタンのデザインをご紹介します。トグルボタンは多くのゲームに採用されることが多いUIコンポーネントのひとつです。汎用性の高いUIだと思うので、デザインする上で参考にしやすいかと考えます。 以下、目次です。 色と文字を使ってオンオフが分かりやすいデザイン 色と文字を使ってオンオフが分かりやすいデザイン 「ブルーロック…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から使用されているフォントを紹介します。「ブルーロックPWC」ではいくつかのフォントが使われていますが、今回は『数字』に注目してみました。 以下、目次です。 世界観を伝えるフォントを採用 事例1：ゴールスコアは原作やアニメと同じ7セグメントフォント 事例2：戦力の数字はユニフォームの数字と似たフォント 余談（ユニフォームに使…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からキャラクターのイメージカラーを採用したUIをご紹介します。最近色んなアプリで見かける気がします。体感ですが、2020年頃から徐々に見かける印象…流行りなのでしょうか…？ 以下、概要です。 キャラごとにUIの色が変わっている イメージカラーがグラデーションのキャラもいる 反映しない箇所もある キャラごとにUIの色が変わって…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からリストを見切れさせることで続きがあるように見せるデザインをご紹介します。忘れないようにする意味でも、しばしば取り上げています。 以下、概要です。 見切れたリスト 見切れてないと終わり感 見切れたリスト 情報が画面内に収まりきらずスクロールさせる必要がある場合、スクロールバーを設けるだけでなく、情報を見切れさせることも重要…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から通知マークのデザインをご紹介します。いわゆる赤い丸のマークでも良いのですが、ゲームの世界観にマッチしたデザインも良いですよね。 以下、概要です。 世界観に合わせたデザイン 1：ゲーム起動直後のPV 2：ローディング中のアイコン 3：TIPSの行頭記号 4：報酬獲得済みのマーク 5：課金アイテムのモチーフ 6：公式サイトに…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から注意喚起画面のデザインをご紹介します。日本のソシャゲにはゲームをプレイする前に注意喚起を表示することがあります。どのような要素をどのように表示しているか紹介します。 以下、概要です。 世界観のある画面デザイン 文字を見やすく 世界観のある画面デザイン 「ブルーロックPWC」のゲームプレイ前の注意喚起画面はIPの世界観を取…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からライブ設定の項目をご紹介します。音ゲーのライブ設定はユニバーサルデザインを取り入れていることが多いので、個人的には注目しています。 以下、概要です。 視覚過敏対応を意識した設定項目 視線を集中させる意図を感じる設定項目 端末の負荷を考慮した設定項目 主観的満足度も大事 プレビューがあって分かりやすい 任意のタイミングでサウ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からコンボ演出のデザインをご紹介します。音ゲーに限らずコンボは表示は幅広いジャンルに採用される要素のひとつなので、応用もしやすいのかなと思います。 以下、概要です。 特定のコンボ数時にタイトルならではの特殊演出がある 283（ツバサ）COMBO：283プロダクションロゴ 412（シャイニー）COMBO：スワンマーク コンボする…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。 以下、概要です。 ユニット単位ではなくアイドルごとにカラーを用意 一色に限定しない 髪の毛や瞳の色をサンプリングしている ユニットごとにトーンを揃えている キャライメージのカラー紹介 ユ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から分かりやすいダイアログのデザインをご紹介します。 以下、概要です。 視線が誘導されやすい配色 押させたい選択肢は右に配置し視線を誘導 2択に絞って迷わせない 本文を読まずに選択肢だけ読んでも判断できるテキスト 視線が誘導されやすい配色 「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。ダイアログが全体的…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からログインボーナス画面のデザインの要素をご紹介します。ログインボーナス画面はユーザーが見る頻度が高い画面だからか、デザインにコストをかけるアプリをしばしば見かけます。 以下、概要です。 デザインバリエーションが豊富 圧迫感を軽減する透過ホワイトボードを採用 シームレスにホーム画面に遷移する ナビキャラの衣装が変わる デザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からライブにおけるスタミナの一括消費機能の利便性についてご紹介します。 以下、概要です。 スタミナ一括消費機能の説明 時間短縮につながる 継続的なエンゲージメント 一括消費するスタミナの量をユーザーが調節できる 常に最大値のスタミナを消費するオプションが便利 獲得できる報酬が倍数で書かれている スタミナ一括消費機能の説明 「シ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ履歴画面をご紹介します。これはガシャの購入履歴が確認できる機能ですね。理由は分かりませんが、比較的見かけるようになった印象です。 以下、概要です。 階層を分けて表示してる ガシャ履歴が確認できるとエラーが出たときに便利 ユーザー間のコミュニケーションにも利用される 階層を分けて表示してる こちらは「シャニソン」のガシ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から赤文字の使い方をご紹介します。赤文字を使っても強調されるかどうかは、下地の色や周囲の情報に埋もれないかなど、他の要素との兼ね合いもあります。ただ、一般的に赤は誘目性の高い色なので、強調色として使いやすいと感じるのかもしれませんね。 以下、概要です。 シャニソンでの赤文字の使われどころを分類してみた 1：注意文言 2：ステー…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ結果をシェアする機能をご紹介します。シェアする情報を選べるのが珍しいデザインでした。 以下、概要です。 シェアする情報を選択できる シェアする文言が変わる シェア可能なアイドルの上限数も変わる シェアする情報を選択できる 「シャニソン」のガシャ結果画面ではガシャ結果をシェアできます。結果をシェアできるゲームはしばしば…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からレビュー誘導のダイアログのデザインをご紹介します。レビューの数や評価を高めたい開発者が多いのか、しばしば見かけるデザインです。 以下、概要です。 イラストには新ユニットが描かれている イラストにアイドルからのメッセージが書かれている イラストはボタンが埋もれないような配色 ダイアログを表示するタイミングはガチャを引いた直後…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からアイドルの情報をフィルタする画面のデザインをご紹介します。名前だけではなく、顔アイコンがあるとより直感的に分かりやすくなるのかも、と感じました。何度か同じようなデザインを紹介しているので、興味があったら他のタイトルのデザインも見ていただければと思います。 以下、概要です。 顔アイコンが表示され直感的に分かりやすい アイドル…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からゲームの没入感を高めるテキストライティングの事例をご紹介します。UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。 以下、概要です。 世界観に合ったテキストライティングで没入感アップ 世界観に合ったテキストライティングで没入感アップ 「シャニソン」では世界…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からYouTubeを利用したアイドルたちの実在感を高める取り組みをご紹介します。 UIというよりUX寄りの視点です。「シャニソン」の世界観に対する没入感を高めるデザインの中に、アイドルの実在感を高めるアプローチがある、と解釈しています。 以下、概要です。 YouTubeに動画を残して実在感を高めている YouTubeでアーカイ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からグリッチフィルタの使い方について紹介します。グリッチフィルタの取り入れ方、表現の参考になれば幸いです。 主な事例は以下です！ ADVパートでは遠方との通信表現として 瀕死のパーティメンバーの顔アイコンとして ADVパートでは遠方との通信表現として アニメーションで見るとこんな感じです。背景は歪まずに、キャラクターだけ歪んでいるのが分かります。 よく見ると目や口などの顔の…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からアプリの応援レビューのダイアログについて紹介します。アプリのレビューの記載を促進したい際の参考になれば幸いです。 主な特徴は以下です！ ゲームのキャラを使用 タイトル画面から遷移できる 「応援する」ボタンが少し上にズラして配置されている ゲームのキャラを使用 「ヘブバン」のレビュー訴求のダイアログにはゲームキャラのイラストが使われていました。イラストは描き下ろしで、特別…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から個人的に気になったADVパートの特徴について紹介します。ADVパートの要件を決めたり、デザインを検討する際の参考になれば幸いです。 主な特徴は以下です！ キャラの後ろ姿のグラフィックがある 視線を利用しキャラの位置関係、誰に対して話しかけているが分かる 話していない方のキャラの視線が動く それぞれ紹介していきます。 キャラの後ろ姿のグラフィックがある 「ヘブバン」のAD…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からタイトル画面の「TAP TO START」の明滅アニメーションを紹介します。 主な特徴は以下です！ 明滅はするが完全には消えない 完全に文字が消えないため最低限の可読性を担保 明滅速度は緩やか 明滅はするが完全には消えない こちらは「ヘブバン」のタイトル画面の演出です。キャラクターのカメラ演出が特徴的ですが、今回は画面左側に表示されている「TAP TO START」に注…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からタイトル画面でのユーザーIDの表示の仕方を紹介します。 主な特徴は以下です！ タップしてIDを表示させる ユーザーを守るための措置か 特に配信者に配慮していると思われる タップしてIDを表示させる 「ヘブバン」のタイトル画面を見ると、画面右上に「タップしてIDを表示」とあります。このテキストをタップすると、ユーザーIDが表示される挙動になっています。 ユーザーIDを表示…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から部隊画面のデザインを紹介します。 主な特徴は以下です！ キャラクターの名前がサムネイルの中央に表示されている レベルアップボタンがサムネの上に表示されている 画面の端のサムネイルのメニューは画面外に飛び出さないように位置調整されている キャラクターの名前がサムネイルの中央に表示されている 「ヘブバン」の部隊編成画面は、短冊型のキャラクターのサムネイルが横に6つ並んでいま…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からサウンド設定画面の情報整理を紹介します。 主な特徴は以下です！ 無段階だけど数値管理しないデザイン 数字は何のためにあるのか？ 無段階だけど数値管理しないデザイン 「ヘブバン」のサウンド設定画面を見ると、無段階で設定でき、且つ数字管理をしないデザインでした。 ソシャゲの場合、11段階に切り替えられるようにした上で、どの程度の出力をしているのか数字を表示するデザインが多い…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からホーム画面に配置するキャラクターのデザインを紹介します。 主な特徴は以下です！ キャラクターを画面中央に大きく表示して世界観を表現 円で囲うことで配置に余白と秩序が生まれる キャラの目を閉じさせることで視線を過度に向けない キャラクターを画面中央に大きく表示して世界観を表現 画面をぱっと見た時、画面中央にキャラクターが表示されているのが目に留まるかと思います。 多くのソ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からマイクロインタラクションを紹介します。 ちなみにマイクロインタラクションについてはCEDEC2022の講演にて「ヘブバン」の開発の方が触れています。実際にゲームをプレイしてみて本当に細かく作り込まれていると感じました。 後世に伝われ！！！ 目次はこちらです。 マイクロインタラクションの実装事例 15選 1：ホーム画面のバルーン「明滅と拡縮」 2：タブ「中間を補間するアニ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からフィールドマップのアイコンのデザインを紹介します。 主な特徴は以下です！ シンプルな見た目でも優先度付けをされたデザイン 「ホーム」ボタンの枠線は強調されているだけではなく、矢印が取り入れられている 見せ方が綺麗な「次の時間へ」アイコン 8等分にデフォルメされた時計アイコン アイコンのサイズは大きくても文字のサイズは同じ こちらが「ヘブバン」のフィールド画面です。画面下…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「となりのヘルベチカ」 欧文書体に興味を持つきっかけを作る新しいアプローチ？ 「となりのヘルベチカ」は欧文書体を擬人化させた4コマ漫画です。かなり異色な立ち位置の漫画だと感じました。 読んでみた感想としては、ゲームUIデザイナーとして何に役立てるかが結構難しいかもしれません。というのも、主に漫画で取り上げられているのは以下の3点です。 その書体の特徴 使われ方・採用例紹介 小ネタ 個人的には知識欲が満たされるとは思いますが、紹介されている書体が25書体、それぞれ2～6本の4コマ漫画…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「カリグラフィー・ブック 増補改訂版：デザイン・アート・クラフトに生かす手書き文字」 感想としてはざっくり以下です。 読み物として読むのが良いかも 歴史を知ってデザインに活かす 代表的な書体の特徴が細かく説明されている 参考文献 それではそれぞれの詳細を記載します。 読み物として読むのが良いかも 購入したのは数年前ですが、当時文字のアウトラインを加工する際に、書体の構造や成り立ちを知らないとデザインがうまくまとめにくいと感じることがあり、購入しました。カリグラフィーの教本として書か…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「レタースペーシング タイポグラフィにおける文字間調整の考え方」 図も豊富な190ページ レタースペーシング≠カーニング カーニングの視野が広がる ぜひ手元に欲しい一冊 参考文献が多い 図も豊富な190ページ ゲームUIデザイナーのみならず、UIデザイナーでもお世話になる文字詰め。そういった文字の読みやすさを専門的に扱った書籍です。 概要はこんな感じです。 スペーシングの観点から見た時の文字の特徴 欧文のスペーシングのコツ 和文のスペーシングのコツ 和欧混植のスペーシングのコツ 有…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「［デザイン技法図鑑］ひと目でわかるフォントが活きるデザインの基本。」 フォント選びが一目でわかるタイプの書籍 内容的には初心者向けだがデザインに活かすためには知識が必要 非デザイナーの方でも見てるだけで楽しい フォント選びが一目でわかるタイプの書籍 書籍の概要としては、バナーやポスターの事例を紹介し、どのようなフォントが使われているか簡単に紹介している書籍です。 事例としては豊富で、レトロ、モダン、ゴージャスなど39のキーワードと100種類以上のサンプルが掲載されています。 見た…
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「タイポグラフィの基本ルール」 発行は2010年です。2023年現在だと内容的にやや古いかもしれません。 また、この書籍に限りませんが、電子書籍において、原寸大として掲載されているフォントのサンプルは役立たないため、電子書籍を購入する際にはメリット、デメリットを自分なりに把握した上で選ぶことをおすすめします。 それでは各章の概要と感想を簡単にご紹介します。 第1章 タイポグラフィの素材を知る 第2章 基本的なテクニック 第3章 レイアウト スタンダード 第4章 書体の選び方と演出ス…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から一定時間選択しないと自動的に決定される、時限式のボタンを紹介します。 主な特徴は以下です！ コントラストが強いから目立つ 動いているから目立つ ゲージがあるのでどの程度待てば良いか分かる コントラストが強いから目立つ この画面は戦闘終了後に連戦するかを聞かれる画面です。この画面を見ると「もう一度プレイする」のボタンが一番目立っているかと思います。 いくつか要因は考えられ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からADVパートの選択肢のレイアウトを紹介します。 主な特徴は以下です！ 何をしている画面か一目瞭然 丸いパーツで心情描写を表現 選択肢は右手で押しやすい位置に配置し、操作する指を自然に誘導 選択肢の文字は画面中央に表示し、目に留まりやすい 何をしている画面か一目瞭然 今回紹介する「ヘブバン」のADV中の選択肢を選ばせる画面の凄いところは、何をしている画面か一見して分かると…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から自動周回機能を紹介します。 クエストをバックグラウンドで自動で周回 バッテリーを意識した省電力なデザイン ミニキャラを表示してゲームらしさを表現 クエストをバックグラウンドで自動で周回 「ヘブバン」の自動周回機能は最大連続8時間、自動でクエストを周回してくれる機能です。遊んでいる感覚としては、遠征や探索、アルバイトなどと呼ばれるようなキャラクターを派遣して時間経過で報酬…
こんにちは、ちょこです。 ここではGoogle Chromeで開いているページのスクリーンショットを撮影する方法を記載します。 ネットで検索すると、紹介されている情報が古くなってしまったため同じ手段が取れない状況になっていたり、拡張機能を別途用いる方法だったりしてスムーズに対応が出来なくなっているページを見かけます。 全画面のスクショを撮影するだけであれば、デフォルトの機能だけで十分です。以下、挙動を確認した環境です。 OS：windows Google Chromeのバージョン： 111.0.5563.147 スクリーンショットを撮影する手順は以下です。 撮影したいページを開く Ctrl +…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「咲うアルスノトリア」、（以下、アルスノ）からショップ画面でアイテムが無料で購入できるデザインを紹介します。この無料交換施策は非常に多くのソシャゲで見かける気がします。 無料アイテムはファーストビューにある 毎日違うアイテムが無料で獲得できる 無料アイテムはファーストビューにある ©NITRO PLUS/GOOD SMILE COMPANY, Inc. こちらは「アルスノ」のショップ画面です。いくつか商品が並んでいる…
