2014.7.16 / UI

UIとしてのスプラッシュ画面

Tomohiro Suzuki

アプリケーションを起動した時に表示される画面をスプラッシュ(Splash)画面、またはローンチスクリーン(Launch Screen)と呼びます。アプリケーションにおいては、ユーザーが操作することのできない数少ない画面でもあります。
iOSではこのスプラッシュ画面はストア申請時に必須であり、使用するアプリケーションの向きや、対応デバイスのサイズに適しているものを提供する必要があります。個人的感覚ではありますが、いつもアプリケーションのビジュアルデザインや、アイコンのデザインが完了した後に即興で作られるということが多いのではないでしょうか。しかし、適当にスプラッシュ画面を作成するのではなく、サービスの性質や通信の有無などを考慮してデザインする必要があります。

ここで一旦、AppleのHuman Interface Guidelineを見てみましょう。

起動画像は、アプリケーションが起動するまで、時間つなぎとしてiOSが表示する画像です。即座に現れ、その後すぐに先頭画面に置き換わるので、起動が速く応答性が優れている、という印象を与えます。
・・・
ユーザは、アプリケーションを頻繁に切り替える可能性が高いため、起動時間を最小限に削減するためにあらゆる努力をし、注意を引くよりもむしろ、起動中であることを意識させない起動画像をデザインするべきです。
・・・
これらのガイドラインに従うと、質素でつまらない起動画像になると思うかもしれませんが、その通りです。起動画像は芸術的表現の機会を提供することを目的としていません。迅速に起動してすぐに使用を開始できるというユーザのアプリケーションに対する認識を向上させることが唯一の目的です。たとえば「設定(Settings)」や「天気(Weather)」の起動画像は、背景画像に少し手を加えただけのものです。

上記によると、あくまでもユーザーがアプリケーション本体のコンテンツに触れるまでの繋ぎであり、起動中であることを意識させないことがスプラッシュ画面の存在する目的であると言えます。
では、実際に市場に出ているアプリケーションではどんなスプラッシュ画面が存在しているのでしょうか。いくつかのパターンに分類し、それぞれの特徴とどのような利用シーンが考えられるのかを紹介していきます。

  • コンテンツ背景型
  • ロゴ型(背景ベタ塗り)型
  • ロゴ(背景グラフィック)型
  • ラベル型
  • アニメーション型

コンテンツ背景型

コンテンツ背景型は、アプリケーションの起動後に表示される画面のコンテンツ以外を除いたタイプ。iOSプリインストールのアプリケーションでも採用されており、上記の例はFacebookですが、他にもPinterest、Instagram、Cookpadなど多くのアプリケーションで使われています。
スプラッシュ画面が終了すると、この背景にコンテンツが乗ることになるため、ユーザーは起動が終了したことをすぐに認識することができます。特に最初の情報を表示するために通信が発生するアプリケーションなどで有効なパターンです。
注意点としては、ボタンなどもコンテンツであるため削除してプレーンな背景を表示する必要があることです。もしこのタイプのスプラッシュ画面でボタンの枠だけでも存在していると、ユーザーは起動が完了したと思いタップするかもしれません。しかしシステム側にはそのタップは認識されないため、ユーザは自分の行動に対してのフィードバックを得ることができないでしょう。

ロゴ(背景無し)型

ロゴ(背景無し)型はサービスのロゴやアイコンに使われているシンボルなどを表示するタイプです。一番無難でもあり、クライアントワークなどでは多いパターンです。背景は特にグラフィック要素が少ない物にすることで、ユーザーはロゴだけを見ることになり、ブランディングとしては効果的なのかもしれません。
しかし、通信が発生するタイプのアプリケーションでは上記のOrigamiのように、スプラッシュ画面の後にももう一度コンテンツが無い状態で待たされることになるため、ユーザーは2度待つ必要性があります。もしこのタイプを採用するのであれば、スプラッシュ画面後にすぐにコンテンツが表示できる、非通信系アプリケーションのほうが相性が良いでしょう。
また、毎回起動する度にロゴが表示されることになるため、少し控えめのグラフィックで表示することが大切です。自社の色を打ち出したいのはわかりますが、毎回目にするユーザーに目障りだと思われない程度で十分です。

ロゴ(背景グラフィック)型

先ほどのロゴ(背景無し)型と似ていますが、こちらはグラフィック要素が入っているものです。ロゴのガイドラインによって不可能なこともありますが、具体的なグラフィックによりサービスのイメージを伝えるという効果があります。
Nike Training Clubのアプリケーションでは、実際にトレーニングしている様子のグラフィックをロゴの背景として使用することにより、なにができるアプリケーションなのかを伝えています。名前からはサービスの内容がわかりにくいようなアプリケーションなどでは有効な表現方法かもしれません。しかし、こちらもロゴ(背景無し)型と同様に、直後に通信が必要な画面がくる場合には、ユーザーは2度待つ必要があることを頭に置いておきましょう。

ラベル型

スプラッシュ画面にラベルを表示するタイプです。ロゴ型と同じように見えますが、スプラッシュ画面での使用意図として少し異なるため分類して考えています。目的としては、ここに表示されているテキストを読んでもらうことができれば、グラフィックよりも直接的に内容を伝えることがでるという点でしょうか。
しかしあくまでも「テキストを読んでもらうことができれば」という前提つきです。スプラッシュ画面の表示時間は、デバイスのメモリなどにもよりますが、あまり長くはありません。上記の例はNYC Travel Guideのアプリケーションですが、1秒ほどの短い表示時間に全てのラベルを読むことは困難です。
また、このラベルはサービスを初めて利用するユーザーに向けられたものが多く、サービスの内容を学習できたユーザーには不要なものです。一応コードによりスプラッシュの表示時間を遅延させることもできますが、そんなことをやるくらいであればユーザーにサービスを使ってもらいましょう。中途半端に読めないくらいであれば、最初からこのパターンは使用しないほうが良いのかもしれません。

アニメーション型

スプラッシュ画面にアニメーションを入れるというタイプです。ゲーム系のアプリケーションに多く、最近ではTwitterがロゴの鳥が迫ってくるように拡大するというアニメーションを採用しました。
同じ待ち時間という意味ではプログレスバーでもアニメーションが使われていることが多く、動きが無い場合に比べて体感時間を短くするという効果があるようです(参考:アニメーション表示のプログレスバーをどうすれば体感速度がアップするのかが判明)。しかし、Twitterのスプラッシュ画面の場合はループではなく1回で終了であり、またアプリケーションを起動してすぐにアニメーションが始まるわけではないため、プログレスバーのような体感時間の短縮の効果があるかどうかは疑問が残ります。
もしかしたら短期的には目新しく、ユーザーに対して好感触を与えるのかもしれませんが、これから何ヶ月かこのアニメーションを見続ける中でユーザーが少し目障りだと感じることもあるかもしれません。現時点ではあまり有効であるかどうかわかりませんが、長期的な視点でTwitterのスプラッシュ画面は今後どのように変化するかは楽しみでもあります。


意外と考える機会の少ないスプラッシュ画面について紹介してみました。たしかにビジュアルデザインとしては最も地味ではありますが、ユーザーが起動する度に見る画面でもあります。その後に控える画面との関係性をデザインするという意味では、アプリケーションの性質を理解し、後の画面の表示を助けるようなデザインをする必要があるでしょう。そのためには、背景型のような質素なデザインでも十分なこともあります。
もしあなたのアプリケーションのスプラッシュ画面が長いこと変更されていないのであれば、一度なぜ今の画面になったのかを考え直してみてはいかがでしょうか。もしリリース当初から変化していないタイプのスプラッシュ画面であれば、ラベル型が使われているかもしれませんが、年々進化する端末はその文字を読む為に適切な時間にはなっていないこともあるでしょう。

お互いの学びと成長を促せるメンバーを募集しています

STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。

そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。

あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。

記事一覧へ

Related Articles

About us

私たちはユーザーへの価値とビジネスの成立を実現するUXデザインを提供し、
アプリやWebサービスの新規立ち上げや改善をサポートしています。

STANDARDはUXデザインを軸に、新規事業の立ち上げや既存サービスの改善を支援するデザイン会社です。