[iOS 11] App Storeからボタンまで!新バージョンのデザイン変更点をおさらいする

[iOS 11] App Storeからボタンまで!新バージョンのデザイン変更点をおさらいする

Clock Icon2017.09.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

iOS 11は全体的としては控えめなインターフェースの変化を遂げています。
大きな変更点としては、コントロールセンターとApp Storeが刷新され、iPad版はそれらに加えてDockとアプリスイッチャーが刷新されています。本稿ではいくつかの変更点を抜粋してご紹介します。

App Storeのリデザイン

iOS 11のApp Storeは以下のような変更点があります。

  • iOS 10までのおすすめ・ランキング・コンテンツタブが廃止
  • 新たにToday・ゲーム・Appタブが追加
  • Todayタブではカード形式のUIでニュースフィード的に最新情報が提供

Todayタブは見栄えがするカード形式のビジュアルによって回遊率を上げ、より広くアプリを販促する狙いでしょうか。 ビジュアルデザインの構成は下記のようになっています。

  • アクセントカラー: 青色一色(OSのテーマカラー)
  • ベースとなるカラー: 基本的にはコントラストの低い無彩色
  • タイトル扱いのテキスト: iOS 10に続いてボールドでコントラストが強く、フォントサイズも大きめ

iOS_Design_AppStore

このあたりはiOS 10で刷新されたミュージックアプリのデザインに寄せています。
主役となる様々なアプリを引き立てるために、App Store自体は余計な装飾を廃して非常にシンプルにまとめられています。
カード式UIの展開と閉じる際のインタラクションはシンプルながらとても凝っています。
また、ゲームタブの出現は大胆な変更ですが、それだけゲームアプリのニーズがあるということでしょう。

コントロールセンターのリデザイン

iOS 10ではPage Controlによって2画面に分割されていましたが、iOS 11では1画面内に統合されました。

  • 各コントロールは角丸ボタン+アイコンの形状で、3D Touchによりそれぞれ内包する要素を表示
  • 表示項目は 設定 > コントロールセンター より追加・削除可能

iOS_Design_ControlCenter

ただ、輝度・音量が縦長のスライダーになっているのですが、コントロールセンターを閉じる際の縦スワイプと完全に競合しているため、閉じるつもりが意図せずに輝度や音量が最小値になることがありました。
ですので、スライダーは横長のデザインの方が良さそうだと感じます。
ちなみにiOS 10では通知センターを開く際に、画面下部に当たった際にTaptic Engineにより「コツン」という触覚がありましたが、iOS 11ではそれがなくなっています。

iPad版のDockの改良

iPad版ではDockが改良され、操作性が飛躍的に向上しています。

  • iOS 11では画面外の下からスワイプすればどの画面でも表示可能
  • Dockには任意に配置したアプリに加えて、右側エリアには最後に使っていたアプリが表示
  • ビジュアルデザインの変更点としてDockエリアが角丸の矩形で囲まれたものに

iOS_Design_Dock

ビジュアルデザインについてはOSの全体に言えることですが、タップもしくはスワイプ等、何らかアクションができるオブジェクトにはその意図の補足として角丸を配した矩形で囲むデザインポリシーがうかがえます。

スクリーンキャプチャの改良

スクリーンキャプチャを撮る方法iOS 10と同じですが、その後ですぐに加工や共有ができる点で改良が加わりました。

  • iOS 10まではスクリーンキャプチャした画像は即座に写真アプリに保存
  • iOS 11ではキャプチャした画像が画面左下に一旦サムネイル形式で表示。そのまま左にスワイプすれば保存、タップすれば編集状態に移行
  • 編集は手書きモードと切り抜きが可能(iOS 11からiPhone版のメモアプリでも手書きモードが利用可能)

iOS_Design_ScreenCapture

iPhoneではApple Pencilは利用できないので細かな描画はできませんが、簡単なメモ程度なら指でも十分に描画できます。
使い方次第で重宝しそうな機能です。

Siriの改良

Siri がこれまでよりも自然で表情豊かな音声になりました。
また、「音声アシスタント」としてその誕生を披露紹介されたSiriですので一般的なユーザーにとってはピンとこないかもしれませんが、会話部分だけではなく機械学習の機能が強化されています。 これによって、例えば下記の機能が実現されています。

  • キーボード入力時にそのユーザーが使う単語を予期して入力候補を表示
  • ニュースアプリ(日本では未対応)で Safariでの閲覧記録をもとにした、ユーザーにより沿ったニュースを提供

iOS_Design_Siri

また、この機械学習は端末内で完結され、Appleのセキュアなイメージにも繋がっていきます。
12月からオーストラリア、英国、米国で販売を開始される、音声でSiriのコマンドを受け付けるHomePodの登場でVUI(Voice User Interface)面でのSiriのアピールにもなります。それに加え、Apple Watch向けのwatchOS 4には新たに「Siriフェイス」が搭載されたり、 AppleのサイトのiOS 11の紹介ページではSiriの名のもとで機械学習に関する言及が出てきているため、音声アシスタントだけではなく人工知能としてのSiriのブランディングが強化され始めていると言えます。

キーボード、電卓アプリ等ボタンの形状変化

キーボード(日本語かな)や電卓アプリは罫線で区切られた形状のボタンでしが、iOS 11ではハッキリとしたボタンらしい形状に変更になっています。

iOS_Design_memo

iOS_Design_Calculator

ファイルアプリ

これまでのiCloud Driveアプリが廃止になり、ファイルアプリが追加されました。

  • Macのファインダーに近いデザイン
  • ファインダーで作成したタグも同期
  • iPad版は画面左側にファインダーと同様のサイドバーを備えたUIに。iCloud Driveアプリよりファイルエクスプローラーらしい機能・外観を獲得
  • Dropbox、Google Driveなどのサードパーティーのクラウドサービスとも連携可能

iOS_Design_File

まとめ

iOS 11では本稿で紹介した以外にも細かなインタラクションの調整など一目では気づかない変更が加えられています。
「よく観察しないと気づかないけど、なんとなく前よりも気分が良い」、これは意識下で良い変化を感じ取っていると言えます。
小さなブラッシュアップの積み重ねによって、全体的なユーザー体験は大きく向上しています。
また、UI 以外の変更点として機械学習等によりユーザーのコンテキスト汲み取り、行動をサポートする機能はユーザー体験という観点では今回のアップデートの目玉の一つと言えます。

iPad版については大きなアップデートになりました。
今までもマルチタスクはできましたが、正直言ってあまり融通が効かない印象のiPadでした。
MicrosoftのSurface関連製品と比較すると、iPadでもmacOSが動くようにすればよいのではというユーザーの声をネットでしばしば見ます。しかし、今回のアップデートでのDockやアプリスイッチャーの刷新やファイルアプリの追加、iOS 9より追加されたスプリットビューによりiOSのよさを活かしつつも、マルチタスキング性能や情報へのアクセス速度が飛躍的に向上しています。
Dockの刷新については少しえげつない感じもしますが、この変化とファイルアプリよって、利便性を向上させつつOSの住み分けがうまいところに着地しています。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.