iOS7で考える これからの時代のUIデザイン

第2回 フラットデザインだけではない? iOS7のデザインの変更点

この記事を読むのに必要な時間:およそ 2 分

前回はiOS7が採用したフラットデザインの特徴や理由,メリットなどをお話しました。

今回は見た目にすぐにわかるそのデザインテイストだけではなく,それ以外の部分にも焦点をあててお話したいと思います。フラットデザインに目を奪われがちではありますが,実際に細かく見ていくとそれ以外の変更点もたくさんあることがわかって頂けると思います。

全幅テーブルビューの推奨

iOSでは今まで通してずっと「テーブルビュー」と呼ばれるリスト形式のUIを,様々な箇所で採用してきました。

テーブルビューには「プレーンスタイル」「グループスタイル」の2種類があります。グループスタイルは一つのページ内で複数セクションのリストを配置する際に使われています。

iOS6までのプレーンスタイルとグループスタイル

画像 画像

しかし今回のiOS7から,グループスタイルのリストが撤廃され,テーブルビューは全幅のプレーンスタイルのみとなりました。正確に言うと,グループスタイルのテーブルビューは残っているのですが,見た目は全幅でプレーンスタイルにとても近く,グループごとの間にスペースが空いている形になっています。

iOS7のプレーンスタイルとグループスタイル

画像 画像

全体のレイアウトの統一がされたということで個人的には良い変更だと思います。ただ,今までこのグループスタイルのテーブルビューを模した形でアプリやWebのデザインをされていた場合,⁠OSを踏襲したデザイン」を目指したものにしていくのであれば変更が必要になってくるかもしれません。

グループスタイルのテーブルビューを模したUI例。スマートフォン用Webサイトで見かけることが多い

画像

ステータスバーもデザインの一部に

電波状況や時間などを表示しているステータスバーは,iOSの初期には数パターンの配色しかありませんでしたが,iOS6ではアプリ内の配色の中間色を自動的に配することができるようになりました。そして今回さらに大きく仕様の変更が入っています。

実はステータスバー自体というよりも画面のビュー全体の仕様が変更になりました。今まではステータスバーを含まない範囲でアプリが描画されていたのに対し,今回からステータスバーの裏面にまで描画範囲が拡大されています。つまりステータスバーを透明にすることで,ステータスバーを自由な配色にすることができるようになったのです。 また,それに合わせてアップルのデザインポリシーもステータスバーとナビゲーションバー(ページタイトルや戻るボタンがあるバー)を同色にすることで一体感のあるものに変更されています。早くもFacebookやEvernoteがiOS7に準じたデザインになっていますので,ぜひ参考にしてみてください。

ステータスバーとナビゲーションバーが一体化したようなデザインのFacebookとEvernote

画像 画像

Retina Displayオンリーに対応

今回のiOS7では,iOS6までのOSに対応していたiPhone 3GSが対応端末からはずれました。それにより実質的にiOS7に対応している端末は全てRetina Displayモデルのみとなっています(iPad miniには例外的にRetina Display非対応モデルが存在します)⁠

これによりiOS7用のアプリを作る場合,Retina Display用の画像だけを用意すればよくなります。これはもちろん手間の削減もありますが,それ以上にRetina Displayでしか表現できない繊細なデザインが可能となったことを意味します。

今までは非Retina端末を視野に入れると,Retina Display上の換算では最小単位を2pxとするしかありませんでした。しかしiOS7ではその制限がありませんので,これまで表現できなかった細い線などを積極的に活用できるようになりました。現にiOS7ではステータスバーの電池残量表示やリスト部分の区切り線など,今まで用いてこなかった細い線を進んで利用しています。iOS7時代では,こういった細い線を利用したデザインが今後も増えていくことでしょう。

iOS6とiOS7のステータスバーのデザインの違い。iOS7の方が電池や電波状況を表すアイコンの線が細くなっているのがわかる

画像

画像

著者プロフィール

宇野雄(うのゆう)

ヤフー株式会社 UI・UXデザイナー。スマートフォンWebとアプリを中心に,UI・UX設計/デザイン/コーディングを担当。

全く新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。犬派。昨年「親バカ」ステータスも追加。

Twitter:@saladdays

コメント

コメントの記入