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