デザイナ向け就活用ポートフォリオ用のテンプレートを無料で配布中です!

スマホゲームのマイページを作成してみよう

どんなことをするの?

スマホゲームのホーム画面(マイページ)を作ってみたいと思います。
ホーム画面はキャラや背景をはじめ、各種UIが散りばめられた要素の多い画面で尚且つ他の画面デザインの指標となる画面です。(つまり作成するのに手間が掛かる画面)

例えば下図のような画面ですね。

ゲームジャンルは不問、自分の作りたいホーム画面を作ってみましょう。

用意するもの

  • 目指したいスマホゲームのホーム画面のキャプチャ画像
  • キャラ画像(完成したキャラ画像は背景透過のPNGで書き出して素材化しておくと便利です。 )
  • 必要なら背景画像(UI側でデザインする場合は背景を作成する必要はありません。)
注意
当授業は作画する内容ではありませんのでキャラ画像、背景画像は当授業の時間外で作成してください。授業中はUI周りの作成やレイアウト作業に集中してください。

提出形式&提出期限

  • 画面の向きは縦画面、横画面どちらでもOK
  • 縦横比16:9
  • 提出ファイル① 「解像度1920px x 1080px 72pixel/inch」にしたJPG
  • 提出ファイル② 「元のPSDファイル(解像度は元々作成していた状態で、レイヤーは整理しておいてください。)」
  • 提出期限:2020/02/17授業終了まで
MEMO
実際のゲーム画面ではなく印刷を前提とした画面作成なので、マスターデータを高解像度(1920px x 1080px 350pixel/inch)や(3840px x 2160px 350pixel/inch)等で作成しておくとポートフォリオによりクッキリした作品を掲載できます。なお、実際のゲーム制作はゲーム画面と同じ解像度でUI制作を行います。(拡縮すると画像が劣化するため、イラレでの制作なら関係無し)

授業スケジュール

  • 2020/01/20(本日)
  • 2020/02/03
  • 2020/02/17

※3月の春季発表会で当課題で制作したゲーム画面の発表があります。
1カ月も無いです。タイトなスケジュールで制作する物量が多いですが、ぜひ頑張って良い物に仕上げましょう!

主に使うソフト

  • フォトショップ
  • イラストレーター
注意
クリスタでUI画面の制作は出来なくは無いですが、あまりオススメできません。

フォトショとイラレ、好みと慣れによりますがUI制作はフォトショが便利かと思います。「質感」を付けたり「レタッチ」を頻繁に行うのでフォトショで完結させる方が手早く作れます。個人的にWEBのカンプ作成やゲームUI画面といった画面作成はフォトショじゃない面倒くさいです。
イラレはロゴや細かなパーツの元データを作成し、フォトショにインポートさせてシェイプで扱うと便利。塗りや質感はフォトショの効果で付けるのがベターです。

なお印刷物系の制作はイラレで、印刷物系の制作はデジタル媒体の画面制作と別物なので気を付けてください。

MEMO
個人的な見解ですが、ゲーム業界に入ると会社や部署にもよりますがアドビ系ソフトはフォトショ95%、イラレ5%くらいの使用頻度です。エフェクト屋ならフォトショ64%、アフターエフェクト35%、イラレ1%、UI屋ならフォトショ70%、イラレ30%くらいでしょうか。
WEB会社なら業務にもよりますがフォトショ80%、イラレ20%ってとこでした。印刷媒体の制作がメインの会社はイラレの使用頻度がもっと高くなるでしょう。
意外と出番が少なく感じるイラレですがよく使います、無いと超不便。
その人の作り方にもよりますので、あくまで参考程度に。あと「業務全体におけるツールの使用頻度」ではなく「アドビ製品に限った使用頻度」の話です。

必要最低限載せる要素

  • 各種UI
  • キャラ
  • 背景(UI側で背景を作成する場合は作画の必要無し)

ゲームのマイページとして成立する必要不可欠な要素は入れ込んでください。さもありそうな「リアリティのあるマイページ」を目指しましょう!

マイページの要素を取り出してみる

仕上りのゲーム画面は華やかで画面の構成がどうなっているか分かりづらいですね。
下図のように画面を構成している「要素」のみを取り出してみると分かりやすくなります。なお、右のような画面を「ワイヤーフレーム」と言います。

いきなり画面デザインをガッツリ始めるのではなく、ワイヤーフレームを作成してからデザイン制作をする方が効率的です。制作は段取りと下準備が大切、時間が少ないので効率的に進めていきましょう。

制作手順

時間が限られているので段取り良く効率的に制作を進めていきましょう。
いきなりのデザイン制作は非効率的なので、下記手順に沿って進めると無駄が少なく進められるかと思います。

  1. 載せる要素を全て洗い出す
  2. コピー用紙等に全体のレイアウトラフを作成(ワイヤーフレームのラフ)
  3. フォトショまたはイラレにゲーム画面サイズのキャンバスを作成、単色でパーツを配置(ワイヤーフレームの本チャン)
  4. JPGに書き出し、スマホに画像を入れて操作感やボタンサイズを確認(調整後に再度スマホ確認、スマホ用にある程度最適化しておく)
  5. ようやくデザインの作成(面倒がらずに4までに最適化しておかないと、デザインで肉付けした5以降で調整を入れると余計に時間と手間が掛かります)
  6. 出来上がった画面デザインをJPGに書き出し、スマホに画像を入れて確認&調整

完成画像をPC画面ではなくスマホ画面で確認すると随分と違った印象を受けるはずです。実機端末での確認は重要なので怠らないようにしましょう。

MEMO
本来ゲーム画面を制作する際は「画面遷移図」という全画面の構成とボタンを押した先の画面が全て決められた設計図があります。画面遷移図を元に、どの場所に何の要素を配置するのが最適であるかを考慮しながらワイヤーフレームを作成します。ワイヤーフレームは「白黒で画面をデザイン」するイメージで作成すると良いでしょう。その後ワイヤーフレームを元にデザイン作業を進めるのが王道です。
今回は下層ページの制作は考慮に入れず、マイページのみの制作なので画面遷移図の事は考えずに、お好みのワイヤーフレームを作成してみましょう。

載せるUI要素の例

一例です。自身が作りたいマイページに必要な要素を整理します。
要素の名称は作風に合うようにアレンジを加えてみるのも良いでしょう。(例:ガチャ→召喚)

  • マイページ
  • ガチャ
  • クエスト
  • 合成
  • バトル
  • ショップ
  • お知らせ
  • メール
  • レベル表記
  • 体力ゲージ
  • 行動ゲージ
  • お金
  • キャラのセリフ欄
  • キャンペーンバナー
  • 音声ON・OFF
  • フレンド
  • メニュー
  • 設定

背景をどう処理するか?

背景は画面を大きく占める要素の一つです。つまり時間と手間が掛かります。

左図の背景、時間がかかりそうですね。背景をガッツリ描き込むのは時間と手間がかかります。
背景が大嫌い、パース?何それ?美味いの?と、背景だけでUI手つかずで終わりそうな方は右図のコナン君のような「デザイン的な背景」で表現するのも一つの手です。スカスカの背景を載せるよりデザイン処理で魅せる方が良い感じになる場合もあります。

要はバランスと統一感が大切、当課題は背景絵を描くことが目的ではなく、説得力のある「マイページ」を作成する事が目的です。

注意
当授業は作画ではなくUIをメインとしているので「キャラがすごく描けている、背景がすごく描けている、でもUIチグハグ」より「キャラ普通、背景普通、UIや全体の統一感やゲーム画面として成立している」の方が高評価です。絵・背景・ボタン等のUIはゲーム画面全体という「作品」を構成している一つの「素材」と考えて、ゲーム画面という「作品」へ上手く調理してみましょう。

画面をタップできる場所、そうでない場所を差別化する

画面をタップできる要素とそうでない要素の見た目は明確に差別化しておきましょう。「押せる感」のあるボタンじゃないと押されないです。
また「使用頻度の高いボタン」や「押させたいボタン」と「強調させる必要のないボタン」等、情報の内容によってボタンデザインは変わります。

そして「文字は読めないと意味が無い」です。デザインした文字はとても良いのですが、読めないと文字である意味はありませんので注意してください。

先にも書きましたが「スマホゲームの画面」なので「自身のスマホで画面を確認」する事を怠らないでください。PC画面とスマホ画面では見え方が変わります。スマホ画面に最適化して「可読性が高く」「押しやすく」「分かりやすい」といった「利用者にとって使い勝手が良いUI」を頭の隅に置いて作成をしてみると、より素晴らしいマイページに仕上がるでしょう。少し意識するだけでも作品に反映されます。

普段遊んでいるスマホゲーム、たまには視点を変えて「なぜこのボタンはこの場所に置かれてこのデザインなんだろう?」とか考察しながら遊んでみると良いかもしれませんよ。

資料集めが肝要

絵描く時って資料集めたり自分の体を参考にしたり、作画の資料を集めますよね。
UIデザインも資料が大切です。

絵描き始めたばかりの状態で資料無しで絵描くとデッサンの狂った絵になると思います。
UIも同様で、資料無しで作ると配置や文字のサイズや色のバランスが悪く、とりあえず「要素をデフォのフォントのまま配置しましたが何か?」状態になりがちです。

なので遠慮せずに良質なサンプルを「真似」しちゃいましょう。最初は真似から、絵でもデザインでも、良質な作品を真似るのが手っ取り早く画力アップ、センスアップする方法の一つです。模写すると絵上手くなりますね、アレと同じ。
オリジナリティは真似から身に付きます。多くの方にとってオリジナリティは後から付いてくるものです。

最初から資料無しのゼロベース作成は正直なところ効率的とは言えません。時間ばかり掛かる割に品質が上がりづらいです。そして品質が上がらないから飽きてしまう、勿体ないです。

好きなゲームを入れてキャプチャを撮る、グーグルの画像検索ピンタレスト等で検索する、真似る環境は整っています。
グーグルの画像検索には限界があるので、ピンタレストで「ゲーム UI」や「マイページ スマホゲーム」等で調べてみたり、好きなゲームを入れてキャプチャを撮るのも良いでしょう。勿論ゲーム画面以外にも制作のヒントはいくらでもあるので資料集めは「ゲームのマイページ画面」だけにこだわる必要は全くありません。

いい物をじっくり観察してまるっと真似る、真似ていくと必ず「これ、どうやってんだろ?」が出てくるので試行錯誤して再現してツールの使い方を学んでいくと力がドンドン付きます。

物足りないなぁ~となったら本を買って読んでみたり。ネット情報もいいのですが、本から得る情報も大切です。

…と、色々と他作品の良い所を真似て自身でどんどん調べて試していくのが一番の上達方法かな、と思います。

くれぐれも「とりあえず要素を一通り載せましたが何か?」的な画面の提出は控えてください。それは単なる作りかけの画面なので正直評価のしようがありません。。
先にも述べたように良質のサンプルを簡単に見つけられますので、少しでも目指したい画面に寄せて「デザイン」してください。文字サイズ、文字色、余白の取り方、ボタンサイズの強弱、サンプルを参考にしながら少し手を加えるだけでも品質が全然変わります。

テンプレート

無地キャンバスだけのシンプルなテンプレートを用意しました。必要な方は活用してください。

1920px x 1080px 350pixel/inch 横向け
ダウンロード
1920px x 1080px 350pixel/inch 縦向け
ダウンロード
3840px x 2160px 350pixel/inch 横向け
ダウンロード
3840px x 2160px 350pixel/inch 縦向け
ダウンロード

印刷物への利用も考えているので350pixel/inchで元データを作成しておくと良いかと思われます。

MEMO
デジタル媒体用の用途も考慮に入れて、上記テンプレートのカラーモードはRGBにしています。したがって印刷用PSDは別途CMYKにして色味を調整する必要があります。最初からデジタル用途は一切考えていない方はCMYKで作成しておくと後の色調整が発生しません。

なお、出来上がった画面をJPGに書き出し、解像度を350pixel/inch →72pixel/inch に変更して提出してください。
350pixel/inch の元PSDも忘れず提出してください。(提出前にレイヤーの整理をしておいてください。)

解像度の変更方法についてはコチラを参考にしてください。

よく使いそうなPhotoshop機能の使い方

マイページ画面制作でよく使いそうなフォトショ機能の使い方です。
※随時追加予定です。

【Photoshop】フォトショの文字ツールの使い方を徹底解説【Photoshop】フォトショのレイヤーを徹底解説【Photoshop】切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説

アンケート

コチラのアンケートフォームの記入にご協力お願いします。
※時間をかけて記入する必要はありません。思いつくことをパッと、今後の内容に活かしたいと思います。