PhotoshopやIllustratorを使ってオリジナルゲームUI制作に挑戦してみましょう。
ゲーム業界を目指されている方にオススメ！
ポートフォリオにスマホやPS4・PS5・SWITCH等のコンシューマー系のゲームUI作品を掲載しましょう！
この記事の目次
当ゲームUI画面制作についての授業概要とゲームUIの作例について解説します。
ひとまず情報を全て出しているので情報量が多くて大変ですが、頑張って読んでください。
何をする授業？
当授業では自身のキャラクターイラストを使ってゲームUIの制作に挑戦します。
以前の授業でバナー制作等を行いましたが、基本的にはその時同様PhotoshopやIllustratorを活用してゲームUIを作成します。
なお、UI制作はみなさんが想像されている以上に時間と手間がかかります。
授業回数は10回ですが時間的余裕はありません。
なるべく効率的に制作を進めていくよう授業に取り組んで下さい。
制作に手間はかかりますが、ポートフォリオに載せる素材として活用できます。
皆さん是非力の入った作品を作成してください！
ゲームUIの作例
下記はみなさんの先輩方が作られたゲームUIの作例です。
ゲームジャンル、縦画面、横画面など、ゲームUIであれば自由です。
授業のスケジュールや作品の仕様・提出形式について記載しています。
授業スケジュール
当授業のスケジュールです。
全10回を予定していますが、制作物する要素が多い内容なので時間的な余裕は全くありません。
最終授業に関してはプレゼンを予定しているので実質9回、計27時間の制作時間と考えてください。
油断していると中途半端な仕上がりのまま終わりを迎える事になります。
せっかくなのでポートフォリオに載せられる品質の作品を作り上げましょう！
各回で進めておくべきフェーズを解説しますが、進捗が芳しくない方は時間を作ってなるべく自主的に進るようにしてください。
| 日程 | 授業内容 |
|---|---|
| ① 2024/11/19 | 授業概要、ゲームUIのネタを練る～ラフ作成① |
| ② 2024/11/26 | ラフ作成②（中間チェック） |
| ③ 2024/12/03 | 画面制作 線画① |
| ④ 2024/12/10 | 画面制作 線画② |
| ⑤ 2024/12/17 | 画面制作 線画③（中間チェック、冬休み中に可能な限り進めて下さい） |
| ⑥ 2025/01/21 | 画面制作 質感付与① |
| ⑦ 2025/01/28 | 画面制作 質感付与② |
| ⑧ 2025/02/04 | 画面制作 質感付与③（中間チェック） |
| ⑨ 2025/02/18 | 画面制作 質感付与④＆調整 |
| ⑩ 2025/02/25 | 提出日、プレゼン |
中間チェックと提出先
全員提出の作品中間チェックを数回行います。
下記リンク先のドライブ内に新規フォルダを作成（番号_氏名）、書き出したJPEGと編集用PSDやAI等、そして参考資料用のUI画像を入れてください。
制作内容や進め方は自由ですが、チェックの提出期限は守ってください。
作品の仕様と提出形式・提出先
「授業の課題制作」ではなく、「自分をアピールする為のポートフォリオに載せる為のハイクオリティなオリジナルゲームUI作品の制作」として授業に臨んでください。
「課題感・授業感満載の、課題の要件を満たしてとりあえず作りました」的な作品ではなく、「こういうのが大好き・やりたくて作りました」が全面的に出てるような作品を目指してください。
- キャラ＆背景は自由（UI制作がメイン、イラスト素材利用OK）
- ドキュメントサイズは下記のいずれかを選択
スマホ①：1920x1080px 72px/inch 画面比率16:9（3840x2160pxでも可）
スマホ②：2436x1125px 72px/inch 画面比率19.5:9（4872x2250pxでも可）
コンシューマー系：3840x2160pxの4Kサイズ - 画面の向き：スマホは縦、横どちらでもOK、コンシューマー系は横
- 作成画面数：1画面以上（基本はホーム画面、複数でも可、数よりクオリティ命）
- 提出ファイルは2種
①：JPEG（最高画質）で書き出した画像
②：元のPSD・AIファイル等（解像度は元々作成していた状態で、レイヤーは整理） - 提出期限：2025/02/25の授業終了まで（下記提出先）
当授業では素材の使用について制限は設けておりません。
商用利用可能、ロイヤリティフリーの素材であれば自由に活用してください。
キャラや背景など、授業中に描き起こす時間的余裕は正直一切ありませんので積極的に活用しましょう。
※ウォーターマーク（透かし）入り素材、著作権に抵触する素材の利用は絶対にしないでください。
背景イラスト素材
商用利用可能で高品質なゲームのUIに適した背景イラスト素材です。
下記は全てライセンスを気にせず活用ができるのでオススメですよ。
授業中に背景イラストを描く余裕は一切無いので、積極的に素材の活用を行ってください。
画面の大半を占める背景とキャラのイメージを早急に固めてください。
キャラクターイラスト素材
商用利用可能で高品質なキャラクターのイラスト素材です。全てロイヤリティフリーですよ。
授業中にキャラを描く時間は一切ありませんので必要な方は活用して下さい。
※キャラを新規作画する場合は授業外の時間を活用して下さい。
UI系の素材
商用利用可能で高品質なUI系素材です。
要は授業で作る部分ですが、制作の参考用に活用するのは全然OKです。ベクターイラスト素材なのでイラレを使った質感付与の方法は非常に参考になると思いますよ。
実際にゲームUIを作成する流れについて解説します。サンプルを制作する上で使用するツールは主にPhotoshopでデザイン・レイアウト・質感付与を行い、Illustratorでアイコンやロゴなどの元素材を作成。
両ツールを併用しながら効率的にゲームUIを作成しましょう！
ゲームUI制作の導入
基本はゲームのホーム画面を作ります。
時間に余裕がある方はタイトルロゴやメインビジュアル、その他画面などを作成し、ポートフォリオに載せられる品質の作品作りを目指して下さい。
デザインの引き出しが少ないまま完全オリジナルデザインで作ろうとすると、どうしてもクオリティの面で物足りない作品に仕上がりがちです。作画同様、まずは良質なデザインを参考にしつつ、オリジナル要素を加えてみましょう。（資料命！シャドウの細部も高品質な資料を見ながら再現しましょう！）
Google検索だけでなくピンタレスト等で「gameUI」等のキーワードで検索し、自身の作りたいゲームUIのサンプルをいくつか入手しておきましょう。
※この記事も是非一度目を通しておいてください。
① ネタとラフを考える
まずは作成するゲーム画面のネタを考えましょう。
剣と魔法のRPG、SF系シューティング、現代世界の推理モノ、戦国時代モノ、学園モノ…etc、自身が好きなゲームやジャンルが最も作品クオリティを高められます。
※ラフ作成のスケジュール感としては2024/11/26中に完成させるのが望ましいです。
早急にキャラと背景（要は全体の世界観）を確定させましょう。最重要項目です。素早く決断しましょう。
ゼロからイラストを描く時間は無いので素材を活用してください。（UIのパーツ制作だけでギリギリ）
※各種素材のリンク一覧はコチラ。
上記が今回のサンプルで作るゲーム画面のサイズです。自身が作りたい画面サイズを設定しましょう。
提出形式のサイズはコチラで確認できます。
Photoshopで作成し、背景とキャラクターを配置しましょう。
「何となくできそう」と資料無しで作ったUIは「何となくUIっぽいもの」でクオリティが乏しくなります。
取り掛かる前に自身が作りたい作品の良質なUI資料を数点集めておきましょう。
なるべく高画質な資料を見つけ、細部まで観察しながら作成するとリアリティとクオリティは高まります。
キャラ、背景のイメージとズレない世界観のゲームUIを目指しましょう。
もちろんSTEP.4のラフ制作を最初から行っても構いません。
要素の名称は作風に合うようにアレンジを加えてみるのも良いでしょう。（例：ガチャ→召喚）
※要素が少な過ぎるスカスカのUIは仕上がりが寂しくなるので要注意です。
全ての要素がぐちゃぐちゃだと後から整理するのが大変、ある程度整理しておきましょう。
ボタン単位でグループ化し、ヘッダー、右サイド、左サイド、フッター、背景などでグループ化し色分けしておくと管理しやすいです。
ラフのサンプルPSDはコチラからダウンロードできます。レイヤー整理の参考にどうぞ。
※ラフが授業中に仕上がらなかった場合、2024/12/03の授業開始時までには仕上げてください。あっという間に最終授業になるので前倒しで進めていくくらいで丁度です。
こういうのやこんな感じのニーア系フラットデザインとマテリアルデザインの中間的作風ならイラレ・フォトショどちらでも構わないですが、色々な質感表現をしたい場合はPhotoshopが作りやすいです。
Illustratorはアイコンやロゴ等のベース素材作成に超便利ですよ。
② 線画を作る
先に作成したラフを元に、ゲームUIの線画作成を行います。
線画にする事で全体的な仕上がりのイメージが見えてきます。
更にボタンなどの各要素のサイズを実機確認する上で便利です。
着彩後に要素のサイズ調整を行うより、線画の段階でサイズを確定させておく事で工数削減が可能。
※線画と着彩を同時に行う方がやり易い方は、上記のような線画作成にこだわる必要はありません。
※線画作成のスケジュール感としては今年中に完成させるのが望ましいです。
何回も言いますが時間が非常に少ないので前倒しで進めていきましょう。
クリスタ、Photoshop、紙にペンで書いたものをスキャン、お好きな方法で作成してください。
フリーのアイコン素材を活用するのもアリですが、自作する方がより作品に適した世界観が表現可能です。
こんな感じで最初から1個1個質感をバチっと仕上げて作る方法もアリですし、お好みの方法で。画面全体の線画を作ってから各パーツに質感付与する方が統一感が出しやすく効率的に進められると思いますよ。
サンプルは塗りを黒、線は無しに設定しています。
アイコン制作はそれなりに労力が必要な作業ですが、頑張って作成してください。
サンプルはPhotoshopでアイコンの質感付与を行いますが、Illustratorで質感付与を行っても構いません。
作りやすい方法で進めてください。
全てベクターイラストなのでIllustratorやPhotoshopで活用できる素材です。
ペースト形式は [ レイヤー、スマートオブジェクト、シェイプレイヤー ] の3つを上手く使い分けるのがオススメです。
シンプルな形状はシェイプ、スマートオブジェクトで。フォトショ上でパーツを個別編集したい場合はレイヤーなど。
イラレからフォトショへコピペする詳しい方法はコチラの記事で詳しく解説しています。
この段階では色を付けず、白黒で作成しておくのがオススメ。
複雑な形状のアイコンはIllustratorで作成、バナーやアイコンの下地となるシンプルな長方形や丸形などはPhotoshopのシェイプで作成すると効率的ですよ。
※サンプルPSDはコチラからダウンロードできます。
オリジナルロゴの場合はアイコン同様にIllustratorで作成し、スマートオブジェクト形式でPhotoshopにペーストしておくと便利です。
※テキストエフェクトの作り方はコチラ。
スマホゲームならスマホで、コンシューマーゲームならテレビなどのモニタ等、実際にプレイする実機端末で確認する事が重要です。気になる個所は白黒の線画状態で直しておく方が後々の修正が楽、着彩後に修正すると工数が余分にかかりますよ。
実際は縦横比の異なる端末に合わせてマージン幅（余白）を調整しますが、モック作成の時点であらかじめ調整しておく事をオススメします。
③ 質感を付けてみよう
線画が完成したら各種要素にPhotoshopで質感を付けていきます。
コチラの記事でも詳しく解説していますが、基本的な質感付与は主に「レイヤースタイル」で行うのが効率的です。（効率的ですが、必ずしもレイヤースタイルによる質感付与にこだわる必要はありません。）
※最初は質感付与に時間と手間がかかります。前倒しで進めていく様に心がけてください。
油断しているとあっという間に時間切れになって中途半端で終わります、マジで。
オレンジ色の円形オブジェクトは単色ではなく、周囲に [ 光彩(内側) ] をほんのり追加。
！の周辺はうっすら [ 境界線 ] を追加。
作るUIの世界観にもよるのでごってりした質感付与が必ずしも正解ではありません。
色々と質感の付け方を試しながら実験しつつ作成しましょう。
イラレで編集可能なベクター系の質感付与はUI素材のデータ参照がすごく参考になります。
完成した作品はぜひポートフォリオに掲載してみましょう！
ゲームUI制作に関するTipsを記載しております。
内容は随時追記予定です。
質感の付け方の例①
同じ形状の線画でも質感の付け方で表現が随分と変わってきます。
Photoshop、Illustrator、クリスタなど、使用するツールは上手く使い分けてください。
- Illustratorで歯車の線画を作成
- Photoshopの楕円形ツールで正円を作成後、グラデーションオーバーレイで背景色を作成
- 楕円形をコピー後に一回り縮小させ、塗り無し、線を黒にして重ねる
- 2の楕円形シェイプにドロップシャドウを追加
- 更にドロップシャドウを追加して影を強調して完成
アイコン自体はイラレのベクター、質感はレイヤースタイルなので解像度を気にする必要が無い。
グラデとシャドウを使った軽い質感付与はクセが少ないデザインなので合わせやすい反面、画面全てがこの質感だと面白みに欠ける。
小さいパーツには適しているけど、大きいパーツだと密度不足なので要修正。
質感の付け方の例②
Illustratorでアニメっぽいアイコンを作る方法の例です。（サンプルAIはコチラからダウンロード可。）
もちろんPhotoshopやクリスタで描いてもOK。
- グラデーションを適用した歯車をコピーし、2つの歯車を [ ブレンドツール ] でブレンド（ブレンドオプションの設定はステップ数：60）
- 前面に歯車をコピーして色変更、真ん中の丸い部分を作成
- 更にシャドウのトーンとなるパーツを追加（レイヤー別にパーツを追加したり元の歯車オブジェクトをコピー後に分割したりクリッピングマスクを活用したり）
- 最後にハイライトのパーツを追加（ブラシツールでちょちょいと乗せたり）
あらかじめUI全体の質感ラフを決めておかないと整合性がとりにくい＆調整がめんどい。
イラレ制作なら解像度を気にする必要無し、フォトショ・クリスタは1000px程度あればOK。（フォトショ・クリスタの場合はアイコン用PSDを別途作成、UIレイアウト用PSDにスマートオブジェクトでレイアウト。）
制作が大変な反面、ユニークなUIに仕上がるので面白い画面が作れる。
質感の付け方の例③
Photoshopやクリスタでアイコン素材を「そのまま描くタイプ」の方法です。
- 線画を描きます。
- 下地を塗ります。
- 影やハイライトを描いて完成、普通に絵を描く手順なので特筆する事は特にありません。
質感の付け方の例④
Illustratorでアイコンベースを作成後、Photoshopのレイヤースタイルで質感付与を行う流れの例です。
作例の一つなのでコレが正解という訳ではありません。自分なりの作り方を編み出してください。
- Illustratorでアイコン素材を作成、Photoshop上で白黒でデザイン・レイアウト作成。（この時点である程度密度のある絵に仕上げておかないと貧相な絵になります。）
- グラデーションオーバーレイで全体的に色を乗せてトーンの確認。
- ドロップシャドウを追加して立体感を追加。
- ベベルとエンボスを追加して更に立体感を追加、パターンの追加や細部の調整。
グラデーション、ドロップシャドウ、ベベルとエンボスがメインでシンプルな構造。
全て同じ質感にするとつまらないので、コチラの作例の様にバナーや他のレイド系アイコン等で質感の差を付けてみると面白いゲームUIにできます。
質感表現の違いの例
左図はコチラの記事で紹介しているゴテッとしたリアルな金属系スタイルを適用した例。
右図はグラデーションオーバーレイでサラッと表現した金属です。
見ての通り、ゲームUIではサラッと目の質感表現が合いやすいですよ。
興味がある方は空き時間にチェックして下さい。
