Entries

WWDCレポ2 ー 新iPhoneの解像度を体感する比較画像



解像度が2倍になるという新iPhone。はたしてどれくらいキレイなのか!?
というわけでTiltShift GeneratorのUIを新しいRetina Display対応で0から作り直した。 左がRetina用に新しく作り直した版、右は従来版

新旧のiPhoneではこれぐらい表現力が違いそう。新しい版はもうちょっと微調整しないといけません。Retina対応しないと、ライバルと比較したときにだいぶションボリしたことになる実感。


改装コストは?
新iPhoneでは、古いアプリは勝手に2倍表示される為、基本的にプログラムパートの改修コストはほぼ0と思ってよい模様。 問題はグラフィックのコスト。

既存のコンポーネントはともかく、ちょっとグラフィックを凝ったアプリを作ろうとすると、デザインの結構なパートはビットマップ画像に依存することになる。 これの改修コストがハンパない。

原画がビットマップのTiltShiftGeneratorの場合、作り直しにフルタイムで2日費やしました。これから更に画像を切るお仕事や、ホームアイコンや起動画面を作り直すお仕事が。。。

そういうものを考えると、Androidを含め、今後のモバイルアプリのデザインは、イラレかFireworksで行うのが必須となりそうです。ここでまた、さらにコスト増。あまり売れてないアプリなら、Retina対応を見送るという選択肢も十分にありかもしれません。

制作コストは?
for you の金田さんは、グラフィックのデザインフィーがおよそ1.5倍になります!!と、Tweetで叫んでいたけど、まさにその通りの印象。画像を切るお仕事が2倍になりますし、1pxの直線とかを攻めると、低解像度と高解像度を完全に作り直しになります。

しかも後方互換を考えた場合、低解像度→高解像度という順で作らざるをえない。必然的に、高解像度ベクター → 低解像度ビットマップで切り出し → 作ったり壊したり → 高解像度ベクター書き直し → 低解像度ビットマップで切り出し → 高解像ビットマップで最適化。 という、砂を噛むようなプロセスが必要となります。

解像度対策としては、できるかぎりビットマップを使わず、ベクターで描画するのが王道ですが、それはプログラマの負担を跳ね上げてしまいます。 オープンソースのSVGライブラリ等を導入して、デザインをSVGから読み込んでいくアプローチが、今後の主流となるかもしれません。

重要なことなので繰り返しますが、Retinaディスプレイ対応は、少なく見積もっても工数もお予算も1.5倍はかかります

細かい差異をどう吸収するか?
解像度が2倍になったディスプレイで、考慮すべきことはまだまだあります。

例えば、旧iPhoneで引いていた 1px の直線。 新iPhoneではどう処理すべきか? 2pxのラインとして扱うか、1pxのラインとして扱うか、1pxのラインで明度を2倍にして扱うか、あるいは新iPhoneでは1px、旧iPhoneではアンチエイリアスの0.5pxラインとすることも考えられます。 フォントや小さいアイコンのサイズも新iPhoneで読めるて旧iPhoneで読めないサイズがあると予想されるなど、細かい点は数えきれません。

また新iPhoneではコントラスト比が変った為、従来のiPhoneで鮮やかに見えていた処理は、新iPhoneではガビガビに見える可能性もあります。 iPhone, iPad, iPot Touch, iPhone4の全てで液晶の性格が違うため、色の調整はどこかで諦める必要も。

そもそも解像度300の世界で、自分はちゃんとした精度がだせるのか。。。これから修行するしかない感じ。頑張ります。

結論
というわけで、真面目にやるとものすごいハードルの高そうなRetina対応。でもやればやっただけ報われるキレイさが手に入りそうです。 広告系とかオシャレ系、クリエイティブ系アプリなら血を吐いても頑張ったほうがよさげです。

質疑応答はいつもどおりTwitterで