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