iPhone 5で撮ったスクリーンショットの以前のiPhoneでの見え方

これからiPhone 5対応アプリが出揃ってくるまでの過渡期のみとなるかと思いますが、iPhone 5でiPhone 5未対応アプリを動作させると、上下に黒い枠が表示されます。

iPhone 4/4Sが画面サイズ 640 x 960(単位px。以下同様) だったのに対し、iPhone 5の画面サイズ 640 x 1136になり、幅は変わりませんが高さが176px増えたため、iPhone 5の場合は高さが増えた分だけ黒い領域を上下に作り、中央寄せして表示するようになっています。

 

ブログなどでアプリを紹介する場合に、未対応アプリのスクリーンショットを撮った時に黒枠も撮れてしまうわけですが、どんな感じに撮れてしまうのか、今までのiPhoneで見た場合にどんな感じで見えるのか、どれだけ削ればいいか、ということについて調べてみました。まあ、4Sも手元にあるので未対応アプリはそっちでスクリーンショットを取ればいいし、そもそも別に黒い部分を削る必要があるのかないのかってとこからかもしれませんけど(笑)

黒枠があったっていいじゃないか、iPhone 5だもの。みつを。

iPhone 5 未対応アプリのスクリーンショット

まず、iPhone 5未対応アプリのスクリーンショットはどのように撮れるかやってみました。題材は「ぐんまのやぼう」です。

ぐんまのやぼう App
カテゴリ: ゲーム
価格: 無料(掲載時)

iPhone 4/4S/5は実際は幅640pxですが、そのまま貼るとさすがに大きすぎるので、この記事では横幅320pxで表示して画像範囲を分かりやすくするため赤枠をつけています。

iPhone 5 未対応アプリを iPhone 4Sでスクリーンショット取得

20120924-s4-4.png

iPhone 4Sでスクリーンショット取得。実際には 640 x 960 の大きさです。もちろん、iPhone 4でも同様の見え方です。

iPhone 5 未対応アプリを iPhone 5でスクリーンショット取得

20120924-s4-5.png

iPhone 5でスクリーンショット取得。実際は 640 x 1136 の大きさです。4/4Sと比べて高さが176px増えたため、上下に88pxずつ黒い部分が表示されています。

iPhone 5 未対応アプリを iPhone 3GSでスクリーンショット取得

20120924-s4-3.png

20120924-s4-3.png

オマケですがiPhone 3GSではこんな感じ。上は画像サイズの 320 x 480、下は縦横2倍にして実際の3GS本体での見え方に近いと思います。今更ながらRetinaディスプレイの威力を思い知らされますね。

iPhone 5 のスクリーンショット

次に、iPhone 5 で取得したスクリーンショットをiPhone 4S以前の機種で表示してみました。

iPhone 5対応アプリというわけではありません。対応アプリならそれぞれの機種の画面サイズに対応して開発することになると思うので。あくまでiPhone 5で取得したスクリーンショットは旧機種でどのように見えるか、ということです。結局、画像の縮小表示ということになるのであまり意味はないと思います。

もしもiPhone 5専用アプリがリリースされ、4S以前でもなぜか使えた場合、このような問題も発生するのかもしれませんが(もしくは上下の表示できない部分が削られてしまうだけかもしれませんね)

題材としてわかりやすいアプリが見当たらなかったので、ステータスバー部分が青っぽくなるメールアプリで確認してみました。

iPhone 5 のスクリーンショットを iPhone 5で表示

20120924-s5-5.png

iPhone 5での見え方。サイズは 640 x 1136 です。

iPhone 5 のスクリーンショットを iPhone 4Sで表示

20120924-s5-4.png

iPhone 5のスクリーンショットをiPhone 4Sで表示してみました。640 x 960です。高さが足らない分縮小され、左右に黒い部分が表示されます。黒い部分は左右49pxずつ、計98pxありました。

iPhone 5 のスクリーンショットを iPhone 3GSで表示

20120924-s5-3.png

iPhone 5のスクリーンショットをiPhone 3GSで表示してみました。320 x 480です。黒い部分は左右25pxずつ、計50pxありました。こちらは縦横2倍表示は省略します。

 

今回は縦置き(ポートレート)のみでしたが、横置き(ランドスケープ)でも基本的に余白部分は同じ大きさになります(高さと幅の違いはありますが)

176pxの増加ってだけ聞くとたいして変わらないかな?と思ってましたが、こうしてみると結構広がりましたね。情報量が増えた感があります。縦長になったことについても、もう慣れた感じですね。

 

そういえば、僕と嫁さんはブラック&スレート買ったので黒枠も本体色と一体化するので気になりませんが、ホワイト&シルバーの場合はどんな感じに見えるんでしょうか?

嫁さんが最初白にする予定だったんですが、アプリによってはこの黒枠がすごく気になってしまうかもしれない、というわけで直前に「やっぱり黒にする」ってなった経緯があっあたのですが。未だにどんな感じになるか知らないので気になってます。余白部分が白枠になるんならそれほど気にならない気はするんですけどね。

ホワイト&シルバーのユーザの方、よかったらどんな感じになるか教えていただけると嬉しいです!