カプコンUIデザイン室発！ゲームUIデザイナーが知っておくべき制作のコツを一挙紹介！
108.1K Views
November 04, 25
スライド概要
本スライドは2025年8月30日(土)に開催したゲーム開発者向けのリアルイベント『ゲームメーカーズ スクランブル2025』で行われた講演のスライドとなります。
タイトル：
カプコンUIデザイン室発！ゲームUIデザイナーが知っておくべき制作のコツを一挙紹介！
内容：
UIデザイン室のXアカウント「CAP’SPERIENCE（@CAPCOM_UXD）」で日々発信する「UIデザインのコツ」を題材に、カプコンの開発現場で培われた制作ノウハウを深掘り解説します。
Xのポストでは収まりきらない“140文字以上”のボリュームで、より分かりやすいUIを目指すための「ビジュアル制作」「レイアウト」「効率化」などのポイントを時間の許す限り紹介していきたいと思います。
登壇者：
株式会社カプコン
UIデザイン室 室長
植田 雅生 氏
【アーカイブ記事】https://gamemakers.jp/article/2025_11_04_119911/
【イベントページ】https://gamemakers.jp/scramble2025/
【イベントレポート記事】https://gamemakers.jp/article/2025_09_24_116494/
ゲームづくりに役立つ情報をお届けする「ゲームメーカーズ」の資料公開用アカウント。 WEBメディア「ゲームメーカーズ」では、ゲーム開発TIPSや”作り手目線”のインタビュー、お得なセール情報などを毎日更新！ http://gamemakers.jp
関連スライド
各ページのテキスト
CAPCOM カプコンUIデザイン室発！ ゲームUIデザイナーが 知っておくべき制作の コツを一挙紹介！ UIデザイン室 植田雅生 CAP'SPERIENCE
業務経歴 X-MEN Children of the Atom サーバーボッツ〜フルメタルマッドネス〜 ヴァンパイアハンターDarkstalkers'Revenge ウォーザード カプコンスポーツクラブ 私立ジャスティス学園LEGION OF HEROES パワーストーン 私立ジャスティス学園 熱血青春日記 燃えろ! 私立ジャスティス学園 バイオハザードアウトブレイク バイオハザードアウトブレイクFILE2 DevilMayCry4 ゴーストトリック エクストルーパーズ ドラゴンズドグマダークアリズン ドラゴンズドグマオンライン DevilMayCry4 SpecialEdition バイオハザードアンブレラコア ストリートファイター5 バイオハザード4・5・6 BIOHAZARD7 バイオハザードリベレーションズ アンベールドエディション・リベ レーションズ2 DevilMayCry5 etc 株式会社カプコン UIデザイン室 室長 兼 アートプロダクション室 室長 植田 雅生 1994年入社
Xについて UIデザイン室 X Cap's Perience https://twitter.com/CAPCOM_UXD 2018年9月から運営開始し、今年で7年目を迎えました UIデザイナーの業務を知ってもらう事を目的としており、 人材獲得のための施策として運用しています。 そのため、 ノウハウだけではなく社内での行事や会社のイベントの紹介をしたり、 毎週金曜日には会社近くのごはん屋さんを紹介したりしています。 (おいしいごはん屋さんがあるかどうかは結構聞かれる質問だったりします)
マスコットキャラクター UIをよく知る、 謎の生き物の 正体にせまる......! ビリー ■ビリーとさか TPOにあわせて おしゃれにアレンジする。 ユーイチとはセンスが 合わない。 お正月 節分 クリスマス ■ユーイチ耳 ボタンの中のひとつが とれて、ビリーになった。 色がくすんでるのは、 抜けた穴だから。 ■ビリーロ UIに関する豆ちしきをつぶやく。 基本はユーイチいじり。くちたっしゃ。 ■ユーイチ脳 UIについてたくさんかんがえるけど、 いつもビリーに先に言われる。 ■ビリー体 丸いのでよく はまっているらしい。 コップにはまる ■ユーイチ肺 ■ユーイチハート UIへの深い愛がつまっている。 たまに規格でも充電できる。 ■ユーイチ尾 みじかくてかわいい。 ■ユーイチチャック きがえるとどんなハードにでも マルチたいおうできる。 図解であかされる事実! 完全図解 ユーイチとビリー マスコットキャラクターは、 「ユーイチ」と「ビリー」と言います それぞれUI→U1→ユー(U)1(イチ)、 ユーザビリティ から名付けました ←AmazonでTシャツとか売ってます (カプコンオフィシャルグッズです!)
目次 本日のおしながき ①アイコン制作のコツ ②アイデアを形にするためのコツ ③チョットした演出のコツ ④色見や配色のコツ ⑤UI素材を作る時のコツ ⑥フォントを使う時のコツ ⑦ローカライズのコツ 7つのコツを ご紹介〜
1 アイコン制作のコツ
アイコンモチーフの解釈について アイコン制作は連想ゲーム??? アイコン制作ではモチーフをどのように解釈するか?がポイント!
アイコンモチーフの解釈について アイコン制作は連想ゲーム??? アイコン制作ではモチーフをどのように解釈するか?がポイント! ①【モチーフを簡略化してみる(実体があるケース)】:難易度低め 回復薬 ナイフ 勲章 実体を元に簡略化しつつ、特徴的な部分を強調したり シルエットを意識してデザインに落とし込んでみる! ・回復薬やナイフ >>> ゲーム中のものを参考に ・勲章 >>> 実際あるものを参考にゲームに 合わせてデザインしてみる ※一例です
アイコンモチーフの解釈について アイコン制作は連想ゲーム??? アイコン制作ではモチーフをどのように解釈するか?がポイント! ①【モチーフを簡略化してみる(実体があるケース)】:難易度低め 回復薬 ナイフ 勲章 実体を元に簡略化しつつ、特徴的な部分を強調したり シルエットを意識してデザインに落とし込んでみる! ・回復薬やナイフ >>> ゲーム中のものを参考に ・勲章 >>> 実際あるものを参考にゲームに 合わせてデザインしてみる ※一例です ②【代表的な要素を抜粋してみる】:難易度中 絵の具 チェス マップ 全体をシルエットに落とし込むと逆にわかりにくいケースも! その場合は一部分を抜粋したり、集合体を示すものなら 代表的なひとつを選んでデザインしてみる! ・絵の具 >>> チューブをひとつだけPick up ・チェス >>> わかりやすいシルエットの駒をPick up ・マップ >>> 現在位置のアイコンをPick up ※一例です
アイコンモチーフの解釈について アイコン制作は連想ゲーム??? アイコン制作ではモチーフをどのように解釈するか?がポイント! ①【モチーフを簡略化してみる(実体があるケース)】:難易度低め 回復薬 ナイフ 勲章 実体を元に簡略化しつつ、特徴的な部分を強調したり シルエットを意識してデザインに落とし込んでみる! ・回復薬やナイフ >>> ゲーム中のものを参考に ・勲章 >>> 実際あるものを参考にゲームに 合わせてデザインしてみる ※一例です ②【代表的な要素を抜粋してみる】:難易度中 絵の具 チェス マップ 全体をシルエットに落とし込むと逆にわかりにくいケースも! その場合は一部分を抜粋したり、集合体を示すものなら 代表的なひとつを選んでデザインしてみる! ・絵の具 >>> チューブをひとつだけPick up ・チェス >>> わかりやすいシルエットの駒をPick up ・マップ >>> 現在位置のアイコンをPick up ※一例です ③【抽象的なイメージを連想で表現してみる】難易度高め ズーム(拡大) 虫眼鏡 休憩 コーヒー 残り時間 時計 概念などの実体を持たないものは、連想ゲームで! それが持つ機能から連想で出てくるモチーフを使ったり、 シチュエーションを再現してみる! ・ズーム(拡大) >>> 虫眼鏡(機能) ・休憩 >>> コーヒー、紅茶(イメージ) ・残り時間 >>> 時計など(シチュエーション) ※一例です
アイコンモチーフの解釈について アイコン制作は連想ゲーム??? アイコン制作ではモチーフをどのように解釈するか?がポイント! ①【モチーフを簡略化してみる(実体があるケース)】:難易度低め 回復薬 ナイフ 勲章 実体を元に簡略化しつつ、特徴的な部分を強調したり シルエットを意識してデザインに落とし込んでみる! ・回復薬やナイフ >>> ゲーム中のものを参考に ・勲章 >>> 実際あるものを参考にゲームに 合わせてデザインしてみる ※一例です ②【代表的な要素を抜粋してみる】:難易度中 絵の具 チェス マップ 全体をシルエットに落とし込むと逆にわかりにくいケースも! その場合は一部分を抜粋したり、集合体を示すものなら 代表的なひとつを選んでデザインしてみる! ・絵の具 >>> チューブをひとつだけPick up ・チェス >>> わかりやすいシルエットの駒をPick up ・マップ >>> 現在位置のアイコンをPick up ※一例です ③【抽象的なイメージを連想で表現してみる】難易度高め ズーム(拡大) 虫眼鏡 休憩 コーヒー 残り時間 時計 概念などの実体を持たないものは、連想ゲームで! それが持つ機能から連想で出てくるモチーフを使ったり、 シチュエーションを再現してみる! ・ズーム(拡大) >>> 虫眼鏡(機能) ・休憩 >>> コーヒー、紅茶(イメージ) ・残り時間 >>> 時計など(シチュエーション) ※一例です 実際はゲームの世界設定や どこまで簡略化するか?の ルールに合わせて、さらに 調整をしています! 今回は古い時代の設定 だから、針の時計より 砂時計の方がいいかな…
漫符を使ってみる 漫符って???…漫画やアニメなどでキャラクターの感情や状況の表現に使われるシンボル
漫符を使ってみる 漫符って???…漫画やアニメなどでキャラクターの感情や状況の表現に使われるシンボル キャラの絵は同じ表情でも感情が違って見える気がする… 青筋とか(怒ってそう!) 汗とか(焦ってそう!) 衝撃波とか(驚いてそう!)
漫符を使ってみる 漫符って??? 漫画やアニメなどでキャラクターの感情や状況の表現に使われるシンボル 落とし穴 気絶 切れ味 汗をかいて焦らせてみたり、 驚き、集中効果を入れてみたり ピヨらせてみたり、 魂を口から出してみたり 光条を入れてみたり、 衝撃波を入れてみたり アイコン制作時このようなシンボルデザインを補助的に入れたりすることで、効果的なデザインになることも もう一味欲しい時に「漫符」からアイデアを膨らませると良いかも! 国ごとの表現のとらえられ方の違いは注意が必要
中心をどう取る? アイコンの中心はツール上の中心とは限らない??? オブジェクトの形状で中心の取り方は変わってきます 最後は視覚的な調整と確認が必要です 三角形 バウンディングボックス 後ろに詰まって見える? 外接円 もう少し右? 重心 もう少し左? ※一例です 主な錯視 三角形分割錯視 中心に配置したのに底辺側に少し寄って見える錯視 三角形の重心と中心が一致しないため起こります 上方距離過大 同じ大きさの図形や要素を上下に配置した際に上にあるものが大きく 見える現象 複雑な形 方向性を持つオブジェクトは特に気をつけよう! バウンディングボックス 前詰め/上に浮いて見える? 外接円 これでも良いかな? 視覚的に 微調整! 視覚 これかも! ※一例です
余白について考えてみる ネガティブスペースを意識してみるとまた違ったアイデアが出てくるかも… ネガティブスペース=余白、を意識すると分かりやすいシルエットづくりに役立ちます 何のアイコンかがすぐ分かる、サイズを縮小しても視認性を担保できる、 それらはアイコン制作に求められる情報をデザイン化する作業です
余白について考えてみる ネガティブスペースを意識してみるとまた違ったアイデアが出てくるかも… ネガティブスペース=余白、を意識すると分かりやすいシルエットづくりに役立ちます 何のアイコンかがすぐ分かる、サイズを縮小しても視認性を担保できる、 それらはアイコン制作に求められる情報をデザイン化する作業です どんなシルエットにしよう? 例として鍵のアイコンを想定してみます。 ・枠いっぱいに大きく表示すれば 強調されてわかりやすいかも? ・紐を通す穴はカギっぽくて良さそう! ・下の凹凸の数は多くすると縮小時に 潰れるから、2つぐらいにしよう ネガティブスペースは?
余白について考えてみる ネガティブスペースを意識してみるとまた違ったアイデアが出てくるかも… ネガティブスペース=余白、を意識すると分かりやすいシルエットづくりに役立ちます 何のアイコンかがすぐ分かる、サイズを縮小しても視認性を担保できる、 それらはアイコン制作に求められる情報をデザイン化する作業です どんなシルエットにしよう? 例として鍵のアイコンを想定してみます。 ・枠いっぱいに大きく表示すれば 強調されてわかりやすいかも? ・紐を通す穴はカギっぽくて良さそう! ・下の凹凸の数は多くすると縮小時に 潰れるから、2つぐらいにしよう ネガティブスペースは? ネガティブスペースのバランスを調整! ・シルエットを作るのが余白なら、 必要な面積を確保してみよう ・紐を通す穴とは余白とのバランスで サイズ感を調整してみよう ・縦長シルエットを強調するために 角度をつけてみよう etc. ネガティブスペースは? ※一例です
縮小しても分かるデザイン ベクターで作っても全ての場面では使えない… 縮小表示時にイメージを損なわない修正スキル&イメージを損なわないデザインを! 縮小版製作の際にはサイズを変える以外の調整もします 直線でも0度、45度、 90度以外の角度は 元々潰れやすい。 きれいに縮小できていないと… ・視認性が悪くなる ・絵の印象が変わる ・細かなパーツが潰れる 解決方法 ・色相彩度の調整 ・パスの調整 ・フィルター・効果の調整 ・ドットによる調整
縮小しても分かるデザイン ベクターで作っても全ての場面では使えない… 縮小表示時にイメージを損なわない修正スキル&イメージを損なわないデザインを! 縮小版はサイズを変える以外の調整もします 最初にデザインする際にサイズ変更を考慮して考える事ができればベスト 元絵を知ってる前提 縮小したときにシルエットがわかり辛い? 同一モチーフで、わかりやすいシルエットに変更 単体でも伝わる ※一例です
2 アイデアを形にするためのコツ
仕様とデザイン 「こんなUIを作ってほしい!」に応えるために オーダーをさらに深掘りすることでより適切なUIデザインにすることができます 残り時間がわかるように してほしい!! こんなタイマー で良い??
仕様とデザイン 「こんなUIを作ってほしい!」に応えるために オーダーをさらに深掘りすることでより適切なUIデザインにすることができます 残り時間がわかるように してほしい!! こんなタイマー で良い?? 02:15 時間を正確に 伝えたい? 時間を曖昧に 伝えたい?
仕様とデザイン 「こんなUIを作ってほしい!」に応えるために オーダーをさらに深掘りすることでより適切なUIデザインにすることができます 残り時間がわかるように してほしい!! こんなタイマー で良い?? 02:15 時間を正確に 伝えたい? 時間を曖昧に 伝えたい? 明確な数値化はしたくない からこっち! メモリは5段階が良いなー
仕様とデザイン 「こんなUIを作ってほしい!」に応えるために オーダーをさらに深掘りすることでより適切なUIデザインにすることができます 残り時間がわかるように してほしい!! こんなタイマー で良い?? 02:15 時間を正確に 伝えたい? 時間を曖昧に 伝えたい? 明確な数値化はしたくない からこっち! メモリは5段階が良いなー イイネ!! ゲームの世界観を踏まえて 時間経過で花びらが散る イメージで ヒアリングし、試作・検証を重ねることで、本当に欲しい機能と適切なUIデザインが見えてきます!
コンセプトの可視化 なにを作るべきか迷った時は図のようにコンセプトを可視化してみるのがオススメ! 意識的に幅広いデザインを作ることができるので技術アップにもつながります 星をモチーフに〜… ①スタイリッシュ、ファンタジー、レトロetc… ジャンルを決める ②そこからカワイイ、カッコいいetc… 方向性を決める
情報と装飾を整理する それは情報なのか装飾なのか…? 情報の優劣の整理ができていないとデザインするときにこんがらかってしまうことがあります 情報の優先順位をつける要素として「色」「形」「動き」「レイアウト」などがあります これらのデザイン要素を組み合わせ、目立つべき要素を上手に目立たせた画面を作成するようにしましょう ①どんなゲームなのかを理解する ②画面内で「わかってほしいこと」の順番に情報を並べてみる ③色、形、動き、レイアウトなどで優先順位をつけてみる
情報と装飾を整理する それは情報なのか装飾なのか…? 情報の優劣の整理ができていないとデザインするときにこんがらかってしまうことがあります 情報の優先順位をつける要素として「色」「形」「動き」「レイアウト」などがあります これらのデザイン要素を組み合わせ、目立つべき要素を上手に目立たせた画面を作成するようにしましょう 色 ・優先順位は「色数」ではなく「明度」で表現 ・なるべく重要な情報を色のみで表現しない ■明度が高い ■色の他にも表現 ▲NG OK ■明度が低い ■色だけで表現 形 ・同一の形のなかに異なる形を加えると目立つ ・塗りの面積が広いほど目立つ ■違う形を混ぜる ■塗りの面積が多い 初めからやり直す ■同じ形のみ ■塗りの面積が少ない 初めからやり直す 動き ・動きをつけることで、優先順位は飛躍的に高くなる ■動きがありそうなボタン NEXT PUSH スタート ■動きが無さそうなボタン NEXT PUSH スタート レイアウト ・優先順位はコントラスト(めりはり)で表現 ■コントラストあり 名前 ユーイチ レベル ☆☆☆ 武器:フォーク ■コントラスト無し 名前 ユーイチ レベル:2 武器:フォーク
黄金比を当てはめてみる 黄金比? 人間が美しいと感じる比率バランス「1:1.6」が黄金比 UIデザインする際にも参考になりますのでレイアウトがうまくいかない時に解決策になるかも…! 黄金比とは? 1 1.1618 人間が最も美しいと感じる比率「1:1.6」のこと
黄金比を当てはめてみる 黄金比? 人間が美しいと感じる比率バランス「1:1.6」が黄金比 UIデザインする際にも参考になりますのでレイアウトがうまくいかない時に解決策になるかも…! 黄金比とは? 1 1.1618 人間が最も美しいと感じる比率「1:1.6」のこと
黄金比を当てはめてみる 黄金比? 人間が美しいと感じる比率バランス「1:1.6」が黄金比 UIデザインする際にも参考になりますのでレイアウトがうまくいかない時に解決策になるかも…! 黄金比とは? 1 1.1618 人間が最も美しいと感じる比率「1:1.6」のこと ボタンを黄金比に当てはめて作ってみる 1.6 1 最初からやりなおす 1 1.6
黄金比を当てはめてみる 黄金比? 人間が美しいと感じる比率バランス「1:1.6」が黄金比 UIデザインする際にも参考になりますのでレイアウトがうまくいかない時に解決策になるかも…! 黄金比とは? 1 1.1618 人間が最も美しいと感じる比率「1:1.6」のこと ボタンを黄金比に当てはめて作ってみる 1.6 1 最初からやりなおす 1 1.6 比較してみると… 黄金比を使ったボタン 最初からやりなおす バランスが崩れているボタン① 最初からやりなおす バランスが崩れているボタン② 最初からやりなおす
3 チョットした演出のコツ
リストスクロールの範囲を考えてみる スクロールできてたら問題ない? フォーカスされている情報がはっきり見えた状態でスクロールできている方(右)がストレスは少なく感じます 次の項目にスクロールする差でユーザーはストレスを感じる ① テキストテキスト ② テキストテキスト ③ テキストテキスト ④ テキストテキスト ⑤ テキストテキスト ⑥ テキストテキスト フォーカスされた 項目が見づらい… ① テキストテキスト ② テキストテキスト ③ テキストテキスト ④ テキストテキスト ⑤ テキストテキスト ⑥ テキストテキスト フォーカスされた 項目も見やすい! ©CAPCOM CO., LTD. ALL RIGHTS RESERVED.
触ったときの反応を考えてみる ユーザーが楽しくなるアクションを! ちょっとした演出を入れる事で楽しさや豪華さを出すことができます ただしバランスの見極めは大切です! ユーザーの操作に合わせて、それに適したアニメーションをさせる 10 10 上も悪くないけど 下の方が押したら 反応があって楽しい! 10 これは やりすぎじゃない? ©CAPCOM CO., LTD. ALL RIGHTS RESERVED.
演出の尺を考えてみる 使いやすさと豪華さのバランスを見極める! ゲームの世界観を伝える手段としてもアニメーション演出は効果的です こだわりすぎると尺が長くなりユーザーにストレスを与えてしまう事もあるので注意! UIのアニメーション演出について ① ② アニメーションの長さを比べてみると…? 1 2 ©CAPCOM CO., LTD. ALL RIGHTS RESERVED.
会話時のテキスト表示を考えてみる 表示速度やボイスの有無なども考慮して読みやすいUIを! 単純にテキストを表示させるだけではなく、様々な状況を考えて世界観にマッチしたアニメーションに! 会話の表示アニメーションの工夫 左から右に流れるアニメーション 上から下に流れるアニメーション ©CAPCOM CO., LTD. ALL RIGHTS RESERVED.
4 色見や配色のコツ
グラデーションを作る きれいなグラデーションを作りたい! 2色のグラデーションを作る際、類似色のグラデーションはきれいにつながりますが、 離れた色相の2色を使う場合は色見の濁りが出てしまうことがあります そんな時は中間色を作ってつながりを調整していきます! 【類似色相】 色が自然につながる気がする! 【離れた色相】 濁って見える? 【離れた色相のまま調整】 中間色を少しだけ調整!
グラデーションを作る きれいなグラデーションを作りたい! 2色のグラデーションを作る際、類似色のグラデーションはきれいにつながりますが、 離れた色相の2色を使う場合は色見の濁りが出てしまうことがあります そんな時は中間色を作ってつながりを調整していきます! かなり濁って見える 中間色を少しだけ調整! 特に補色関係のグラデーションは中間色が無彩色に濁ってい くので注意して調整する必要があります 最終的には色相だけではなく、「彩度」「明度」といった 色の3属性を意識して調整します 必ずしも色相環の中間地点とは限らないので目で調整するア ナログな部分も…
白と黒 完全な白と黒は使用しない(ことが多いです) 使う頻度の高い白と黒ですがRGB値MAXの白と黒は避けるようにしています 端 端 色相や彩度をパラメーターで一気に調整した際 黒と白が置き去りにされてしまう… 輝度差が大きいと目に負担がかかる… (ただし色覚特性を持つユーザーに対応するために輝度差は下げすぎない ことも大切) 例:メニュー画面 このようなメニュー画面のとき、「黒文字」「白文字」「黒下地」のカラーはこんなイメージです。 メニュー画面の例 リスト名の黒い文字 リスト名の黒い文字 リスト名の黒い文字 リスト名の黒い文字 アイコン選択 説明文の白文字ああ 説明文の白文字ああ 説明文の白文字ああ 説明文の白文字ああ 説明文の白文字ああ 説明文の白文字ああ 黒文字 白文字 黒下地 例のように暖色系デザインなら、 黒や白もRGB値でみると黄系や茶系だったり
読みづらさを回避する 「読みにくい」「わかりにくい」と思ったら… 文字と背景の輝度差が低い可能性があります 一度白黒にしてみると見づらい部分がわかりやすくなります 見づらいような… 白黒にして 確認してみよう Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM
読みづらさを回避する 「読みにくい」「わかりにくい」と思ったら… 文字と背景の輝度差が低い可能性があります 一度白黒にしてみると見づらい部分がわかりやすくなります Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM メリハリがなくて 見づらい〜
読みづらさを回避する 「読みにくい」「わかりにくい」と思ったら… 文字と背景の輝度差が低い可能性があります 一度白黒にしてみると見づらい部分がわかりやすくなります Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM 見やすくなった Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM
読みづらさを回避する 「読みにくい」「わかりにくい」と思ったら… 文字と背景の輝度差が低い可能性があります 一度白黒にしてみると見づらい部分がわかりやすくなります Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM Options サウンドを設定してください Low High MUSIC Low High VOICE Low High BGM 完成〜!
アクティブ表現を考える シーンに応じたアクティブ表現を! アクティブ(選択)、非アクティブ(非選択)表現はシーンに応じた表現が大切になってきます どちらがアクティブ??? 白がハイライトされてるから アクティブ? 青がアクティブなカラー?
アクティブ表現を考える シーンに応じたアクティブ表現を! アクティブ(選択)、非アクティブ(非選択)表現はシーンに応じた表現が大切になってきます どちらがアクティブ??? 4択になったらわかった!! でも2択のケースもあるから 迷わない表現にしたいな
アクティブ表現を考える シーンに応じたアクティブ表現を! アクティブ表現は様々な種類があるのでシーンに応じた選択が大切になってきます アクティブ表現のいろいろ 塗りとライン アクティブカラー グレー表示 フレームの有無 追加オブジェクト サイズ差 などなど… グレー表示は 「非アクティブ」と「無効」 の意味にもとらえられるので 扱い方は注意!
5 UI素材を作る時のコツ
容量節約を考える テクスチャの組み方のコツ 容量などを考えてテクスチャを詰める作業はゲーム制作以外ではあまり馴染みがないかもしれません 新人研修でもみんなが戸惑うのがこの作業です どういう事をしているのか、、、を少しご紹介します
容量節約を考える テクスチャの組み方のコツ 容量などを考えてテクスチャを詰める作業はゲーム制作以外ではあまり馴染みがないかもしれません 新人研修でもみんなが戸惑うのがこの作業です どういう事をしているのか、、、を少しご紹介します たとえば こんなウィンドウ… あああああああ
容量節約を考える テクスチャの組み方のコツ 容量などを考えてテクスチャを詰める作業はゲーム制作以外ではあまり馴染みがないかもしれません 新人研修でもみんなが戸惑うのがこの作業です どういう事をしているのか、、、を少しご紹介します たとえば こんなウィンドウ… あああああああ テクスチャ化すると こうなる
容量節約を考える テクスチャの組み方のコツ 容量などを考えてテクスチャを詰める作業はゲーム制作以外ではあまり馴染みがないかもしれません 新人研修でもみんなが戸惑うのがこの作業です どういう事をしているのか、、、を少しご紹介します たとえば こんなウィンドウ… あああああああ 汎用性を上げるため白黒に 左右反転できるので 左端パーツと中央パーツに分割 中央パーツは横幅1pixelを 実装ツール上でボタンサイズに伸ばす
容量節約を考える テクスチャの組み方のコツ 容量などを考えてテクスチャを詰める作業はゲーム制作以外ではあまり馴染みがないかもしれません 新人研修でもみんなが戸惑うのがこの作業です どういう事をしているのか、、、を少しご紹介します テクスチャを展開 1pixelを横に引き延ばした中央パーツ 色替えやテキストは 実装ツール上で打ち込みます あああああああ
角丸フレーム 角丸フレームを扱う時に気を付けたいこと 使用頻度の高い角丸フレームですが、気を付けるべきポイントがいくつかあります ①角の丸みを揃える 素材ごと要素ごとにバラバラになると統一感がなくなります ポイント1:Rを揃えることを意識する 角丸の丸みを【R】といい、半径(Radius)を意味します。最初にRが要素ごとにバラバラにならないように統一します。
角丸フレーム 角丸フレームを扱う時に気を付けたいこと 使用頻度の高い角丸フレームですが、気を付けるべきポイントがいくつかあります ②テキストのレイアウト位置を整える 角丸の円の中心点よりも内側に配置すると綺麗に見えます ポイント2:テキストのレイアウト位置 テキストは角丸の円の中心点よりも内側に配置すると綺麗に見えます。 あいうえおかきくけこ さしすせそたちつてと なにぬねのはひふへほ Rでの領域を視覚化するとこんな感じ あいうえおかきくけこ さしすせそたちつてと なにぬねのはひふへほ Rの領域外にはみ出している あいうえおかきくけこ さしすせそたちつてと なにぬねのはひふへほ Rでの領域を視覚化するとこんな感じ あいうえおかきくけこ さしすせそたちつてと なにぬねのはひふへほ 角丸のRの内側に収まっている (ぴったりでなくとも内側であればOK)
角丸フレーム 角丸フレームを扱う時に気を付けたいこと 使用頻度の高い角丸フレームですが、気を付けるべきポイントがいくつかあります ①角の丸みは同心円に 内外にフレームを配置する場合は同心円を意識 ポイント3:Rは同心円に 内外にフレームを配置する場合は、角丸の半径を意識して同心円にしています。 内側の角丸フレームから外側に 配置する角丸フレームまでの余白に、 内側のR50を足した数値を 外側の角丸フレームRとしています。 (内側Rに余白分を足した同心円) 50+40でR90!
6 フォントを使うときのコツ
数字フォントの視認性 見やすいフォントを選定のポイント 様々な状況を想定して見やすさを考慮する際には カウンタースペース(活字内の空間)が大きい方が判別しやすくなります フォントA 1234567890 攻撃力 29875 攻撃力 29875 攻撃力 29875 攻撃力 29875 攻撃力 29875 3 5 6 8 9 3 5 6 8 9 0 5 6 8 9 フォントB 1234567890 攻撃力 29875 攻撃力 29875 攻撃力 29875 攻撃力 29875 攻撃力 29875 3 5 6 8 9 3 5 6 8 9 0 5 6 8 9 カウンタースペース ブラー 虫食い 見やすい 汎用性を優先させる際にはカウンタースペースを意識してみるのも良いかもしれません!
カーニングについて カーニング(文字間調整)に迷ったときに… ステム(文字の柱部分)を揃えたり、カウンタースペースを含む文字とのバランスを見たり… しっかりとビジュアル的に文字を見せたい場面ではフォントをカーニングして調整しますが、 ずっと見てると目が慣れてよく分からなくなることも… CAPCOM UI In WODJVO 直線と直線 広め 直線と丸 細め 丸と丸 もっと細め AYKなどの斜めのエッジで 構成された文字は その都度調整する必要が… 文字をさかさまにしてみるとただの絵としてとらえることができるので、 カーニングしやすくなります
読みやすさについて 長文テキストが読みやすくなるように工夫してみる ゲームジャンルによってはテキストの読み返しが重要な場合がありますが、 ルールがないと乱雑で読みづらくなってしまいます ①視線がスムーズに移動できるようにレイアウトする ②テキストの行間や隙間をしっかり取ってグループ化する などの調整をしてみると読みやすくなります ポイント1:テキストのレイアウトを整える テキストを中央揃えにすると、ガタつきが目立つようになります。 左揃えでレイアウトをそろえることで、視線のずれが少ない読みやすい並びになります。 ポイント2:各情報をわかりやすくグループ化する 名前のテキスト用に下地を用意する、人物ごと会話の区切りを分かりやすくまとめてあげることで より一目でわかりやすいテキストのリストになります。
7 ローカライズのコツ
ローカライズの注意点① テキストの長さの変化に対応する 複数の国の言語にローカライズされるとテキストの長さが1.5〜2倍になることも! UIデザインの際にはローカライズを考慮してレイアウトを考えていく必要があります Item Shop ←日・英 Boutique d'objets ←仏 Tienda de objetos ←西
ローカライズの注意点② 長さだけではなく上下幅も可変する! 言語によっては横幅だけではなくアクセント記号やベースラインから下に伸びる文字によって発生する 上下のはみ出しにも気を付けてデザインする必要があります Main Menu 操作説明 進め! 来い! 助けて! Menu principal Commandes En avant! Par ici! À l'aide! 仏語に 翻訳! デザイン完成! 横幅も確保したから大丈夫かな? 枠から出ちゃった… 欧文と和文の領域は違うみたい。 Menu principal ”p”がベースラインよりも 下へ伸びる。 À l'aide! ”À”がアセンダラインよりも 上に記号が配置されている。
ご清聴いただき ありがとうございます! Thank you for listening! Xフォローお願いします! ©CAPCOM