WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

2019年に流行しそうなwebデザイントレンド「ローディングアニメーション」を使ったサイト3選!

   

今年も1年が始まりましたね!
初詣にも行かず正に寝正月を過ごした私ですが、今年は果たしてどんな年になるのでしょうか…

新年明けての1本目は、2019年に流行りそうなwebデザインのトレンドの1つ、「ローディングアニメーションを使用したサイト」をまとめました!

 

ローディングアニメーションのメリット

去年は、ローディングアニメーションを使ったサイトがよく見られた気がします。
サイズが大きくなるにつれ、どうしても読み込みに時間がかかってしまいます。そうなった場合、ローディングアニメーションは必要不可欠です。

ストレスを与えず、たとえ読み込み時間が長かったとしても退屈させずにユーザーをとどまらせる事ができます。
やはり、ロゴマークやロゴタイプなどをアニメーションに用いたり、ブランドイメージを想起させるデザインにすることによってブランディングにも役立てることができます。

青柳総本家 公式サイト

画面を埋め尽くす葉っぱのアニメーションにビックリ!なローディングアニメーションです。
色鉛筆で描かれたような温かみのあるイラストで、親しみやすさを感じるファーストビューですね!

 

えるマネージメント

こちらは少し分かりにくいのですが、ロゴの「L」の形のローディングアニメーションを使用しています。
さり気ないアニメーションですが、それでもあるだけで印象が違いますね!

 

TAPUKO THE GAMA(タプコザガマ)

こちらのサイトはアニメーションにロゴタイプを使用しています。ローディング中は「TAPUKO」、完了すると「GAMA!」という文字に切り替わります。
ファーストビューにはとてもインパクトのある動画が…!これだけで見る人を引き込みますね!

 

まとめ

最近ではcss3でもローディングアニメーションを作ることが出来るみたいですね!
なかなか試す機会がないのですが、1度いちから自分で作ってみたいです…

以上、ローディングアニメーションを使ったサイトをご紹介しました!

 - 動きで表現

  関連記事

自分が本を選んでいるかのようなスクロール

  丸善出版株式会社とジュンク堂書店が佐賀県とコラボレートした「ほんの …

配色をカラフルにするだけでなく、アニメーションもたくさん使ったサイトのデザインが可愛い!

熊本県熊本市にある食のテーマパーク「株式会社フードパル熊本」のホームページです。 …

「伝統」と「革新」を伝える「廣榮堂 採用サイト」

岡山で160年の歴史を誇る老舗和菓子屋「廣榮堂」の採用ページです。 学生たちをタ …

アニメの世界観を大切にしたサイトがカッコよくておしゃれ!

2017年の10月に放送が開始されるアニメ「魔法使いの嫁」の公式ホームページです …

常夏の色合いがステキな「潜水屋Ti-Da」

愛知県名古屋市にあるダイビングショップ・スクール「潜水屋(もぐりや)Ti-Da」 …

カーソルを乗せると動くボタン

愛知県碧南市松江町にある歯医者「あだち歯科クリニック」のホームページです。 歯を …

アリのマークを用いて様々な仕掛けを作る

東京都にある株式会社「Alfanet(アルファネット)」のホームページです。 ま …

グローバルナビよりも目立った言語切り替えボタン

熊本県にある有限会社「球磨川ABC」のホームページです。左側に固定された言語選択 …

動きや写真で伝統や歴史の重さを表現する

開創から1200年を迎えた高野山の公式ホームページです。トップにあるそれぞれの写 …

ユーザーごとにデザインを切り替える

ヤマト運輸株式会社の公式ホームページです。 個人・法人・行政や自治体ごとのページ …