LoginSignup
137
140

More than 5 years have passed since last update.

iOSアプリ開発でアプリデザイン経験のない人にデザインの納品物をお願いするときのリスト

Last updated at Posted at 2013-02-18

このTipsはiOSアプリ開発時に納品物定義をする際のリストです。デザインをお願いする他社のデザイナさんがiOSアプリなどの経験がない場合、どのような納品形態として成果物を納めてもらうかということでよく話題になるのでその項目を残しています(同じ社内にいるメンバーの場合は適当にコミュニケーションをとることやググレカスで解決すると思いますが…)。

ですので、デザインに対する細かい指示というよりもそもそも納品物として何がいるんだっけ、どう指定しておけば面倒が増えないんだっけということを書いています。

前提としてディレクターが作ったワイヤーフレームもしくは画面遷移図があり、そのドキュメントを元に他社のデザイナさんとのやりとりがあった後に納品というフェイズがあることを想定しています。

以下がその本文


納品物定義

納品物

  • 画面全体のデザインとしてのPSDファイル
    (納品物として管理するために必要となります。ファイル名は日本語名でかまいません)

  • 画面ごとのデザインが分かるJPEGファイル
    (画面ごとのデザインの確認用に使用します。ファイル名は日本語名でかまいません)

  • ボタンや背景画像など各パーツをPNGファイルとして出力したもの
    (開発側で使用します。ファイル名ルールについては下記参照)

備考

  • PSDファイルの互換性はPhotoshop CSで開けるファイルでお願いします。

  • 画面イメージは横画面サイズを640px(iPhone4, iPhone4S, iPhone5相当)で作成をお願いします。

  • 各パーツの縦横サイズはRetina相当のPNGファイルと、非Retina相当のPNGファイルを2つをお願いします

  • PNGファイルの命名はRetina相当のものについては@2xをつけてください

  • PNGファイルのファイル名はアルファベットすべて小文字で文字の区切りはアンダースコアでお願いします
    (例:button_back@2x.png)

  • Ratian素材の縦横画像サイズは必ず偶数にしてください

  • ナビゲーションバーのボタン内の画像は、上下左右の余白なくお願いします。

  • タブバーの画像については次のサイトを参考にして下さい http://golog.plus.vc/web/5866/

  • ActivityIndictorはiOSの標準にあるので素材として必要ありません

  • セル右側のアクセサリー">"等は標準のものであれば素材として必要ありません


このような内容をそのまま納品物定義として送っています。

お願いする内容について

Photoshop CS以降は互換性があるために、CS以降で開けるファイルとお願いすれば良いらしいです。解像度は指定していませんがデザインするキャンバス自体の横サイズを640pxにしてデザインを作成してもらえばRetinaと同じピクセルとなるので、それぞれの素材の解像度が低いということは無い気がします。ファイル名はそのままアプリに組み込みたいので日本語などで作成してもらわず、大文字小文字の区別もしたくないのですべて小文字で作成してもらったほうが楽です。

また、PSDファイルや確認だけできればよいJPEGファイルに独自ルールのアルファベットの名前を付けられることがありますが、これは解りづらいだけです(バージョン管理するなら別かもしれませんが)。

画像のサイズについてRatinaを偶数にする理由は、もし奇数だった場合に非Ratinaのサイズが奇数の半分で小数点以下になってしまうからです。

ナビゲーションバー、ActivityIndicatorやセルなどはなるべく正しい名前を使って指示します。ググってもらえればそれがなにか分かるはずですし、わかりやすくしようと”ぐるぐるのやつ”、"上のバー"などの言葉をつかってしまったりすると逆に混乱を招いたりします。

この他にもこういう勘違いがおこるからこうしたらいいよ!などのご意見があればコメントでお願いします。追記していきます。

137
140
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
137
140