クリエイターなら絶対に登録しておきたい転職エージェント5選!

【Photoshop】ゲームのUIの作り方【PSD有り】

この記事を読むのに必要な時間は約 20 分です。

スマホゲームのUI(ユーザーインターフェース)をPhotoshop(フォトショップ)で作る方法について詳しく解説します。

ゲーム会社に応募する際にオリジナルキャラを使ったスマホゲームのUI(ユーザーインターフェース)をポートフォリオに載せておくと、イラスト単体を載せるより採用担当者の目に留まる可能性が高まります。

初心者の方にも分かりやすいように順を追ってゲームUIの作り方を解説いたします。
ゲーム業界への就職を考えられている学生さんにオススメの内容です。

「ぼくのかんがえたスマホゲーム」のマイページ画面を作ってみましょう!

MEMO
当記事はある程度のフォトショ知識がある事を前提としております。
クリスタで絵を描くのは得意たけどフォトショは…という方は下記記事のフォトショップでのバナー制作方法くらいの知識があれば大丈夫です。
作っていくうちに慣れてきますよ!【Photoshop】フォトショでバナー広告を作る方法を詳しく解説

ゲームのUI

ゲームのUI(ユーザーインターフェース)にはキャラクターをはじめ、背景、文字、アイコン、レイアウト等、様々な要素を組み合わせて構成されています。

よって作るにはソコソコの労力を必要とします。
でもコツコツと進めていけば必ず完成します。根気が命!

なおゲーム系のUIはIllustrator(イラストレーター)でも作れますが、個人的にはPhotoshop(フォトショップ)の方が圧倒的に作りやすいかな、と思います。
特にUI(ユーザーインターフェース)に質感を付けたい場合はフォトショが断然オススメです。

フラットデザインならイラレ、フォトショどちらでも。
基本的に当サイトではフォトショでの制作を推奨します。

ちなみに 細かなアイコン類はイラレで作成してフォトショにインポートする方が 手早く進められます。
(※コチラ後述します。)

Photoshopが必須

当コンテンツで紹介するゲームUI制作にはPhotoshopを使います。
未導入の方はAdobe公式サイトからダウンロードしておきましょう。

Photoshopを最安で導入しよう!
公式サイトのフォトプランが最もお得にPhotoshopを導入する方法です。
アマゾン より断然安心できますし、 Adobe Stock が初月無料!
フォトショ単品も良いですが、他のアプリも使うなら断然コンプリートプランがお得なのでオススメです!

制作する画面の仕様

今回は横幅1920px、高さ1080px、解像度72、RGBカラーで作成してみたいと思います。
フォトショの新規作成や保存方法は下記から確認できます。【Photoshop】フォトショの操作画面、新規作成と保存、各種ファイル形式について詳しく解説

ゲームのネタを想像する

どんなゲームにしたいか、何となくイメージしてみます。自身で作ってみたいゲームを想像しながら考えてみましょう。

メモ帳やA4用紙にアイディアを書き出します。
最初は適当でOK!
しかしきったねぇ字だなぁ…

超ざっくりなメモですが、私の場合は剣と魔法の世界のRPGみたいな感じで作ってみたいと思います。

絵を用意する

キャラクターの絵を準備します。
背景透過のPNGで書き出しておくと便利です。
無い場合はフリーの素材でOKです。

今回作るサンプルは私が学生時代に作成した没キャラを再利用しています。
今回のUI制作は5時間を目安に作成、キャラの作画を含めると工数が増えるので楽をします。

「note:ノート」黒魔術師的な設定です。そしてカラスが本体、キルバーンみたいな設定ですね。
なので女性部分を攻撃しても再生します。
素材は土くれ。
「れんぞくま」が使えます。わたくし、フレアが得意ですの、ほほっ。カァー!カァー!

背景はジャン・ポポさんの作品を利用させていただきました。最高です!

画面構成を考える

ざっくりとレイアウトを考える

スマホゲーっぽく要素を置きましょう。

今回作るのはマイページだけなので他のページの事は考えずに作ります。
まずはペイントソフト等で適当に好き勝手に要素を置きましょう!

黒に塗りつぶしたレイヤーの不透明度を下げて、キャラと背景を暗くし、手前に白で要素をラクガキするとラフが見やすくなります。

実際のスマホゲームの画面を作る時はxd等で遷移先を含めたワイヤーフレームをキッチリ作成してから進めます。でも今回は単品画面なので必要ありません。

こまけぇこたぁ考えずに好きに要素を置きましょう!

ワイヤー作成とデザイン制作に便利なAdobeXD
AdobeXDは左バナーのリンク先から導入できます。

ワイヤーフレームを制作する上で非常に便利なツールなので、まだ導入されていない方は是非入れておきましょう!

文字列も含め、要素を全て書き出す

ラフを元にフォトショップでシェイプツールと文字ツールでレイアウトをします。

画面内に載せる要素を全て書き出します。
アイコン類も「ico」みたいな感じでブラシでザクっと適当に書いて配置します。

メールとかの「新着表示」を入れておくと、より「っぽさ」が出ます。
小さな要素ですが大事です。

名称は好き勝手入れてOKです。
貴方だけのゲーム画面、中二病を炸裂させちゃいましょう!

フォトショの文字ツールやシェイプツールを詳しく知りたい
MEMO
レイヤー整理を怠らないようにしておきましょう。
要素が多くなるので随時整理しておかないと「制作中に訳が分からなく」なってきます。
今回は大きく分けて「ヘッダー」、「フッター」、「左ボタン」、「右ボタン」、「バナー1」、「バナー2」で親グループを作成し、各グループの中に細かい要素をグループ化して作成しています。

アイコンを作成する

色んなアイコン類が必要になります。アイコン類を作成していきましょう。

汎用的なアイコンはフリー素材を活用して時間短縮するのも手です。
下記記事で商用利用できる無料アイコンを紹介しておりますのでご覧ください。

ロゴやアイコン類の制作はイラレが強い

フラットなアイコン類(フッターや右側のボタン、ヘッダーの右端)はIllustrator(イラストレーター)での作成がオススメです。
ペンツール図形ツールパスファインダ等を使って左図のようにイラレで単色で作成しておきます。

イラレが無ければPhotoshop(フォトショップ)でも作れますが、イラレが断然便利です。
イラレの使い方は下記で解説しております。
(随時追加予定)ゼロから始めるIllustrator イラレ初心者からプロを目指す!なおイラレの最安導入方法は下記からどうぞ。
【Illustrator】イラレを最安で購入する方法と導入手順を徹底解説

イラレからフォトショにインポート可能

Illustrator(イラストレーター)で作成したアイコンをPhotoshop(フォトショップ)へ簡単に持っていく事ができます。

STEP.1
イラレで対象アイコンをコピー
イラレの画面でフォトショに持っていきたいアイコンを [ 選択ツール(V) ] で選択し、[ Ctrl + C ] でコピーします。
STEP.2
フォトショでペースト
フォトショを開いて [ Ctrl + V ] でペーストします。
STEP.3
シェイプレイヤーを選択
ペースト形式が問われるので一番下の [ シェイプレイヤー ] を選択します。
FINISH
コピペ完了
イラレからフォトショへアイコンをシェイプレイヤーとしてコピペする事ができました。シェイプなので拡大縮小をしても劣化が起こりません。

この機能はよく使うので覚えておくと便利ですよ。

Illustratorが必須
AIを編集するにはAdobe Illustrator(アドビ イラストレーター)が必須です。公式サイトからダウンロードしておきましょう。
コンプリートプランが最強に便利ですが、Illustrator単品は次のリンクから入手できます。

アイコンの配置とサイズを調整

UIの下絵が完成

先の方法でイラレからフォトショへアイコンをコピペして配置します。

入力した「だけ」の文字だと面白くないので、世界観に合うフォントを選びます。
フォント、サイズの調整、文字間調整を少し入れるだけで「っぽく」なってきた気がしませんか?

ここまでの制作でおよそ2時間程です。

フリーフォントを活用する
下記記事でフリーで使える素敵なフォントを紹介しておりますので是非ご覧ください。
フォントを変えるだけでオシャレになりますよ!
【無料・商用利用可】フリーで使える汎用フォント20選!【2020年度版フリーフォント】
最強素材サイトのAdobe Stock
数ある素材サイトの中でAdobe Stockの品質はピカイチ!
Adobe製品の高品質なテンプレートが大量にあるので、制作の効率が劇的に向上します。

一通りサイズ調整を行い全ての要素を配置しました。
イラスト制作で例えるなら「線画」が完成した感じでしょうか。
UI(ユーザーインターフェース)の下絵が完成しました。

何となく全体像が見えてきましたね。

MEMO
さらにこだわりたい方は、実機のスマホで要素のサイズを確認してみると良いでしょう。
PC画面で見るのとスマホの小さな画面で見るのとでは印象が変わってきます。
細かく作る前に要素のサイズを実機確認して整えておくと後の修正が少なくなります。

UIだけ表示させてみると…

キャラと背景を非表示にしてUI(ユーザーインターフェース)だけを表示させてみました。
単色なので地味ですね。線画の状態です。

次は質感を付けていきましょう。

PSDを無料配布中です!

fantiaで当記事のPSDデータを無料配布しております。全ての要素をレイヤー分けして編集可能な状態になっていますよ。

PSDを参考にしながら作り方を学ぶと、より理解が深まるかと思います!

fantiaからダウンロードする

Photoshopが必須
PSDを編集するにはAdobe Photoshop(アドビ フォトショップ)が必須です。公式サイトからダウンロードしておきましょう。
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

中編に続く

前編の終了です、おつかれさまでした。

今回の内容は文字ツールとシェイプツールの使い方がミソです。

なお、入力した「だけ」のデフォルト文字をそのまま使うのはあまりよろしくないので、調整を入れるクセを付けておく事をオススメします。

入力した「だけ」の文字は「デザインされていない」ので気を付けてください。
もし入力した「だけ」の状態で完成として作品集に載せると「おっ、ラフかな?ほいでほいで?」となってしまうかもしれません。

フォントを変える、サイズを変える、文字間を変える、ちょっと触るだけでイメージがガラッと変わりますので文字パネルをガンガン触ってみましょう!

中編で質感の付け方について解説します。

ポートフォリオ制作&転職を最短で実現しよう

MATCHBOX はマイナビクリエイターが提供している無料ポートフォリオ作成サービスです。
作品とテキストを入れるだけでポートフォリオが作成できます。PDF出力ができるので紙媒体とWeb媒体の両方を同時に作成可能!

無料で使えるMATCHBOX を活用し、最短でポートフォリオ制作とクリエイティブ業界への転職を実現しましょう。
併せて読んでみませんか?
下記記事でポートフォリオについて解説しております。
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。

A4サイズのテンプレートも無料で配布しておりますのでご活用ください。

Photoshopを最安で導入しよう

オススメはコンプリートプラン

単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。Photoshop、Illustrator、Acrobatを単体で使うと、費用がコンプリートプランと同等かそれ以上になります。
初めからコンプリートプランを選択する方が断然お得&便利ですよ。

学生・教職員なら

学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題!

Photoshop単品ならフォトプランが最安

Photoshopを使うならAdobe公式のフォトプランが一番お得です。

アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。

制作を加速させる最強素材サイト

最強素材サイトであるAdobeStockがあると制作の効率性、品質がさらに高まります。
無料素材とは一味違うので手を加える手間が劇的に省けますよ。

ゼロフォトもくじ

ゼロから始めるPhotoshopのもくじです。

目次一覧
ゼロから始めるシリーズ

IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。