App storeを観察してios11の特徴を考察してみた

はじめに

ios11では大幅にUIがアップデートされました。特にApp storeは大規模なリデザインがされたので、ios10のデザインと比較してios11の新しい特徴を分析してみることにしました。

※新人デザイナーによる個人の見解が多く含まれているため、内容に間違いがあれば絶賛FBをお待ちしております🙇

タブバー

アイコンの変更

まず見ていただきたいのが、こちらのUpdatesアイコン。ios10では、アウトラインのアイコンでしたが、ios11から塗りアイコンに変わっています。

ガイドラインを見てみると、以下のように説明されています。

塗りアイコンの方がアウトラインアイコンよりもハッキリしているので、ios11から塗りアイコンが推奨されるようになりました。

Searchアイコンも同じように、ios10では1pxのborderでしたが、ios11では2.5pxのborderに変更されています。borderを太くすることでアイコンをハッキリと認識してもらえるように変更されています。

タブの変更

ios11からカテゴリーアイコンがなくなり、GamesとAppsの2つに分かれました。公式サイトを確認すると、以下のように説明されていました。

ゲームはとても人気があるので、専用の場所を作りました。熟練のゲーマーたちがキュレーションをするこのタブは、あなたのゲームに対する情熱を次のレベルに引き上げます。

ゲームとその他のアプリという2パターンに分けてタブに配置したのは、個人的にはかなり驚きでした。

「Today」タブ

ユーザーに最適化されたTOP

新しいApp storeの目玉の1つ、「Today」タブ。公式ページによると以下のように説明されています。

このタブを毎日チェックすれば、アプリケーションの世界で今起きていることを正確に把握しておけるようになります。とっておきのニュースが
ある時は、App Storeのエディターがその内容を紹介します。

この一文を踏まえて、私は今回の変更を以下のように考えています。

ios10以前はApp storeにたくさんのアプリが増えていたはずです。プラットフォームを提供するAppleとして、アプリの数が増えること自体良いことですが、ユーザー視点で考えとき、増えすぎたアプリの中から自分に合ったアプリを見つけることが困難になっていったと考えます。そのため、ios11では、Appleがユーザーにとって最適なアプリを選び、提供してあげることを一番の価値と考えて、このような変更を行ったと考えます。

Shadow

Appleは今までフラットデザインを使っていましたが、ios11の変更によってShadowが利用されるようになりましたね。まだ、フラットデザインがApp storeでも見受けられますが、ios11はフラットデザインからの脱却を図っている段階なのかなと考えています。(大規模すぎるサービスなので、一気に変更することが難しかったと考えてます)

Animation

ios11からアニメーションが利用されるようになりました。ガイドラインでは、アニメーションについて以下のように説明しています。

Beautiful, subtle animation throughout iOS builds a visual sense of connection between people and content onscreen. When used appropriately, animation can convey status, provide feedback, enhance the sense of direct manipulation, and help users visualize the results of their actions.

美しいアニメーションを使えば、人とコンテンツを視覚的につなぐことができる。正しくアニメーションを使えば、現在の状況を伝えたり、フィードバックを与えたり、ユーザーが直接操作している感覚を高め、ユーザーの行動の結果を視覚化するのに役立つ。(春田訳)

とのことです。

とはいえ、このアニメーションを見てるとちょっと動きが滑らかでないような気がして、以前のヌルヌルと動くiPhoneじゃ無くなっているような感じがするので個人的には少し残念でした。

人によって感じ方は違うと思うのでご自身で触って感じたことを教えてください!

「Games」タブ

Typography

一番に注目したいのが、「Games」のインパクトの強さですね。ios10でもこのタイポグラフィは少し見受けられましたが、ios11から本格的に導入してきたというところでしょうか。

「Games」というタイトルでは、「SF UI Display」のBold、font-sizeは34pxが利用されていました。

また、下の小見出しである「Amazing AR Games」では、「SF UI Display」のBold、font-sizeは22pxが利用されていました。

ガイドラインではTypofraphyに関して以下のように説明されています。

Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.

重要な情報を強調する。フォントの太さ、サイズ、色を利用してアプリ内で最も重要な情報を目立たせる。(春田訳)

とのことです。つまり、このタブを開いたとき「Games」が最初に視界に入るようにフォントを太く、大きくしたということでしょう。

Header

ios11では、スクロールをすることでヘッダーが表示されます。スクロールした時のヘッダーはios11と変化はありません。

また、スクロールしない状態でヘッダーがないのは、「Games」という情報を強調して伝える必要が合ったからだと考えます。

ヘッダーの中にtitleを表示した状態で、最も強調したフォントを使おうとすると無理が生じます。

そのため、タブを開いた直後はヘッダーを表示せずに、「Games」というフォントを強調することを優先したと考えます。

「Search」タブ

ios10では、検索バーをヘッダー固定にしていましたが、ios11ではtitleの下に検索バーを表示しています。このタブでユーザーがやるべきことは「検索」ですので、ヘッダーよりも目立つtitle下に検索バーを配置したのは納得のレイアウトだと考えています。

「Updates」タブ

この「Updates」タブで注目したのが、Update Allを行ってもらうボタンがios10ではヘッダー固定でしたが、ios11からヘッダー固定ではなくなっています。

ios11からヘッダー固定のアクションボタンは非推奨になったのかな?と思いガイドラインを確認してみました。ガイドラインでは以下のように説明されています。

ヘッダーだけではなくどこで使っても良いという説明がされていました。ヘッダーで使うことが非推奨というわけではないようです。

まとめ

App storeを観察してわかったios11の大きな変更点は以下の通りです。

・アイコンはアウトラインアイコンから塗りアイコンへ変更

・フラットデザインからの脱却(完全脱却はまだ先)

・アニメーションの利用

・重要な情報は、重要とわかるようなフォントを利用する

App storeの分析にあたって、新しいガイドラインを読んだところたくさんの発見があったので、ガイドラインをがっつり読み直してみるとまた発見がありそうです。

以上、App storeを観察してわかったios11の特徴をまとめてみました🙇

Like what you read? Give Masaki Haruta a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.