2021年06月のアプリゲームUIデザイン新着記事

デザイン初心者から現役のプロの方にもオススメ「やってはいけないデザイン」

こんにちは！ちょこです！今月はブログにアップできる容量を超えてしまったため、ゲームレビューはお休みし、画像の添付が不要な書籍紹介をします。今回紹介するのはこちらの書籍です！「やってはいけないデザイン」やってはいけないデザイン [ 平本久美子 ] 価格:1,980円(2021/6/30 23:53時点) デザイン未経験、初心者の方にも読みやすい！一昔前よりデザインツールが一般的になってきました。社内の掲示物、ちょっとした広告、プレゼン資料の作成など、ビジュアルを扱うことが増えてきています。例えばこの書籍で扱っている素材は以下です。スライドプレゼン資料名刺チラシバナーホ…

2021/06/30 23:53

デザイン未経験者、独学のデザイナー、フィードバックを出す側の方など、幅広くおすすめ「失敗しないデザイン」

こんにちは！ちょこです！今回はデザインの書籍を紹介します！紹介する書籍は「失敗しないデザイン」です！失敗しないデザイン [ 平本久美子 ] 価格:1,980円(2021/6/28 23:26時点) 2020年に発売された比較的新しめの書籍です。著者は「やってはいけないデザイン」と同じ方です。書籍の内容としては左側にBADデザイン、右側にそれを修正したGOODデザインが並ぶ構造になっています。それぞれのデザインを比較することで、何が悪かったのか、どうすると良くなるのかが分かりやすくなっています。動いてない画面をしっかり作れることが重要内容をもう少し解説していきます。書籍内で扱っ…

2021/06/29 23:57

Zは外国っぽい！「英国人デザイナーが教えるアルファベットのひみつ」

こんにちは！ちょこです！今回は「英国人デザイナーが教えるアルファベットのひみつ」の書籍紹介です！英国人デザイナーが教えるアルファベットのひみつ【電子書籍】[ アンドリュー・ポセケリ（著） ] 価格:1,320円(2021/6/27 21:26時点) 著者はアンドリュー・ポセケリ氏です。英国出身のグラフィックデザイナーをされているようです。本の内容ですが、組版を紹介するような技術書といったものではありません。大まかな内容としては、アルファベットのAからZまでのそれぞれの印象が述べられているものになっています。文字のタイプフェイスだけではない、発音、使われている単語、文字の歴史などから考察…

2021/06/28 23:50

ブレストをやる時の事例が紹介されている「博報堂のすごい打ち合わせ」

こんにちは！ちょこです！今回は書籍紹介です！紹介する書籍はこちらです！ ▼「博報堂のすごい打ち合わせ」です！博報堂のすごい打ち合わせ【電子書籍】[ 博報堂ブランドイノベーションデザイン局 ] 価格:1,540円(2021/6/27 18:19時点) 大雑把に内容を紹介すると発想法の事例紹介です。主にブレストと呼ばれる行為が中心です。それが丁寧に説明されている内容となっています。問題を分析した後、どのような解決方法を導き出すのか、といった時の参考になるかと思います。目次は概ね以下のようになっています。第1章：なぜ、博報堂は打ち合わせにこだわるのか？第2章：新しい発想が生まれる博報堂の…

2021/06/27 23:50

「トランスフォーマー：鋼鉄の戦士たち」タイトル起動画面で表示されるユニークなテキストで世界観をアピール！

こんにちは！ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「トランスフォーマー：鋼鉄の戦士たち」から、ゲーム起動時に表示されるテキストについて紹介いたします。このブログでは過去に何度か紹介していますが、ゲームを起動したり初回DLなどロードが長い時に表示されるユニークなテキストの事例です。「トランスフォーマー：鋼鉄の戦士たち」での該当の画面はこちらです！このようにサウンドウェーブのカセットを巻き戻し中… と、表示されています。サウンドウェーブ、が何を指しているのか…

2021/06/26 23:50

「トランスフォーマー：鋼鉄の戦士たち」強化アイテムが無くなると獲得するための導線が表示されるのめっちゃ便利

こんにちは！ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「トランスフォーマー：鋼鉄の戦士たち」から、強化アイテムを所持していなかった場合の画面デザインと導線の設置について紹介いたします。多くのソシャゲではキャラクターを強化する機能が実装されています。そういったわけで画面をデザインする際の参考になるかと思いました。該当の画面はこちらです！画面左側に強化するキャラクターが3Dで表示され… 右側にはキャラクターを強化するためのメニューが配置されています。状況にあわせて…

2021/06/25 23:50

「トランスフォーマー：鋼鉄の戦士たち」ゲーム開始序盤の戦闘中に回避行動やガード操作のナビゲーションが表示されるので、操作に慣れるための学習ができる

こんにちは！ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「トランスフォーマー：鋼鉄の戦士たち」のバトル中に回避やガード操作のナビゲーションが表示されるデザインについて紹介いたします。該当の画面はこちらです。まず「トランスフォーマー：鋼鉄の戦士たち」のゲームジャンルを簡単に紹介しますと『格闘ゲーム』となっています。以下はバトル中の画面ですがトランスフォーマー同士が1対1で戦っているのが分かるかと思います。ゲーム開始序盤の戦闘中に回避行動やガード操作のナビゲーションが…

2021/06/24 23:50

「ライドゼロ (RIDE ZERO)」ゲームのUIを調整できる機能を用意するだけではなく、ユーザーがどのように設定できると効率的であるかまで意識されている

こんにちは！ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ライドゼロ (RIDE ZERO)」からゲーム設定の項目を紹介をします。ゲーム設定、ゲームオプション、コンフィグなど様々な呼び方があると思いますが、今回紹介するのは、具体的にはゲームプレイ中のUIのレイアウト調整ができる画面の紹介です。それでは早速見ていきましょう！該当の画面はこちらです！画面上部に「コンボフォントの細かい調整ができます」と書いてあります。画面下部にあるスライダーでコンボを示すUIの表示につ…

2021/06/23 23:52

「ライドゼロ (RIDE ZERO)」キャラを表示させず、導線を重視したホーム画面のデザイン事例

こんにちは！ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ライドゼロ (RIDE ZERO)」のホーム画面のデザインを紹介してみます！色数が絞られ、すっきりとしたデザイン早速ですが該当の画面はこちらです！全体的に色数が絞られ、すっきりとしたデザインになっています。画面の中央にキャラクターが表示されるようなデザインではないソシャゲにありがちな画面の中央にキャラクターが表示されるようなデザインではないのが特徴的に感じます。なぜこのようなデザインが成立しているのか説…

2021/06/22 23:50

「極夜大陸：メテオの彼方」タブボタンは上にあるのが当たり前？下タブの方が押しやすい

こんにちは、ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「極夜大陸：メテオの彼方」の下タブのデザインについて考えてみます。タブと聞くと上に設置されているイメージがあるかと思いますが、最近のソシャゲでは下に付いていることが増えてきました。おそらく端末の大型化に伴い、画面上部のボタンの押しづらさが顕著になってきたことが関係していると思われます。そんな下タブが採用されている画面はこちらです！このようにタブが下に付いています。基本的には他の画面も同様のレイアウトで、上…

2021/06/21 23:56

「極夜大陸：メテオの彼方」やっぱりゲーム開始前のジョブ選択画面の演出は凝る傾向があるのかな

こんにちは、ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「極夜大陸：メテオの彼方」のゲーム開始時のジョブ選択画面のデザインについて紹介します。「極夜大陸：メテオの彼方」ではゲーム開始時にジョブが選択できます。ジョブは全部で4つあり、以下の中から任意のジョブをひとつ選択します。騎士射手剣客戦姫そんなジョブ選択画面はこちらです。中央に3Dのキャラクターが表示されています。そのすぐ下にはプレイヤーの名前を入力するフィールドと「スタート」のボタンが表示されています…

2021/06/20 23:30

「ドラゴンスラッシュ」放置して獲得できる報酬の量に比例して、宝箱のデザインが3パターン用意されていました

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」の時間経過で獲得できる、報酬が入った宝箱のデザインの変化について紹介します。「ドラゴンスラッシュ」では放置する時間に比例して、報酬の量が増えていきます。その際に宝箱のデザインも変化していくデザインでした。該当の画面はこちらです。画面下部に宝箱や、うず高く積まれた金貨、宝石などが表示されています。報酬獲得までのアニメーションを見るとこんな感じです。勢いよく宝箱が開くと、中から大量の金貨や…

2021/06/19 23:50

「極夜大陸：メテオの彼方」HPゲージが斜めだった時の減少アニメーション

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「極夜大陸：メテオの彼方」のHPゲージがナナメであった時の減少アニメーションについて紹介します。該当の画面はこちらです。画面上部にボスのHPゲージが表示されています。見やすいようにHPゲージの部分を拡大します。左端がナナメになっており、右側は垂直になっています。こういったデザインの場合、HPが減少する際にどういうアニメーションにするか、少し悩むかもしれません。そのまま水平に減少させると残量が僅かになった時…

2021/06/18 23:50

「ドラゴンスラッシュ」データDL中に遊べるミニゲームの事例紹介

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」のデータDL画面でプレイできるゲームについて紹介します。データDLは時間がかかる処理です。ユーザーを長く待たせてしまうため、少しでもそのストレスを軽減させようと、各社で様々な取り組みなされています。「ドラゴンスラッシュ」の場合はスライドパズルでした。該当の画面はこちらです。ダウンロード中のゲームはいくつか見たことありますが、絵合わせパズルは初めて見たかもしれません。流れとしては以下の通…

2021/06/17 23:50

「ドラゴンスラッシュ」無料でアイテムを購入できるのはショップにアクセスしてもらいたいから？

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」のショップ画面にてアイテムが無料で購入できる機能について紹介します。該当の画面はこちらです。このようにショップのリストの最初に「無償プレゼント」が表示されています。同様の機能が実装されている「機動戦隊アイアンサーガ」のデザインと比較すると目立たせるために枠の色を変えている。なぜショップで配布するのか？「ショップでアイテムを無料で配布するならログインボーナスと同じではないのか？」「…

2021/06/16 23:50

「ドラゴンスラッシュ」期限が近い報酬のみを抽出する機能って、今時珍しいなと思う

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」の郵便箱の画面で、受け取り可能な期限が迫っている報酬をフィルタする機能を紹介します。該当の画面はこちらです。画面左側にいくつかタブが分かれているのですが、その中に「期限間近」というタブが用意されています。このタブを選択すると受け取り可能な期限が迫っている報酬のみ抽出されます。思い返すと、ガラケーであった頃のソシャゲの多くは報酬に受け取り期限を定めていないソシャゲがほとんどでした。その後…

2021/06/15 23:50

「ドラゴンスラッシュ」キャラの演技を見せたい時の会話シーンのUI

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」の会話シーンのUIを紹介します。「ドラゴンスラッシュ」の会話シーンのUIはかなり特殊で、キャラの台詞は吹き出しのUIになっています。該当の画面はこちらです。アニメーションで見ると以下のような演出です。キャラクターの頭上に吹き出しが表示されていることが分かります。「ドラゴンスラッシュ」の会話UIが特殊である部分は主に以下です。キャラクターや文字サイズが小さい吹き出し内の文章が短く区切ら…

2021/06/14 23:30

「ドラゴンスラッシュ」ストーリーの自動進行機能があると手数が抑えられて快適

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」のストーリーの自動進行機能が手数が抑えられて快適だった、という話を紹介します。該当の画面はこちらです。画面下部にある「自動進行」のボタンを押すと、戦闘や会話を自動的に進めてくれます。「自動進行」をタップすると以下のようなダイアログが表示されます。このシーズンの最後までクエストを進めます。ステージで敗北すると自動で終了します。その後は戦闘も会話パートも操作せずに進行することができます。…

2021/06/13 23:50

「ドラゴンスラッシュ」キャラが訴求できない時の召喚画面デザインはこうする！

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「ドラゴンスラッシュ」の召喚画面のデザインを紹介します。該当の画面はこちらです。アニメーションで見ると、以下のようになります。左右からキャラクターがフレームインし、シームレスに召喚演出に繋がります。召喚演出はこちらです。確認ダイアログを閉じると、そのまま召喚演出に繋がります。以上が演出の流れです。さて、この「ドラゴンスラッシュ」の召喚画面で特殊なのは、キャラを訴求する情報が全く無いことがあげられます。…

2021/06/12 23:57

「逆転オセロニア」サムネイルのデザインを楽しむ

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」のサムネイルデザインの工夫を紹介します。普段見落とされがちかもしれませんが、キャラクターを魅力的に伝えられるように丁寧に作られていました。早速紹介しています！該当の画面はこちらです！顔が分かりにくくなるようなパーツはサムネから除外していることが分かります。うなじ（？）部分や、顔の奥に描かれている脚を消しています。基本的には顔に被るようなエフェクトは消しているようです。顔をよく見せるために…

2021/06/11 23:50

「逆転オセロニア」画像ではなくテキストでランダム性と遊び心を表現しているロード画面

こんにちは、ちょこです！このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」のロード中に表示されるテキストについて紹介します。早速ですが、該当の画面はこちらです。このように画面中央に読み込んでいるデータについて書かれています。アニメーションで見るとこんな感じです。表示されるテキストにはバリエーションがあり、一定間隔で表示が切り替わるようになっています。他のバリエーションもあります。ざっと見た限り、以下のテキストのバリエーションが確認できました。恐らく他にも種類は…

2021/06/10 23:50

「逆転オセロニア」ゲシュタルトの法則を利用して画面をすっきり見せてた素敵

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」のボタンの配置でグルーピングを利用したデザインを紹介します。該当の画面はこちらです！駒箱と呼ばれる画面ですが、デッキ編成と駒の管理が主な機能の画面です。画面上から見てみますと、大きなボタンが3つあることが分かります。上から順に… デッキ編成所持駒 TOPデッキデータベース …と並んでいます。このボタンのデザインを見ると、TOPデッキデータベースよりも、デッキ編成、所持駒の方が優先度が高い…

2021/06/09 23:50

「逆転オセロニア」文字だけのTips画像を作る前に、チャットアプリのような見た目にしてみてはどうかな

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」のTips画像のデザインを紹介します。ここで言うTips画像とはゲームのルールや機能を説明する画像を指します。他にも「説明画像」とか「ヒント画像」など呼び名は様々です。該当の画面はこちらです。これは「神駒」と呼ばれるゲーム内用語の説明をしているTips画像です。見ての通り、チャットアプリのトーク画面のようなデザインをしています。吹き出しを用いてキャラクター同士の掛け合いを表現しているゲーム…

2021/06/08 23:59

「逆転オセロニア」アニメーションを利用して情報を目立たせるデザインの紹介

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」の駒獲得時の演出を紹介します。アイテムを獲得する際などの演出の参考になれば幸いです。該当の画面はこちらです。まず最初に、獲得した駒を大きく表示して、ユーザーの視線を誘導しています。アニメーションで見ると以下のような動きになっています。初獲得は特に強調しています。動きで見るとこんな感じです。獲得演出後に画面遷移して、キャラクターの全身を見せるようにレイアウトされています。以上です。この…

2021/06/07 23:50

「逆転オセロニア」ロード画面にTipsを表示させて、ゲームのルールや世界観を伝えるデザイン

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。すこしでも今回は「逆転オセロニア」のロード中の画面にゲームのTipsを表示するデザインを紹介します。 Tipsを表示するデザイン…。最近はあまり見なくなったかも？該当の画面はこちらです。画面中央にテキストが揃っており、キレイなレイアウト。 Tipsの本文は左揃えになっていました。個人的には左揃えでいいんじゃないかな、と思うのですが、「中央揃えのほうが視線移動が少なくて済むよ」という旨の記事も見かけました。こちらですね。簡潔なテキストによって、ダイアログは読みやすくなります。さ…

2021/06/06 23:50

「逆転オセロニア」マイクロコピーを使ってユーザーの行動をサポートするデザインの紹介

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」のマイクロコピーの使われ方の事例を3つほど紹介します。その前にマイクロコピーについて簡単に説明します。マイクロコピーとは、ボタンの文字やフォームまわり、エラーメッセージ、写真のキャプションなど、正直言ってこれまでコピーライティングの教材や、専門家が全く話さなかった、非常に細部の箇所のコピーのことです。マイクロコピーの基礎知識 microcopy.org 極めて細部のテキストやメッセージ…

2021/06/05 23:50

「逆転オセロニア」初心者マークを世界観に合わせてデザインしても特徴をつかんでいれば伝わる！

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」の中に初心者マークを世界観に合わせてデザインした例が見られたので、そのデザインを紹介します。該当のUIパーツはこちらのホーム画面で使われていました。ゲーム内で最初に表示される画面ですね。このホーム画面の中央付近に、黄色と緑で構成された盾と初心者マークを合わせたようなシルエットのグラフィックが表示されています。初心者マークは車のステッカーをはじめとして、ゲームでも時々見かけます。過去にプレ…

2021/06/04 23:50

「逆転オセロニア」長押しすると駒のステータスの最大値が表示される。分かりやすさと画面の情報量のバランスを取るのが難しいところ

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」から駒の詳細画面で長押しすると、駒のステータスの最大値が表示される機能を紹介します。キャラクターの現在のステータスと、最終的にどれほどのステータスになるのか見たい！でもボタンを置く場所が無い！といった時などの参考になれば幸いです。そんな長押し操作が採用されている画面はこちらです！駒のステータスが見れる駒詳細画面です。画面を長押しすると、駒のステータスの最大値が確認できる挙動です。長押し中は…

2021/06/03 23:50

「逆転オセロニア」属性を分かりやすくするためにUIの色や背景を変えるデザイン

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。今回は「逆転オセロニア」の属性をわかりやすく伝えるデザインの工夫を紹介します。「逆転オセロニア」では、駒は神・魔・竜の3つの属性に分けられています。それぞれの属性が一見して判別できるようなデザインであったので、ユーザーの認知コストが低く抑えられているように感じました。該当の画面を順に紹介します。ひとつめは神属性です。神属性のUIのベースカラーには落ち着いたトーンの黄色が採用され、背景には神秘的な建造物と、大きな…

2021/06/02 23:50

「逆転オセロニア」統計を利用してオススメのデッキ編成を教えてくれるのが便利

こんにちは、ちょこです。このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。今回は「逆転オセロニア」の統計を利用しておすすめのデッキ編成をユーザーに伝える機能を紹介します。該当の画面はこちらです。デッキの種類がリストで並んでいます。リストの中を見ていくと… 神殴りデッキ回復耐久デッキ代償デッキ神囁きデッキ楔デッキ毒オーラデッキと、特殊なゲーム内用語が並んでいます。デッキの意味するところを理解するためには、ある程度事前知識が求められる文言になっています。ともあれ、いずれかのデッキを選択すると、そのデッキに採用されている駒が並ぶ画面に遷移しま…

2021/06/01 23:50