iOSアプリ開発におけるデザイナーの仕事内容とは（納品画像の形式・サイズ指定等）

代表の岡田です。

今回は、私が思う「iOS アプリにおけるデザイナーの作業範囲」について書いておこうと思います。

もちろん制作会社ごとにルールがあると思うので、あくまで BackApp の事例です。ただ、「Web ではできるけどそもそもアプリではできないこと」などもあるので、指定する理由なども記載しています。

アプリデザインの経験がない方ですとか、デザイナーさんとのやりとりに悩んでいる制作会社の方などにとって少しでも参考になればと思います。

iOS アプリ案件でのデザイナーの納品物

弊社内でデザインをしていただくなら、storyboard をさわってもらって、asset にも入れていただいて、Git にてプルリクエストをもらうまでが制作です。うちの場合、基本的に .psd とか .ai ファイルのみはありえないですね。

ただ、昔ながらの習慣もあるので、外部のデザイナーさんには下記の 3 種類を納品していただくようにお願いしています。

• 画面ごとのデザインが分かるJPEGファイル
• ボタンや背景画像など各パーツのPNGファイル
• デザイン組み込み指示書・色辞書

では、それぞれについて補足していきます。

iPhone/iPad 各画面ごとのデザインが分かるJPEGファイル

画面ごとのデザインの確認のための画像です。

• 画面イメージは iPhone4系、iPhone5系、iPhonePlus系、iPhoneX と 4 種類をお願いしています
• 納品物の 1 つである “デザイン組み込み指示書” に 4 種類のデバイスの表示を満たすルールが記載されていれば、iPhone5 系のもの 1 種類でも大丈夫です
• 画像ファイル名は日本語で構いません

ボタンや背景画像など各パーツのPNGファイル

こちらは細かいポイントが多いです。

• 各パーツの縦横サイズは Retina 相当の PNG ファイルと、非 Retina 相当の PNG ファイルと、3 倍サイズのものまで必要です
• ボタンは通常時とタップされた時の 2 種類設定ができます
• ActivityIndictor は iOS の標準にあるので、素材として必要ありません
• セル右側のアクセサリー ”>” 等は、標準のものであれば素材として必要ありません
• 文字や枠などはプログラムで描画しますが、フォントにこだわりがあるものは画像にしてください

上記に加えて、ファイル名と画像のサイズ・フォーマットに注意点があります。

画像サイズとフォーマットの指定

Retina ディスプレイ対応における仕事内容は Web デザインの案件でご理解いただけている方もいらっしゃると思いますが、念のため記載しておきます。

• タブバーメニューの画像は、基本 30×30 です。Retina 解像度も含めて、30×30 と 60×60、90×90 の 3 種類用意してください
• Retina 素材の縦横画像サイズは必ず偶数にしてください。サイズが奇数になっている画像は RetinaDisplay で見るとエイリアスがかかり、端がぼやけてしまいます
• ナビゲーションバーのボタン内の画像は、上下左右の余白なくお願いします

ファイルの命名規則

• ファイル名はすべて小文字のアルファベットで、文字の区切りはアンダースコアでお願いします（例:button_back@2x.png)
• 日本語や 2 バイト文字での命名は禁止です
• Retina 相当のファイルは、2 倍のものは "file_name@2x.png"、3 倍のものは "file_name@3x.png" と命名してください
• 各パーツの呼び名は、NavigationBar や ActivityIndicator など正式な名称で呼んでもらえると、エンジニアとのコニュニケーションがスムーズになると思います

正式な名称がないものについても、なるべく正式名称を組み合わせて説明してもらうとわかりやすいと思います。
以前、「カルーセル」と指定があり、画像が横にスクロールするパーツを実装したところ「これはスライダーだ」と言われました。求められていたのは時間とともに画像がディゾルブで変化するパーツだったので、愕然としました。jQuery のスライダーもオプションを変えるとそういう動きしますよね。

デザイン組み込み指示書・色辞書

• ファイル形式はテキストファイルでも構いません
• 色辞書は RGB もしくは HEX で記載してください
• 端末毎にディスプレイの色温度が違うので注意してください (同じモデルの白・黒とかでも違います)
• iOS の端末にて使用できるフォントを使用してください。BackApp では基本的に Web フォントは使わない方針です
• どうしても使いたいフォントがある場合は使うこともできますが、アプリのダウンロードサイズが数十メガ増え、ダウンロードを嫌がるユーザーも出てくることを意識してください
• 画像ではなくプログラムで描画するボタンも、通常時とタップされた時の 2 種類を設定できます
• 角丸のラウンドやアルファの指定もあると嬉しいです

また、Web の案件でもブラウザやデバイスごとの対応をされていると思いますが、アプリでも下記のように iPhone4系、iPhone5系、iPhonePlus系、iPhoneX それぞれへの対応が求められます。

端末ごとの対応に関する注意点

• プログラムで端末毎に画像を差し替えることはできないので、画像は共通になります
• マージンについては各端末毎の指定をすると開発工数が端末数分かかるので、固定の数値で指定するのが常識です
• ウェブデザインと違って、マージンをパーセントで指定することはできません
• statusBar (時計などが表示されているバー) が 20px、ナビゲーションバー (画面上部のタイトルや戻るボタンが表示されているバー) は 44px 固定 です

iOS アプリではパーツやマージンのサイズが固定になるので、アプリデザインの経験がない方はまず「全体のバランスが端末毎に変わる」ということを考慮いただくと良いと思います。

--

iPhone/iPad アプリを開発する時にデザイナーさんにお願いする納品物と指定は以上になります。

他の会社さんが課している仕事内容も気になりますね。アプリ開発の情報ってあんまり Web 上にないので、「うちはこうやってる」「こういうこと考えてる」みたいな発信が制作会社から増えるといいですね。