iPhone5の画面サイズって16:9じゃないじゃん!- ややこしいので Ratio Calc作りました –

HDサイズに対応した iPhone5 。今まで守っていた 4 : 3 の世界から 16 : 9 の世界へ。
最初こそ違和感がありましたが、もはや iPhone4 のサイズの方がなんか短く感じます。

また 16 : 9 の世界はiPhoneアプリのデザイナーにも変革を要求しました。
iPhone5 対応…リスト形式の単純なアプリならそうでもないですが、
凝ったデザインにすればするほど、ナビゲーションバー2つ分という
けして小さくない領域に、あってもなくても別にいい空間を作らないといけなくなりました。

しかしそれも慣れの問題で、もはや iPhone5 の画面から iPhone4 でのサイズ感が
なんとなく割り出せるようになり、あってもなくても別にいい空間の処理の仕方もパターン化できるようになりました。

iPhone5の画面サイズは 16 : 9 じゃない

ところで最近気づいたんですが、iPhone5 って完全な 16 : 9 じゃないんですね。
みんなが 16 : 9 って言うから、そうなんだと思ってたんですが、

1136 × 640 は 16 : 9 ではありません
71 : 40 です!
71 : 40!って何それ!

えー嘘、だって Wikipedia にも 16 : 9 ってかいてあったような…
と思ってちゃんと見てみたら、

「4インチ (100 mm),(画面比率約16:9)」ってかいてました。
「約」ですって。えーそうなのー?

だってAndroidでHDって言ってる端末は 16 : 9 でしょ

AndroidででてるHD端末は
QHD ( INFOBARとか ) 960 × 540 16 : 9
HD ( GALAXY S IIIとか ) 1280×720 16 : 9

最近でたちょっとオカシイくらい高解像度のxxhdpi端末でも
フルHD ( HTC J butterfly HTL21 ) 1920×1080 16 : 9

といった感じで忠実に 16 : 9 です。
※最初の方に出た端末は微妙に 16 : 9 じゃなかったりするんですが。

なんでそんな微妙なサイズなの?

きっと、本当は 16 : 9 にしたかったけど、それ以前の画面サイズとの互換性を維持するために
横のサイズは 640 のまま変更できなかったので、iPhone5 のサイズはこんなことになっているのでしょう。
横のサイズが変わってしまったら、今までのアプリどうするのってなるし。

じゃあ16 : 9 のものはどうやって表示している?

…ところで、じゃあHDサイズの動画とかってどう表示されているのでしょうか?
比率合ってないのにどうやってるのだろう。
見てみました。

動画サンプル

なんか、黒い 1px のラインが上に足されているではないですか!
そう、1136 × 640 は、1136 × 639 なら16 : 9 なんです。

…それにしても横のサイズが640のままで良かったですね。
それともそのうち、また新しいサイズが登場するのでしょうか。
Retina+ なるものの噂もありますしね。

比率が変われば表現も変わる

HDやシネマスコープとかに代表される動画関係のサイズの他にも
黄金比とか白銀比とか、デザイナーには重要な比率がたくさんあります。

比率を保ってレイアウトを決めると自然と美しい構成になるし、
オブジェクトのサイズを変更するときも、比率を保ってないと画像が歪んでしまったりしてしまいますよね。

そしてモバイル端末において16 : 9 が主流になることで、レイアウトとか表現とか
UIもどんどん変わっていくんでしょうね。

デザイナーとしては比率とはうまく付き合っていきたいものです。

ところで比率計算機つくりました

さて、そんなややこしい比率ですが、その面倒な計算を楽にするツールをつくりました。
缶コーヒーより安い100円で販売中です。

ratio_calc
【→アプリDLページを見る(iTunesが開きます)】

特定のサイズの比率を算出することも、特定の比率でサイズを算出することもできる優れものです。
上に比率を、下にサイズを入れて使います。
真ん中の矢印ボタンは比率からサイズを求めるか、サイズから比率を求めるかを切り替えるボタンです。
このサンプル画像では、サイズから比率を求めているので矢印が上を向いてます。

これで、16 : 9 の動画のサムネイルを入れたいけど、横のサイズを 240px にしたら、
縦はいくつになるんだっけ?

とか、

640 × 360 って何対何だっけ?

とかいう疑問がサクッと解決することうけあいです。


pucchon design apps

絵本アプリ
その他のアプリ

小ぐまのきょうだいケーキをつくるの紙の絵本ができました!