劇的なスプラッシュスクリーンのコードスニペット11選

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

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

スプラッシュスクリーンは、アプリケーションの第一印象を左右するとても重要な存在です。力強いスプラッシュスクリーンは、アプリケーションやWebサイト全体のイメージを決定する力を持っています。

今回はクラシックなものから独特なものまで、さまざまな種類のスプラッシュスクリーンのコードスニペットを11種ご紹介します。

フルスクリーンのスプラッシュスクリーン

小さなフレームにアニメーションをおさめるのではなく、画面全体を使ってみましょう。

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

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.

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

クラシックなデザインを使用するメリットは、長年の信頼と実績があること。

以下ではクラシックなスプラッシュスクリーンを5つご紹介します。

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.

ムードを決めるスプラッシュスクリーン

Webサイトの最初に表示されるスプラッシュスクリーンは、ムードやトーンを決める役割も担います。以下ではWebサイトの方向性を提示してくれるスプラッシュスクリーンをご紹介します。

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

コーダーのWebサイトにぴったりなのが、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.

特別編:MARVELモチーフのスプラッシュスクリーン

スタン・リーは私たちにとってヒーローの生みの親であり、永遠に心の中に生き続ける存在です。

最後にご紹介するのは、MARVELをモチーフにしたスプラッシュスクリーンです。

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

Matt Feinsteinの作品は、マーベル映画のオープニング映像をモチーフにしています。

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

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

おわりに

古典的なローディング画面に取って代わるスプラッシュスクリーンですが、こだわって複雑な内容にするとWebサイトが重くなってしまうという欠点があります。

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

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

(原文:Nataly Birch 翻訳:Asuka Nakajima)

 

あわせて読みたい!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ