ENTEREAL

iOS7で開発はどう変わる

iOS7で変わる事

iPhone5s/5cの発売とともに、旧iOSデバイス群へiOS7の配布が始まりました。特徴は何と行ってもUIの全面的な変更です。

いわゆるフラットUIと呼ばれるものですが、Windows8のフラットとは若干違う方向性かと思われます。エレメントやオブジェクトの陰や質感といったリッチな装飾が一切なくなり、半透明の背景を多用したシンプルなものです。

最近は、ネイティブアプリより敷居の低い(また、自由度が高い)WEBサイトやWEBアプリも多く、それらをiOS全体のイメージに合ったものに変えなくてはなりません。ネイティブアプリでライブラリに用意されたエレメントをそのまま使っていた場合、ほとんどの部分は自動でiOS7のUIを使ったエレメントに自動で変化します。具体的なコンテンツ部分(テキストやイメージ等)の装飾は独自に修正する必要があるかと思いますが、機能はそのまま保たれているはずです。

一方、WEBサイトやWEBアプリの場合のUIは、自動で変化はしません。HTML5やCSS等で装飾を施した部分を個別に変える必要があります。

ライブラリを使った場合は、ライブラリに依存しますが、最新のiOSに合わせたバージョンアップがリリースされるまでは、独自に対応するなどの方法を取るしかありません。

一般的にデザイン面は、CSS変更となる訳なのですが、リッチな装飾を施すにあたり加えた要素やクラスはパフォーマンスやメンテナンス性の意味でも取り除く方が良いでしょう。部分的には要素を加える部分はあるかもしれませんが、基本的にはHTMLを削る方向の修正が多くなると思います。

iOS7やXcodeのアップデートやAPI仕様の変更による内容は別途まとめるとして、今回はUIに特化した内容にターゲットを絞ってみていきます。


iOSアイコン比較

home
icons
icons
icons
icons

対応ツール/テンプレート/ライブラリ

Flat UI

Flat UI

Bootstrapを最近流行りのフラットUIに変更できます。

http://designmodo.github.io/Flat-UI/

Flatstrap

Flatstrap

Bootstrapを最近流行りのフラットUIに変更できます。

http://www.littlesparkvt.com/flatstrap/index.html

Font Awesome

Font Awesome

Bootstrapの画像ベースのアイコンを、フォントベースのアイコンに変えることが出来ます。フォントベースなので色の変更や大きさの調整が非常に楽です。

http://fortawesome.github.io/Font-Awesome/

Bootstrap Arrows

Bootstrap Arrows

簡単に矢印を追加することができます。色や大きさ、角度などが自由に調整できます。

http://bootstrap-arrows.iarfhlaith.com/

Fontello

Fontello

自分の使いたいアイコンだけを選んで軽量のフォントファイルとしてダウンロードできるサイトです。プラグインではないですが、非常に便利なので。

http://fontello.com/


Tags