モバイルアプリにスプラッシュ画面をつくることの利点 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
モバイルアプリケーションの体験においては、有意義なソリューションを提供するのと同じくらい、楽しい時間を生み出すことが重要です。たとえばアプリケーションのデザインにおいて、力強く魅力的な第一印象を与えることは、新規ユーザーの獲得にも、既存ユーザーの維持にも非常に効果的です。それはちょうど面接での第一印象の良さのようなものです。
では、デザイナーはどのようにしてアプリの記憶に残る体験をつくり出せばよいのでしょうか？スプラッシュ画面は、アプリケーションのドアに相当します。家の一部として玄関があるように、モバイルアプリのスプラッシュ画面は、ユーザーが最初に目にする、期待を設定するための短い紹介のために存在します。アプリケーションの読み込みによる遅延の影響をできるだけスムーズにする役にも立ちます。
モバイルアプリを開発するときにスプラッシュ画面をつくる理由には、様々なものがあります。この記事では、モバイルアプリのスプラッシュ画面を使うべき理由とデザイナーのためのベストプラクティスを掘り下げます。
アプリのスプラッシュ画面とは何か？
アプリケーションのスプラッシュ画面とは、アプリケーションが読み込まれている間に画面に表示される導入を目的とする画面です。ユーザーの第一印象を強めるテキストや会社のロゴを目にしたことはないでしょうか。
ビデオメッセージングアプリのTikTokと、料理アプリのCHEFSFEEDは、どちらもスプラッシュ画面を使い、画面上にロゴを目立つように表示する 出典: Invisionapp
スプラッシュ画面の起源
今でこそスプラッシュ画面はIT業界の中で一般的になっていますが、その起源はコミック業界で使われていたスプラッシュページです。コミックの黎明期には、読者にストーリーを紹介するためのページ全体を使ったイラストが、スプラッシュページとして使われていました。さまざまなコミックで広く使われてきたスプラッシュページの主要な目的は、描かれるストーリーの場所と時間を設定することでした。現在、スプラッシュページはデジタルアプリケーションのスプラッシュ画面として見事に復活を遂げています。
スプラッシュ画面の原型はコミックにあった 出典： Comic Book Collectors Club
モバイルアプリにスプラッシュ画面を使う理由
最近のモバイルデバイスは、アプリケーションを数秒でロードできるほど強力です。それにつれて、モバイルアプリのデザインも、より複雑なものが増えてきました。アプリのスプラッシュ画面はもう時代遅れになったと思うかもしれませんが、実際には今でも残っています。その理由を見てみましょう。
ユーザーを歓迎し、雰囲気づくりをする
楽しいユーザー体験は、ユーザーがアプリケーションを開いた瞬間から始まります。モバイルアプリのスプラッシュ画面は、ユーザーを歓迎し、アプリ内での体験の雰囲気をつくり、ユーザーにポジティブな第一印象を与えるのに役立ちます。
Mighty Networksのモバイルアプリのスプラッシュ画面にはカラフルな画像が表示される 出典: Invisionapp
ユーザーの期待値を設定する
期待以上の体験をしたユーザーは満足し、期待に沿わない体験をしたユーザーは失望を感じるでしょう。アプリのスプラッシュ画面は、ユーザーがこれからどのような体験をすることになるかを予測するのに役立ちます。アプリの起動時からユーザーの期待を管理すれば、アプリを放棄するユーザーを減らすことができるでしょう。
読み込みの遅延による不安に対応する
PsychCentralによると、人は待ち時間をあらかじめ知っていると、落ち着いてタスクの完了を待つことができるようです。他方、もしタスクがいつ終わるかわからなければ不安が高まります。例えば、店に並んでいて、行列がとても長いとします。行列の先頭に着いくまでの時間を考えると不安を覚えるかもしれません。
モバイルアプリケーションのユーザーが不安を感じるのはよくあることです。バックグラウンドでアプリが読み込まれている待ち時間の不安を減らすために、スプラッシュ画面を使用して、ユーザーにある種の達成感を与えることが可能です。
モバイルアプリのスプラッシュ画面のつくり方
スプラッシュ画面が表示されるのは、アプリ体験全体の中のほんの一瞬です。その一種運の効果を確実にするために、いくつかの重要なヒントを紹介します。
1： スプラッシュ画面のサイズを確認
デザイナーは、正しいサイズのスプラッシュ画面の作成に注力すべきです。以下のガイドラインを参考にして、AndroidまたはiOS用のスプラッシュ画面を作成します。
Android用のプラッシュ画面サイズのデザインガイドライン。 出典: Medium.com
iOS用のプラッシュ画面サイズのデザインガイドライン。 出典: Medium.com
2: デザインをユニークでシンプルに
スプラッシュ画面の主な目的は、ユニークでシンプルなデザインにより、素早くユーザーの注意を引くことです。スプラッシュ画面は数秒しか表示されないため、グラデーションなどの現在のカラートレンドの使用はおすすめしますが、あまり多くのテキストの使用は避けるべきです。
Google Trends、Powerpoint、Foxit MobilePDFのスプラッシュ画面。どれもシンプルなデザインを使用しています。 出典: Medium.com
3： 待機しているユーザーに情報を提供する
アプリのスプラッシュ画面は、ユーザーにとって最初にインタラクションが発生するポイントです。もしアプリの読み込みに予想以上の時間がかかっているなら、システムの状態を表示するべきです。製品やサービスに関係のないものの宣伝にスプラッシュ画面を使うのはおすすめできません。
PocketとPindropのスプラッシュ画面には、システムの現在の状態が表示される。 出典: Medium.com
4: ブランドのデザインアイデンティティを示す
モバイルアプリのスプラッシュ画面に表示される画像は、ブランドを表すものであるべきです。多くの企業が、アプリケーションのスプラッシュ画面を使用して、自社のビジョンやミッションを紹介しています。スプラッシュ画面が表示される時間は数秒であるため、テキストでブランドに関するメッセージを伝えるのは有効ではありません。最良の選択肢は、ブランドのアイデアをグラフィカルに提示して、ユーザーが迅速かつ効果的にそれを認識し、記憶し、理解できるようにすることです。
Amazon、Slideshare、TripAdvisorのスプラッシュ画面はブランドのアイデンティティを示している。 出典: Medium.com
5: アプリの読み込み中にユーザーを引き込む
モバイルまたはWebアプリの読み込みに時間がかかる場合は、体験をより興味深くするよう試みます。画像を切り替えたり、インタラクティブなグラフィックスを表示したり、システムの現在の状態をユーザーに表示してアプリに何が起こっているかをユーザーに認識させるといった手段が利用できます。
Jetpack Joyrideのスプラッシュ画面はユーザーを魅了する。 出典: Medium.com
6: 3秒ルールを適用する
アプリのスプラッシュ画面をデザインする際には、いくつかの制限事項を考慮します。スプラッシュ画面は素早く表示されるべきもので、3秒以上待たせてはなりません。数秒以内に表示されないと、ユーザーはフラストレーションを感じ始めるかもしれません。
優れたスプラッシュ画面のデザイン例
スプラッシュ画面にモバイルアプリのロゴを直接表示するのは、ブランドの認知度を高めるためによく使われる方法です。下のデザインは、ロゴの白を浮き上がらせるためにグラデーションを使い、ユーザーの目をロゴに誘導しています。デザイナーは常にロゴとブランドに合った配色を意識して選択するべきです。
HQのモバイルアプリのスプラッシュ画面には、モバイルアプリのロゴが表示される。 出典: UX Collective
下のアプリスプラッシュ画面の例では、デザイナーは単色のフラットカラーと、背景色に溶け込んだロゴを使用します。このスプラッシュ画面には、モバイルアプリに期待されるものが表示されています。すなわち、ミニマルなデザインがスプラッシュ画面に反映されています。このアプローチを使うことで、モバイルアプリの体験に対する期待を最初から設定することができます。
Shazamは、背景とロゴを融合させたミニマルなモバイルアプリのスプラッシュスクリーンデザインを採用している。 出典: UX Collective
おわりに
モバイルアプリのスプラッシュ画面は、アプリに関する明確なアイデアをユーザーに与えるという役割を持つ、製品の重要な一部です。デザイナーは、ユーザー体験が最初から楽しいものになるように、意味があり理解しやすいスプラッシュ画面をつくることができる可能性について、常に気に掛けておきましょう。
この記事はMobile App Splash Screen Examples & Benefits（著者:Nick Babich）の抄訳です