【デザイン学生必見!】ポートフォリオをゼロから作ろう!

【ゲームUI】オリジナルゲームUIをゼロから作ってみよう

PhotoshopやIllustratorを使ってオリジナルゲームUI制作に挑戦してみましょう。

授業概要

当ゲームUI画面制作についての授業概要とゲームUIの作例について解説します。

何をする授業?

当授業では自身のキャラクターイラストを使ってゲームUIの制作に挑戦します。
以前の授業でバナー制作等を行いましたが、基本的にはその時同様PhotoshopやIllustratorを活用してゲームUIを作成します。

なお、UI制作にはみなさんが想像されている以上に時間と手間がかかります。
授業回数は10回ですが時間的余裕はありません。
なるべく効率的に制作を進めていくよう授業に取り組んでいきましょう。

制作に手間はかかりますが、ポートフォリオに載せる素材として活用できます。
皆さん是非力の入った作品を作成してください。

ゲームUIの作例

下記はみなさんの先輩方が作られたゲームUIの作例です。
ゲームジャンル、縦画面、横画面など、ゲームUIであれば自由です。

ゲームUIやポートフォリオの作例
下記リンクでゲームUIやポートフォリオの作例について解説しています。ゲーム業界を目指されている方にとって有益な情報を掲載しているので、空き時間にチェックされてみませんか?

スケジュールと作品提出

授業のスケジュールや作品の仕様・提出形式について記載しています。

授業スケジュール

当授業のスケジュールです。
全9回を予定していますが、制作物する要素が多い内容なので余裕はありません。
各回で進めておくべきフェーズを解説しますが、進捗が芳しくない方は時間を作ってなるべく自主的に進るようにしてください。

日程 内容
① 2023/01/17 授業概要、ゲームUIのネタを練る~ラフ作成①
② 2023/01/24 ラフ作成②
③ 2023/01/31 画面制作 線画①
④ 2023/02/07 画面制作 線画②
⑤ 2023/02/14 画面制作 線画③
⑥ 2023/02/21 画面制作 質感付与①
⑦ 2023/02/28 画面制作 質感付与②
⑧ 2023/03/07 画面制作 質感付与③&調整
⑨ 2023/03/14 提出日、プレゼン

画面制作が早く終わった方はタイトル画面やその他画面など、別画面の制作に挑戦してみましょう。

作品の仕様と提出形式

  • オリジナルキャラを使用(新規作品の必要無し、既存のオリジナルキャラクター)
  • ドキュメントサイズ:1920x1080px 72px/inch
  • 画面の向き:縦、横どちらでもOK
  • 作成画面数:1画面以上(複数でも可)
  • 提出ファイル①:JPEGで書き出した画像
  • 提出ファイル②:元のPSDファイル(解像度は元々作成していた状態で、レイヤーは整理)
  • 提出期限:2023/03/28の授業終了まで

※作成する画面は要素の多い「ホーム画面」を基本とします。

素材の使用について

当授業では素材の使用について制限は設けておりません。
商用利用可能な素材であれば自由に活用してください。
例えば背景など、作成に時間と手間が掛かる素材は積極的に活用していただいて構いません。

ゲームの背景素材
商用利用可能で高品質なゲームのUIに適した背景イラスト素材です。
ライセンスを気にせず活用ができるのでオススメですよ。

ゲームUIを作る流れの例

実際にゲームUIを作成する流れについて解説します。使用ツールは主にPhotoshopでデザイン・レイアウト・質感付与を行い、Illustratorでアイコンやロゴなどの元素材を作成します。
両ツールを併用しながら効率的にゲームUIを作成しましょう!

ゲームUIの作り方まとめ

左記リンクでゲームUIの作り方を詳しく解説しています。
リンク先は前編で、中編後編に続きます。
よかったら参考にして下さい。
良質なUIを模倣する
作り方は色々とありますがUI制作に慣れていない皆さんの基本的な制作方針は「作りたいUIの良質なサンプルを模倣する」方法が最もオススメです。
デザインの引き出しが少ないまま完全オリジナルデザインで作ろうとすると、どうしてもクオリティの面で物足りない作品に仕上がりがちです。作画同様、まずは良質なデザインを参考にしつつ、オリジナル要素を加えてみましょう。
Google検索だけでなくピンタレスト等で「ゲームUI」等のキーワードで検索し、自身の作りたいゲームUIのサンプルを数点探しておきましょう。

① ネタとラフを考える

まずは作成するゲーム画面のネタを考えましょう。
剣と魔法のRPG、SF系シューティング、現代世界の推理モノ、戦国時代モノ、学園モノ…etc、自身が好きなネタを考えます。

※ラフ作成のスケジュール感としては1/24中に完成させるのが望ましいです。

STEP.1
キャラと背景を準備
キャラ絵と背景を準備します。
新規で描き起こす必要はありません。既存のオリキャラでOK。

もし手頃な背景が無い場合は商用利用可能な背景素材を活用してOKです。(コチラの記事で高品質な背景素材を掲載)
背景を早く決める
ゲームUIは「背景」が多くを占めています。よって背景が決まらないとUIの方向性も決めづらいです。
早急にキャラと背景を確定させてしまいましょう。
※ファンタジー系の世界観に適した背景イラスト素材はコチラ
STEP.2
キャンバスを設定
1920x1080px 72px/inch RGBモード
上記が今回の課題で作るゲーム画面のサイズです。

Photoshopで作成し、背景とキャラクターを配置しましょう。
STEP.3
要素を書き出す
ゲーム画面に載せたい要素を洗い出します。

Photoshopで新規レイヤーを作成し、黒で塗りつぶして不透明度を少し下げる。
その上に新規レイヤーを追加し、白のブラシでラフを追記する、等。方法は問いません。
もちろん紙にペンで書いてネタ出ししても構いません。
アナログ、デジタル、自身が進めやすい方法で行ってください。

キャラ、背景のイメージとズレない世界観のゲームUIを目指しましょう。
ゲームUIに載せる要素の例
マイページ、ガチャ、クエスト、合成、バトル、ショップ、お知らせ、メール、レベル表記、体力ゲージ、行動ゲージ、お金、キャラのセリフ欄、キャンペーンバナー、音声ON・OFF、フレンド、メニュー、設定など…これらは一例です。
要素の名称は作風に合うようにアレンジを加えてみるのも良いでしょう。(例:ガチャ→召喚)
STEP.4
ラフの完成
STEP.3の手描きラフを元に文字ツールシェイプツールなどを使って「全ての要素」を書き出します。イベントバナーの日時や細かな文言など、要素を全て記載しましょう。

この段階で情報量が少なすぎると「寂しい絵」になります。
左図は「ラフ完成」の例です。
1/17、1/24を使ってこの状態まで作れたら一旦OK。
Photoshopを使う利点
ゲームUIのようなレイアウトデザインを行う際にIllustratorとPhotoshop、どちらを使うか迷いますよね。好みにもよりますが、Photoshopの方がより楽に複雑な表現ができます。
ペタッとしたフラットデザインのような作風ならIllustratorでも構わないのですが、質感のある表現をしたい場合は断然Photoshopに軍配が上がります。
Illustratorはアイコンやロゴ等のベース素材作成に使うのが便利ですよ。

② 線画を作る

先に作成したラフを元に、ゲームUIの線画作成を行います。
アイコンなどのベースはIllustratorで作成すると効率的ですよ。

※線画作成のスケジュール感としては2/7、遅くとも2/14中に完成させるのが望ましいです。

STEP.1
アイコン等のラフを作成
アイコンのラフを描きます。
クリスタ、Photoshop、紙にペンで書いたものをスキャン、お好きな方法で作成してください。

フリーのアイコン素材を活用するのもアリですが、自作する方がより作品に適した世界観を再現できますよ。
STEP.2
Illustratorで清書
Illustratorを使って線画を清書します。
ラフを配置し、不透明度を30%程度に下げ、レイヤーにロックしておきましょう。

新規レイヤーを作成し、[ ペンツール ] 等を使ってトレースします。長方形ツールや楕円形ツールなどの図形ツール等や [ パスファインダー ] 等も組合わせて効率的に作成しましょう。

塗りは無し、細くて分かりやすい色の線にしておくとトレースし易いですよ。
STEP.3
アイコンのベースを作成
Illustratorでトレースが完了したらアイコンの塗りと線を適宜設定します。
サンプルは塗りを黒、線は無しに設定しています。
他のアイコン類も同様の手順でIllustratorで作成しましょう。

アイコン制作はそれなりに労力が必要な作業ですが、頑張って作成してください。
ゲームアイコン素材
商用利用可能で高品質なゲームUIに使えるアイコン素材です。活用しても良いですし、アイコン制作のヒントにも使えますよ。
全てベクターイラストなのでIllustratorやPhotoshopで活用できる素材です。
STEP.4
Photoshopにコピペする
Illustratorで作成したアイコンを [ Ctrl + C ] でコピーし、Photoshopで [ Ctrl + V ] を押すとオブジェクトのコピー&ペーストができます。

ペースト形式は [ スマートオブジェクト ] がオススメです。
イラレからフォトショへコピペする詳しい方法はコチラの記事で詳しく解説しています。
STEP.5
線画の完成
左図のような状態で一旦線画の完成です。
この段階では色を付けず、白黒で作成しておくのがオススメ。

複雑な形状のアイコンはIllustratorで作成、バナーやアイコンの下地となる長方形や丸形などはPhotoshopのシェイプで作成すると効率的ですよ。
文字はPhotoshopの [ 文字ツール ] で入力します。AdobeFontsフリーフォント等でゲームUIに合うフォントを探し、サイズやレイアウトを調整しましょう。

オリジナルロゴの場合はアイコン同様にIllustratorで作成し、スマートオブジェクト形式でPhotoshopにペーストしておくと便利。
スマホでチェックしてみよう
更に品質を高めたい方はJPEGで書き出し、自身のスマホに入れてボタンのサイズ感や押し易さ等をチェックしてみましょう。UI制作で行う所謂「ユーザビリティ」の確認作業ですね。
スマホゲームならスマホで、コンシューマーゲームならテレビなどのモニタ等、実際にプレイする実機端末で確認する事が重要です。白黒の線画状態で直しておく方が後々の修正が楽ですよ。