アプリゲームの素材を作ったのでメモとか。

どうも。
ワーホリネタにしようかと思いましたが、個人の方で久々に短期のお仕事的なものをいただきましたので、思い出しつつメモしていこうかと思います。

先日、Androidアプリの『FlatBird』の素材を作らせていただきました。
『FlatBird』はFlatデザインされた見覚えのある鳥が障害物を飛び越えていく、コレまた見覚えのあるゲームです。

さて、今回依頼をいただきましたのは

背景
背景の上に重ねる泡
障害物
障害物を飛び越えていく鳥
各種ボタン

となります。

ひとまず優先順位の高い素材から制作
1. 命名規則としてはとにかくわかりやすく。
各パーツのサイズとか
1. 関連

ひとまず優先順位の高い素材から制作

仕様書（どういった素材が欲しいのか、先方の方の要望がまとめられたメモ）を確認して不明点などを質問。ある程度のデザインのイメージが固まったら作業に入ります。
また、先方からは背景と鳥と障害物が最初に欲しいとのことでしたのでそれらを優先して制作しました。

背景素材はiOSっぽい背景が良いとのことでしたのでグラデーションツールを使って制作。
幅などのサイズにつきましては規定がありますので、依頼人に確認を取りましょう。
解像度は72dpiで制作してますが特に問題なかったです。

アイコンにつきましては512*512サイズとの指定がありましたのでそちらに合わせてます。

ちなみに今回は急ぎ目（4月中旬リリース予定）の案件でしたので、ササッと作れるFireWorksで制作いたしました。（大体はPhotoshopで作っちゃいますけどね）

作業画面はこんな感じ。（アイコン等）

ちょっと慌てすぎてて、ステート切り替えで作ればよかったな～と思ったのですが後半だったので仕方ない＾ｐ＾

命名規則としてはとにかくわかりやすく。

rankingならrankingとボタンをタッチした時に色が変わりますのでranking_onとスネークケースで命名しています。
（スネークケースとは：スペースをアンダースコアに置き換えたもの。）

あと、私のクセなんですが頭に日付を入れています。

各パーツのサイズとか

パーツサイズにつきましては
・背景画像(720×1054)
・アイコン（ホームで表示されるもの）(512×512)
・地面(720×200)

と指定がありました。
背景画像につきましては、アドバタイズ（広告）を入れる為、その広告分の高さを計算に入れなくてはいけません。

ここである程度作ったところで、フラットデザインについておさらいしましょう。

フラットデザインとは
・3分で分るフラットデザイン
ameblo.jp/ca-1pixel/entry-11809951992.html

こちらの記事で書かれていることから引用すると

・グラデーションや影などの立体感を排除する
・質感をほとんど無くし平面的な外観にする
・グリットレイアウトのような配置にする
・シンプルなタイポグラフィ
・コントラストの強いカラー使い
・機能や目的がひと目でわかる

ということですね。

ここで素材制作について戻ります。
先ほどのフラットデザインの定義をそのまま当てはめて障害物や床などを制作するのは少し無理があります。
ここはちょっとルールから外れて（しかし、フラットデザインのテイストを損なわないように）グラデーションをわずかにかける方法に変更しました。
別に立体感を出しているわけではありません。多分。

あと、鳥ちゃんですがこれは見覚えのある本家のをそのまま使っておりません。パスで描きました。
くちばしや翼が違うのはアレンジです。
…というか、「これ絶対アウトだろ」と思ってたのに（別の鳥も準備しようと思っていた）googlePlayの審査通るなんて思ってなかったので「通った」と聞いた瞬間、ゲームのリリースの嬉しさよりも「マジかよ」の気持ちのほうが強かったんですけどコレについてはどこかで機会がありましたら…。

・4/29追記
開発の方に聞いたのですが、GooglePlayは現在審査というものは基本的に無いらしく、申請をしたらすぐにオッケーが出るようです。

大体ボタンのサイズは最初200×40で制作したのですが小さすぎたので200×80に変更しました。
これはアンドロイド端末によってモニタサイズが違うため、ボタンの見え方も違うそうです。
また、大きめに作っても実装の際にサイズ調整の融通がきくようなので、大きめに作ったほうがいいかもしれません。

・4/29追記
ちなみに可読性をつけるためにうっすら文字にドロップシャドウをつけています。