ポートフォリオの作り方をゼロから徹底解説

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

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

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

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

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

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

ゲームのUI

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

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

当UI制作にはどの程度のPhotoshop知識が必要?
当記事はある程度のフォトショ知識がある事を前提としております。
クリスタで絵を描くのは得意たけどフォトショは…という方は左のバナーを作れるくらいの知識があれば必要十分です。
バナー制作未経験でも作っていくうちに慣れてきますよ!
なお、ゼロから始めるバナー制作はコチラで解説しています。

最低限Photoshopが必須

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshopが必須です。
Adobe公式サイトから導入しておきましょう。Photoshop単体はフォトプランが最もお得です。

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

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

本気でデザインをするならコンプリートプラン一択
PhotoshopだけでもゲームUIは制作可能です。
ただ本気で行うならIllustratorでアイコン素材を作成し、PhotoshopへインポートしUI作成。
PSDをAcrobatで変換など、本気で制作を行うのであればコンプリートプランは必須です。
なお、学生さんや教職員の方は学割コンプリートプランが最安・最強です。

制作する画面の仕様

今回は横幅1920px、高さ1080px、解像度72、RGBカラーで作成してみたいと思います。
フォトショの新規作成や保存方法は下記から確認できます。【Photoshop】ファイル形式の種類と特徴について徹底解説【PSD,JPG,PNG等の違いと活用例】

ゲームのネタを想像する

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

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

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

絵を用意する

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

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

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

背景はジャン・ポポさんの作品を利用させていただきました。最高です!
クリスタを使った差分イラストの描き方は左記で解説しています。興味がある方は併せてチェックしてください!

画面構成を考える

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

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

Photoshopがまだ未導入の方はAdobe公式サイトから入手しておきましょう。

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

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

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

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

ワイヤー作成とデザイン制作に便利なAdobeXD
Adobe Xdはワイヤーフレームやプロトタイプをサクッと制作する上で非常に便利なツールです。
まだ導入されていない方は是非入れておきましょう!

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

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

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

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

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

こまめなレイヤー整理は超大事
レイヤー整理を怠らないようにしておきましょう。
要素が多くなるので随時整理しておかないと「制作中に訳が分からなく」なってきます。
今回は大きく分けて「ヘッダー」、「フッター」、「左ボタン」、「右ボタン」、「バナー1」、「バナー2」で親グループを作成し、各グループの中に細かい要素をグループ化して作成しています。
レイヤー操作の基礎はコチラで解説しています。

アイコンを作成する

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

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

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

イラレが無ければPhotoshop(フォトショップ)でも作れますが、イラレが断然便利です。

イラレの使い方は下記で解説しております。
(随時追加予定)ゼロから始めるIllustrator イラレ初心者からプロを目指す!
Illustratorが無い方はAdobe公式サイトから導入しておきましょう。

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

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

STEP.1
イラレで対象アイコンをコピー
イラレの画面でフォトショに持っていきたいアイコンを [ 選択ツール(V) ] で選択し、[ Ctrl + C ] でコピーします。

Adobe公式サイトからIllustratorを導入できます。
STEP.2
フォトショでペースト
フォトショを開いて [ Ctrl + V ] でペーストします。
STEP.3
シェイプレイヤーを選択
ペースト形式が問われるので一番下の [ シェイプレイヤー ] を選択します。
FINISH
コピペ完了
イラレからフォトショへアイコンをシェイプレイヤーとしてコピペする事ができました。シェイプなので拡大縮小をしても劣化が起こりません。

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

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

UIの下絵が完成

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

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

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

下記記事で最強素材サイトのAdobeStockやフリーで使える素敵なフォントを紹介しております。
ちょこっとフォントを変えるだけでもオシャレになりますよ!

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

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

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

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

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

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

PSDを配布中です!

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

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

fantiaからダウンロードする

PSDを開くにはPhotoshopが必要
サンプルPSDを開くにはPhotoshopが必要です。
Adobe公式サイトからPhotoshopを導入しておきましょう。
なお、Photoshop単体はフォトプランが最もお得ですよ。

中編に続く

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

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

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

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

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

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

ワンランク上のゲームUI素材

ゲームUI制作を加速させるワンランク上の素材を厳選して紹介します。
全て商用利用可能!
手間のかかるゲームUI制作の手間と劇的に軽減できます。

全48点の厳選ゲームUI素材はコチラで紹介しておりますので、是非ご覧ください!

Illustration of the fairy forest at night with flashlights and e

妖精の森がテーマのUIテンプレートです。
ウィンドウ、ボタン、アイコン、ゲージなど、UI制作でよく使う素材は一通り含まれているので初心者の方にもオススメ!

ダウンロード
※この作者のその他ゲームUI素材は コチラ

User interface the playing field for a computer game

タイトルロゴだけ追加したらグラフィックの仕事は終わり!みたいなUIテンプレート一式です。
そのままパズルゲームとして使えるレベルですね。

ダウンロード
※この作者のその他ゲームUI素材は コチラ

Steampunk Game GUI

スチームパンク風のUIテンプレートです。
形状、質感共にハイレベルな仕上がりでそのまま使えます。

ダウンロード

Sci-fi Game GUI Pack

カジュアルなSF系ゲームに適したUIテンプレートです。
ウィンドウ、アイコン、ボタン、ゲージ等、よく使う素材は網羅されているので使い勝手が抜群!

ダウンロード
※この作者のその他ゲームUI素材は コチラ

Mobile game graphical user Interface GUI. Design, buttons and icons. Vector illustration.

ボタンやアイコン、枠など、一式セットになったUIテンプレートです。
要素の視認性も良く、様々なテイストの絵に合うUIキットです。

ダウンロード
※この作者のその他ゲームUI素材はコチラ

set of black and white infographic elements. Head-up display elements for the web and app. Futuristic user interface.

UIキットの絵が既にカッコいいSF系UIテンプレートです。正面に映ったUIを両手で触るようなシーンでありそうな絵ですね。

ダウンロード

Set of vector icons, objects, things, item. Game concept and design. Design element. Magical magic. Game assets and tile. Fantasy, fiction style.

剣や盾、兜にポーションなど、ファンタジー系のゲームでよく使うアイコン素材です。
汎用性が高い素材です。

ダウンロード
※この作者のその他ゲームUI素材は コチラ

Set cartoon wooden isometric chests decorated silver with golden trophies, elixirs, potions, skull, money, coins and gems for computer game. Vector illustration on gray background.

よく使う宝箱の素材一式です。
閉じた宝箱、開いた宝箱はもちろん、宝箱の中身も豊富で使い勝手バツグン!

ダウンロード
※この作者のその他ゲームUI素材は コチラ

Interface buttons set for space games or apps

カジュアルなSFゲームに適したUIキットです。
SFSFしていなく、適度に可愛さがあるのが良いですね。

ダウンロード
※この作者のその他ゲームUI素材は コチラ

ゲームUI制作を300%加速させるテンプレート
下記でゲームUI制作を劇的に加速させるテンプレート素材を紹介しています!
併せて読んでみませんか?
下記記事でポートフォリオについて解説しております。
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。

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

Illustratorは活用されていますか?
Photoshopだけでなく、Illustratorも活用されているでしょうか?
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得!
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
ゼロから始めるPhotoshop目次

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
Photoshopとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
フォトショでよく使う基本操作
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

フォトショ応用操作

Photoshopでバナー広告を作る方法を完全解説
Photoshopで人物の表情を簡単に変える方法
【前編】スマホゲームのUIを作ってみよう(構成~下絵まで)
【中編】スマホゲームのUIを作ってみよう(文字やアイコンに質感を付ける)
【後編】スマホゲームのUIを作ってみよう(バナーやボタンの作り方)
Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
GDNで有効的なサイズのバナー広告の作り方を完全解説
複数サイズのバナーを効率的に作成する方法
Photoshopで写真をインスタグラム風に加工する方法
レイヤースタイルを使って水滴や汗を描く方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
レンズフレアを追加して印象的な写真に仕上げる方法
RGBずらし(色ずれ)を使ったTikTok風ロゴや印象的な画像の作り方
写真をアメコミ風のイラストにする方法を徹底解説
【間違い探し動画】初心者向けアハ体験動画の作り方
昼間の写真を夜に変更する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
写真を水彩画風に加工する方法を徹底解説

商用可能なフォトショ用素材

文字に高品質なエフェクトを追加するモックアップ
写真を様々なグラフィックに変えられるエフェクト50選
写真を短時間で大変身させる高クオリティなエフェクト51選
画像をヴィンテージ風にできるエフェクトモックアップ50選
人物が煙になる表現ができるエフェクトモックアップ

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法

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

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!