スプラッシュページ(Splash page)とは、ウェブサイトの訪問者が最初に見るページのことを指します。ウェブサイトが表示される前のイントロとして、ブランドロゴ・動画・キャンペーンフォームなどが差し込まれるのが一般的です。最近ではスプラッシュスクリーン(Splash screen)とも呼ばれています。
スプラッシュページは、Flashの全盛期によく使われていました。当時はWEB制作者の技術やセンスを見せる目的で使われていたことが多かった気がします。
近年ではブランドイメージを直感的に印象付けるため、期待感を抱かせるため、といった実用的な目的で採用されます。
スプラッシュページ(スプラッシュスクリーン)の用途:
- ブランドイメージの表現
- 年齢確認
- 言語選択
- キャンペーン告知
そのためここでは、見る人のインスピレーションをインスピレーションを掻き立てる!そんな美しくてかっこいいスプラッシュページを採用したWEBサイトをまとめてみました。
BORN
ADOBEやIBMをテクノロジーパートナーに持つ、コンテンツや画像制作などを提供するグローバルデジタル代理店のBORN。ヘッダーの動画を読み込むまでの間、シンプルなロード画面のようなスプラッシュページが表示されます。
Cannadips Europe
「Cannadips」では、トップページが表示される前に年齢確認ページを差し込んでいます。
Poolsuite
90年代のコンピューターの起動を彷彿とさせるタイポグラフィで世界観が表現されています。
LimLondon
オンラインで音楽制作が学べるサイト「LimLondon」。Limというロゴと音の波形を、美しいアニメーションで表現されています。お洒落なスプラッシュページです。
TWLVR
(※スクロールするとサウンドが流れます)パリにある動画やWEB制作をしているクリエイティブスタジオのTWLVRは、女性の後ろ姿がリピートされ、見る人の視線を引き留めます。
POLLEN
ロンドン、バルセロナ、パリにオフィスを持つ、WEBサイトやブランディングを担う広告代理店のPOLLENは、クリエイティブなモノトーン動画を展開させビジュアルの持つ影響力を示します。
David Anthony Chenault
ワシントンD.C.を拠点とするインテリアデザイナー、David Anthony Chenaultさんのサイト。ビットマップ風のデザインでファーストビューから迎えてくれます。アニメーションもかっこいいです。
In Pieces
ウェブサイトの目的・行動指針をメッセージにして表示。
Alaris Acquisitions
ウェルス・マネジメント業界に特化したM&A(合併・買収)仲介会社のサイト「Alaris Acquisitions」。すり磨りガラスのようなデザインと、水色を基調としたアニメーションが美しいです。
VOGUE
TCDテーマのVOGUEでは、最初にスプラッシュページでブランド体験をして頂くことをコンセプトとしています。
スプラッシュページの是非
スプラッシュページ(スプラッシュスクリーン)は、メインコンテンツが表示される前に差し込まれるページです。「いかにインパクトを与えることができるか?」といった”演出”のために使用することには価値があります。
但しデメリットは、スプラッシュページに大量のメディアコンテンツを含める場合、ページの読み込み時間が長くなる可能性があること。退屈にさせない、無害化させる工夫が必要でしょう。
また、再訪問時に直接コンテンツにアクセスしたい場合にも注意が必要です。ゆえに、ブログやメディアでは向いていません。
ここで紹介した、スプラッシュページを導入したWEBサイトを持つ企業は、業界を先導するようなWEB制作会社やクリエイティブスタジオ、ブランディング戦略に携わるマーケティング会社、次のトレンドを作り出すファッションブランドなどです。
ユーザーにブランド体験を提供したい場合に、スプラッシュページは役立ちます。
文頭に記載しましたが「ページに訪れたユーザーをもてなす意識の行き届いたセンスの良いスプラッシュページは、ブランドイメージを直感的に印象付け、ユーザーを飽きさせず期待感を持続させること」それが可能になり、意味のあるインパクトと感動を与えることができます。
ファッションやビジネスに限らずどの市場にも流行はあり、WEBサイトの流行に流されるだけの人(組織)と、自らの感性を突き詰めたWEBサイトを創り出す人がいますが、「市場に新しい流れを生み出す」のはきっと後者の自らの感性を突き詰めていく人(組織)なのかもしれません。
そのためTCDでは、感性を最大限に表現し、市場をリードする企業のためのスプラッシュページを搭載したWordPressテーマ「VOGUE」を開発しました。これから運営者の感性がスプラッシュしたような創造性に溢れたWEBサイトが増えていくと良いですね!
合わせて読みたいWordPressテーマ【VOGUE(tcd051)】の関連記事
第1回 : スプラッシュページとは?デザイン事例まとめ
第2回 : なぜ今、「企業アイデンティティ」が必要とされているのか?
第3回 : 多幸感を知覚させ企業アイデンティティを確立するWordPressテーマ「VOGUE」の特徴的な機能
第4回 : 圧倒的なスケールで五感に響かせる「VOGUE」に搭載されたスプラッシュページの効果的な活用方法