こんにちは、ちょこきなこです。 「王子様のプロポーズ Eternal Kiss」の話です。 このゲームには「手紙」という機能があります。 どんな機能かというと「メール」です。 あるいはショートメールかもしれない。 要するに、 王子たちと会話だけではなく、文章でのコミュニケーションを取ることによって、より現実に即したやりとりを模した機能です。 こう書くと無味乾燥が凄いですね…。 実際の画面はこちらです。 メールの一覧があり、いずれかを選択すると… こんな感じで王子からのメッセージが読めます。 それはそれとして、なぜメール風のデザインになっているのか、という話です。 専門用語でスキューモフィズム、と言うのですが、 機能をスムーズに理解してもらうために、見た目を現実にあるものと合わせるデザインを指します。 この場合は現実にあるメールのデザインに合わせることで、王子たちとメールのやりとりをしている

こんにちは、ちょこきなこです。 とあるIFの画面にて、文字の視認性で気になる部分がありました。 こちらです。 暗い！ 見えますかね…。明るくしてみました。 枠内に「プレイヤー名」と表示されています。 単純に文字の色の設定か、下地の色の設定ミスの可能性もありますが、文字はある程度読めないと良くないです。 また、割と最初に表示される画面なので、きちんと作った方が良いです。 いわゆる「初頭効果」です。 最初の印象って大事なので、ここで雑な作りになっていると、その後の情報にも悪影響を及ぼします。 なので、最初の方をきちんと作った方が後々にも良い印象に寄るので、メリットがあります。

こんにちは、ちょこきなこです。 最果てのバベルですが、ここまで、 何を見せたいのか、という軸で書いてきましたが、メニュー画面でもやはり同様の感想を抱きます。 1：パーティ画面のソート機能がある意図は？ 2：キャラクターの強化の導線 3：アイテム画面の情報が整理されていない まとめ 1：パーティ画面のソート機能がある意図は？ 例えばこのパーティ画面。 ソートボタンがあるのは良いのですが、意図が分かりません。 ソートボタン。 この画面では何を見せたいのか、考えてみます。 現在、チャプター22まで進めていますが、プレイアブルなキャラは9名です。 この情報量であれば果たしてソートが必要な場面はどういった場面があるのか、疑問があります。 ちなみにソートボタンを押すとこんな感じの情報でソートできます。 フィルターの方はこんな感じ。 このように細かくソートの設定はできるのですが、キャラクターは9名しかい

こんにちは、ちょこきなこです。 王子様のプロポーズのUIの話なのですが、 このタイトル、基本的には簡素なUIのパーツで作られています。 ただ、世界観というか、 物語に没入できる部分に関してはグラフィックに凝ったデザインになっています。 いくつか具体例をあげます。 1：思い出アルバム 2：世界地図 3：キャラクター詳細画面 1：思い出アルバム 思い出アルバム、という画面です。 「アルバム」という言葉を選び、大切な記録、という印象を与えます。 これが「ライブラリー」だと、感情が除外され、ただの記録という側面があります。 アルバム感を出すために、写真をモチーフにしたUIを採用しています。 レイアウトには規則性がなく、画面に対して斜めにレイアウトされています。なので、綺麗にレイアウトするよりも画面内の情報量は減り、可読性、検索性は下がり、操作の手数も増えます。 ですが、ここではそれよりも没入感を優

こんにちは、ちょこきなこです。 事前DLしてたドクターマリオワールドがサービス開始していました。 BGM懐かしい！ 早速UI周りを見てみます。 パズルゲームなので「色覚多様性」の対応が気になりました。 この３色の組み合わせは大丈夫そう。 念のためPhotoshopのフィルタで確認してみました。 ブロック部分と赤は気になるけど、ウイルスの方は動いているのでギリ許容かなぁ…。 他の色の組み合わせも見てみます。 Photoshopのフィルタで確認してみます。 ん～、ちょっと怪しいかも…。 ウイルスの方はシルエットや表情でも分けてるのでギリギリ…か？ それより問題はカプセルの方です。 これはシルエットで差をつけていないので、ガチンコで色のみの情報になっています。 よくユニバーサルデザインの本を読むと、 色だけの情報は避ける 色以外の情報の手掛かりとなるものを付与する ということが書かれています。

こんにちは、ちょこきなこです。 「王子様のプロポーズ Eternal Kiss」を触っています。 このシリーズ、というかボルテージさんのアプリの特徴の一つとして、メッセージウィンドウの位置を上下にカスタムできる仕様があります。 こういう設定、他では見たことないんですよね…。 ちなみにこちらが通常位置です。 こちらが少し上げたもの 通常、画面の下の方がタップしやすいのですが、指でメッセージが隠れてしまいがちです。 メッセージウィンドウを少し上にあげることによって、指でテキストが隠れなくなります。 また、顔付近に情報が集まるので、表情とテキストを行き来する視線の距離が短くなり、読み取りやすくなります。 デフォルトで上にあったら違和感バリバリだと思うけど、こういうカスタムが用意されているのは良いなー、と思いました。

こんにちは、ちょこきなこです。 「ヒーローズ オブ オーダー&カオス」がアラビア語対応していたので、主だった個所を紹介してみます。 1：ホーム画面 2：プロフィール画面 3：オプション画面(ネットワーク) 4：オプション画面(サウンド) 5：イベント画面 1：ホーム画面 まずはホーム画面です。日本語はこんな感じ。 そしてアラビア語。 基本的には右詰め。開始点をどこにするかによって、セーフエリアも変わってきそう。 やはり特徴的なのは、分母と分子が入れ替わってる部分でしょうか。 よく見ると「/」の向きも逆になって「\」になっていますね。 これは見落としそう。 2：プロフィール画面 プロフィールはこんな感じ。 単位と数字が逆になっているのが特徴ですね。 Lvとか統計のところの勝利数は逆になっています。 ただ、マップ別の方は逆になってないんですよね…。なんでだろう。 この辺は担当に聞くしかないです

こんにちは、ちょこきなこです。 今日は「最果てのバベル」の全般的な操作性に関して考えてみました。 誤タップについて 街のマップのデザインについて 移動に関して 誤タップについて 「最果てのバベル」は全体的にボタンが小さく、誤タップを起こしやすいデザインです。 その中でもボタンが密集している部分は特に誤タップの確率が上がります。 特に気になった箇所を取り上げます。 この画面のボタン… 誤タップするのはこちらの画面の「回復」のボタンです。 このゲーム、基本的にはこの「回復」ボタンを押してHPを回復します。 プレイスタイルにもよりますが、回復は小まめにやるより、死にそうになったら一気に回復する方がタップ数が少なく済むので、複数回タップします。 その際に誤タップします。 実際に見ていただくのが早いかと。 こんな感じです。 そして、全回復すると回復ボタンは消えます。 その際、ほぼ同じ位置をタップする

こんにちは、ちょこきなこです。 以前、「グラクロは遷移によってロード画面のデザインを変えている」という旨の記事を書きましたが、それだけではなくて、表示するtipsの出し分けもしているようです。 早速紹介していきます。 まずは酒場に遷移する時だとこんな感じ。 表示されているtipsは 「訪れたお客さんたちと会話して親密度ポイントを獲得しましょう。」 これは酒場にある機能に関して言及しています。 村だとこんな感じ 「村人の依頼をクリアすると村の友好度が上がります。」 これも村の機能に関して言及してますね。 本当の意味で有用なtipsになっています。 バトルに遷移する時はこんな感じ 「戦闘中に味方または敵を長押しすると、そのキャラの詳細情報を確認できます。」 最後にガチャに遷移する時 「同じキャラを獲得するとキャラコインになります。キャラコインは必殺技強化に使用できます。」 このようにそれぞれの

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 「my oasis」というゲームをプレイしていました。 絵がきれい！ 内容はクリッカー+箱庭育成っぽい感じです。 クリッカー系はかなりプレイしているけど、転生スキームが生まれた辺りから寿命伸びましたよね。 この「my oasis」ですが、多言語対応してたので早速アラビア文字に変換してプレイしました。 で、そこで気付いたのですが、 この部分！ ダイヤのアイコン+数字です。 これは何を意味すると思います？ ちょっと考えてみてください。 …正解は最後に伝えます。 はい！次！第二問！ この画面！ ここ！ 同じくダイヤのアイコン+数字です。 これは何を意味するでしょうか？ この手のゲームをプレイしたことがある方はUIを見ただけで察することができると思いますが、更に慣れている方は迷うかもしれません。 …考えましたかね。 さて、正解はこちらで

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 グラクロのクエスト画面ですが、情報が整理され、やるべきことが明確で迷いません。あまりにスッキリしていて見やすいので、その理由を考えてみます。 1:過去のクエストはどこにあるの？ 2:枠の中に表示されてる情報で十分なの？ 3:ステージの数字 4:結局ユーザーはクエストを選択するときに何を見ているの？ 1:過去のクエストはどこにあるの？ メインストーリーは基本的には一度だけしか見ない。 あるいはあまり見て欲しくない、と考えているのか結構奥の方にあります。 「メニュー」⇒「ストーリー回想」⇒「メインタブ」⇒「チャプター選択」⇒「任意のストーリーを選択」 戦闘がある場合はこちら この辺にあります。 実際、素材集めで周回するのはメインストーリー以外のとこですしね。 なるほど、確かに ストーリーを見返したい という要望は多くありそうですが、

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 グラクロの記事、まだ結構残っているのですが、バベルも書きたくなったので今日はバベルDay。 これも何回かに分けています。最初は会話シーンの話です。 所謂アドベンチャーパートと呼ばれる画面のUIに関してです。 シンプルに見えるUIですが、最も残念に感じたUIがこのアドベンチャーパートの画面です。 残念に感じた理由は主に以下の２点です。 1：メッセージ速度の調整機能がない 2：会話ログに残さなくてもいいメッセージが混じってる 1：メッセージ速度の調整機能がない とにかくこれが致命的でした。 致命的だと思った理由としては優先度の高い仕様だからです。 以下、説明します。 まず開発は「この画面で何を見せたいのか」を考えてみます。 恐らく、 シナリオを読ませたい！ だと考えられます。 それはプロモーションからも読み取れますし、スキップボタン

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 以前紹介したメギド72の時は新しさの中にも違和感を感じていたのですが、 UIムービーのような見た目にするだけで随分と印象が変わったので紹介します。 キャプチャを貼りましたが大きな特徴として、 ゲームでよくあるメッセージウィンドウがありません。 また、2Dの静止画が演技するのではなく、3Dのキャラクターが演技します。 カメラも固定ではなく、自由に動きます。 この結果、表現の幅が広がり、迫力もある画面になっています。 メッセージ部分は単純にテキストを表示すれば良いのですが、会話ログはどうすれば良いのか？ 左上に「Log」ボタンがありますが、明らかに目立っておらず、気づきづらいデザインになっています。 なので、機能としては用意されているものの、 どちらかというと、 シークバーを操作して、動画のようなUXを体験して欲しい という意図が感

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 七つの大罪のUIデザインですが、今日はワールドマップに隠された遊び心を紹介します。 この画面、実は秘密のデザインが隠されていて… 一定時間放置するとホークママのモーションがかわります！ ▼gif(待機モーション　通常ver) ▼gif(待機モーション　汗かきver) ▼gif(待機モーション　地ならしver) ▼gif(待機モーション　ぐるぐるホークver) 私がみつけたのは以上です。 この画面で放置することは稀だとおもいますが、遊び心を仕込むのは好きです。 考えてみると、遊ばなくても、ゲームを起動させるだけで楽しい気持ちにさせるのはかなり究極的なUXな気がします。 他にもあるかもなので、ぜひ探してみてくださいー！ ついでに他のタイトルの例も紹介します。 appgameui.hatenablog.com

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 ロードが滅多に入らない上に、入るところにも没入感を極力阻害しない工夫がなされているのは驚きました。 仕様を考えた方も入れた方も本気だわ…。 ロードが入る箇所は主に以下の場面です。 酒場に入るとき ガチャ実行時/終了時 メインシナリオ開始時/終了時 各村に入るとき バーニャの村 ダルマリーの町 宿場タラ ダルマリーの町 オーダンの村 クエスト実行時/終了時 バーニャ平原 永遠の泉 山番の小屋 ソルガレス砦 ボス戦 殲滅戦 プレビュー実行時 ARカメラ実行時/終了時 バトル中からカメラを起動 まとめ おまけ(チャプター1のアドベンチャーパートのロード画面一覧) 酒場に入るとき タイトルから入ると、最初に遷移するのは酒場です。 なので「酒場の遠景」が表示されます。 調べてて気づいたのですが、ワールドマップからだと近景が表示されます。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 アプリ「七つの大罪 ～光と闇の交戦（グランドクロス）～」ことグラクロの記事をまとめます。※しばらくは随時追加、更新します。 これ最初ひとつの記事で書いてたのですが、あまりに物量が膨大になりすぎたので、小分けにしました。最終的に文字数何文字になるんだろう…

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 今日は節電モードのUXについて書いてみます。 節電モード中の画面がこちら。 ▼gif (節電モードからの復帰) 「節電モード」ってあんまり聞いたことなかったかも…。海外では一般的なのかな。 どういうモードかというと、 一定時間操作していなかったら、スリープとは違い、ゲームを進行させつつ、バッテリーの消費を抑えるモード、です。 ユーザーは主にバトルを周回する時に放置するのですが、このアプリはバッテリー消費が激しく、放置していたらあっという間にバッテリー残量が無くなります。 なので、そういった操作をする際の配慮です。 まず、この「節電モード」の機能を実装しよう、と考えられるのはこういったスキームの開発に慣れているのかな、と感じられました。 また、この機能の凄いところは実装が比較的楽だと思われるところです。 要するに画面の明るさを抑え

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 画面右上に「メール画面」へのボタンがあるのですが、ただ遷移するだけではなく、小気味の良い演出が実装されています。 ここに「メール画面」へのボタンがあります！ 遷移する時の演出はこんな感じです。 ▼gif (開封演出) 再生環境によってはゆっくりに見えるかもですが、実際はかなり一瞬です。 右上にタップエフェクトが映っていますが、それと同じくらいの尺です。 凝ってるなぁ…、と思いつつ、同時に なぜここに凝った演出が実装されているのかな、って気になったので考えてみました。 結論からいうと「世界観への没入感」のこだわりだと思います。 そのために、ユーザーに意識させたくないことは意識させない。やらせたくないことはやらせない。 という思想が感じられます。 おそらく、七つの大罪の世界にメールはありません。(少なくとも原作で登場はしていない)

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 ゲーム内にいくつか共通のパーツがあるのですが、今回は木製のボードのUIパーツを見ていきます。 ちょっと細かいのでPCで見た方が分かりやすいかも。 で、木製のボードのUIパーツって何かというと… これらで使われているパーツです。 使われている箇所は、 ・酒場のメニュー ・プロフィール画面 ・時限クエストの時間割表 ・バトル会場にあるランキングが貼られる掲示板 ・期間限定ショップの営業時間 ・酒場にある予約客のリスト ・PvPの参加申し込み表 などです。 よく見ると、それぞれ木の板と紙の大きさの相対的なサイズ感が異なり、揃っていないのが分かるかと思います。 並べるとこんな感じ。 同じようなパーツだけどなぜか木の大きさが揃っていない。 普通は単純なミスだと思うのですが、このタイトルの場合だとそんなことはないわけです。 少し考察します。

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 色んなゲームでガチャ結果ってキャプチャ撮られたり、配信されたりで拡散されますよね。 七つの大罪、ガチャ結果のデザインも良かったので紹介します。 基本的なことですが、キャラと欠片がシルエットできちんと分かるようになっているのは綺麗にデザインされているな、と感じました。 その上、丁寧な変換演出まで用意されているのも凄い。 ▼gif (変換演出) この「丁寧な変換演出」というのがポイントで、 光らせるだけの演出とはデザインの根本が違っています。 演出にストーリーがあって、それが分かりやすく見た目に落とし込まれているように感じられます。 どういうことかというと 「キャラクターのサムネイルが分解され、コインが生まれた」という、演出面でのストーリーがバックグラウンドにあるように感じられます。 おそらく制作者は考えていない…というか考える前に