ローディング・オープニングアニメーションがかっこいいWEBサイト10選

ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。

また、ローディングとは違いますが、あえてオープニングに数秒の短いアニメーションを見せてからサイトを表示する、といったサイトも見受けられるようになりました。秀逸なアニメメーションはブランディングを高め、ユーザーのサイトへのクリエイティブの期待値をあげます。

今回はそんな「ローディング・オープニングアニメーションがかっこいいWEBサイト」を集めて見ました。

Contents

ローディング・オープニングアニメーションがかっこいいWEBサイト

全画面にタイル状に表示されたレイヤーが小さく消えて行った後に、文字が1文字ずつアニメーションしながら出てきます。アニメーションのテンポがとても気持ちが良いです。

縦書きの文字の上を水の波紋のようなうアニメーションが広がって行きます。サイトの世界観を演出するアニメーションです。

ロゴマークにある「＞」のマークを活かしていて、透過のかかったマークが常に残ったまま動画が流れていきます。サイトの雰囲気に合ったオシャレな演出です。

センターにロゴマークが表示されるよくあるやつか？と思いきや、ロゴマークが回転しながら広がって行きサイトが表示されます。アイデアが面白い斬新なアニメーションです。

文字が中央に表示された後、ボックスが順番に横に消えて行きサイトが表示されます。アニメーションのイージングが気持ち良いです。

ロゴマークがクルクル回っているのはそれほど斬新ではないですが、その後サイトが表示されると同時に出てくるハサミも同じく回転して出てきます。しかもハサミにもロゴマーク入っていて、アニメーションしながらハサミに同化したような演出になっています。

ローディングのパーセントの後ろで漢数字が切り替わっているところがかっこいいですね。ローディング完了後は、まるで刀で真っ二つに切ったように上下にレイヤーがわかれてサイトが表示されます。そしてそこには「サムライ」。

①ロゴアニメーション→②黒背景がタイル状に消えていく→③タイトル文字のアニメーション→④ボックスがはけてファーストビューの画像が出て来る、という4段構成のアニメーションになっています。作り込まれていて、スタイリッシュな印象です。

黒い背景に黄色いバーがアニメーションしているシンプルな状態から始まり、画面上部から半円上の幕が降りてくるアニメーションがあり、その後ファーストビューに動画が表示されます。この動画のグリッチエフェクトがまたかっこいいですね。

ロゴが出てきた後に、10周年特設サイトということで年数が10回切り替わってから円が広がりタイトルが出てきます。またこのタイトルが表示される際のアニメーションがなんとも心地良いですし、背景の円の波紋もまた心地よさを演出しています。

オープニングでユーザーを待たせるのはサイト離脱を高めるのでリスクが高いです。ですが、ポイントとしてはユーザーを待たせているのではなく、ローディング・オープニングアニメーションも含めてサイトの演出！というクオリティですね。

同じWEB制作者としてこれらのWebサイトを見ていて感じるのは、ローディングアニメーションといった、ともすれば誰も気づかないような細部に高いクリエイティブを実装している制作者（会社）は、総じて全体のクオリティが高いです。ですので、そんな角度でサイトを見てみると、とっても楽しいですよ。

以下のデザインまとめた記事もぜひご覧ください。