UIeed

UI Design×Feed. 主にUI関連についてのデザインの記事を発信します。

アプリの導入画面のデザインは、いわば証明写真である。

毎日、いくつものスマートフォンアプリがリリースされているこの現代において、初めてアプリを起動した後に表示される画面はとても重要です。
導入画面は言わば、アプリの証明写真のようなものです。
ユーザーがまだどのようなアプリなのかを理解していないのを想定し、デザイナーは作りこまなければいけません。
実際に導入画面を作る上で、色々な種類がある導入画面を紹介します。

スプラッシュ

アプリが実際に起動されている途中に表示される画面を指します。
スプラッシュの中でも多いのは、ロゴなどを表示してそのサービスのブランドの周知を図るパターンが多いかと思われます。
実際に著名なアプリのスプラッシュ画面を挙げさせていただきますと、

SoundCloud

f:id:MaMoRu:20140103002549p:plain

Twitter

f:id:MaMoRu:20140103002708p:plain
などが挙げられます。

比較的多く取り扱われるパターンですが、ロゴやサービスを覚えて欲しいがために、ユーザーにアプリの起動時間のせいで長く待たせてしまわないような注意が必要です。
他にもアプリが実際に使用できるようになるまでに、動的なエフェクトを組み込むなどユーザーを退屈にさせないような表現が必要だと思われます。

Zite

(例としてZiteを挙げます。実際にインストールしてお試しください。)
f:id:MaMoRu:20140103003048p:plain

コーチマーク

コーチマークとは、実際に利用されるUIがどのような操作で使うことが出来るのか、また最初に利用者は何をすべきなのかという説明を、画面上にオーバーレイやポップアップ、バルーンアップなどを利用して、表示させる画面を指します。
この画面は、アプリの操作の説明を細かくすることができるので、具体的な説明をする用途に向いています。

Instagram

f:id:MaMoRu:20140103004159p:plain

Manga

f:id:MaMoRu:20140103004822p:plain

Remote

f:id:MaMoRu:20140103010738p:plain

ウォークスルー

ユーザーが初めてアプリを起動した時に、このアプリ、このサービスは何が出来るのか、また他のサービスとの、区別の図り所などを説明するための画面をウォークスルーと言います。
現在のウォークスルーは複数のページで管理している場合が多く、ユーザーにスワイプさせることによって画面を移動させます。

Wisery

f:id:MaMoRu:20140103010855p:plain

Airbnb

f:id:MaMoRu:20140103010905p:plain

Twitter #music

f:id:MaMoRu:20140103010923p:plain

Path

f:id:MaMoRu:20140103011510p:plain

まとめ

アプリをユーザーに長く使ってもらうためには、ちゃんとユーザーのために設計されているのか、ということが重要です。
中でもウォークスルーはひとつの画面に情報を載せすぎると、逆に分かりづらくなってしまうパターンもあるので注意が必要です。
これらの導入画面の違いやメリットをきちんと理解して、効果的なUIデザインを生み出していくことがデザイナーにとって大事なことであると感じました。