「リバース：1999」UIアニメーションが心地良いだけではなく、視線誘導・情報の優先度付け・世界観の表現などクオリティの高い実装事例まとめ - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のUIアニメーションをご紹介します。 以下主な事例です。 「リバース：1999」のココがすごい３点 １：情報量のコントロールが絶妙 ２：引き算のデザイン 事例 01：メニュー ラインが伸びるアニメーション 02：ログインボーナス 動かす方向を対比させることで際立つ情報 03：プロフィール プレイヤーの経験値ゲージが伸びる 若干タイミングをずらして表示するパーツたち 格子状のマスクを利用してキャラを表示 04：イベントページ イベントの世界観を表現するアニメーション 05：ほえほえジュークボックス（シーズンパス） 進捗ゲージがオーディオスペクトラム風 名前もゆっくり動いてる ディスクが回ってい
「アイドルマスター SideM GROWING STARS」僅かなシャドウを付けてボタンの表現、強弱などをデザインしている - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、フラット寄りのボタンデザインを紹介します！ シャドウを付けることで立体感を演出 こちらはパネルミッション画面です。 右側の枠はボタンです。 僅かにシャドウを付け、立体感を表現しています。 このわずかな手掛かりでボタンであることが直感的に理解できるデザインになっています。 左側の枠はボタンではありません。 シャドウが付いておらず、立体感が無いデザインです。 フラットなデザインでは基本的にはこのような僅かな手掛かりによってボタンかそうでないかが区別されます。 僅かなシャドウでも優先度を付けることは可能 ボタンの強弱の事例を紹介します。
「キャラバンストーリーズ」吹き出し型の会話シーンのデザインの特徴を6つ挙げてみた - ゲームアプリのUIデザイン
こんにちは、ちょこです！ 今回は「キャラバンストーリーズ」の会話シーンを紹介します。 横画面のゲームで会話シーンをデザインする際の参考になれば幸いです。 さて、早速ですが「キャラバンストーリーズ」の会話シーンのデザインの特徴はこんな感じ！ キャラクターの顔が大きく表示されている ログとしてひとつ前のセリフが表示されている 吹き出しのデザインのバリエーションが豊富 吹き出しがアニメーションすることにより、目を引くデザインになっている どちらのセリフであるかシルエットだけで分かるようになっている メッセージが話者の顔に近い位置に表示されている などです。 このようにかなり丁寧に作られています。 ひとつずつ簡単に補足します。 1：キャラクターの顔が大きく表示されている 横画面であれば、このようにキャラクターの下部にセリフ枠が表示されるデザインが多く見られます。 ▲「バンドリ！ ガールズバンドパー
「アルケミアストーリー」会話シーンでキャラの視線が合うのが素敵 - ゲームアプリのUIデザイン
こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 「アルケミアストーリー」の会話シーンの紹介です。 キャラ同士の掛け合いの時に目線が合うのが結構良いと思うんです。 なんか「ちゃんとしてる」という印象。ソシャゲだとあんまり見たことなかったかも。 相手が低身長だと目線は下に 相手の身長が高ければ目線は上になります。 今のところストーリーはフルボイスだし、結構力入れてるのは伝わります。 追記 さらっと書いちゃったんですが、この「キャラ同士の掛け合いの時に目線が合う」という意識をもつというのは結構重要な要素だと思うようになりました。 以下詳細です。 ソシャゲの文脈としては2Dイラスト→Live2D→3Dという文脈が中心です。 2DとかLive2Dでの画面はこんな感じです。 2Dなので左右反転ができない、反転差分の工数、容量の節約という事情もあり、 結果正面向きになります。 ３Dも紹介し
「御城プロジェクト：RE ～CASTLE DEFENSE～」大事なのは城娘がどう感じているか。メッセージウィンドウのバリエーションが存在する理由について。 - ゲームアプリのUIデザイン
こんにちは、ちょこです。 「御城プロジェクト：RE ～CASTLE DEFENSE～」のメッセージウィンドウが場面によって使い分けされていたので、紹介してみます。 通常のメッセージウィンドウ 通常時のメッセージウィンドウはこちらです。 特別なメッセージウィンドウ 贈り物をしてキャラ固有のイベントシーンはこういったデザインです。 ガチャで獲得した時も同様です。 デザインを変えている目的 システム寄りのUIの考え方をすると一貫性とか統一性が失われるので、売上に関係しないのであれば統一すべき、とか言われそう…。 ゲームはその辺をケースバイケースで判断するので、必ずしもテキストを読ませるためのデザインを優先させなくても良いんですよね。 ここで大事なのは「なぜデザインを変えているのか理解すること」だと思います。 デザインを変えているのは手段であって、表現方法のひとつに過ぎません。 その目的は「ユーザ
「アークナイツ」会話シーンの尖がった仕様は世界観の没入の為？気になったので考察してみました - ゲームアプリのUIデザイン
こんにちは、ちょこです。 「アークナイツ」の会話シーンのUIが気になったので、特徴を書いてみます。 1：ログが見れない 超意外…！なんでこの機能がないんだろう…。 ここまで会話シーンが凝られていてログが見れないゲームってちょっと記憶にないです。 意図的な仕様だと思いますが、ログ機能を「実装しない」という選択が良い、とされる理由って何だろう…。 ちょっとタップしすぎちゃった、という時に遡れないとストレスに感じてしまうんですよね…。そう感じる頻度はそれほど多くもないけど。 肯定するのであれは、ログが見れないとわかったら、ユーザーはテキストに集中する、って結果でもあるのかな。日常会話やテレビ番組なんかは当たり前ですがログが見れません。 なので、ログが見れないことにより安易なタップがなくなり、シナリオを読むことに集中する、的な…。 余程シナリオに自信がないとできないことです。 2：UIの非表示がな
「崩壊3rd」文字をナナメにするちょっと変わった会話シーンのデザイン - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、会話シーンのデザインをご紹介します。「崩壊3rd」のデザインは少し珍しいパターンなので事例を知っておくのも有用かと思います。 該当の画面はこちらです。 デザインの特徴を挙げると以下の６点が浮かびました。 操作キャラが会話UIを見ているので視線の誘導をしている 通信していることが分かるインターフェイスの中にキャラクターが表示されている 発言者が分かるように名前の部分が明るくなっている グリッチフィルタを使うことでSFの世界観を表現している ナナメに配置し奥行きを表現している メッセージ枠がなく、空中に表示されているスクリーン上で会話が進行している アニメーションで見るとこんな感じです。 分か
「最果てのバベル」会話シーンで一番大事な機能が入っていなかった。古今のUIと比較して思いの丈をぶつける！ - ゲームアプリのUIデザイン
こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 グラクロの記事、まだ結構残っているのですが、バベルも書きたくなったので今日はバベルDay。 これも何回かに分けています。最初は会話シーンの話です。 所謂アドベンチャーパートと呼ばれる画面のUIに関してです。 シンプルに見えるUIですが、最も残念に感じたUIがこのアドベンチャーパートの画面です。 残念に感じた理由は主に以下の２点です。 1：メッセージ速度の調整機能がない 2：会話ログに残さなくてもいいメッセージが混じってる 1：メッセージ速度の調整機能がない とにかくこれが致命的でした。 致命的だと思った理由としては優先度の高い仕様だからです。 以下、説明します。 まず開発は「この画面で何を見せたいのか」を考えてみます。 恐らく、 シナリオを読ませたい！ だと考えられます。 それはプロモーションからも読み取れますし、スキップボタン
「魔法使いの約束」会話ログ画面のビジュアルが作り込まれており、没入感を損なわないデザインでした - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」の会話ログの画面を紹介します。 該当の画面はこちらです。 章タイトルが装飾され、丁寧にデザインされているのが素敵です。 ソシャゲの会話ログ画面は比較的簡素なデザインになっていることが多いです。 黒い下地に白い文字が表示されている程度であったり、少し情報量が増えてもキャラクターの顔グラフィックが表示されているくらいです。 会話ログ画面はそういうものだと思っていたのですが、改めて理由を考えてみます。 主に以下の２つが主な理由でしょうか… （スキップボタンがあるため）シナリオは読まれにくい 読まれないため、ユーザーがログ画面に遷移することは稀と予想される この２つの理由があるため
ゲームアプリのUIデザイン
こんにちは、ちょこです。このブログでは主にゲームUIの紹介をしています。 ゲーム業界を目指す方、プランナーの方、非デザイナーの方、ゲームUIに興味のある方、その他ゲーム開発者の参考になれば幸いです。 以下、メインコンテンツを紹介いたします。 1：紹介させていただいたゲーム 2：参考書籍 3：ゲームUIデザイナー向け用語集 4：ゲームUIの画面ナレッジ 5：ゲームUIデザイナーにオススメしたい動画 6：おすすめのサイト 7：ゲームUIデザイナーの参考になりそうな事例の記事 8：タグ一覧 9：ゲームUI FAQ 10：ゲームUIデザインを検討するメモ 11：UE5 12：ブログ運営 13：その他 1：紹介させていただいたゲーム このブログで紹介したゲームの一覧ページです。 プレイしたことがあるゲームや、UIが気になっていたゲームがあれば幸いです。 紹介させていただいたゲーム 2：参考書籍 ゲー
「ディープインサニティ アサイラム」メッセージウィンドウを画面中央に配置するデザイン。キャラとテキストの距離が近いので読みやすい - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の会話シーンのUIを紹介します。 デザイン案の参考になれば幸いです。 該当の画面はこちらです！ このように画面の左右にキャラクターが配置され、吹き出しが画面中央の下から上に流れるデザインになっています。 アニメーションで見るとこんな感じです。 直前の会話内容が画面内に残りつつ進行していくため、少しくらい読み飛ばしたとしても見落としを防ぎやすくなっています。 このUIの特徴は以下の４点かなと思います。 視線が画面中央に集中する キャラの表情を見ながら文章を読むことができる バストアップだけではなく全身が描かれている 叫ぶときや心の声を表現する際に漫画のような吹き出しのデザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
011_画面別-会話シーン/アドベンチャーパート カテゴリーの記事一覧 - ゲームアプリのUIデザイン