【Photoshop】学生4名によるゲームUIの作例を紹介

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

学生4名によるゲームUIの作例を紹介いたします。
オリジナルゲームを想定し、Photoshop（フォトショップ）やIllustrator（イラストレーター）でタイトル画面やメイン画面などのUIをゼロから作成した作例です。

これからゲームUIを自作してみたい方、ゲームUIデザイナーを目指されている方必見！

協力：アミューズメントメディア専門学校

この記事の目次

ゲームUIの作者

オリジナルのゲームUIを紹介していただく学生さん4名です。
魅力的なキャラクターを生み出すイラスト制作がメインの方々ですが、UI制作もお手の物。
UIデザインだけでなく、ゲームの設定など企画段階から全て自作できる才能の持ち主ばかりですよ！

世村めゐさん
作品を見る

彗さん
作品を見る

つづるさん
作品を見る

ワタビさん
作品を見る

ゲームUIの作り方講座

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

オリジナルスマホゲームのUIをゼロから自作する方法を解説しています。初めてゲームUI制作をされる方にオススメですよ！

学生4名によるゲームUIの作例

世村めゐさん

初めてのゲームUI制作とその作品です。自身のセカイをスマホ画面内に向けて存分に表してみました。

世白（YOHAKU）

@世村めゐ

『世白』は『余白』と同意です。

余白
文字が記してなく白く残っている部分。

目の向かない世界を切り取った、私だけのセカイ。
片隅のセカイ。私の脳の隅で存在しているセカイ。

『世白』をイメージする四字熟語：空即是色（クウソクゼシキ）
この世のすべて物事は実態がなく空であり、その空であるものがこの世のすべてであるということ。

ようこそ、ワタシのセカイへ＿＿＿。

ロゴデザイン

ロゴは各所でよく使う素材なので、白と黒の両バージョンを作成しました。

@世村めゐ

ホーム画面

スマホゲームのホーム画面なので情報量が非常に多く、制作に手間が掛かりました。
押したくなるボタンとスタイリッシュなデザインの落としどころに悩みました。

@世村めゐ

編成画面・ステージ選択画面のUI

キャラ編成画面とストーリーのマップ画面です。
近未来的なSFテイストとファンタジー要素を適度にミックスさせた世界観に仕上げました。

@世村めゐ

彗さん

謎解き系の推理アドベンチャーゲームのUIを想定して作成しました。縦向けレイアウトのスマホで遊べる本格推理アドベンチャーです！

Melancolic Logic（メランコリック・ロジック）

タイトル：メランコリック・ロジック
ジャンル：推理アドベンチャー
ターゲット：10代後半～30代

制作時間：12時間
使用ツール：Photoshop・Illustrator・CLIP STUDIO PAINT

@彗

ホーム画面

ホーム画面です。作成したUIの中で最も要素が多い画面なので一番手間が掛かりました。
UI全体の指標として作成したページ、他の画面はホームをベースに作成しています。

@彗

メインストーリー

メインストーリーでは選択肢によってキャラクターの好感度が上下します。
なお、好感度はスチルの有無やストーリー展開に影響。

@彗

サイドストーリー

メインストーリーの進行度や好感度によって解放され、本編とはまた違うストーリーを楽しめるコンテンツ。キャラクターによって未来や過去の話が読めます。

@彗

つづるさん

初めて制作したUI です。わくわくしながら作っていきました。
押したくなるような透き通ったボタンを意識しながら制作しています。
使用ツール：Photoshop,Illustrator　制作時間：18時間

PLUG-CHANGE（プラグチェンジ）

@つづる

時代は2050年。

動物達の中には夢があり、その夢が形態の進化につながった動物たちがいた。
しかしその進化はやがてウイルスとして人間に影響を与えるようになる。

飼っていたペンギンの進化の影響で翼が生えてしまった主人公「黒森皇一」は、ウイルスの治療法、研究をするチームに入り影響を阻止するために動きだす。

タイトルロゴ

研究がテーマの一つなので近未来感を意識。
タイトル名は、変身につながるという意味です。

A の色がついた丸はウイルスをイメージ、変身の核はウイルスということを表現しています。また、近未来感を残すためシンプルな丸にしました。

@つづる

ホーム画面

黒地に要所要所で差し色を入れて情報の強弱を付けました。
カッコいい近未来SFを感じさせるUIを目指しました。

@つづる

会話シーン・UI素材

アイコンのベースはIllustrator（イラストレーター）で作成し、単色のアイコンをPhotoshopにスマートオブジェクトとしてインポートしてレイヤー効果で色やデザインを追加しました。

@つづる

つづるさんのイラストメイキング

【クリスタ】つづるさんによる無機物を擬人化するイラストメイキング

つづるさんによる無機物を擬人化するイラストメイキングを紹介しています。併せてチェックされてみませんか？

ワタビさん

絵画作品が好きなのでそれをモチーフにゲームデザインを考えてみました。いつかゲームとして皆様に遊んで頂きたいと思っているものなので完成したらぜひよろしくお願いいたします！

FAKE ARTIST（フェイクアーティスト）

贋作を証明する推理アドベンチャーゲーム

過去の絵画文化が流行している世界が舞台。
ある日、有名な贋作氏である祖父が亡くなり、彼の作品が次々と「本物だ」と売られてしまう。

作品を取り戻すために贋作の情報や証拠となるアイテムを集め、この作品最大の魅力「交渉術」を使ったシステムで贋作を取り戻そう。

ジャンル：絵画×推理ファンタジーアドベンチャー
ターゲット層：10～30代の男女
想定プラットフォーム：コンシューマー
制作期間：3か月

@ワタビ

タイトル画面

Switch版、スマホ版の２種類を作成しました。

@ワタビ

ホーム画面

モチーフにした絵画作品
エドヴァルド・ムンク：ムンクの叫び
アルフォンス・ミュシャ：椿姫
グスタム・クリムト：接吻
サンドロ・ポッティチェリ：ヴィーナスの誕生
ウィリアム・アドルフ・プグロー：天使の歌
ミケランジェロ・ブオナローティ：アダムの創造
フィンセント・ヴィレム・ファン・ゴッホ：夜のカフェテラス

絵画を題材にしたゲームなので、多くの絵画作品をモチーフにUIを制作しました。
絵画好きの方が「クスっ」として欲しいと思い仕上げました。
また、使用色は控えめに、3色程度でまとまりのあるアイコンを目指しています。

@ワタビ

ワタビさんのキャラデザテクニック

【クリスタ】ワタビさんによるキャラクターの背景を深掘りしたキャラメイキング

ワタビさんによるキャラクターの背景を深掘りしたキャラデザのテクニックを詳しく紹介しています。併せてチェックされてみませんか？

高品質なゲームUI素材

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

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

#01 Illustration of the fairy forest at night with flashlights and e

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

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

#02 User interface the playing field for a computer game

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

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

#03 Radar screen. Vector illustration for your design. Technology background. Futuristic user interface. HUD.

SF系で使う素材が一通り収録されたUIキットです。
一部に赤っぽい色味を加えるだけで全く違った印象の絵になりそうですね。

ダウンロード

#04 Sci-fi Game GUI Pack

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

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

#05 background and buttons for mobile game development, ui design kit

そのままパズルゲームの素材として使えそうなUIキットです。
追加するのはカットイン用のキャラくらいですね。

ダウンロード

#06 Sunset in fantasy forest

非常にハイクオリティな森のが描かれた背景素材です。RPGによくあるはじまりの森にピッタリなイメージですね。

ダウンロードする
昼間はコチラ

#07 Fantasy art landscape with giant statue - digital illustration

ロードオブザリングに登場しそうなスケール感のある背景イラスト素材です。
フィールドマップの遠景にうっすらと見える巨像にようやく近づけた時の感じがあります。

ダウンロードする

#08 knight fighting dragon

ドラゴンと剣士が戦っているイメージのイラスト素材です。
非常にハイクオリティです。

ダウンロードする

#09 Fantasy Traditional Japanese House - Day

和風の伝統的な日本家屋の背景イラスト素材です。
和風、和風ファンタジーには必須素材ですね。

ダウンロードする
夜はコチラ

#10 Fantasy natural environment

幻想的なファンタジー世界の自然環境を描いた背景素材です。手前にキャラの立ち絵を置いてセリフを配置するといい感じのゲーム画面が作れます。

ダウンロードする

ゲームUI制作を300%加速させるテンプレート

下記でゲームUI制作を劇的に加速させるテンプレートや背景素材を紹介しています。
全て商用利用が可能、高品質な素材でゲーム制作を効率化させましょう！

【商用可】ゲームUIで使える高品質なテンプレート素材48選【AI形式】

【商用利用可能】ゲームやイラストの背景素材85選【高品質】

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、学生さん4名によるPhotoshop（フォトショップ）を使ったゲームUIの作例についてでした。

メイン画面だけでなく、ゲームの設定やロゴ、タイトル画面に編成画面など、多岐に渡る展開で本当に存在していそうなUI作品ばかりです。

ゲーム業界を目指されている学生さんにオススメのコンテンツであるUI作品を強化し、就職活動を有利にしてみませんか？

ではまた！