スプラッシュスクリーンでアプリ起動を劇的に！コードスニペット&事例19選

アプリケーションの起動中に表示される「スプラッシュスクリーン」。

かつては処理の進捗を伝えるローディングアニメーションを表示するのが一般的でしたが、いまはクリエイティブで独特なスプラッシュスクリーンが数多く存在しています。

スプラッシュスクリーンは、アプリケーションの第一印象を左右するとても重要な存在である一方、使い方を間違えるとユーザーをイライラさせてしまうことも……。

今回はスプラッシュスクリーンの基礎、事例、作品例をご紹介します。

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

スプラッシュスクリーンとは、アプリの起動中に画像やアニメーションを表示する技術のことです。

おもに起動に時間がかかるアプリに用いられますが、その視覚的印象からブランドイメージの定着のために利用する例も多く存在します。

よくあるスプラッシュスクリーン例

Spotify、YouTube、Medium、LinkedInのスプラッシュスクリーンをみてみましょう。自社のロゴにすこし動きをつけた、シンプルなデザインのスプラッシュスクリーンになっています。

これらの企業に限らず、大半のアプリが同様のスプラッシュスクリーンを採用しています。

スプラッシュスクリーンには、ブランドカラーやアプリの背景色を使うことが多いです。

わかりやすい例が、Appleのアプリでしょう。ダークモードにしている場合、iPhoneで開くApple製アプリのスプラッシュスクリーンはすべて黒い画面になります。

スプラッシュスクリーンの表示時間はどのくらいにすべき？

アプリ起動時にスプラッシュスクリーンを表示するということは、そのぶん「待ち時間」が発生することになります。あまりに長いスプラッシュスクリーンだと、ユーザーを飽きさせてしまいますよね。

そのため、スプラッシュスクリーンはアプリの目的に合わせて待ち時間を調節する必要があります。

たとえば、メッセージアプリを起動する際の目的はとてもシンプルですよね。メッセージを確認して返事を書き、すぐにアプリを閉じ、またメッセージが届いたらアプリを開く……そのような使い方をするでしょう。このように数秒で終わるタスクを何度も繰り返す場合、いちいち豪華なスプラッシュスクリーンが表示されると、ユーザーをイライラさせてしまいます。

LINEの場合、スプラッシュスクリーンが表示されるのはほんの一瞬のため、ユーザーにストレスを感じさせることなくブランドを印象付けています。

一方、Netflixは比較的長いスプラッシュスクリーンを採用しています。

Netflixはメッセージアプリのように、すぐにアプリを閉じたりはしませんよね。長時間のアプリ使用が想定される場合は、スプラッシュスクリーンに豪華なアニメーションを使っても、ユーザーがイライラする可能性は低いでしょう。

スプラッシュスクリーンの適切な表示時間は、アプリの用途や起動頻度に依存しているのです。

ユーザーをスプラッシュスクリーンで待たせるのはやめよう

スプラッシュスクリーンと、アプリUIそのものの読み込み速度を結びつけるべきではありません。

スプラッシュスクリーンの表示が遅れる原因はアプリそのものにありますが、スプラッシュスクリーン後のトップページの表示が遅れる原因はインターネット環境やコンテンツ容量の重さにあります。

アプリのコンテンツが読み込まれているあいだ、スプラッシュスクリーンを表示したままユーザーを待たせてしまうと、ユーザーは「なにかエラーが起きているのではないか？」と勘違いしてしまいます。

スプラッシュスクリーンでユーザーを待たせずに、スケルトンページを活用しましょう。スプラッシュスクリーンからスケルトンページに移り変わることによって、ユーザーがプロセス進行を把握でき、UXが向上するはずです。

スプラッシュスクリーンのコードスニペット作品

1. リアルなスモークを使ったデザイン

Three.jsは、本来軽量なイントロには向いていません。しかし、このTedd Arcuriの作品は例外です。

リアルな質感にこだわったスモークが、アルファベットの「T」と重なって表示されるというシンボリックなデザイン。アルファベットは、ロゴやアイコン等に置き換えられます。

See the Pen
SmokeT by Tedd Arcuri (@teddarcuri)
on CodePen.

2. シャープな色と形が印象的なデザイン

スプラッシュスクリーンの多くは、ブランドアイデンティティと密接に関係しています。

Timothy Giblinもまた、クラシックかつ独創的なアニメーションにより、「黄金率」というブランドアイデンティティを表現しています。

作品のコンセプトは独創的でありながら控えめで、シャープなデザインが目をひきます。

See the Pen
Splash page by Timothy Giblin (@tim_giblin)
on CodePen.

3. 実用性が高く遊びごころがあるデザイン

実用性が高いコードスニペットがHitesh Sahuの作品です。

Webページの要素をアニメーションの中に取り入れ、クリエイティブな形で遊び心を表現しています。

See the Pen
Splash Screen Animation by Hitesh Sahu (@hiteshsahu)
on CodePen.

4. 文字がスライドするデザイン

Adam Blumによる作品のポイントは、トラディショナルで美しいスライドエフェクト。

シンプルな背景の前にスライドしながら表示されるキーフレーズは、ユーザーの想像力や好奇心をくすぐります。

See the Pen
Splash Screen by Adam Blum (@AdamBlum)
on CodePen.

5. オーバーレイを活用したデザイン

「シンプルなデザインもいいけど、ある程度のクリエイティブさも欲しい」という方には、Niranjanの作品がおすすめ。

背景の画像にオーバーレイのパネルがスライドするデザインです。

See the Pen
Play on by Niranjan (@niranjanwho)
on CodePen.

6. ビジネスにぴったりのエレガントなデザイン

Williamsによるこちらの作品も、トラディショナルなスプラッシュスクリーンの一例です。

まず目で追いやすい速度でサインする様子が表示され、その後画面が暗転するという2段階構成となっています。

エレガントで洗練されたデザインは、さまざまなプロジェクトに応用できるはず。

See the Pen
My Splash by Brett Williams (@MacEvelly)
on CodePen.

7. 円が拡大するデザイン

オリジナルのスプラッシュスクリーンを作る際に参考にしたいのが、Dmytro Lvivskyの作品。

円が拡大する様子が繰り返されるアニメーションは、JavaScriptで作られています。

See the Pen
Animated Splash Screen by Dmytro Lvivsky (@UnforbiddenYet)
on CodePen.

8. 文字がフェードするデザイン

とにかくシンプルなスプラッシュスクリーンを作りたいなら、Giles Papworthの作品をお手本にしましょう。

CSS3のみで作られたこちらのスプラッシュスクリーンは、テキストブロックをひとつずつ表示するという内容。シンプルかつ軽量です。

See the Pen
Simple CSS3 Fading by Giles Papworth (@superchief)
on CodePen.

9. コンソール画面をモチーフにしたデザイン

プログラマーにおすすめなのが、Andrew Tunnecliffeの作品。

コンソール画面をモチーフにしたスプラッシュスクリーンは、プログラマーのポートフォリオサイトにぜひ採用したいデザインです。

See the Pen
console loading animation by Andrew Tunnecliffe (@atunnecliffe)
on CodePen.

10. 数字が落下するデザイン

統計に関わるサービスや、データドリブンなプロジェクトのWebサイトには、Thibault Jan Beyerの作品がお手本になるはず。

数字が落下して、メイン画面が開かれる過程がアニメーションになっています。デジタル要素をうまく取り入れた、ユニークなデザインです。

See the Pen
Falling Numbers by Thibault Jan Beyer (@ThibaultJanBeyer)
on CodePen.

11. マーベル映画のオープニングを模したデザイン

最後にちょっと面白いコードスニペットを。Matt Feinsteinの作品は、マーベル映画のオープニング映像をモチーフにしています。

漫画のコマが連続して映し出されるアニメーションに、見覚えがある人も多いのではないでしょうか。

See the Pen
Marvel Splash Screen by matt feinstein (@stizz1e)
on CodePen.

スプラッシュスクリーンが実際に使われている事例

12. Digital Present

Digital Present は、ハイエンドなテクノロジーを活用したクリエイティブなスプラッシュスクリーンを制作。

Webサイトを開くと現れるアニメーションは、3Dのロゴマークが小さな破片として砕け散ります。

破片は徐々にヒーローエリアに流れ込み、サイトデザインの一部となります。単なる前置きではなく、ユーザーを楽しませ、ブランドアイデンティティを強化する重要なアクションであることが伝わってきますね。

13. Giacomo Mottin

Giacomo Mottinは、名前と職業を記した短いテキストをスプラッシュスクリーンに取り入れています。

とてもシンプルな作りですが、適度な期待感を生み出しています。

魅力的なユーザー体験を提供している素晴らしい事例です。

14. VLNC Studio

VLNC Studioは、すばやく点滅する短いスプラッシュスクリーンを採用。ブランド名を1文字ずつ表示しています。

表示するカラーやフォントで、ブランドイメージを端的に伝えています。

15. Kanarys

ひとつ前の事例では、すべてのエフェクトが高速で起こるため、各フレームをゆっくり見る時間はありませんでした。一方でこちらのKanarysは、アニメーションがゆっくりと動くスプラッシュスクリーンを採用しています。

「Inclusive work cultures」というフレーズで画面全体を埋めつくし、ブランドアイデンティティをわかりやすく伝えています。動作を豊かにするために、色とマスキングで遊ぶ工夫も。

スプラッシュスクリーン後のヒーローエリアも、テイストを合わせています。

16. Corsaires

Corsairesは、伝統的な方法を取り入れています。

要点である会社名をすぐに表示し、ヒーロエリアに表示される文字にはロゴと同じフォントを使っています。

品の良い優雅なフォントを用いたブランド名を、エレガントなラインで補強しているのも注目ポイント。

シンプルなアニメーションですが、傑出したデザインです。

17. Eleven Mirrors

Eleven Mirrorsは、ブランドのイニシャルを徐々に作りあげる、繊細なアニメーションをスプラッシュスクリーンに取り入れています。

緻密なスタイルの線で、洗練された優雅なイメージをWebサイトに与えていますね。

余白を大きくとり、ビジネスライクな雰囲気を作り上げているのも注目ポイント。

18. Alfa Charlie

Alfa Charlieは、ハンドスピナーから発想を得て作られたスプラッシュスクリーンです。

コンパクトなバッジスタイルのロゴを回転させながら、画面全体を使ったシンプルなアニメーションを見せています。

アイデアは原始的ですが、ユーザーの注意がWebサイト中央にくるよう工夫されています。

19. Stand Proud

Stand Proudのスプラッシュスクリーンでは、フレーズを連続的に表示する仕掛けを採用しています。

「スタンド（Stand）」という言葉を固定し、続く単語を「一緒に（Together）」「誇りに思う（Proud）」、「大声で（Loud）」「等しい（Equa）」と、次々に表示。

この仕組みによりブランドアイデンティティを、ユーザーに分かりやすく届けています。

おわりに

ドラマチックなスプラッシュスクリーンは、映画の冒頭に流れるタイトルクレジットのように、ユーザーをワクワクさせられるはずです。

しかしこだわって複雑にしすぎると、Webサイトが重くなってしまうという欠点があります。

スプラッシュスクリーンは、軽量で短く直感的なデザインにおいて、その魅力をフルに発揮します。魅力的なアニメーションを展開するのは良いですが、本来の使命は忘れないようにしましょう。

スプラッシュスクリーンは、Webサイトへの優秀な橋渡しであるべきです。

（執筆：Asuka Nakajima、Sato Mizuki　編集：Sato Mizuki）

ロード時間が楽しくなる！ローディングアニメーション10選

Workship MAGAZINE

ヒーローエリアとは？第一印象で差がつくWebデザインの最新動向【実例付き解説】

Workship MAGAZINE

おしゃれなWebデザインのポートフォリオサイト36選。現役デザイナーが厳選！

Workship MAGAZINE