こんにちは。ソーシャルゲーム事業本部でUXデザインを担当している向井です。

先日行われたApple社の新製品発表イベントで、iPhone5sとiPhone5cが発表されました。
明日、9/20(金)に各キャリア(docomo、au、SoftBank)から発売されるということで、既にApple Storeに並んでいる方もいるとかいないとか。
iOS 7


そんなわけで、今回は、本日から日本でも一般配布が始まった、Appleのモバイル向け最新OS「iOS 7」を、実機(iPhone 4S)にインストールしてみて大きく変わったUIを今一度、確認してみたので、そのことについて触れたいと思います。

ホーム画面

ホーム画面

所謂、「フラットデザイン」が採用されており、ホーム画面を見るだけでもかなり変わったと感じることができます。
アプリの起動・終了時などのアニメーションが調整されていたり、アイコンも、iOS 6の時より丸みが強くなっているようです。
iPhone 4sの場合、3.5インチディスプレイなので、アイコンは変わらず、4行で並んでいます。

アイコンフォルダ内の表示が9個に

アイコンフォルダ

アイコンフォルダ内の表示数が、iOS 6までは12個だったのに対し、iOS 7では9個になっています。
フォルダに10個以上のアプリを格納した場合は、スワイプ表示で切り替える仕様になったようです。ホーム画面もスワイプで画面を切り替える仕様なので、そちらにあわせた感じでしょうか。


ブラウザ

全体

ブラウザブックマークシェアードパネル

ブラウザに関しても、フラットデザインが採用されていて、デザインやアイコンが大きく変更されています。
アドレスバーのところも検索窓と一緒になっていたり、シェアードパネル見せ方もだいぶ変わっています。

新規ページが9つ以上開ける

新規ページ

新規ページに関しては、今まで8つまでの制限がありましたが、iOS 7では9つ以上開くことができるようです。切り替えの見せ方も、Chromeっぽくなっています。
試してはいませんが、無限に新規ページを開けそうな感じですね。

スクロールすると表示領域が広がる

スクロールすると・・・

スクロールすると、URLバーの高さが小さくなり、下部のツールバーに関しては見えなくなります。この変更により、今までよりもブラウザ表示領域が広くなって、その分、コンテンツを大きく見せることができますね。

フリックで「進む」「戻る」

caputure_13caputure_12

下部のツールバーにある「(<)戻る」「進む(>)」以外に、フリック or スワイプ操作で「戻る」「進む」が可能になりました。
「戻る」場合は、画面の左側を右方向に、「進む」場合は、画面の右側を左方向に向けて フリック or スワイプすることで遷移できます。
直感的な操作なので、慣れてくると便利になりそうです。

Landscapeモードにするとフルスクリーンに

Landscapeモード

端末を横に傾ける(Landscapeモードにする)と、上下のバーが隠れて、フルでコンテンツを表示することができます。3.5インチディスプレイの場合、バーが残ったままだと、ブラウザの表示領域がかなり狭くなるので、これはその部分のケアかなと思っています。
ちなみに、特定の動作(一番下までスクロールする等)をすると、上下のバーは表示されます。
また、よくやる画面縦向きのロックの切り替えは、iOS 7の新機能「コントロールセンター」でできます。
(追記)iOS 6でも、Landscapeモード時にフルスクリーンする機能がありました。ただ、iOS 7からは、横に傾けると同時にフルスクリーンになるようです。

アドレスバーが隠れない・・・

アドレスバーが隠れない

一方で、インパクトが大きいと思っているのが、アドレスバーの挙動です。

iOS 6までは、JavaScript(scrollTo)で、アドレスバーを隠すことができていましたが、iOS 7ではそれが効かなくなってしまうようです。
ファーストビュー内に必要なアクションボタンなどを配置している場合など、特に3.5 inch ディスプレイで、一度、見直した方が良いかと思います。

(おまけ)iPod touchのSafariのUser Agentが少し変わった

iOS 7を搭載したiPod touchのSafariのUser Agentを確認したところ、若干の変更があったようです。

■iOS 7を搭載したiPod touch(第5世代)SafariのUser Agent
Mozilla/5.0 (iPod touch; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

文字列として、touch が追加されております。
User Agentで分岐させることはよくあるので、正規表現のマッチング部分など、一度確認しておいた方が良いかと思います。


マルチタスク管理機能


capture_09

マルチタスクの見せ方も変更されています。
タスクを終了させる方法も、今まで長押し⇒アイコンタップだったのが、iOS 7の場合、プレビュー画面を上部にスワイプする方法に変わっています。


コントロールセンター


マルチタスク管理機能

iOS 7の最大の目玉ともいえるのが、このコントロールセンター。
レイヤー構造を実感できる機能の1つです。

画面下から上にスワイプしたらこの画面が表示され、Wi-Fiや画面縦向きのロックの切り替え、
画面の明るさや音量の調整、音楽の再生、カメラの起動などが行えます。
個人的には、ライトのon/offが役に立ちそうな気がしています。



最後に


今回触れたところ以外にも、多くの部分がiOS 7で変わっています。
ユーザーにより良い価値や体験を提供するためにも、新しいデバイスやOSの特徴を早い段階で把握することが必要になるのではないでしょうか?

そこで、弊社で、UI設計時に活用しているドローイングツールCacoo(カクー)で作成した、iOS 7向けのワイヤーフレームパーツをご用意しました。

Wireframe-Stencil-for-iOS7


以下のリンクからダウンロードできます。
SVG バージョン
※SVG版は、Cacooでインポートしてステンシルとして使うことができます。
PDF バージョン
PNG バージョン

iOS 7を理解する上で、ぜひ活用してみてください。


DeNAでは、新しいデバイスやOSが登場しても、これはチャンスだ!と思って、
UXを追及していけるクリエイターのみなさんの募集をお待ちしております!