この記事を読むのに必要な時間は約 19 分です。
スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法について詳しく解説します。ゲーム会社に応募する際にオリジナルキャラを使ったスマホゲームのUI（ユーザーインターフェース）をポートフォリオに載せておくと、イラスト単体を載せるより採用担当者の目に留まる可能性が高まります。
初心者の方にも分かりやすいように順を追ってゲームUIの作り方を解説いたします。ゲーム業界への就職を考えられている学生さんにオススメの内容ですよ。
「ぼくのかんがえたスマホゲーム」のマイページ画面を作ってみましょう！
【Photoshop】フォトショでバナー広告を作る方法を詳しく解説この記事の目次
ゲームのUI（ユーザーインターフェース）にはキャラクターをはじめ、背景、文字、アイコン、レイアウト等、様々な要素を組み合わせて構成されています。よって作るにはソコソコの労力を必要とします。でもコツコツと進めていけば必ず完成します。根気が命！
Illustrator（イラストレーター）でも作れますが、個人的にはPhotoshop（フォトショップ）の方が圧倒的に作りやすいかな、と思います。特にUI（ユーザーインターフェース）に質感を付けたい場合はフォトショが断然オススメです。
フラットデザインならイラレ、フォトショどちらでも。基本的に当サイトではフォトショでの制作を推奨します。
ちなみに 細かなアイコン類はイラレで作成してフォトショにインポートする方が 手早く進められます。（※コチラ後述します。）
フォトショの新規作成や保存方法は下記から確認できます。
【Photoshop】フォトショの操作画面、新規作成と保存、各種ファイル形式について詳しく解説
メモ帳やA4用紙にアイディアを書き出します。最初は適当でOK！しかしきったねぇ字だなぁ…
超ざっくりなメモですが、私の場合は剣と魔法の世界のRPGみたいな感じで作ってみたいと思います。
無い場合はフリーの素材でOKです。
今回作るサンプルは私が学生時代に作成した没キャラを再利用しています。
今回のUI制作は5時間を目安に作成、キャラの作画を含めると工数が増えるので楽をします。
「note：ノート」黒魔術師的な設定です。そしてカラスが本体、キルバーンみたいな設定ですね。なので女性部分を攻撃しても再生します。
素材は土くれ。
「れんぞくま」が使えます。わたくし、フレアが得意ですの、ほほっ。カァー！カァー！
背景はジャン・ポポさんの作品を利用させていただきました。最高です！
ざっくりとレイアウトを考える
スマホゲーっぽく要素を置きましょう。今回作るのはマイページだけなので他のページの事は考えずに作ります。まずはペイントソフト等で適当に好き勝手に要素を置きましょう！黒に塗りつぶしたレイヤーの不透明度を下げてキャラと背景を暗くするとラフが見やすくなります。
実際のスマホゲームの画面を作る時はxd等で遷移先を含めたワイヤーフレームをキッチリ作成してから進めます。でも今回は必要ありません。こまけぇこたぁ考えずに好きに要素を置きましょう！
文字列も含め、要素を全て書き出す
ラフを元にフォトショップでシェイプツールと文字ツールでレイアウトをします。画面内に載せる要素を全て書き出します。アイコン類も「ico」みたいな感じでブラシでザクっと適当に書いて配置します。
メールとかの「新着表示」を入れておくと、より「っぽさ」が出ます。小さな要素ですが大事です。
名称は好き勝手入れてOKです。貴方だけのゲーム画面、中二病を炸裂させちゃいましょう！
フォトショのシェイプツールの使い方や無料のカスタムシェイプは下記で紹介しています。
今回は大きく分けて「ヘッダー」、「フッター」、「左ボタン」、「右ボタン」、「バナー1」、「バナー2」で親グループを作成し、各グループの中に細かい要素をグループ化して作成しています。
色んなアイコン類が必要になります。アイコン類を作成していきましょう。
汎用的なアイコンはフリー素材を活用して時間短縮するのも手です。
下記記事で商用利用できる無料アイコンを紹介しておりますのでご覧ください。
ロゴやアイコン類の制作はイラレが強い
イラレの使い方は下記で解説しております（随時追加予定）。
ゼロから始めるIllustrator イラレ初心者からプロを目指す！なおイラレの最安導入方法は下記からどうぞ。
【Illustrator】イラレを最安で購入する方法と導入手順を徹底解説イラレからフォトショにインポート可能
Illustrator（イラストレーター）で作成したアイコンをPhotoshop（フォトショップ）へ簡単に持っていく事ができます。
この機能はよく使うので覚えておくと便利ですよ。
UIの下絵が完成
先の方法でイラレからフォトショへアイコンをコピペして配置します。
入力した「だけ」の文字だと面白くないので、世界観に合うフォントを選びます。フォント、サイズの調整、文字間調整を少し入れるだけで「っぽく」なってきた気がしませんか？
ここまでの制作でおよそ2時間程です。
【無料・商用利用可】フリーで使える汎用フォント20選！【2020年度版フリーフォント】一通りサイズ調整を行い全ての要素を配置しました。
イラスト制作で例えるなら「線画」が完成した感じでしょうか。UI（ユーザーインターフェース）の下絵が完成しました。何となく全体像が見えてきましたね。
UIだけ表示させてみると…
キャラと背景を非表示にしてUI（ユーザーインターフェース）だけを表示させてみました。単色なので地味ですね。線画状態です。
次は質感を付けていきましょう。
PSDを参考にしながら作り方を学ぶとより理解が深まるかと思います！
前編の終了です、おつかれさまでした。
今回の内容は文字ツールとシェイプツールの使い方がミソです。
なお、入力した「だけ」のデフォルト文字をそのまま使うのはあまりよろしくないので、調整を入れるクセを付けておく事をオススメします。入力した「だけ」の文字は「デザインされていない」ので気を付けてください。もし入力した「だけ」の状態で完成として作品集に載せると「おっ、ラフかな？ほいでほいで？」となってしまうかもしれません。
フォントを変える、サイズを変える、文字間を変える、ちょっと触るだけでイメージがガラッと変わりますので文字パネルをガンガン触ってみましょう！
中編で質感の付け方について解説します。
本業が教えるイラレとフォトショ講座の目次は下記から。
