デザイン担当の高取です。
iPhone5を手にして1ヶ月以上経ち、 縦に長くなった画面サイズにもだいぶ慣れてきました。iPhone4を見るとむしろ短く感じるくらいです。
iPhone5では以前のiPhoneに比べて縦が長く領域がナビゲーションバー2つぶん広がっています。したがって、これまでのiPhoneでも問題なく使用でき、かつiPhone5の縦の長さにも対応したアプリケーションを制作するには、この長くなった領域分に関して工夫が必要です。
それでは、どのように対応すればよいでしょうか。
方法01：表示領域を広げる
例)世界時計 表示領域が広がりました。
操作性が変わらず、iPhone5の縦が長い利点を活かせる一番メジャーな方法です。
画像パーツを新たに用意する必要もありません。
メーラーやニュースリーダーなどリスト形式のものや、ブラウザ等のアプリケーション
でこのような対応がされています。
方法02：背景を広げる
例)コンパス 背景の木目調部分の領域が広くなりました。
メインのオブジェクトを縦に伸ばせないような、1画面で完結するアプリケーションでは背景を増やして、オブジェクトを中央揃えにして対応します。
背景を画像にしている場合は、追加のパーツが必要になります。
方法03：オブジェクトを足して広げる
例)ボイスメモ 上の背景領域が広がって、マイクのスタンド部分の露出が増えました。意外と細かったんですね。
単純に表示領域を広げるだけでなく、広がった部分に絵やコンテンツを足しています。
場合によっては画像パーツを追加する必要があります。
表示領域が広がったので、天気アプリのように、タップしたらスライドして
表示される内容を最初から表示しておくこともできます。
ちなみにHIGによると、広がったエリアに広告バナーを入れるのはNGです！
方法04：オブジェクトのサイズやマージンをそれぞれ増やす
例)計算機 ボタン部分がそれぞれ縦に長くなりました。
スクロールしないで1画面におさまるリストやボタンがある場合にはこのような対応が最適です。この方法でも、場合によっては画像パーツを追加する必要があります。
以上のように、対応方法は色々ありますが、アプリのコンセプトや利用シーンに合わせて適切な方法を選択することが重要ですね。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
