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

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

前回、LV Tokyo Expo のアプリについて書きました。 続けていこうかと思います。ちなみに、私個人の見解ですので、本当は別の意図がある可能性もあります。

今回のアプリ

『App Store』 言わずと知れた iPhone の基本アプリです。 この App Store ですが、いろんな要素を含んでいて勉強するには良いアプリかと思いまして、紐解いていきます。 書いてたら、長くなりそうだったので、画面ごとに掲載しく形にしました。

スクリーンショットを撮影しよう

まずは、スクリーンショット取りましょう。iPhone のスクショの取り方はご存知でしょうか。念のため、記載します。

iPhone のスクリーンショット撮影は、本体上部の「スリープ/スリープ解除ボタン」と「ホームボタン」の同時押しです。iPhone 内に画像として保存されます。

Google Play も別の機会に、紐解こうと思いますが、今回は iPhone です。ちなみに Android の場合は、iPhone より難しいです。

Android のスクリーンショット撮影は、端末の電源ボタンと音量ダウンボタンの同時長押しです。

私が不器用なのかもですが、Android はスクショが撮れたと思ったら、音量バーがよく一緒に撮影されます。

おすすめ画面のUIを読み解く

下のタブバー左端です。タブバーについては、iOSガイドラインに書いてあります。

並列で機能を並べていますね。以下の表記が理解しやすいでしょうか？ App Store ∟おすすめ ∟おすすめ新着 ∟おすすめ新着ゲーム ∟ランキング ∟コンテンツ ∟検索 ∟アップデート こんな感じで、アプリ内の情報にもレベルがあると覚えるといいかと思います。１画面１機能という形がシンプルで好まれる傾向にあるかと思われます。おすすめ画面は「おすすめの一覧機能」で、それぞれぞのアプリ詳細への導線。その中に Apple IDが存在しているのは、Apple ID でのパーソナライズなのかなと。だからおすすめの下にあるのかなと想像できるんですが、そう言った目線でアプリを見たことありますか。

ここで注意してみるべきは、「縦と横にスクロールできる」ことの暗示させるデザインです。

一番上のカルーセルするバナー。中心以外がちょっとだけ見えてますね。スワイプさせたら何か出てきそうですね。 アプリの一覧、右端にアプリアイコン端が見えているから、右にスワイプするのではないでしょうか。最後までスワイプしきると、今度は左端にアプリのアイコンの端が見えます。 下にスクロールも同じく、途中まで見えてるから続きがありそうに見えます。 この高さは、偶然ではなく、デザイナーが高さを合わせ、見えるように調整しているはずです。

『たくさんの項目を見せる必要がある』。しかしモバイルでは画面が限られているという問題を、中途半端に表示させることで左右下に広がることをユーザーに示し解決したデザインなのではないでしょうか。

まとめ

さすがの純正アプリなので、お手本にはもってこい。自分でも再発見や、考察ができればなと思ってます。