デザインTechniquejQuery・JSひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。ローディングとは違いますが、あえてオープニングに数秒の短いアニメーションを見せてからサイトを表示する、といったサイトも見受けられるようになりました。秀逸なアニメメーションはブランディングを高め、ユーザーのサイトへのクリエイティブの期待値をあげます。今回はそんな「ローディング・オープニングアニメーションがかっこいいWEBサイト」を集めて見ました。まとめローディングアニメーション株式会社東洋精工|技術でつなぐ、未来をつくる全画面にタイル状に表示されたレイヤーが小さく消えて行った後に、文字が1文字ずつアニメーションしながら出てきます。見ていてとても気持ちが良く、個人的にとても好きなアニメーションです。きの文字の上を水の波紋のようなうアニメーションが広がって行きます。サイトの世界観を演出するアニメーションです。P.I.C.S.ロゴマークにある「>」のマークが文字とともに横にアニメーションした後、センターに残ったままサイトが表示されます。サイトの雰囲気にあった楽しいアニメーションです。オーダーメイド家具&手作り雑貨の木工房センターにロゴマークが表示されるよくあるやつか?と思いきや、ロゴマークが回転しながら広がって行きサイトが表示されます。アイデアが面白い斬新なアニメーションです。中央に表示された後、ボックスが順番に横に消えて行きサイトが表示されます。アニメーションのイージングが気持ち良いです。Inc.短い時間ですがロゴマークのアニメーションが細かくてとても凝っています。その後サイトが表示されますが、メインのキャッチコピーの文字も細かくパーツにわかれてアニメーションしながら出てきます。Inc.ローディングの後に大きな筆で書いたような文字が出てきますが、文字が背景画像をマスクしていて、一瞬のクリエイティブにもこだわっています。左上から細かいブロックがペンキをかけたように画面全体を塗りつぶし、中央に社名が表示され、サイトが表示されます。こちらもアイデアがすごいアニメーションです。ヘアサロン・美容院ロゴマークがクルクル回っているのはそれほど斬新ではないですが、その後サイトが表示されると同時に出てくるハサミも同じく回転して出てきます。ハサミにもロゴマーク入っていて、アニメーションしながらハサミに同化したような演出になっています。PROUD】結果重視|全国対応かっこいいのはローディングのパーセントの後ろで漢数字が切り替わっているところです。冒頭で「和」の印象を与えています。ローディング完了後は、まるで刀で真っ二つに切ったように上下にレイヤーがわかれてサイトが表示されます。そこには「サムライ」。INC.)ロゴアニメーション>タイルレイヤーのアニメーション>テキストシャッフルアニメーションと3段構成のアニメーションになっています。サイトのデザイン、アニメーション、ともにとてもスタイリッシュな印象です。Inc.)冒頭に縦のラインがランダムに動きながらロゴマークが出てきます。若干長めのアニメーションのため「Skip」リンクを設置してユーザビリティも考慮しています。inc.黄色い縁が画面全体に広がりロゴマークが出てきます。こちらも長めのアニメーションのため「Skip」リンクがあります。一度見るとブラウザを終了してもクッキーなどで制御して出てこないようにしていますのでお見逃しなく。デザイン】おしゃれなデザインのサイトまとめ!のまとめ2018.07.04まとめ「ローディング・オープニングアニメーションがかっこいいWEBサイト」いかがだったでしょうか?オープニングでユーザーを待たせるのはサイト離脱を高めるのでリスクが高い、というのは事実としてあります。ポイントとしてはユーザーを待たせているのではなく、ローディング・オープニングアニメーションも含めてこのサイトの演出なんだぜ!というクオリティです。同じWEB制作者としてこれらのWebサイトを見ていて感じるのは、ローディングアニメーションといった、ともすれば誰も気づかないような細部に高いクリエイティブを実装している制作者(会社)は、総じて全体のクオリティが高いです。そんな角度でサイトを見てみると、とっても楽しいですよ。Day.GALLERYINSPIRATIONCONTACTTGIC。