スプラッシュスクリーン でユーザーの心をつかむ

 How To Design A Splash Screen

「第一印象を与えるチャンスは二度とない」ということわざがあります。これは、初対面の人と接するときや、ユーザーがあなたのアプリケーションを初めて体験するときにも当てはまります。調査によると、ユーザーがアプリにとどまるか離れるかを判断するのに50ミリ秒かかると言われています。そのため、スプラッシュスクリーンは、ユーザーがアプリケーションをどのように認識し、体験するかを決める重要なものです。この記事では、スプラッシュスクリーンとは何か、なぜ重要なのか、そして スプラッシュスクリーン をデザインするためのベスト・プラクティスについて説明します。

スプラッシュスクリーン とは?

スプラッシュ・スクリーンとは、ユーザーがアプリケーションやウェブサイトを起動したときに表示される導入画面のことです。ブランドアイデンティティを確立するチャンスであり、アプリがバックグラウンドでロードされる間、ユーザーを退屈させません。この画面には、画像、グラフィック、ロゴ、アニメーションなどが使用され、プログレスバーと組み合わせて使用されることもあります。

なぜスプラッシュスクリーンが必要なのか?

スプラッシュスクリーンは、デバイスの速度が遅く、インターネットの速度がさらに遅かった時代によく使われていました。しかし、インターネットが普及し、デバイスが高速化した現在においても、以下のような理由で重要な役割を果たしています:

起動時にユーザーを退屈させない

アプリの処理速度が格段に速くなったとはいえ、実際にはユーザーがアプリを操作するまでに数秒のセットアップが必要です。ユーザーがアプリに入る前に、ログイン情報を再度入力する必要があったり、画像を読み込んだり、ホームページのデータを読み込んだりする必要があるかもしれません。これらのバックグラウンドタスクが実行されている間、スプラッシュスクリーンはユーザーを退屈させず、シームレスな体験を提供します。

さらに、プログレスバー付きのスプラッシュスクリーンは、アプリの放棄を減らします。何が起きているのか、どれくらい待たなければならないのかをユーザーに正確に伝えることで、不安を減らし、待ち時間を短く感じてもらうことができます。

ユーザーを歓迎し、アプリ内での体験の舞台を作る

スプラッシュスクリーンは、ユーザーがアプリを使い始めるときに期待すべきことの基準を設定します。ユーザーを歓迎し、期待感を持たせることは非常に重要です。なぜなら、ユーザーがアプリとのインタラクションの初期段階でアプリをポジティブに受け止めれば、ポジティブな体験をしたと受け止められる可能性が高いからです。

スプラッシュスクリーンは、ホテルや複合施設のグランドエントランスと同じ役割を担っています。エントランスは、洗練された上質な施設に入ることを意味します。同じように、ユーザーがアプリのアイコンをタップすると、すぐにそのアプリの世界に入っていきます。スプラッシュスクリーンは、ユーザーを歓迎し、驚異的な体験のためのステージを設定するチャンスです。

スプラッシュスクリーン をデザインするためのベストプラクティス

優れたスプラッシュスクリーンを作成するためのベストプラクティスについて説明する前に、すべてのモバイルアプリにスプラッシュスクリーンが必要なわけではないことを知っておくことが重要です。スプラッシュスクリーンは、特にアプリが頻繁に使用される場合、不必要な摩擦を引き起こすことがあります。例えば、WhatsAppのメッセージをチェックするたびに(3分後であっても)3秒間のスプラッシュスクリーンを見なければならないとしたら、それは迷惑なことですよね?

ここでは、訪問者を歓迎し、素晴らしい第一印象を与えるスプラッシュスクリーンを作成するためのベストプラクティスをご紹介します。

なるべく短くする

スプラッシュスクリーンは、「3秒ルール」と呼ばれる、3秒を超えてはならないというルールに従うべきです。スプラッシュスクリーンが3秒以上続くと、通常のアプリユーザーには不満が残り、ユーザーエクスペリエンスを損なうことになります。また、ユーザーがアプリを定期的に使用することを想定している場合(メッセンジャーアプリのように少なくとも1日1回)は、1秒ルールを使用するか、完全に排除します。

アプリケーションの読み込みに3秒以上かかる場合は、スプラッシュ画面の代わりにスケルトン画面を使用します。スケルトン画面では、最終的なユーザーインターフェイスの骨格が表示されるため、ユーザーの不安感を軽減することができます。Slackはスケルトンスクリーンをうまく使っています。

シンプルで印象的なデザイン

忘れられない第一印象を与えるには、3秒しかないので、シンプルかつ大胆なデザインを心がけましょう。100万通りものアニメーションを使ってユーザーを圧倒するのと、冷たくて無味乾燥なスプラッシュスクリーンを作るのとでは、微妙なバランスを取る必要があります。

多くのデザイナーは、スプラッシュスクリーンに大胆な色や画像、アニメーションロゴを使用しています。Kindleアプリは、シンプルで人目を引くス プラッシュスクリーンの好例です。広告など、ユーザーが関心を持たないような勝手なメッセージをスプラッシュ画面に入れるのは避けましょう。

スプラッシュスクリーン Kindle

待ち時間の不安を解消

ユーザーは、アプリがクラッシュしたのか、それともまだロード中なのかがわからないと、高い確率でアプリを放棄してしまいます。そのため、プログレスバーやプログレスアニメーションは、ユーザーの不安感を軽減するのに非常に有効です。ユーザーに待ち時間を知らせることで、アプリを放棄する可能性を減らすことができます。待ち時間が短いアプリの場合はスピナーを使うことができますが、待ち時間が長い場合はプログレスバーの方が適しています。なぜなら、スピナーは永遠に回転しているように見えてイライラするからです。Google Workspaceはプログレスバーをうまく使っています。

スプラッシュスクリーン 
Google Workspace

驚きと喜びの要素を加える

時間と予算に余裕があれば、スプラッシュスクリーン に楽しさと個性を加えることができます。楽しいアニメーションや、UIに溶け込むようなスプラッシュスクリーンは、ユーザーを喜ばせることができる方法のひとつです。ただし、やりすぎには注意が必要です。凝ったスプラッシュスクリーンは、ユーザーが初めてアプリを起動したときにだけ表示されるようにするのが良い方法です。以下の例をご覧ください:

Source
Source
Source

印象に残る スプラッシュスクリーン のデザイン

スプラッシュスクリーンは、ユーザーにアプリを公開するためのゲートウェイです。優れたスプラッシュスクリーンは、アプリに対するユーザーの認知度を高め、ブランドの認知度を強化します。デザインとエンジニアリングを融合させたUXPinのオールインワンツールで、忘れられないウェルカムスクリーンをデザインしてみませんか。

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you