Tech

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 ...
記事の続きを読む →
0

iOS / Android アプリ制作で必要な画像

代表の岡田です。

スマホアプリの開発では、さまざまなサイズの画像が必要になるので備忘録も兼ねて以下にまとめてみました。
用途別に並べてもよかったのですが、実際に画像を書き出したりプロジェクトに組み込んだりする際はサイズごとに行なった方が効率が良いので、その他並び順になっています
異なる用途で同じサイズのものは省いています。

iOSの画像リソース

サイズ 名称(例) 用途
1024 x 1024 Icon-1024.png AppStore
180 x 180 Icon-180.png iPhoneアプリアイコン@3x
167 x 167 Icon-167.png iPad Proアプリアイコン@2x
152 x 152 Icon-152.png iPadアプリアイコン@2x
120 x 120 Icon-120.png iPhoneアプリアイコン@2x,スポットライトアイコン@3x
87 x 87 Icon-87.png 設定アイコン@3x
80 x 80 Icon-80.png スポットライトアイコン@2x
76 x 76 Icon-76.png iPadアプリアイコン
60 x 60 Icon-60.png iPhone通知アイコン (iOS 10以降)
58 x 58 Icon-58.png 設定アイコン@2x
40 x 40 Icon-40.png スポットライトアイコン,iPhone通知アイコン (iOS 10以降)
29 x 29 Icon-29.png 設定アイコン
20 x 20 Icon-20.png iPad通知アイコン (iOS 10以降)

Androidのアイコン

 

サイズ 名称(例) 用途
512 x 512 Icon-512.png ストアアイコン
192 x 192 Icon-192.png xxxhdpi
144 x 144 Icon-144.png xxhdpi
96 x 96 Icon-96.png xhdpi
72 x 72 Icon-72.png hdpi
48 x 48 Icon-48.png mdpi
36 x 36 Icon-36.png ldpi

iOSの起動画面

サイズ(px) 画像名(例) ディスプレイ
640 x 960 default-960.png 3.5 inch Retina
640 x 1136 defaults-1136.png 4.0 inch Retina
750 x 1334 defaults-1334.png 4.7 inch Retina
1242 x 2208 defaults-2208.png 5.5 inch Retina ...
記事の続きを読む →
0