アプリゲームUIデザイン

「アイドルマスター SideM GROWING STARS」文字のみで構成された画面のお手本デザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（サイスタ）から、文字のみで構成された画面デザインを紹介します！ 文字の見やすさをコントロールする これはガシャの説明画面です。登場するアイドル、開催期間や条件などが書かれています。 ここで注目したいのは文字のみで構成されている画面の中で、情報の優劣がしっかりとデザインされている点です。 アイドルの文字は大きく読みやすいデザインです。 補足事項は色を薄くして…

2022/09/30 01:05

「夢職人と忘れじの黒い妖精」操作に応じたリアクションをするスキンシップ画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、操作に応じてスキンシップの取り方を変化させているデザインを紹介します！ 操作とスキンシップの取り方が関連付けされている 該当の画面はこちらです。 このダイアログはキャラクターと行えるスキンシップの一覧です。どのような操作を行うとキャラクターが反応するか、一覧表にまとめられています。 分かりやすくするために大きくしました。 最近工作したものを聞く ＞ タップ毛を触りたいと頼…

2022/09/29 03:15

「夢職人と忘れじの黒い妖精」推しと出掛ける時専用の画面遷移演出があり、開発者のこだわりを感じた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、画面遷移演出のデザインの事例を紹介します！ ゲームは映像で伝えている情報が多いため、画面内で何が起きているのか伝えることが重要だと考えています。 現実では今いる場所が瞬間的に切り替わることはありませんが、ゲームでは瞬間移動することもあります。 急に場面が移動するとユーザーは何が起きたのか理解できなくなる懸念があります。そのため、画面同士を繋ぎ、何が起きているのかユーザーに…

2022/09/28 02:21

デザインの見方、捉え方、考え方の本質をつかむ一冊「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」 そのデザインに何が足りないか？ では、さっそく紹介します！ 所感 まずは所感です！ デザイナー間でのフィードバック事例が書かれている フィードバックを通じた、コミュニケーションラリーに焦点を当てている デザイナー歴1年目の方は特に実感を持って読めそう 非デザイナーの片が読むならデザイナーが何を考えてデザインしているかが知れて面白いかも フィードバックを始めて返す人にとっても勉強になりそう 個人的には「どのような言葉を使うか」、「どのような順番でデザイン…

2022/09/25 15:10

「夢職人と忘れじの黒い妖精」キャラクターとチャットする画面でじわ～っと表示される文字演出

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、キャラクターとのチャット画面のデザインを紹介します！ 現代や近未来SFなどを舞台にしたゲームでは、しばしばチャットアプリを模したデザインが登場しますが、中世ファンタジーを舞台にしたゲームでは珍しいかもしれません。 該当の画面はこちらです。 https://twitter.com/yumekuro_info/status/1473957183176179714/photo/…

2022/09/25 00:55

「夢職人と忘れじの黒い妖精」無料で商品を購入できる機能を実装する際に、考慮している点を考察してみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のショップ画面において無料アイテムを販売している施策について紹介します！ 過去にも何度か紹介していく中で、このデザインの目的は主に以下の2点に絞られると考えています。 ショップへの導線強化 売り上げ増加の期待（単純接触効果） 仮に、ショップ画面が有料の商品のみ販売するのであれば、多くのユーザーにとって遷移する動機は生まれません。しかし、一部の商品を無料で販売することで、購買意欲…

2022/09/23 21:12

「夢職人と忘れじの黒い妖精」きれいに配置せずに敢えて見切れさせることで、スクロールできると気付かせるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のイベントストーリー画面においてスクロールできることが伝わるデザインについて紹介します！ 色んなアプリで何度か紹介していますが、リスト表示が表示されている画面で、スクロールできそうに見えるかどうかは割と重要なデザインです。 デザインをしている最中はついついバランス良くレイアウトを組みがちなので、意外と見落としやすい点だったりします。 該当の画面はこちらです。 短冊のような縦長の…

2022/09/23 00:51

「夢職人と忘れじの黒い妖精」文章を読まなくてもユーザーが判断できる選択肢

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のレベルアップの確認ダイアログにおいて、分かりやすい選択肢について紹介します！ 該当の画面はこちらです。 こちらは「おまかせレベルアップ」を実行したときに表示されるダイアログです。これはRPG系のソシャゲではしばしばみかける機能ですが、所持リソースを消費してキャラクターのレベルを可能な範囲で上限までレベルアップさせる機能です。 このダイアログの選択肢に注目すると「キャンセル」「…

2022/09/22 01:11

「夢職人と忘れじの黒い妖精」主人公の名前や誕生日が表示されていると困るから、一時的に非表示にする機能を実装しました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のプロフィール画面から、スクショ用に情報を非表示にする機能を紹介します！ まだあまり見かけない機能ではありますが、地味に浸透してきている印象を受けます。 該当の画面はこちらです。 画面左側の眼鏡のアイコンをタップすると、「主人公」「誕生日」の項目の表示、非表示が切り替えられます。 情報を非表示に切り替えると、画面中央に以下のメッセージが表示されます。 一時的に非表示にします（ス…

2022/09/21 00:13

「夢職人と忘れじの黒い妖精」キャラクターを長押しすると表示される、ハート型のゲージがかわいい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のアドベンチャーパートから、画面を長押しした時に表示されるゲージのデザインを紹介します！ サムネイルなど、一部の画像を長押しした際にゲージが表示されるゲームは増えてきていますが「ゆめくろ」のUIにも採用されていました。 このデザインによって、以下の特徴があると感じました。 長押しすることで何かが起きることを伝えている どの程度長押しすれば良いのか伝えている キャラの近くに表示す…

2022/09/19 23:01

デザイン比較：長押しした時に表示されるゲージ

こんにちは、ちょこです！ 今回は今まで紹介したアプリの中から、長押しした時に表示されるゲージのデザインの共通項をまとめ、一覧で比較してみました。デザインの共通項は以下の4点に絞りました。 サムネイル暗化…ゲージの視認性を意識しているか 指で隠れない調整…ゲージの視認性を意識しているか デザイン…世界観を取り入れるタイプのデザインか、フラットなデザインか 満タン演出…ゲージが満タンになった時の演出の有無。好み。 デザインを検討する際の参考になれば幸いです。 1：ブレイブリーデフォルト ブリリアントライツ(BDBL) 2：モンスターハンター ライダーズ(MHR) 3：カウンターサイド 4：崩壊3r…

2022/09/19 00:47

「夢職人と忘れじの黒い妖精」アドベンチャーパートの吹き出しデザインの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のアドベンチャーパートから、吹き出しのデザインを紹介します！ アドベンチャーパートとはいわゆるキャラクター達の会話シーンです。メッセージウィンドウのデザインはシンプルな矩形だったり、装飾を付けたり様々ありますが、「ゆめくろ」のメッセージウィンドウは一部吹き出しのデザインが採用されていました。 吹き出しのデザインで感じたことは以下です。 音声オフでもキャラクターの演技や世界観がよ…

2022/09/17 14:43

「夢職人と忘れじの黒い妖精」短い時間でユーザーに情報を伝えるために、表示する情報の順番を工夫しているお知らせ画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）から、お知らせ画面の各情報の表示順番を紹介します！ ソート条件が日付順だけではなく、運営側が見せたい情報が上位に表示されていました。 ソートの順番は重要度＞日付になっており、既読になると重要度のフラグがリセットされる感じなのかな…？ 該当の画面はこちらです。見た目的にはよくあるデザイン。バナーで賑やかさを演出しつつ、お知らせがリストで並んでいますね。 ただ、現在は9月ですが、2…

2022/09/15 21:35

上司がいないデザイナー必見！「赤ペン添削でわかりやすい！ 選ばれるデザイナーへの道」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「赤ペン添削でわかりやすい！ 選ばれるデザイナーへの道」 本書では、デザインの作成において「赤ペン添削」と「会話」という2つのコミュニケーションによりデザインがブラッシュアップされていくプロセスに焦点を当てました。 では、さっそく紹介します！ 所感 まずは所感です！ デザインの工程が見れるのは勉強になる クライアントのフィードバックに対してどのように解釈するか参考になる グラフィックデザインを行う方におすすめ こんな人にオススメ！ 書籍内では厳密に紹介されていませんが、概ね以下の読者を想定している印象を受けまし…

2022/09/14 01:37

「アイドリッシュセブン」階層を間取りに見立ててみました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン（アイナナ）」の階層を間取りツールで俯瞰的に見てみる、といったことをやってみました。画面の階層や導線を可視化してゲーム全体の構成を俯瞰的に見て、何かつかめないかな、と考えています。 全体図としてはこんな感じです。色分けされているのが主な機能です。7年目を迎えたゲームにしてはそこまで複雑にはなっていない印象です。 全体の所感としては以下です。 ストーリー関連の画面の導線はスッキリ メンバー画面は機…

2022/09/11 22:58

デザインの良し悪しを言葉にできるようになる！「もっとクイズで学ぶデザイン・レイアウトの基本」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「もっとクイズで学ぶデザイン・レイアウトの基本」 美しいのはどちら？言葉で説明できますか？ では、さっそく紹介します！ 所感 まずは所感です！ クイズ形式で読者に考えさせる。参加型。 理由を説明させることでデザインの言語化の練習になる。 監修者側の練習にもなりそう。 こんな感じです。 クイズ形式にすることで本を能動的に読むようになります。受動的な取り組み方ではなくなるため少し疲れますが、その分1つ1つの事例が印象深く記憶に残るのではないかと思います。 こんな人にオススメ！ 出版社の書籍紹介のページでは以下の方を…

2022/09/10 02:29

発注から納品までを8ページで解説「どうする？デザイン クライアントとのやりとりでよくわかる！デザインの決め方、伝え方」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「どうする？デザイン クライアントとのやりとりでよくわかる！デザインの決め方、伝え方」 本書は、クライアントとデザイナーの会話と作例で、デザインができあがるプロセスを俯瞰できるデザイン本です。 では、さっそく紹介します！ 所感 まずは所感です。 発注から納品まで、デザインの組み立て方が分かる 工程に応じたフィードバック事例が分かる サンプルのクオリティが高い 架空の発注なのでデザインされたものは実在するものではないのですが、どれもクオリティの高いサンプルだと感じました。 サンプルのクオリティが高いとフィードバッ…

2022/09/08 01:02

webデザインに広く触れつつ骨太な一冊「だからそのデザインはダメなんだ」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる」 私の20年にわたるノウハウの蓄積を書籍にまとめることにいたしました。 はい、購入しました！ざっくり紹介します！ 所感 webのUIデザインをマルバツで解説する本は少なく貴重 特に設計について解説されている点は好き HCDにも触れられており、基礎的で骨太 索引多い（199語） こんな人にオススメ！ 書籍内では以下の方を対象にしている旨が書かれていました。 デジタルマーケティングに携わるすべての人 ソシャゲのUI…

2022/09/06 23:37

「アイドリッシュセブン」ラジオボタンとチェックボックスが混同されているUIデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、ラジオボタンの見た目でチェックボックスの挙動をするアンチパターンを紹介します。 アンチパターンである理由はいくつかありますが、以下の要素が関係していると考えます。 チェックボックスとラジオボタンは挙動が違う 挙動が違うのに見た目が同じだと、タップするまで挙動が予想できない メンタルモデルが利用できず学習コストが高まる とか。 部屋に例えるなら、押して開けるドアだと思ったら…

2022/09/05 00:08

「アイドリッシュセブン」イラストの魅力をアピールする設計

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、いつでもログインボーナスが確認できるデザインを紹介します！ ログインボーナス確認画面はホーム画面右下のカルーセルバナーから遷移できます。アニメーションで見るとこんな感じです。 結論から書くと、この画面の主な役割はログインボーナスイラストの確認だと考えます。 以下、そのように考えた理由です。 この画面でできることは無い 常時開催しているログインボーナスの進捗状況を確認するた…

2022/09/03 23:58

「アイドリッシュセブン」メールボックス画面に見る引き算のデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、プレゼントボックスのデザインを紹介します！ 「アイナナ」のプレゼントボックスはメールボックスという設定でデザインされています。このデザインにより、以下の特徴があると感じました。 ゲームの世界観が取り入れられている（主観的満足度が高まる） 受け取り済みボックスと切り替えなくて済む（手数の省略） アイコンを使って状態を伝えている 受け取ったら暗くなる（直感的な分かりやすさ、未…

2022/09/02 00:15