2013年9月20日金曜日

StaccalのアイコンiOS7対応 (前編)


iOS7がリリースされ、いよいよiPhone5s/5cが発売になりました。

iOS7のリリースに合わせ、様々なアプリがiOS7に対応したフラットなUIになってアップデートされており、非常に楽しい日々が続いております。



さて拙作Staccalは、まだUI自体はフラット対応が完了していないのですが、アプリアイコンはiOS7に対応しました。

新アイコン製作の過程で色々と試行錯誤があったので、共有したいと思います。

iOS7のアイコン変更点
iOS7発表時から話題に挙がりましたが、iOS7からアプリアイコンのサイズと角丸の規定が変わり、さらに全体的なOSの世界観がフラットデザインに変更されました。

下図はiOS6とiOS7それぞれのAppStoreアプリのアイコンですが、ご覧のとおり角丸のRが変わっています。実際にはiOS7の角丸は正円ではなく、段階的に曲率が変わっているので一筋縄で行かなくなっています。


更に、iPhoneの代名詞とも言えるグロスの入った輝くような立体感のある質感は、iOS7ではかなり色数を抑え、グラデーションやシャドウを極力使わないデザインで統一されています。

iOS6のアイコンをそのまま使うと
試しにiOS6のStaccalのアイコンをそのままiOS7で動かすと以下の様になり、見ての通り強烈な違和感を放っています。


このブログでも製作過程を紹介していたりと、Staccalのアイコンにはかなり愛着がありました。
Staccalのアイコンが出来るまで
Staccal v2.0.0のデザイン変更点

その為、このテイストは残したまま角丸さえ合わせれば何とかなるのでは、と楽観視していましたが、どうやらそれだけでは済みそうにありません。
どこがおかしいか観察
では具体的にどんな所に違和感を感じているのか、自分なりによく観察し仮説を立てて、修正プランを作っていきます。


1. 角丸の内径がおかしい

先ずは上述の通り、iOS7で角丸のRが変わった為、アイコンの外側のラインと内部の紙の部分のラインのRが合わなくなっています。

木目のテクスチャの部分がアイコン全体の輪郭を表していたので、輪郭が崩れている状態に見えているのではないかと思います。





2. 縁のエンボスがおかしい


iOS6デザインではアイコンの縁に1px程のエンボスがあり、立体感を持たせていましたが、OS側でカットしているラインが変わった事によりR部分の縁取りが消えてしまっています。iOS7ではエンボス自体必要なさそうです。





3. 全体的に暗い

他のアイコンと比べると、かなり暗く沈んだ印象になってしまっています。標準のアイコンがかなりポップな色を使っているのに対し、Staccalは木目とペーパーのテクスチャを使い、更にページのカール感を出す為にシャドウを多用している為だと思います。






4. 文字が太い

アイコンの中に、カレンダーをあしらっているので日付の文字が入っていますが、iOS7からOS標準のフォントがHelvetica Neue Ultra Lightになった為、文字がかなり太く見えてしまっています。



他にもありそうですが、とりあえず以上4点のポイントを対象に改善していきます。ちなみに、iOS6で全く同じアプリのアイコンを並べた場合、以下の様になります。iOS7のUIに見慣れてしまうと、やはり全体的に暗く重い印象を受けます。



ちょっと長くなってしまったので、以降は後編に続きます。