fantiaはじめました!無料素材やAI、PSDを配布中です。

【Photoshop】ゲームのUI(ユーザーインターフェース)を作ってみよう 前編

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

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

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

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

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

ゲームのUI

ゲームのUI(ユーザーインターフェース)にはキャラクターをはじめ、背景、文字、アイコン、レイアウト等、様々な要素を組み合わせて構成されています。よって作るにはソコソコの労力を必要とします。でもコツコツと進めていけば必ず完成します。根気が命!

Illustrator(イラストレーター)でも作れますが、個人的にはPhotoshop(フォトショップ)の方が圧倒的に作りやすいかな、と思います。特にUI(ユーザーインターフェース)に質感を付けたい場合はフォトショが断然オススメです。
フラットデザインならイラレ、フォトショどちらでも。基本的に当サイトではフォトショでの制作を推奨します。
ちなみに 細かなアイコン類はイラレで作成してフォトショにインポートする方が 手早く進められます。(※コチラ後述します。)

制作する画面の仕様

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

ゲームのネタを想像する

どんなゲームにしたいか、何となくイメージしてみます。自身で作ってみたいゲームを想像しながら考えてみましょう。
メモ帳やA4用紙にアイディアを書き出します。最初は適当でOK!しかしきったねぇ字だなぁ…

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

絵を用意する

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

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

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

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

画面構成を考える

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

スマホゲーっぽく要素を置きましょう。今回作るのはマイページだけなので他のページの事は考えずに作ります。まずはペイントソフト等で適当に好き勝手に要素を置きましょう!黒に塗りつぶしたレイヤーの不透明度を下げてキャラと背景を暗くするとラフが見やすくなります。

実際のスマホゲームの画面を作る時はxd等で遷移先を含めたワイヤーフレームをキッチリ作成してから進めます。でも今回は必要ありません。こまけぇこたぁ考えずに好きに要素を置きましょう!

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

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

ラフを元にフォトショップでシェイプツールと文字ツールでレイアウトをします。画面内に載せる要素を全て書き出します。アイコン類も「ico」みたいな感じでブラシでザクっと適当に書いて配置します。
メールとかの「新着表示」を入れておくと、より「っぽさ」が出ます。小さな要素ですが大事です。
名称は好き勝手入れてOKです。貴方だけのゲーム画面、中二病を炸裂させちゃいましょう!

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

アイコンを作成する

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

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

フラットなアイコン類(フッターや右側のボタン、ヘッダーの右端)はIllustrator(イラストレーター)での作成がオススメです。ペンツール図形ツールパスファインダ等を使って左図のようにイラレで単色で作成しておきます。イラレが無ければPhotoshop(フォトショップ)でも作れますが、イラレが断然便利です。
イラレの使い方は下記で解説しております(随時追加予定)。ゼロから始めるIllustrator イラレ初心者からプロを目指す!
なおイラレの最安導入方法は下記からどうぞ。【Illustrator】イラレを最安で購入する方法と導入手順を徹底解説

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

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

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

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

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

UIの下絵が完成

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

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

フリーフォントを活用する
下記記事でフリーで使える素敵なフォントを紹介しておりますので是非ご覧ください。フォントを変えるだけでオシャレになりますよ!
【無料・商用利用可】フリーで使える汎用フォント20選!【2020年度版フリーフォント】

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

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

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

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

PSDを無料配布中です!

fantiaで当記事のPSDデータを無料配布しております。全ての要素をレイヤー分けして編集可能な状態になっていますよ。
PSDを参考にしながら作り方を学ぶとより理解が深まるかと思います!

中編に続く

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

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

なお、入力した「だけ」のデフォルト文字をそのまま使うのはあまりよろしくないので、調整を入れるクセを付けておく事をオススメします。入力した「だけ」の文字は「デザインされていない」ので気を付けてください。もし入力した「だけ」の状態で完成として作品集に載せると「おっ、ラフかな?ほいでほいで?」となってしまうかもしれません。

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

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

併せて読んでみませんか?
下記記事でポートフォリオについて解説しております。ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。A4サイズのテンプレートも無料で配布しておりますのでご活用ください。

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