[既存アプリに学ぶデザイン vol. 3]App Store 読解 vol. 2

デザイナーの たなか ゆきこ です。

前回に引き続き App Store の UI について読み解きをしていきたいと思います。 私個人の見解ですので、本当は別の意図がある可能性もあります。

今回のアプリ

App Store

ランキング画面のUIを読み解く

この画面をざっと見てみましょう。

＋のアイコンの意味とかも知っておいたがいいかもね

有料・無料のボタンに「＋」が付いているんですが、これの意味は、iPhoneとiPadで最適化されてるアプリにつけれらます。基礎知識として知っておいたがいいかと思います。

セグメントコントロール

異なる切り口で表示を変えるボタンです。これを使うときは、情報の上下関係を考える必要があるかと思います。 「ランキング」画面では、ランキングの直下にあります。 ランキングデータという同一の情報から、「有料」「無料」「トップセールス」で抽出して表示するために使用されてます。 なので、ランキングの直下にあり、この下が変わっていく。この時、アプリの情報階層を考えるとスムーズ？なのかな。実装の階層とは違いますよ。デザインの情報階層です。

アプリの詳細説明画面

この一連の流れを見ると、商品を見せるアプリのヒントになると思います。

一覧と違う使いかたのセグメントコントロール

一覧ページでは、同じデータの見方を変える切り口で表示されていましたが、詳細ページでは、「情報」「レビュー」「関連」と言った違う情報を表示させるために使われています。

アプリ ∟アプリアイコン ∟アプリタイトル ∟対象年齢 ∟提供企業 ∟★★★★☆ ∟開く or ダウンロード　ボタン ∟Apple Watch ∟アプリ情報 ∟詳細 ∟レビュー ∟関連

情報階層的には、タイトルなどと同等の「アプリ情報」の下の「詳細」「レビュー」「関連」階層になってます。

まとめ

標準アプリは、この使い方はいいのかという学習をさせてくれます。この画面でいえば、セグメントコントロールの使い方。 ちなみにトレースして計測してみると、前回と同じように左右「15」の余白など共通の値を見つけることができます。同じ企業の同じ系列のアプリを制作するにあたっては、余白の統一なども徹底して行ったほうが、同じ企業のアプリを触っている印象をユーザーに持ってもらえるのではないでしょうか。 またリストで表示させるタイトルの文字の大きさなど参考にすると良いのではないでしょうか。