「アイドルマスター SideM GROWING STARS」文字のみで構成された画面のお手本デザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（サイスタ）から、文字のみで構成された画面デザインを紹介します！ 文字の見やすさをコントロールする これはガシャの説明画面です。登場するアイドル、開催期間や条件などが書かれています。 ここで注目したいのは文字のみで構成されている画面の中で、情報の優劣がしっかりとデザインされている点です。 アイドルの文字は大きく読みやすいデザインです。 補足事項は色を薄くして…
「夢職人と忘れじの黒い妖精」操作に応じたリアクションをするスキンシップ画面
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、操作に応じてスキンシップの取り方を変化させているデザインを紹介します！ 操作とスキンシップの取り方が関連付けされている 該当の画面はこちらです。 このダイアログはキャラクターと行えるスキンシップの一覧です。どのような操作を行うとキャラクターが反応するか、一覧表にまとめられています。 分かりやすくするために大きくしました。 最近工作したものを聞く ＞ タップ毛を触りたいと頼…
「夢職人と忘れじの黒い妖精」推しと出掛ける時専用の画面遷移演出があり、開発者のこだわりを感じた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、画面遷移演出のデザインの事例を紹介します！ ゲームは映像で伝えている情報が多いため、画面内で何が起きているのか伝えることが重要だと考えています。 現実では今いる場所が瞬間的に切り替わることはありませんが、ゲームでは瞬間移動することもあります。 急に場面が移動するとユーザーは何が起きたのか理解できなくなる懸念があります。そのため、画面同士を繋ぎ、何が起きているのかユーザーに…
デザインの見方、捉え方、考え方の本質をつかむ一冊「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」
こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」 そのデザインに何が足りないか？ では、さっそく紹介します！ 所感 まずは所感です！ デザイナー間でのフィードバック事例が書かれている フィードバックを通じた、コミュニケーションラリーに焦点を当てている デザイナー歴1年目の方は特に実感を持って読めそう 非デザイナーの片が読むならデザイナーが何を考えてデザインしているかが知れて面白いかも フィードバックを始めて返す人にとっても勉強になりそう 個人的には「どのような言葉を使うか」、「どのような順番でデザイン…
「夢職人と忘れじの黒い妖精」キャラクターとチャットする画面でじわ～っと表示される文字演出
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、キャラクターとのチャット画面のデザインを紹介します！ 現代や近未来SFなどを舞台にしたゲームでは、しばしばチャットアプリを模したデザインが登場しますが、中世ファンタジーを舞台にしたゲームでは珍しいかもしれません。 該当の画面はこちらです。 https://twitter.com/yumekuro_info/status/1473957183176179714/photo/…
「夢職人と忘れじの黒い妖精」無料で商品を購入できる機能を実装する際に、考慮している点を考察してみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のショップ画面において無料アイテムを販売している施策について紹介します！ 過去にも何度か紹介していく中で、このデザインの目的は主に以下の2点に絞られると考えています。 ショップへの導線強化 売り上げ増加の期待（単純接触効果） 仮に、ショップ画面が有料の商品のみ販売するのであれば、多くのユーザーにとって遷移する動機は生まれません。しかし、一部の商品を無料で販売することで、購買意欲…
「夢職人と忘れじの黒い妖精」きれいに配置せずに敢えて見切れさせることで、スクロールできると気付かせるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のイベントストーリー画面においてスクロールできることが伝わるデザインについて紹介します！ 色んなアプリで何度か紹介していますが、リスト表示が表示されている画面で、スクロールできそうに見えるかどうかは割と重要なデザインです。 デザインをしている最中はついついバランス良くレイアウトを組みがちなので、意外と見落としやすい点だったりします。 該当の画面はこちらです。 短冊のような縦長の…
「夢職人と忘れじの黒い妖精」文章を読まなくてもユーザーが判断できる選択肢
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のレベルアップの確認ダイアログにおいて、分かりやすい選択肢について紹介します！ 該当の画面はこちらです。 こちらは「おまかせレベルアップ」を実行したときに表示されるダイアログです。これはRPG系のソシャゲではしばしばみかける機能ですが、所持リソースを消費してキャラクターのレベルを可能な範囲で上限までレベルアップさせる機能です。 このダイアログの選択肢に注目すると「キャンセル」「…
「夢職人と忘れじの黒い妖精」主人公の名前や誕生日が表示されていると困るから、一時的に非表示にする機能を実装しました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のプロフィール画面から、スクショ用に情報を非表示にする機能を紹介します！ まだあまり見かけない機能ではありますが、地味に浸透してきている印象を受けます。 該当の画面はこちらです。 画面左側の眼鏡のアイコンをタップすると、「主人公」「誕生日」の項目の表示、非表示が切り替えられます。 情報を非表示に切り替えると、画面中央に以下のメッセージが表示されます。 一時的に非表示にします（ス…
「夢職人と忘れじの黒い妖精」キャラクターを長押しすると表示される、ハート型のゲージがかわいい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のアドベンチャーパートから、画面を長押しした時に表示されるゲージのデザインを紹介します！ サムネイルなど、一部の画像を長押しした際にゲージが表示されるゲームは増えてきていますが「ゆめくろ」のUIにも採用されていました。 このデザインによって、以下の特徴があると感じました。 長押しすることで何かが起きることを伝えている どの程度長押しすれば良いのか伝えている キャラの近くに表示す…
こんにちは、ちょこです！ 今回は今まで紹介したアプリの中から、長押しした時に表示されるゲージのデザインの共通項をまとめ、一覧で比較してみました。デザインの共通項は以下の4点に絞りました。 サムネイル暗化…ゲージの視認性を意識しているか 指で隠れない調整…ゲージの視認性を意識しているか デザイン…世界観を取り入れるタイプのデザインか、フラットなデザインか 満タン演出…ゲージが満タンになった時の演出の有無。好み。 デザインを検討する際の参考になれば幸いです。 1：ブレイブリーデフォルト ブリリアントライツ(BDBL) 2：モンスターハンター ライダーズ(MHR) 3：カウンターサイド 4：崩壊3r…
「夢職人と忘れじの黒い妖精」アドベンチャーパートの吹き出しデザインの紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のアドベンチャーパートから、吹き出しのデザインを紹介します！ アドベンチャーパートとはいわゆるキャラクター達の会話シーンです。メッセージウィンドウのデザインはシンプルな矩形だったり、装飾を付けたり様々ありますが、「ゆめくろ」のメッセージウィンドウは一部吹き出しのデザインが採用されていました。 吹き出しのデザインで感じたことは以下です。 音声オフでもキャラクターの演技や世界観がよ…
「夢職人と忘れじの黒い妖精」短い時間でユーザーに情報を伝えるために、表示する情報の順番を工夫しているお知らせ画面
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、お知らせ画面の各情報の表示順番を紹介します！ ソート条件が日付順だけではなく、運営側が見せたい情報が上位に表示されていました。 ソートの順番は重要度＞日付になっており、既読になると重要度のフラグがリセットされる感じなのかな…？ 該当の画面はこちらです。見た目的にはよくあるデザイン。バナーで賑やかさを演出しつつ、お知らせがリストで並んでいますね。 ただ、現在は9月ですが、2…
上司がいないデザイナー必見！「赤ペン添削でわかりやすい！ 選ばれるデザイナーへの道」
こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「赤ペン添削でわかりやすい！ 選ばれるデザイナーへの道」 本書では、デザインの作成において「赤ペン添削」と「会話」という2つのコミュニケーションによりデザインがブラッシュアップされていくプロセスに焦点を当てました。 では、さっそく紹介します！ 所感 まずは所感です！ デザインの工程が見れるのは勉強になる クライアントのフィードバックに対してどのように解釈するか参考になる グラフィックデザインを行う方におすすめ こんな人にオススメ！ 書籍内では厳密に紹介されていませんが、概ね以下の読者を想定している印象を受けまし…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン（アイナナ）」の階層を間取りツールで俯瞰的に見てみる、といったことをやってみました。画面の階層や導線を可視化してゲーム全体の構成を俯瞰的に見て、何かつかめないかな、と考えています。 全体図としてはこんな感じです。色分けされているのが主な機能です。7年目を迎えたゲームにしてはそこまで複雑にはなっていない印象です。 全体の所感としては以下です。 ストーリー関連の画面の導線はスッキリ メンバー画面は機…
デザインの良し悪しを言葉にできるようになる！「もっとクイズで学ぶデザイン・レイアウトの基本」
こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「もっとクイズで学ぶデザイン・レイアウトの基本」 美しいのはどちら？言葉で説明できますか？ では、さっそく紹介します！ 所感 まずは所感です！ クイズ形式で読者に考えさせる。参加型。 理由を説明させることでデザインの言語化の練習になる。 監修者側の練習にもなりそう。 こんな感じです。 クイズ形式にすることで本を能動的に読むようになります。受動的な取り組み方ではなくなるため少し疲れますが、その分1つ1つの事例が印象深く記憶に残るのではないかと思います。 こんな人にオススメ！ 出版社の書籍紹介のページでは以下の方を…
発注から納品までを8ページで解説「どうする？デザイン クライアントとのやりとりでよくわかる！デザインの決め方、伝え方」
こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「どうする？デザイン クライアントとのやりとりでよくわかる！デザインの決め方、伝え方」 本書は、クライアントとデザイナーの会話と作例で、デザインができあがるプロセスを俯瞰できるデザイン本です。 では、さっそく紹介します！ 所感 まずは所感です。 発注から納品まで、デザインの組み立て方が分かる 工程に応じたフィードバック事例が分かる サンプルのクオリティが高い 架空の発注なのでデザインされたものは実在するものではないのですが、どれもクオリティの高いサンプルだと感じました。 サンプルのクオリティが高いとフィードバッ…
webデザインに広く触れつつ骨太な一冊「だからそのデザインはダメなんだ」
こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる」 私の20年にわたるノウハウの蓄積を書籍にまとめることにいたしました。 はい、購入しました！ざっくり紹介します！ 所感 webのUIデザインをマルバツで解説する本は少なく貴重 特に設計について解説されている点は好き HCDにも触れられており、基礎的で骨太 索引多い（199語） こんな人にオススメ！ 書籍内では以下の方を対象にしている旨が書かれていました。 デジタルマーケティングに携わるすべての人 ソシャゲのUI…
「アイドリッシュセブン」ラジオボタンとチェックボックスが混同されているUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、ラジオボタンの見た目でチェックボックスの挙動をするアンチパターンを紹介します。 アンチパターンである理由はいくつかありますが、以下の要素が関係していると考えます。 チェックボックスとラジオボタンは挙動が違う 挙動が違うのに見た目が同じだと、タップするまで挙動が予想できない メンタルモデルが利用できず学習コストが高まる とか。 部屋に例えるなら、押して開けるドアだと思ったら…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、いつでもログインボーナスが確認できるデザインを紹介します！ ログインボーナス確認画面はホーム画面右下のカルーセルバナーから遷移できます。アニメーションで見るとこんな感じです。 結論から書くと、この画面の主な役割はログインボーナスイラストの確認だと考えます。 以下、そのように考えた理由です。 この画面でできることは無い 常時開催しているログインボーナスの進捗状況を確認するた…
「アイドリッシュセブン」メールボックス画面に見る引き算のデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、プレゼントボックスのデザインを紹介します！ 「アイナナ」のプレゼントボックスはメールボックスという設定でデザインされています。このデザインにより、以下の特徴があると感じました。 ゲームの世界観が取り入れられている（主観的満足度が高まる） 受け取り済みボックスと切り替えなくて済む（手数の省略） アイコンを使って状態を伝えている 受け取ったら暗くなる（直感的な分かりやすさ、未…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」の与ダメのアニメーションをご紹介します。取り上げられることは少ないし、いざ作ろうと思うと悩みそうな部分かな、という印象です。 以下、目次です。 与ダメのアニメーションが気持ち良い！ 通常の与ダメは「上下に揺れる」 クリティカルな与ダメは「ズーム」 連携時の与ダメは「右からスライドイン」 与ダメのアニメーションが気持ち良い！ 「トライブナイン」のバトルを見ていて気づいたのですが、与ダメの表示アニメーシ…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」の会話パートのデザインをご紹介します。 丁寧なライディングで見た目が綺麗！ 以下、目次です。 丁寧なライティング設定 場面とキャラの立ち絵の両立 見え方のパターン紹介 赤系統 紫系統 青から緑系統 緑～黄色系統 その他 丁寧なライティング設定 「トライブナイン」の会話パートの特徴のひとつに丁寧なライ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のマップ機能をご紹介します。グラフィティという探索要素をサポートしてくれる機能が実装されています。 探索が楽になるデザイン！やったー！ 以下、目次です。 グラフィティは探索要素 グラフィティの情報が表示されるのが便利 どこにいても確認できるのが便利 段階的開示が利用されてて見やすい 情報の優先度にしたがった配色 グラフィティは探索要素 「トライブナイン」のグラフィティは探索要素のひとつです。発見した…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のバトルスキップの機能をご紹介します。雑魚敵のバトルをスキップできる便利な機能です！結果的にユーザー体験のデザインに寄ったので、ゲームUIとは少し外れるかも？ 以下、目次です。 時短になる ストレスの軽減にもなる バトルスキップ時に世界観を含めたメッセージが表示される ユーザーがバトルシステムを理解しづらくなるかも？ 時短になる TAKE DAWN機能はキャラクターと敵との戦力差があるとフィールド上…
こんにちは、ちょこです！ 今回は「バイブコーディング」という単語を知ったので、試しにやってみました。 そろそろ夏休みに入りますし、自由研究にいかがでしょうか？ 以下、ざっくりしたステップと所要時間です。慣れてる方なら1分かからないかもしれません。 1時間目：バイブコーディングって何？（0:01） 2時間目：まったくの初学者に向けたバイブコーディングの適切な進め方を教えて？（0:02） 3時間目：最初の指示出し（0:03） 4時間目：仕様の追加（0:05） 5時間目：修正指示（0:06） 6時間目：一旦完了（0:07） 1時間目：バイブコーディングって何？（0:01） まず、言葉の意味を知らない…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のエレベーターの操作パネルのUIをご紹介します。現実のデザインを丁寧に取り入れ没入感を高めつつ、不必要な情報を省いたデザインです。 ひとつひとつ丁寧に作られててすごい！ 以下、目次です。 没入感を高めるデザイン 1：ボタン配置が自然 2：読まれない文字も丁寧に扱う 3：階数がドットフォント フィクションのデザイン 没入感を高めるデザイン 「トライブナイン」ではエレベーターを操作する際、操作盤を模した…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のバトル敗北時に難易度を下げる救済措置をご紹介します。以下、目次です。 1：より多くのユーザーが楽しめる設計 2：敗北が無駄ではないと感じる 3：わかりやすいメッセージ 4：モチベーションを維持するラベリングとメッセージ 4-1：キャラクターからの応援メッセージ 4-2：キャラクターを「強化」と表現…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のSteam版とiOS版の画面を比較したのでご紹介します。以下、目次です。 プラットフォーム 1：Steam版はゲーム開始直後にキーコンフィグ設定がある 2：データ連携時に使用する外部サービスが違う デバイス 1：カーソルが用意されている 2：探索のレイアウトが違う 2-1：キャラクターのHPの位置…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」のSteam版とiOS版の画面を比較したのでご紹介します。 Steam版とiOS版とで運営が異なっており、今のところサーバーも分かれています。コントローラーは非対応。対応デバイスはマウスのみです。 以下、目次です。 運営違いのため除外する要素 1：企業ロゴが違う 2：問い合わせ先のメールアドレ…
こんにちは、ちょこです。 ここではゲームUIデザイナー向けに、ソシャゲのガチャ画面などで見かける「特定商取引法に基づく表示」と「資金決済法に基づく表示」について記載します。 「法律で決まっているので表示する」という認識でも実務上は恐らく困らないと思うのですが、表示漏れの防止や表示の必要性を質問された際に回答できるように、もう少し詳しく知っておきたいな、と思ったため疑問に感じていることをGeminiを使って出力しました。 厳密な正確性まで担保できませんが、概ね納得できる内容かと感じました。もし疑問に感じたことがあれば各々調べてみてください。 以下、目次とGeminiの回答です。存在しないリンク先…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」（以下「アスパ」）からキャラクターの露出の程度を変更できるナイーブエンジェルモードをご紹介します。 キャラクターの露出はUIデザイナーが直接コントロールできる部分ではないかもしれませんが、根底には「より多くの人に楽しんでもらいたい」という意思が含まれています。この意思は良いUIを作る際にも重要…
こんにちは、ちょこです！今回、私が購入した書籍の中からUIのアニメーションに興味がある方向けに紹介します。書籍でUIアニメーションが紹介されているのは結構珍しいかも…？ 「ゲームUI 作り方講座 Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本」 本書によると、想定読者は「就職して間もない新卒から入社3年目ほどの方」を想定している、とのこと。購入するとPhotoshopやAfter Effectsのファイルもダウンロードできるので、割と現場寄りの構成。 これらのことから、おそらく学生や非デザイナーに対しては書かれていないかもしれません。 また、モバイル端…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「クロノトリガー」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、今までのマルチプラットフォームとは違っていたり、移植を繰り返してきたタイトルであるため、ある程度前提情報が必要になると感じました。まずはマルチプラットフォーム対応の影響以外の要素を紹介します。 以下、目次です。 前提の話 除…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星の翼」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、主にバトル画面とオプション項目に違いが見られました。なんとなくの印象ですが、バトル周りはSteam版準拠で作りつつ、バトル以外のメニューなどのUIはスマホを少し意識しているのかな、という印象を受けました。 以下、目次です。 1：バト…
「inZOI」の主な画面 タイトル名 inZOI タイトル画面 〇 〇 アバター作成 〇 アバター_年齢層 〇 アバター_気質 〇 アバター_人生 〇 アバター_プリセット 〇 アバター_表情変更 〇 アバター_ポーズ変更 〇 アバター_背景変更 〇 アバター_顔プリセット 〇 アバター_髪型 〇 アバター_肌 〇 アバター_顔の特徴 〇 アバター_目元 〇 アバター_化粧 〇 アバター_身体 〇 アバター_衣装 〇 〇 アバター_アクセサリー 〇 家族作成 〇 〇 ADV 〇 都市選択 〇 都市編集 〇 〇 〇 〇 〇 〇 〇 都市編集_にゃんストア 〇 都市の状態を調整 〇 魂の管理レポー…
「魔法少女まどか☆マギカ Magia Exedra（まどドラ）」の主な画面 タイトル名 魔法少女まどか☆マギカ Magia Exedra タイトル画面 〇 OPアニメ 〇 お知らせ画面 〇 ホーム画面 〇 〇 〇 ガチャ画面 〇 〇 ガチャ演出 〇 ガチャ結果 〇 交換所 〇 〇 プレゼント画面 〇 〇 パーティ画面 〇 パーティ編成_編成コピー 〇 ロード画面 〇 キャラ獲得 〇 限界突破 〇 キャラ編成 〇 〇 キャラ強化 〇 〇 キャラ一覧 〇 〇 キャラ詳細 〇 〇 キャラ_スキル 〇 〇 クエスト 〇 メインクエスト_トップ 〇 〇 メインクエスト_リスト 〇 メインクエスト_道中 …
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からメニューのデザインをご紹介します。 ビジュアルに特徴のあるメニューだったので、見せ方を模索したいときのアイディアの参考になれば幸いです。 以下、目次です。 放射状に配置したボタン 強調された調合ボタン フィッツの法則と視線誘導を考慮したレイアウト 放射状に配置したボタン 「レスレリ」のメニューの特徴として、各メニューアイコンが放射…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からクエストのスキップ機能をご紹介します。 このブログでも何度か紹介していますが、クエストのスキップ機能はスタミナ制を採用しているソシャゲにはほぼ確実に実装されている印象です。 以下、目次です。 クエストの周回に便利なスキップ機能 最大値のボタンも便利 クエストの周回に便利なスキップ機能 「レスレリ」にはクエストスキップ機能があります…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からストーリーの進行に合わせてデザインが変化するホーム画面のデザインをご紹介します。 日本のソシャゲはホーム画面のデザインを重視する傾向があると感じていたのですが、「レスレリ」のホーム画面の見た目は非常にリッチで、この時代のひとつの到…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）から世界観を取り入れたスタミナ回復アイテム配布機能のデザインの事例をご紹介します。 文字にすると分かりにくいですね…。とても素敵なデザインなので、今回はひとまずゲーム画面を見ていただければ！ 以下、目次です。 スタミナ回復をパイに置き…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回はゲーム起動直後のロード画面で表示される、世界観が含まれたローディングメッセージの事例を紹介します。 「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」 以下、目次です。 1：ゲーム内用語を用いる 2：時系列に沿って文章を順番に表示する 3：読めるだけの時間確保も必要 1：ゲーム内用語を用いる ロード中に表示されるメッセ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）からゲーム起動時に表示される、ローディング中を表すメッセージを紹介します。久々の紹介。海外で開発されるタイトルに多く見られる印象です。 ▲「星になれ」のロード画面です 以下、目次です。 1：メッセージは2種類用意されている 2：メッセージには世界観を含めた言葉が使われている 3：時系列に沿った順番でメッセージが表示されている 1：メッセージは2種類用意されている 表…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、レビューに誘導するダイアログをデザインする際に参考になりそうな要素をまとめました。レビューに誘導するダイアログをデザインする際の参考になれば幸いです。 以下、目次です。 1：キャラグラフィックを表示 専用グラフィックを表示 汎用的な立ち絵を表示 2：レビューボタンを目立たせる 3：ボタンには分かりやすいテキストを入れる 4：レビューを促すメッセージを表示 5：手書き風メッセージで世界観…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）から。レビューを促すダイアログのデザインを紹介します。▲「星になれ ヴェーダの騎士たち」評価ダイアログ 以下、目次です。 1：専用のダイアログを用意 2：ナビキャラを表示 3：星を5つ並べて高評価を訴求 4：特に訴求したい要素は文字色を変えて訴求 5：ダイアログの枠の外にボタンを配置し目立たせている 1：専用のダイアログを用意 他のアプリにも見られる傾向ですが、レビ…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、サーバー選択画面のUIについてまとめました。サーバー選択画面をデザインする際の参考になれば幸いです。 以下、目次です。 設計 1：おすすめサーバーを表示する 2：デフォルトでおすすめサーバーを選択しておく 3：おすすめサーバーで始めるとインセンティブが獲得できる 4：サーバーの状態を表示する 5：サーバーの応答速度を表示する 6：サーバーが統合された場合の見せ方 7：サーバー内のキャラ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からアカウント削除をする際の手順や見せ方のデザインをご紹介します。誤操作を防ぐために複雑な操作になっていると感じました。 以下、目次です。 アカウントを削除するためには文字列を入力する必要がある 強めの警告文でアカウント削除の意思を確認 例文がキーボードのUI隠れない アカウントを削除するためには文字列を入力する必要がある 「ブレマイ」ではアカウント削除時の方法はやや複雑な手…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、ユーザーIDの表示方法についてまとめました。「配信者が安心してゲームを配信できるようにするために、ユーザーIDはどう取り扱うのが良いのかな…」と悩んでいる方の参考になれば幸いです。 以下、概要です。 1：タイトル画面ではタップして表示する形式が増えてきた 2：ゲーム内でユーザーIDを取り扱う場合、事前に表示を仄めかす場合もある 3：フレンド申請にはユーザーIDを使わない 4：タイトル画…
こんにちは、ちょこです。今回は「ブレマイ」のホーム画面に表示されているキャラの変更方法を紹介します。ミッションクリアのために操作が必要な方の参考になれば幸いです。 ホーム画面のキャラ変更方法は以下の手順で行えます。 【キャラ変更方法】 1：ホーム画面に遷移 2：画面右上の人型のアイコンをタップ 3：変更元のキャラを指定 4：変更後のキャラを指定 流れをアニメーションで見るとこんな感じです。 ▲ホーム画面に表示するキャラを変更する際の流れ アニメーションだと速すぎて分かりにくいかもしれません。一手ずつ説明します。 1：ホーム画面に遷移 まずホーム画面に移動します。 ▲「ブレマイ」のホーム画面 2…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からホーム画面でバッテリーの残量やwifiの接続状況が表示されているデザインをご紹介します。ゲームシステムにもよりますが、たまに見かけるデザインです。 以下、目次です。 ホーム画面でバッテリー残量とwifiの接続が確認できる 充電中と平常時の差分がある バッテリー残量がわずかになっても特に警告は表示されない ホーム画面でバッテリー残量とwifiの接続が確認できる 「ブレマイ」…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からADVパートでのルビの使い方をご紹介します。ルビを採用する際の使いどころ、ルビの設計思想の参考になれば幸いです。 以下、目次です。 キャラの名前にだけルビを振っている 読みにくい場所にルビが振られていると助かる 配信時の誤読防止にもつながる キャラの名前にだけルビを振っている 「ブレマイ」のADVパートでは、見た限りキャラの名前のみルビが振られていました。また、メッセージ…
こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 久々にUE起動したら見慣れないレイアウトでした…。以前のレイアウトに戻す方法あるかなー…、とメニューを見てみたらありました。良かった。 ▲UIたちはどこへ… 以下の手順で以前のレイアウトに戻せました。 上部メニューから「ウィンドウ」を選択 「レイアウトをロード」を選択 「UEクラシック レイアウト」を選択 UE4のレイアウトに変更されたらOK ▲メニューから簡単に変更できます ▲UEクラッシック レイアウトを選択 見慣れたレイアウトだ！ ▲UE…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からメインコマンドにアクセスしやすいメニューのデザインをご紹介します。メインコマンドに対するアクセシビリティが高いデザインだと感じました。 以下、目次です。 メインコマンドにアクセスしやすいメニュー レイアウトが同じだから分かりやすい ボタンの色や形状で情報の優劣をつける 右端に寄せているから片手で操作しやすい 背景をぼかしてメニューが際立っている メインコマンドにアクセスし…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からユーザーIDについてご紹介します。体感だと2020〜2021年頃から扱いが変わってきた印象です。ユーザーIDの性質や取り扱いについて考えるきっかけになれば幸いです。 以下、目次です。 タイトル画面ではユーザーIDの表示・非表示が切り替えられる ゲームの中に入ったら非表示切り替え機能はない フレンド申請時にはフレンドNo.を使う タイトル画面ではユーザーIDの表示・非表示が…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からリザルト画面の特徴を紹介します。各パーツのアニメーションを利用して、視線の誘導をしつつ、何が起きているのか分かりやすく見せる工夫などがされていると感じました。 以下、目次です。 左上から右下に視線誘導するデザイン 情報の優先度に沿った、文字の大きさと表示する順番 ゲームを進めるために必要なボタンは目立つ上に押しやすい配置 左上から右下に視線誘導するデザイン 「ブレマイ」の…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル部分に視線が集中される仕組みを紹介します。視線の誘導って割と自然にデザインされているので、意識して見てみると要素分解が難しい部分だと感じました。 以下、目次です。 周囲と比較して彩度が高い パズル部分がよく動く 面積が広い 「引き算のデザイン」を利用 角丸と角の使い分け 周囲と比較して彩度が高い 人は一般的に無彩色より有彩色、低コントラストよりハイコントラストのもの…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からスタミナを効率的に消費できる便利機能を紹介します。 以下、目次です。 豊富な便利機能 1:スタミナ一括消費機能 2:オート周回機能 3:スキップチケット 豊富な便利機能 「ブレマイ」には効率的にスタミナを消費する便利機能がいくつか実装されていました。ここでは以下の3点をあげます。 スタミナ一括消費機能 オート周回機能 スキップチケット それぞれ詳細を紹介します。 1:スタ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル画面のピースのデザインを紹介します。パズルゲームは色々ありますが、ピースのデザインはゲームの差別化のためにも重要視されがちなのかな、と考えています。 以下、目次です。 世界観を取り入れたデザイン 色だけではなくシルエットでも差別化されたデザイン 世界観を取り入れたデザイン 「ブレマイ」のピースのデザインはキャラクターの顔をデフォルメさせたような見た目になっています。…
こんにちは！ちょこです！ このブログでは「ゲーム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」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
