PhotoshopやIllustratorを使ってオリジナルゲームUI制作に挑戦してみましょう。
この記事の目次
当ゲームUI画面制作についての授業概要とゲームUIの作例について解説します。
何をする授業？
当授業では自身のキャラクターイラストを使ってゲームUIの制作に挑戦します。
以前の授業でバナー制作等を行いましたが、基本的にはその時同様PhotoshopやIllustratorを活用してゲームUIを作成します。
なお、UI制作にはみなさんが想像されている以上に時間と手間がかかります。
授業回数は10回ですが時間的余裕はありません。
なるべく効率的に制作を進めていくよう授業に取り組んでいきましょう。
制作に手間はかかりますが、ポートフォリオに載せる素材として活用できます。
皆さん是非力の入った作品を作成してください。
ゲーム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を作成する流れについて解説します。使用ツールは主にPhotoshopでデザイン・レイアウト・質感付与を行い、Illustratorでアイコンやロゴなどの元素材を作成します。
両ツールを併用しながら効率的にゲームUIを作成しましょう！
ゲームUIの作り方まとめ
デザインの引き出しが少ないまま完全オリジナルデザインで作ろうとすると、どうしてもクオリティの面で物足りない作品に仕上がりがちです。作画同様、まずは良質なデザインを参考にしつつ、オリジナル要素を加えてみましょう。
Google検索だけでなくピンタレスト等で「ゲームUI」等のキーワードで検索し、自身の作りたいゲームUIのサンプルを数点探しておきましょう。
① ネタとラフを考える
まずは作成するゲーム画面のネタを考えましょう。
剣と魔法のRPG、SF系シューティング、現代世界の推理モノ、戦国時代モノ、学園モノ…etc、自身が好きなネタを考えます。
※ラフ作成のスケジュール感としては1/24中に完成させるのが望ましいです。
上記が今回の課題で作るゲーム画面のサイズです。
Photoshopで作成し、背景とキャラクターを配置しましょう。
Photoshopで新規レイヤーを作成し、黒で塗りつぶして不透明度を少し下げる。
その上に新規レイヤーを追加し、白のブラシでラフを追記する、等。方法は問いません。
アナログ、デジタル、自身が進めやすい方法で行ってください。
キャラ、背景のイメージとズレない世界観のゲームUIを目指しましょう。
要素の名称は作風に合うようにアレンジを加えてみるのも良いでしょう。（例：ガチャ→召喚）
ペタッとしたフラットデザインのような作風ならIllustratorでも構わないのですが、質感のある表現をしたい場合は断然Photoshopに軍配が上がります。
Illustratorはアイコンやロゴ等のベース素材作成に使うのが便利ですよ。
② 線画を作る
先に作成したラフを元に、ゲームUIの線画作成を行います。
アイコンなどのベースはIllustratorで作成すると効率的ですよ。
※線画作成のスケジュール感としては2/7、遅くとも2/14中に完成させるのが望ましいです。
クリスタ、Photoshop、紙にペンで書いたものをスキャン、お好きな方法で作成してください。
フリーのアイコン素材を活用するのもアリですが、自作する方がより作品に適した世界観を再現できますよ。
サンプルは塗りを黒、線は無しに設定しています。
アイコン制作はそれなりに労力が必要な作業ですが、頑張って作成してください。
全てベクターイラストなのでIllustratorやPhotoshopで活用できる素材です。
ペースト形式は [ スマートオブジェクト ] がオススメです。
イラレからフォトショへコピペする詳しい方法はコチラの記事で詳しく解説しています。
この段階では色を付けず、白黒で作成しておくのがオススメ。
複雑な形状のアイコンはIllustratorで作成、バナーやアイコンの下地となる長方形や丸形などはPhotoshopのシェイプで作成すると効率的ですよ。
オリジナルロゴの場合はアイコン同様にIllustratorで作成し、スマートオブジェクト形式でPhotoshopにペーストしておくと便利。
スマホゲームならスマホで、コンシューマーゲームならテレビなどのモニタ等、実際にプレイする実機端末で確認する事が重要です。白黒の線画状態で直しておく方が後々の修正が楽ですよ。
③ 質感を付けてみよう
線画が完成したら各種要素にPhotoshopで質感を付けていきます。
コチラの記事でも詳しく解説していますが、基本的な質感付与は主に「レイヤースタイル」で行うのが効率的です。（効率的ですが、必ずしもレイヤースタイルによる質感付与にこだわる必要はありません。）
オレンジ色の円形オブジェクトは単色ではなく、周囲に [ 光彩(内側) ] をほんのり追加。
！の周辺はうっすら [ 境界線 ] を追加。
作るUIの世界観にもよるのでごってりした質感付与が必ずしも正解ではありません。
色々と質感の付け方を試しながら実験しつつ作成しましょう。
※あくまで使い方の参考程度に、デザインは引っ張られないで。
※著作権は当方に帰属するのでPSDの再配布は禁止です。
左図はコチラの記事で紹介しているゴテッとしたリアルな金属系スタイルを適用した例。
右図はグラデーションオーバーレイでサラッと表現した金属です。
見ての通り、ゲームUIではサラッと目の質感表現が合いやすいですよ。
興味がある方は空き時間にチェックして下さい。
進捗確認
2/14まででどの程度まで完成したか一度チェックしたいので、下記Gドライブのリンクに名前を付けたフォルダを作成し、書き出したJPEG画像を授業終了前にアップロードしてください。
※単に進捗確認なので、評価等とは関係ありません。
午前クラス
午後クラス
ゲームUIの制作お疲れさまでした。
授業の最終日は作成したゲームUIのプレゼンを行います。
プレゼンの概要
- 持ち時間：3～5分程度
- 内容：自由
- プレゼンする画面：1点以上
- 後半の授業で実施予定
プレゼンの形式について
プレゼンの形式について、下記は一例です。
- 書き出したJPEG画像をスクリーンに映し、口頭で説明
- あらかじめパワポで内容をまとめておいて、表示切替しながら説明
- Webサイトに発表内容をまとめておいて説明
- 紙資料を配布して説明 …など
お好きな形態で構いません。
※UI画面単体だけでなく、付随するキャラクターや背景などについて深掘りした資料を作るのも可。
プレゼンの内容について
下記はプレゼン内容の一例です。
※下記内容にこだわりすぎると似たり寄ったりの発表になるので、あくまで参考程度にしてください。
- 作品の概要
- ゲームのプラットフォーム（スマホ系、PS5やSwitch等のコンソール系など）
- 制作意図
- 特徴やオススメポイント
- 力を入れた点、苦労した点など
どんな内容でも構いませんが、テンプレ通りではなくオリジナリティの高い内容が望ましいです。
事前に内容をメモまとめておくとスムーズに発表できますよ。
短すぎず長すぎず、いい感じの長さにまとめておいてください。
作品の提出場所
下記GoogleドライブにPSDと書き出したJPEGを提出してください。
午前クラス
午後クラス
作品制作に対する意識
授業全般に言える事ですが「単に授業の課題をこなす」ではなく、「自身がクリエイティブ業界でプロとして仕事を得るために必要な素材作り」という意識で作品制作を行う事で、今後の進路により多くの選択肢を作れる可能性が高まります。
授業に参加する目的は人によって様々ですが、要は「より大きなお金を稼ぎたい、注目されたいなどを実現させる確率が高まる」という話に繋がります。
ちょっとした意識で大幅に変わりますよ。
ポートフォリオの素材として見る
イラストやゲームUIなど、作品単体を見せるのも多いにアリです。
しかし多くの方はポートフォリオ（詳しくはコチラの記事で解説しています）という形で自身の作品を1冊のファイルにまとめ上げます。
イラスト単体、ゲームUI単体はあくまでポートフォリオ全体を構成している素材の一つ。
単体作品を淡々と見せるのもアリですが、個々のイラストやUI作品を連動させながら大きなコンテンツを作る、みたいな構成も面白いかもしれませんね。
頭の片隅にポートフォリオの存在を入れつつ、日々の作品制作に臨むのも考え方の一つとしてアリですよ。
見ず知らずの赤の他人にプレゼン
ポートフォリオは見ず知らずの赤の他人に、自身の力量やできる事、好きな事などをプレゼンをする為の素材の一つです。もちろん面接や、中には実技試験や課題制作等もあるかもしれません。
しかし多数の応募者を最初のふるいにかける基準は「ポートフォリオ」が主に占めています。
中途半端な仕上がりのポートフォリオは問答無用でバッサリ切り捨てられるので、クオリティ至上主義でポートフォリオ制作に取り掛かられる事をオススメします。
ポートフォリオのテンプレート
初めてポートフォリオを作られる方はコチラの記事に手順を記載しています。
クオリティで悩んでいる方は下記テンプレートを活用するのも一つの手ですよ。