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

【ゲーム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制作で行う所謂「ユーザビリティ」の確認作業ですね。
スマホゲームならスマホで、コンシューマーゲームならテレビなどのモニタ等、実際にプレイする実機端末で確認する事が重要です。白黒の線画状態で直しておく方が後々の修正が楽ですよ。

③ 質感を付けてみよう

線画が完成したら各種要素にPhotoshopで質感を付けていきます。
コチラの記事でも詳しく解説していますが、基本的な質感付与は主に「レイヤースタイル」で行うのが効率的です。(効率的ですが、必ずしもレイヤースタイルによる質感付与にこだわる必要はありません。)

STEP.1
スマートオブジェクトを準備
左図はIllustratorで作成したアイコンをPhotoshopへスマートオブジェクト形式でコピーしたサンプルです。
STEP.2
下地に質感付与①
レイヤーパネル下部にある [ fx ] からレイヤースタイルが追加できます。

最下部の菱形オブジェクトに [ グラデーションオーバーレイ ] と [ 境界線 ] を追加しました。
STEP.3
下地に質感付与②
手前の一回り小さい菱形オブジェクトも同様に [ グラデーションオーバーレイ ] と [ 境界線 ] 、そして [ 光彩(内側) ] を追加しました。
STEP.4
文字やその他要素に質感付与
生命の石と宝石アイコンの周囲に [ 境界線 ] を追加して視認性を向上。
オレンジ色の円形オブジェクトは単色ではなく、周囲に [ 光彩(内側) ] をほんのり追加。
!の周辺はうっすら [ 境界線 ] を追加。
同じ要素でもグラデーションと単色、光彩や境界線の有無などで見た目や視認性が大幅に変わります。

作るUIの世界観にもよるのでごってりした質感付与が必ずしも正解ではありません。
色々と質感の付け方を試しながら実験しつつ作成しましょう。
OMAKE
PSDデータ
レイヤースタイルの使い方の参考用としてサンプルPSDを活用したい方はコチラからダウンロードしてください。(だいぶ前に作ったデータなのでスマートオブジェクトではなくシェイプオブジェクトで作っています。)

※あくまで使い方の参考程度に、デザインは引っ張られないで。
※著作権は当方に帰属するのでPSDの再配布は禁止です。
メタル系はサラッとグラデーションがおすすめ
金や銀など、メタリックな質感のUIを作る際は「サラッとしたグラデーション」がオススメです。
左図はコチラの記事で紹介しているゴテッとしたリアルな金属系スタイルを適用した例。
右図はグラデーションオーバーレイでサラッと表現した金属です。
見ての通り、ゲームUIではサラッと目の質感表現が合いやすいですよ。
ゲームUIで使えそうなフォトショTips
ゲームUI制作に使えるPhotoshopのレイヤースタイルに関するTipsです。
興味がある方は空き時間にチェックして下さい。

進捗確認

2/14まででどの程度まで完成したか一度チェックしたいので、下記Gドライブのリンクに名前を付けたフォルダを作成し、書き出したJPEG画像を授業終了前にアップロードしてください。

※単に進捗確認なので、評価等とは関係ありません。

午前クラス
午後クラス

作品のプレゼンについて

ゲームUIの制作お疲れさまでした。
授業の最終日は作成したゲームUIのプレゼンを行います。

プレゼンの概要

  • 持ち時間:3~5分程度
  • 内容:自由
  • プレゼンする画面:1点以上
  • 後半の授業で実施予定

プレゼンの形式について

プレゼンの形式について、下記は一例です。

  • 書き出したJPEG画像をスクリーンに映し、口頭で説明
  • あらかじめパワポで内容をまとめておいて、表示切替しながら説明
  • Webサイトに発表内容をまとめておいて説明
  • 紙資料を配布して説明 …など

お好きな形態で構いません。
※UI画面単体だけでなく、付随するキャラクターや背景などについて深掘りした資料を作るのも可。

プレゼンの内容について

下記はプレゼン内容の一例です。
※下記内容にこだわりすぎると似たり寄ったりの発表になるので、あくまで参考程度にしてください。

  • 作品の概要
  • ゲームのプラットフォーム(スマホ系、PS5やSwitch等のコンソール系など)
  • 制作意図
  • 特徴やオススメポイント
  • 力を入れた点、苦労した点など

どんな内容でも構いませんが、テンプレ通りではなくオリジナリティの高い内容が望ましいです。

事前に内容をメモまとめておくとスムーズに発表できますよ。
短すぎず長すぎず、いい感じの長さにまとめておいてください。

作品の提出場所

下記GoogleドライブにPSDと書き出したJPEGを提出してください。

午前クラス
午後クラス

おまけ:ポートフォリオについて

作品制作に対する意識

授業全般に言える事ですが「単に授業の課題をこなす」ではなく、「自身がクリエイティブ業界でプロとして仕事を得るために必要な素材作り」という意識で作品制作を行う事で、今後の進路により多くの選択肢を作れる可能性が高まります。

授業に参加する目的は人によって様々ですが、要は「より大きなお金を稼ぎたい、注目されたいなどを実現させる確率が高まる」という話に繋がります。

ちょっとした意識で大幅に変わりますよ。

ポートフォリオの素材として見る

イラストやゲームUIなど、作品単体を見せるのも多いにアリです。
しかし多くの方はポートフォリオ(詳しくはコチラの記事で解説しています)という形で自身の作品を1冊のファイルにまとめ上げます。

イラスト単体、ゲームUI単体はあくまでポートフォリオ全体を構成している素材の一つ。
単体作品を淡々と見せるのもアリですが、個々のイラストやUI作品を連動させながら大きなコンテンツを作る、みたいな構成も面白いかもしれませんね。

頭の片隅にポートフォリオの存在を入れつつ、日々の作品制作に臨むのも考え方の一つとしてアリですよ。

見ず知らずの赤の他人にプレゼン

ポートフォリオは見ず知らずの赤の他人に、自身の力量やできる事、好きな事などをプレゼンをする為の素材の一つです。もちろん面接や、中には実技試験や課題制作等もあるかもしれません。

しかし多数の応募者を最初のふるいにかける基準は「ポートフォリオ」が主に占めています。

中途半端な仕上がりのポートフォリオは問答無用でバッサリ切り捨てられるので、クオリティ至上主義でポートフォリオ制作に取り掛かられる事をオススメします。

ポートフォリオのテンプレート

初めてポートフォリオを作られる方はコチラの記事に手順を記載しています。
クオリティで悩んでいる方は下記テンプレートを活用するのも一つの手ですよ。

  • ポートフォリオのおすすめテンプレートはコチラ
  • InDesign用のポートフォリオテンプレートはコチラ
  • Photoshop用のポートフォリオテンプレートはコチラ
  • Illustrator用のポートフォリオテンプレートはコチラ