UIデザイナーがよくお世話になる角丸フレームについて!さまざまなデザインがありますが、Rの統一やテキストのレイアウトなど、デザインとして取り扱う際に注意していることが幾つかあります。#カプコンUI #ゲームUI
スマートフォンゲームなどタッチ操作するデバイスでは、タップする際に指で隠れてしまう範囲があります。ゲーム中の重要な情報が隠れないように、必要な情報は指で隠れづらい位置に配置する工夫も大切になります。 #カプコンUI #ゲームUI
「こんなUIを作って欲しい!」という企画要望は、そのままではユーザーの要求を100%満たすものではないかもしれません。そこからさらに掘り下げてヒアリングし、試作・検証を重ねることで、本当に欲しい機能と適切なUIデザインが見えてきます!#カプコンUI #ゲームUI
ゲーム中、ユーザーは一度に沢山の情報を理解/処理するよう求められる場面がたくさんあります。 そんなユーザーの負担にならないように、文字に頼りすぎるUIデザインになっていないか、パッと見ただけで意味や使い方がわかるデザインかどうかを常に意識しています。#カプコンUI #ゲームUI
もう少しだけ、新人研修の資料抜粋で初級編「デザインの基本原則」のご紹介!色や明度差をつけることは、シンプルで効果的な手法です。しかし多色配色や明度差の付けすぎも混乱の元となり得ます。視認性を担保しつつ、伝わりやすいデザインを目指します!#カプコンUI #ゲームUI #研修
前回の続きです。情報の優先順位をつける要素には「色」「形」「動き」「レイアウト」などがあります。 これらのデザイン要素を組み合わせて、目立つべき要素を上手に目立たせた画面を作成するよう心がけています。 #カプコンUI #ゲームUI
新人研修で使用している資料の一部をご紹介します!初級編ですがどれも大切な考え方なので、改めて丁寧に指導していきます。 #カプコンUI #ゲームUI #研修
動画で見るとこんな感じです。急にVRみたいな表現になって驚きました。(画質悪いのは私の端末のスペックが低いからです)#わるこね #ゲームUI
ソシャゲの会話シーンでこのカメラ演出は多分初めて見たかも。不意打ちでした。 はてなブログに投稿しました #はてなブログ #ゲームUI #わるこね 「この悪い子猫ちゃんめ!」まるでVRのように没入感の高い会話シーン - ゲームアプリのUIデザイン appgameui.hatenablog.com/entry/2022/06/…
現場のオーダーに対して何を作るべきか迷ったときは、コンセプトを可視化してみるのもおススメです! 迷いが軽減されて、統一感のあるデザインができるのはもちろん、 図のように数値を変えることで、意識的に幅広いデザインを作ることができるので技術アップにも繋がります! #カプコンUI #ゲームUI
カプコンのゲーム開発に使用されているRE ENGINEには200点以上のアセットがあり、様々な用途に対応するために日々開発が行われています。 それに合わせてUIデザイナーがアイコンの作成を行い、視覚的に統一感を出すことでエンジン内の一体感を実現させています。#カプコンUI #ゲームUI
アイコンやボタン制作のPhotoshop使用事例です!ドロップシャドウの付け方など。暗色の境界線で元絵が暗く沈んだ場合、明るい色の光彩を合わせることで視認性を上げたり、グラデーションと組み合わせたり。こうしたわずかな調整が効いてくるのがUIデザインの楽しいところですね!#カプコンUI #ゲームUI
UIのTAがIllustratorでゲームを作っていました。本人曰く、「出来る事が増えて楽しくなった結果、目的と手段が逆になってます!」とのことでした。笑 UIデザイナー側でも何に使えるのかを一緒に考えていこうと思います! #カプコンUI #ゲームUI
画面中のフォントが綺麗に見えるかどうかは画面サイズやユーザーの視力によっても変わります。 特に数字フォントについては、カウンタースペースが大きい方が似た文字を判別しやすくなります。 色々な状況を想定して、より見やすいフォントを選定しています。 #カプコンUI #ゲームUI
UIのアクティブな状態にはたくさんの種類があります!でもこれらは使い方によってはユーザーを混乱させてしまうこともあるので、シーンに応じて慎重に選定しています。グレー表現(非アクティブ)とグレーアウト(無効)など、似た表現にも要注意ですね! #カプコンUI #ゲームUI
アイコンなどはベクターで作るケースが多いですが、それらが全ての場面で使えるとは限りません!拡大に強いベクターも、縮小時には調整が必須。縮小で潰れてしまった情報をドット単位で調整します。元のイメージを損なわずどの場面にも合わせられるスキルは重要です。#カプコンUI #ゲームUI
アイコンのオブジェクト配置について!下地やフレームに対して収まりが悪いアイコンは気になりますよね。中心を求める方法は幾つかありますが、ツール上の中心が必ずしも中央配置に見えるとは限りません。錯視も考慮しながら、最終的には視覚的に違和感のない配置を目指します!#カプコンUI #ゲームUI
新人研修の様子です!アニメーション研修について。ユーザーを正しい情報に導くためにも、UIアニメーションは正しくデザインされることが望まれます。また、錯視による時間短縮効果など、狙ってアニメーションをつけることでストレスフリーな画面構成を目指していきます。#カプコンUI #ゲームUI #研修
白と黒は使う頻度の高い色ですが、RGB値での完全な白と黒は避ける場合が多いです!例えば暖色系のデザインなら、RGB値で見ると黄色や茶色を帯びていたりします。たとえモノクロデザインだとしても、輝度差が大きいと目に負担がかかることから、それぞれ調整は必須ですね!#カプコンUI #ゲームUI
引き続き、デビルメイクライ5のデザインについて!世界観にマッチするよう作成したオリジナルのフォントセットです。カッコ良さだけではなく可読性を重視しています。UIデザイナーのこだわりが細部にまで詰まっています! #カプコンUXデザイン室 #ゲームUI #DMC5
デビルメイクライ5のデザインについて!ネロ、ダンテ、Vのプレイヤー3人を象徴するエンブレムはUIデザイナーが担当しています。今作では現代的なイメージを前面に出すため、グラフィティアートを意識してデザインを制作しました。#カプコンUXデザイン室 #ゲームUI #DMC5
モンスターハンター:ワールドではアイコンに質感を乗せて沢山のアイコンが並んでも平坦な印象にならない工夫をしています!アイスボーンでは更にエフェクトも付けレア度の表現も加えています。こちらのエフェクトもUIデザイナーが作成しています。 #カプコンUXデザイン室 #ゲームUI #MHWアイスボーン
視線誘導のお話!情報を伝えるためにはユーザーの目の動きも重要です!グーテンベルク・ダイヤグラムやZ、Fの法則は有名ですね。漫画のコマ割りなどデザインの世界では広く使われる概念ですが、これを元に文字・形状・色の差をつけてスムーズな視線誘導を目指します!#カプコンUXデザイン室 #ゲームUI
文字のカーニングについて!ビジュアル的に見せたい場面では特に、フォントを平打ちでそのまま出すケースは少ないと思います。でも目が慣れて来てわからなくなったりすることもあるので、ひっくり返したり文字間の法則を考慮して修正して行きます!#カプコンUXデザイン室 #ゲームUI
文字色と背景色の輝度差について!UI制作中に「読みにくい」「わかりにくい」と思ったら、もしかしたら文字と背景の色の輝度差が低いのかもしれません。白黒にしてみるとわかりやすくなります。コントラスト比を計算するツールもあるので試してみると面白いかも?#カプコンUXデザイン室 #ゲームUI