アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

タイトル一覧-七つの大罪 光と闇の交戦

「七つの大罪 光と闇の交戦 : グラクロ」バトル中のスキルアイコンが全部個別にデザインされている。思い切った判断だけど分からなくもない。

こんにちは、ちょこです。 グラクロのバトル中のスキルのアイコンですが、個別にデザインされていて、見た目がにぎやかで楽しいです。 あと、分かりやすい。 よくある正方形のスキルアイコンだとどうしても差別化に限界があって、結局あの中にたくさんの情報…

「七つの大罪 光と闇の交戦 : グラクロ」タイトル画面で見るロード中の遊び心

こんにちは、ちょこきなこです。 「グラクロ」にて世界観を表現するためにロード画面が遊び心のある文字列が表示されていました。 今回はその実装の紹介です。 肌感だと50タイトルに1つくらいの割合で見かけるかも。 見た感じ、 「豚の帽子」亭は開店準備中…

「七つの大罪 光と闇の交戦 : グラクロ」タイトル画面で見るロード中の遊び心

こんにちは、ちょこきなこです。 「グラクロ」では世界観を表現するためにタイトル画面からゲーム内に遷移するための起動準備画面にて、遊び心のある文字列が表示されていました。 肌感だとこういった実装は50タイトルに1つくらいの割合で見かけるかも。 見…

「七つの大罪 光と闇の交戦 : グラクロ」敗戦時のアドバイスが豊富。ページめくりのアニメーションもかなり丁寧!

こんにちは、ちょこきなこです。 グラクロにて、戦闘に敗北するとアドバイスのtipsが表示されます。そのアドバイスが豊富だったので紹介します。 キャラクター単体の育成 キャラ強化 キャラ進化 装備 キャラの育成で少し難易度が高いもの 装備強化 必殺技 キ…

「七つの大罪 光と闇の交戦 : グラクロ」ワールドマップを移動すると、樹が動く演出が実装されている理由を考えてみた

こんにちは、ちょこきなこです。 「七つの大罪 光と闇の交戦 : グラクロ」にてワールドマップを移動すると、樹が動く演出について考えてみました。 「ワールドマップを移動すると、樹が動く演出」って何?っていう方のために説明しますと… ▼gif (ワールドマ…

「七つの大罪 光と闇の交戦 : グラクロ」メニューのデザインが可愛い!

こんにちは、ちょこきなこです。 今回はゆる記事です。 グラクロは料理周りのUIがたいへん丁寧なのですが、メニュー周りのUIを紹介させてください。 関係する画面はこのあたりです。 はい、かわいい! というかほんとに作り込みおかしい。 可愛いポイント! …

「七つの大罪 光と闇の交戦 : グラクロ」村の移動演出スキップが便利!ここまで時短にこだわったアプリは珍しいかも

こんにちは、ちょこきなこです。 グラクロのオプションにあった【演出スキップ(村移動)】の項目を紹介させてください。 どういうものかというと、 村から出る際に出口まで行かずに、出口に向かうと決まった時点で村から出る演出をスキップ出来るということを…

「七つの大罪 光と闇の交戦 : グラクロ」料理ボタンがかわいい!…けどなんでここだけ別のデザインなんだろう

こんにちは、ちょこきなこです。 グラクロの「料理する」ボタンがかわいいので、紹介させてください! そもそも酒場は汎用的なボタンを採用しておらず、木をモチーフにしたボタンデザインになっています。 装備分解だとこんな感じ ログインボーナスのOKボタ…

「七つの大罪 光と闇の交戦 : グラクロ」画面外に表示されているアイコンが便利!

こんにちは、ちょこきなこです。 今回はグラクロのクエストのマーカーのデザインの話です。 村の中にあるクエストのアイコン(マーカー)をタップすると、わざわざカメラを回して探さなくてもショートカット一発でそこまで移動して、アクションまでおこなって…

「七つの大罪 光と闇の交戦 : グラクロ」ミッションに対応したクエストの表示が分かりやすい

こんにちは、ちょこきなこです。 グラクロのUIの紹介をしていきます。今日はミッションに対応したクエストの表示UIに関してです。 クエストリストの下に関連しているミッション名が表示されているので、迷わないようにするための工夫が見えます。 クエストが…

「七つの大罪 光と闇の交戦 : グラクロ」イベントバナーのデザインがカッコいい!アニメーションするという発想が斬新!

こんにちは、ちょこきなこです。 「グラクロ 」のイベントバナーのデザインが斬新だったので紹介します。 こんな感じでいくつかバリエーションがあります。ほんとにこのタイトル、バリエーション作るの好きだな…。 ▼gif (デフォルト待機ver) ▼gif (エリザベ…

「七つの大罪 光と闇の交戦 : グラクロ」コスチューム登録した時、ハンガーに掛けるストーリーのデザインが素敵

こんにちは、ちょこきなこです。 引き続きグラクロのUIで良かった点を紹介していきます。 やっていることとしては「アイテム袋からアイテム取り出して、装備」なんですが 「クローゼットから服を取り出して、お気に入りに並べる」というストーリーに仕立て上…

「七つの大罪 光と闇の交戦 : グラクロ」UXを考慮したtipsの出し分け。小さな箇所でもよくできる箇所はいくらでもあると気付かされました。

こんにちは、ちょこきなこです。 以前、「グラクロは遷移によってロード画面のデザインを変えている」という旨の記事を書きましたが、それだけではなくて、表示するtipsの出し分けもしているようです。 早速紹介していきます。 まずは酒場に遷移する時だとこ…

「七つの大罪 光と闇の交戦 : グラクロ」レシピ獲得演出が丁寧!下手なレストラン経営アプリより手込んでるんじゃないかな 

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 グラクロは酒場で料理ができるのですが、一度作った料理はレシピとして登録することが可能です。 その時の演出にこだわりを感じました。 ▼gif (メニュー登録演出) 普通に「レシピ登録しました!…

「七つの大罪 光と闇の交戦 : グラクロ」素敵な村のエンブレムの紹介。バーニャからオーダンまで。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 村に入ったときにその村のエンブレムが表示されるのですが、個別に用意してるのかこれ! 気合い入ってる! 工数かかると思ったけど、無限に増えるものでもないから大丈夫か…。 よく、街やダンジ…

「七つの大罪 光と闇の交戦 : グラクロ」クエスト一覧画面がスッキリしてる4つの理由

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 グラクロのクエスト画面ですが、情報が整理され、やるべきことが明確で迷いません。あまりにスッキリしていて見やすいので、その理由を考えてみます。 1:過去のクエストはどこにあるの? 2:枠の…

「七つの大罪 光と闇の交戦 : グラクロ」動画のようなアドベンチャーパートもデザイン。UIにシークバーを採用した理由。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 以前紹介したメギド72の時は新しさの中にも違和感を感じていたのですが、 UIムービーのような見た目にするだけで随分と印象が変わったので紹介します。 キャプチャを貼りましたが大きな特徴とし…

「七つの大罪 光と闇の交戦 : グラクロ」時短の為のUX。ホークママの移動速度が変わる。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 今回は少し変わった機能を紹介します。 ワールドマップにて、ホークママが移動中、画面を連打するとホークママに移動速度が3段階で変化します。 これ、実装に至る経緯を想像したのですが… ・画…

「七つの大罪 光と闇の交戦 : グラクロ」ワールドマップで○○すると、ホークママの様子が…?

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 七つの大罪のUIデザインですが、今日はワールドマップに隠された遊び心を紹介します。 この画面、実は秘密のデザインが隠されていて… 一定時間放置するとホークママのモーションがかわります! …

「七つの大罪 光と闇の交戦 : グラクロ」ロードが(ほぼ)入らないのがすごい!ロードが入る場所で画面群を調べて区分けしてみました。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 地味にこれが凄く凄くて凄い。これよく実現したな…と思うのが 「ロードが入らない仕様」 というか、正直どう実装されているのか分からないです…。 ちなみにロードするしないで主な部分を区分け…

「七つの大罪 光と闇の交戦 : グラクロ」圧倒的なロード画面の種類を紹介。数だけではなく出し分け方も丁寧。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 ロードが滅多に入らない上に、入るところにも没入感を極力阻害しない工夫がなされているのは驚きました。 仕様を考えた方も入れた方も本気だわ…。 ロードが入る箇所は主に以下の場面です。 酒場…

「七つの大罪 光と闇の交戦 : グラクロ」UI記事まとめ

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 アプリ「七つの大罪 ~光と闇の交戦(グランドクロス)~」ことグラクロの記事をまとめます。※しばらくは随時追加、更新します。 これ最初ひとつの記事で書いてたのですが、あまりに物量が膨大…

「七つの大罪 光と闇の交戦 : グラクロ」節電モードというシステム寄りの機能のUXについて。何食べたらこの発想ができるんだろう編。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 今日は節電モードのUXについて書いてみます。節電モード中の画面がこちら。 ▼gif (節電モードからの復帰) 「節電モード」ってあんまり聞いたことなかったかも…。海外では一般的なのかな。 どう…

「七つの大罪 光と闇の交戦 : グラクロ」なぜメール画面遷移時に凝った演出が実装されているのか

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 画面右上に「メール画面」へのボタンがあるのですが、ただ遷移するだけではなく、小気味の良い演出が実装されています。 ここに「メール画面」へのボタンがあります! 遷移する時の演出はこんな…

「七つの大罪 光と闇の交戦 : グラクロ」木のUIパーツに垣間見えたUIデザイナーの異常なプロ意識。ここまでできるUIデザイナーが日本に何人いるんだろう…。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 ゲーム内にいくつか共通のパーツがあるのですが、今回は木製のボードのUIパーツを見ていきます。 ちょっと細かいのでPCで見た方が分かりやすいかも。 で、木製のボードのUIパーツって何かという…

「七つの大罪 光と闇の交戦 : グラクロ」ガチャ結果にあるコイン変換演出。きちんとデザインされているので装備強化演出と比較しつつ考察します。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 色んなゲームでガチャ結果ってキャプチャ撮られたり、配信されたりで拡散されますよね。 七つの大罪、ガチャ結果のデザインも良かったので紹介します。 基本的なことですが、キャラと欠片がシル…

「七つの大罪 光と闇の交戦 : グラクロ」酒場にあるジャイロモードの存在理由?エリザベスを近くで見れるだけじゃなかった!

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 今回はマイナーと思われるジャイロモードのUXの話をしてみます。 そもそも「酒場にあるジャイロモードって何?」って方に簡単に説明します。 酒場にそういう機能があるんです。 「ジャイロモー…

「七つの大罪 光と闇の交戦 : グラクロ」かわいいエンプティステート

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 いくつか可愛いエンプティステート画面があったので紹介します。 4種類あります。さりげなくバリエーションがあります。 フレンドがいない時 メールが届いていない時 表示可能なクエストがない…

「七つの大罪 光と闇の交戦 : グラクロ」3属性に絞るメリットって何があるの?

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 最近のアプリは概ね7属性(火、水、風、雷、闇、光、無etc)くらいあるのが多いです。 グラクロの場合は「体力」「速力」「筋力」の3属性に絞っています。 久々に三すくみの仕様を見たかもしれま…

「七つの大罪 光と闇の交戦 : グラクロ」王道の着替え演出が斬新なUXになっている話

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 今までいくつか着替え演出を紹介してきて、「やっぱりカーテンが王道なんやねー」と思っていたのですが、同じ演出でもクオリティに凝れば印象が全然違うということに気付かされました。 ▼gif (…