Tags

閉じる

Category

閉じる

Search

Search

閉じる

デザイナー向け！iPhone6対応について

戻る

screen-size.png

（追記 140919 11:00)iPhone 6 Plusを入手しました
特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど）

（追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました
 

みなのもの落ち着け！

iPhone6/6+の発売がいよいよ明日となりました！

二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、
慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。

  • 画面解像度
  • アイコン・スプラッシュ
  • レイアウト対応について

ひとまず気にするのはこの辺りの情報！
あとはおまけで便利そうなリンクも載せました

これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。


それにしても時代はレスポンシブです。
やれやれだぜ。

基本的な情報

画面解像度はこうなってます

端末 解像度 インチ 書き出し 画面サイズ 制作サイズ
iPhone 4 326ppi 3.5inchi @2x 640 x 960 640 x 960
iPhone 5 326ppi 4inchi @2x 640 x 1136 640 x 1136
iPhone 6 326ppi 4.7inchi @2x 750 x 1334 750 x 1334
iPhone 6 Plus 401ppi 5.5inchi @3x 1080 x 1920 1242 x 2208

 

画面サイズ（あまり適切な言葉では無いかもしれない）は、
実際のディスプレイの大きさと考えてください。
 
制作サイズは僕たちがデザインする時に使うものです。
今まではiPhoneシリーズでは制作サイズと画面サイズは一致していたため、iPhone 6 plusの登場により話題になりました。
ダウンサンプリングといい、1242x2008でつくったものを画面では1080x1920にキュキュっと縮めて表示されるのです。
 
残念ながらその縮小は1.15と整数値ではないため、iPhone 6 PlusではPixelPerfectで画面をつくるのが難しくなります。
この影響を受けないネイティブのUIパーツなどをうまく使うことがますます必要になってくるでしょう。
 
また、6 Plusでは新しく@3xの画像が必要になります。
きっとslicyとかが遅かれ早かれ対応してくれるでしょう :)
 
上記の画面サイズと制作サイズの関係については
こちらの記事が参考になります。
 
 
（追記 140918 21:15)
日本語でわかりやすい記事もありました。
 
 

アイコン

アイコンはいつもtemplateを公開されているPixelResortから早速iOS8版として公開されています

template4.jpg

App Icon Template (PixelResort)

また、それぞれのアイコンやスプラッシュのサイズはiOS Human Interface Guidelineでみることもできます。

iOS Human Interface Guideline - Icon and Image Sizes
＊iOS8版日本語訳はまだ公開されていません。

画面レイアウトについての対応は後述しますが、
ひとまずアイコンだけは用意をしておくのをオススメします。
 
 
 

スプラッシュ（調査中）

今までのスプラッシュはPNG画像１枚でしたが、Xcode6からオプションが増えました。

iOS Human Interface Guideline - Launch Images
＊日本語版はまだ公開されていません。

XIB または storyboard といった形で例えば画像１枚でのマルチレイアウト対応などができるようになるようです。
スプラッシュを各画面サイズごとにつくる必要がなくなるのは助かりますね。
 
今までどおりのスプラッシュも並行して使うことができます。
こちらのサイズは画面解像度の項で話しました実制作サイズと同じです。
 
端末 画面サイズ 制作サイズ
iPhone 4 640 x 960 640 x 960
iPhone 5 640 x 1136 640 x 1136
iPhone 6 750 x 1334 750 x 1334
iPhone 6 Plus 1080 x 1920 1242 x 2208
 
XIB または storyboard はもっといろいろできそうなんですが、これは追記します。

 

デバイスのモデル画像

いつもアプリ作った後とかに宣伝で使いますよね。

appleさんから公式の素材が既に出ています。
利用する用途などの制限もありますので、ページに書かれている用途も合わせて読んだ上で使ってください。

Apple Product Images

 

 

理想レイアウトと対応策と現実策

Appleの意向

今回のiPhone6について、Keynoteでこんなことを言っています。

「iPhone6や6+については単純な拡大ではなく、それぞれに適したレイアウトをつくるといい」（超意訳）

例えば今のiPhone6のページを見るとわかりますが、ホームスクリーンではアイコンを大きくせず、アイコン間のスペースが広くなっています。

iPhone 6
 

iPhone 6 Plusについては単独でUIのセットもできるようです。

つまるところ、iPadとは違う第三・第四のレイアウトセットが必要ということですね。
しかしiPadと違い、ユーザーとの身体的距離・利用シーンは変わらないですから、iPadと同じというわけにもいきません。

時代はレスポンシブです。
やれやれだぜ。

 

対応策とひとまずの現実策

いずれそういった枷を逆手に取った面白いものがでるかもしれないんですが、
まずは今手元にあるものをどうするかということで考えてみました。

 

３択ー１つだけ選びなさい

  • 答え①ハンサムなデザイナーは突如全て対応できるアイデアがひらめく
  • 答え②チーム一丸となってそれぞれのレイアウトの実装を行う
  • 答え③まだ対応はしない。　現実は非情である。
僕がマルをつけたいのは答え②ですが期待は出来ないですね
まずは③でしょう。
しかし仲間の尊い犠牲によって②が実現されてしまうのだった！
 

以前Retinaディスプレイ搭載のiPhone4が出た時と同じで、
何も対応がされない場合は今の画像が画面サイズに合わせて引き延ばされる表示されるようです。
何もやってないからといって、iPhone6で表示されないということはなさそうですね。
 
ひとまずの現実策としては@2xで制作して、拡大して表示するってことに落ち着くんじゃないでしょうか。
 
Androidも並行してつくっているとそういう対応も経験があります。
確かにボケはしますが、困るレベルではないという感じです。
 
画像が@2xから@3xへ1.5倍されることによる圧迫を考えると止むを得ないところ。
これからのシェアによりますが、4sもiOS8の対象に入っている今は仕方ないでしょう。

さらに踏み込んだマルチレイアウト対応については、また別記事を書きます！

 

（追記 140918 21:15)
こちらの記事のスケーリングモードという項目でわかりやすいサンプルが取り上げられています
iPhone6/iPhone6 Plus画面サイズ対応

 

余談ですが僕がやっているゲーム開発について

Unityの対応もまだなので、いまできることは少ないです。

またゲームはスクロールさせないことを前提に作られている部分も多く、
いろいろなサイズに対応させるには四苦八苦させられます。
もういっそコンシューマーのように、複数サイズ前提で考える時が来たのかもしれませんね。

 

 

 

役立ちリンク

最後に関係ありそうな資料や記事のリンクを。
時々追加していきます。

画面サイズでまよったら
（まだiPhone6が入ってないのですが）

 

テンプレート系素材

 

iOS8関係

 

 

情報が間違っていたり、ここに書かれていること以外で知りたいことなどあればぜひコメントなどでお知らせください！

（140918 23:58 ）スプラッシュと書くべきところスクショと書いてましたので直しました。
（140919 15:30 ）PixelResortと書くべきところの一部がPixelEesortとなっていたのを直しました。

ちなみにこんなタイミングでアプリ開発終盤に差し掛かっている僕のゲームはこちらです（- - )

 

iOSリリース.png

ぼくらの甲子園！ポケット 公式サイト
iPhone版もリリースしました！

6 plusでも問題なく遊べてほっとしています。