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

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

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

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

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

となります。

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

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

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

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

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

作業画面はこんな感じ。(アイコン等)
140421_02
ちょっと慌てすぎてて、ステート切り替えで作ればよかったな~と思ったのですが後半だったので仕方ない^p^

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

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追記
ちなみに可読性をつけるためにうっすら文字にドロップシャドウをつけています。

140421_05

他にもボタンにつきましては、ドロップシャドウが切れないように、長方形スライスを挿入するなどでスライスを切っております。基本ですね。
140421_04

140421_03

ひと通り納品できたら修正や追加素材の制作作業に入りました。
大体のやりとりはtwitterのDMを使用し、FireStrageにファイルをアップしてダウンロードしてもらう手順です。
製作期間中はDropBoxに製作中の案件フォルダを入れ、制作が完了しましたらcopyの方に移動させます。

・4/29追記
FireStrageの方で第三者にURLが見られてしまう状態にあったとのニュースが有りましたので現在この方法をとっておりません。

ちょっとざっくりでしたがまとめると

・相手の仕様書で少しでもわからないところは質問する
・制作で修正が来た時に理由を確認すること
・仕様書から外れたデザインになる場合、その理由をちゃんと説明できるようにする
・時間単位で納期を確認する
・命名規則はわかりやすく
・バックアップ大事

こんなかんじでしょうか。
文章がちょっと多いので、後日画像を追加できればと思います~。

そして『FlatBird』さん、よろしければ遊んであげてください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする