Webサイトの導入部分をよりドラマチックな演出にしたくありませんか？ 目を見張るようなアニメーションや、ハイエンドなライブラリを駆使した実験的で独創的なデザインなどで訪問者の心を掴みたいと思いませんか？ そのようなときは、スプラッシュスクリーンに注目するべきです。
デスクトップアプリケーションの世界で誕生してから、スプラッシュスクリーンは現在までWebデザインにおける定番となりました。スプラッシュスクリーンは軽くて比較的シンプルながら、強力な要素です。私たちデザイナーはいつも最初の数秒間の重要性について話しており、スプラッシュスクリーンこそがこの課題の達成に直接関係するWebアプリケーションの要素の１つなのです。
この重要な第一印象を作るのはファーストビューであると考えている人は多いです。一方で、一秒一秒が重要であると信じて、「i」のドットと「t」の交差部分を動かすことにこだわるコードアーティストもいます。
オンラインユーザーの機嫌を早く取れば取るほど、サイトの第一印象は良くなるでしょう。だからこそ、第一印象に対してさまざまな独自の解決策が見受けられるのです。事実、それらの解決策によってWebサイトと訪問者のインタラクションは始まります。単なるローディング画面では自分のクリエイティビティを示すことができないと思っているなら、スプラッシュスクリーンに可能性を見出してもいいかもしれません。
フルスクリーンを活用する
スプラッシュアニメーションを使えば、小さな要素だけでなく、画面全体をサービスに用いることができます。まるで映画のオープニングクレジットのように劇的な何かが見られると観客に約束することで、彼らの関心を引きつけることができるのです。
Tedd Arcuri氏によるSmokeT
Three.jsは、早くて軽いイントロダクション画面を作成できる優れたライブラリではありませんが、Tedd Arcuri氏の作品は工夫が凝らされています。この作品では、「T」という文字の登場を演出するために、非常にリアルなスモーク効果を巧みに再現しています。「T」の文字は簡単にロゴ、マスコットやタイトルに変更することができるので、ここでは象徴として使われているに過ぎません。
See the Pen SmokeT by Tedd Arcuri (@teddarcuri) on CodePen.
Timothy Giblin氏によるスプラッシュページ
スプラッシュスクリーンの大半は、ブランドアイデンティティと密接に関係しています。たとえば、Timothy Giblin氏のスプラッシュページがそうです。この作品は伝統的なスプラッシュスクリーンそのもので、アーティストのクリエイティブな思考を色濃く反映したブランドアイデンティティを備えています。Giblin氏は、中庸に従う方法を私たちに示しています。彼のコンセプトは独創的でありながら、控えめです。ロゴが現れるだけですが、それでも注目を集めるでしょう。
See the Pen Splash page by Timothy Giblin (@tim_giblin) on CodePen.
Hitesh Sahu氏によるスプラッシュスクリーンアニメーション
この例はTimothy Giblin氏のソリューションほど印象的ではありませんが、より実用的であり、最近ではどこでも見受けられます。この作品は、本質的には次の段階までの表示を遅延して読み込んでいるものでしかありません。しかし、トップページの要素をおどけながら創造的に１つずつ明らかにすることで、ローディングをずっと面白くします。
See the Pen Splash Screen Animation by Hitesh Sahu (@hiteshsahu) on CodePen.
魅力的なコードスニペットはほかにもあります。コレクションを探して、次のプロジェクトに最適なものを見つけてみましょう。
古典的なソリューション
スプラッシュスクリーンに実証済みのアプローチを使用したいと考えているなら、以下の例はその手助けになるでしょう。
Adam Blum氏によるスプラッシュスクリーン
Adam Blum氏の美しいソリューションの根底には、伝統的なスライド効果があります。この作品には、クリーンで純粋な背景と、次々に現れるいくつかの重要なフレーズが存在します。次に起こることに期待させることは、ユーザーの関心を引き上げる原始的ながら有効な方法です。
See the Pen Splash Screen by Adam Blum (@AdamBlum) on CodePen.
Nirajan氏による『Play On』
これまでのソリューションをもう少し面白くするために、Niranjanがこのペンで行っているような操作を背景に追加することができます。このプロジェクト『Play On』の特徴は、画像の背景に適用される半透明のオーバーレイスクリーンに、美しいスライド式のトランジションをかけていることです。魅力的で興味深いスニペットになっています。
See the Pen Play on by Niranjan (@niranjanwho) on CodePen.
William氏によるスプラッシュ
Williams氏によるスプラッシュは、古典的なスプラッシュスクリーンのもう１つの代表的な例です。コンセプトには２つの段階があります。最初の段階では、アニメーションによって優しく快適な速度で作者のサインが表示されます。その後、黒い背景が表示されます。多数のプロジェクトにフィットする、事業向けの優雅でなめらかなソリューションです。
See the Pen My Splash by Brett Williams (@MacEvelly) on CodePen.
Dmytro Lvivsky氏によるアニメーションスプラッシュスクリーン
Dmytro Lvivsky氏によるアニメーションスプラッシュスクリーンは、独自のソリューションを作成するきっかけとして最適です。JavaScriptベースのアニメーションには、いくつかのスクリーンと、それぞれを結ぶ伝統的なトランジションがあります。トランジションは、円がアニメーションを主導しているようなエフェクトです。
See the Pen Animated Splash Screen by Dmytro Lvivsky (@UnforbiddenYet) on CodePen.
Giles Papworth氏によるシンプルなCSS3のフェード効果
この例は、きわめて単純なソリューションです。伝統的なフェード効果によって、テキストブロックを１つずつ表示するエフェクトを繰り返します。しかし、そのフェード効果が必要なすべてを担っているのです。そしてもっとも重要なのは、CSS3しか使用していないので、貴重なリソースを「消費する」ことなくアニメーションを実行できます。シンプルながらエレガントかつ控えめで、軽いスニペットです。
See the Pen Simple CSS3 Fading by Giles Papworth (@superchief) on CodePen.
雰囲気を作る
次の例では、スプラッシュスクリーンを使えば、Webサイトの雰囲気を初めから決められるということを示していきます。
Andrew Tunnecliffe氏によるコンソールローディングアニメーション
たとえば、開発者であればAndrew Tunnecliffe氏の制作したコンソールローディングアニメーションを用いることで、適切な雰囲気が出せるでしょう。古典的なアニメーションで非常にシンプルに作られており、どのような開発者の個人的なポートフォリオにも完璧にフィットします。
See the Pen console loading animation by Andrew Tunnecliffe (@atunnecliffe) on CodePen.
Thibault Jan Beyer氏による落下する数字
統計ベースのプロジェクトやデータドリブンなプロジェクトについて考えているなら、Thibault Jan Beyer氏の落下する数字を用いれば、ストーリーテリングな体験を上手く始めることができます。落下する数字のアニメーションは、最終的に地面に落ちることでメインスクリーンを開きます。デジタルな要素に富んだ幾何学的な魅力が感じられるでしょう。
See the Pen Falling Numbers by Thibault Jan Beyer (@ThibaultJanBeyer) on CodePen.
最後に１つ
多くの人にとって、Stan Lee氏はいつも「Bruce Lee氏のオタクっぽい弟」だと思います。彼は私たちにとって、勧善懲悪の世界を打ち立てた人物であり、永遠に私たちの心に住み続けるアイコンです。
Matt Feinstein氏によるMarvelのスプラッシュスクリーン
Matt Feinstein氏によるMarvelのようなプラッシュスクリーンは、単なるMarvelへの賛辞ではなく、すべてのスーパーヒーローファンが楽しめる作品です。タイトルがそれを物語っています。彼のスプラッシュアニメーションは魅力的なコミックの雰囲気を再現しています。信じられないほどMarvel映画のオープニングに似ているレプリカです。
See the Pen Marvel Splash Screen by matt feinstein (@stizz1e) on CodePen.
スプラッシュスクリーンの作り方
スプラッシュスクリーンは、サイトが重くならないなら、ローダーの代わりに使用することができます。残念なことに、スプラッシュスクリーンを真剣に受け止めるあまり、アクション満載の劇のように仕上げようとする人は未だに存在します。
Webデザインにおいてスプラッシュスクリーンが有効なのは、短くて、軽くて、要点を得ている場合だけです。スプラッシュスクリーンを使えば、もちろん自分のクリエイティビティをスクリーン全体で伝えることができますが、それでもスプラッシュスクリーン本来の使命を守り通す必要があります。スプラッシュスクリーンがユーザーの興味をかき立てた後は、瞬時により魅力的なソリューションにその場を譲らなければなりません。
