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

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

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

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

今回はクラシックなものからユニークなものまで、さまざまな種類のスプラッシュスクリーンのコードスニペット11選と、実際の事例8選をご紹介します。

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

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.

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

1.Digital Present

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

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

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

Digital Present

Digital Present

2.Giacomo Mottin

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

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

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

Giacomo Mottin

Giacomo Mottin

3.VLNC Studio

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

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

VLNC Studiog

VLNC Studiog

4.Kanarys

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

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

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

Kanarys

Kanarys

5.Corsaires

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

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

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

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

Corsaires

Corsaires

6.Eleven Mirrors

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

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

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

Eleven Mirrors

Eleven Mirrors

7.Alfa Charlie

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

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

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

Alfa Charlie

Alfa Charlie

8. Stand Proud

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

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

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

Stand Proud

Stand Proud

おわりに

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

そんなローディングアニメーションに取って代わるスプラッシュスクリーンですが、こだわって複雑にしすぎるとWebサイトが重くなってしまうという欠点があります。

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

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

 

執筆:Nataly Birch
翻訳:Asuka Nakajima/Sato Misuki
編集:内田一良(じきるう)

 

あわせて読みたい!▼

SHARE

RELATED

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