WebGallery

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

*

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

   

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

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

 

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

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

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

青柳総本家 公式サイト

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

 

えるマネージメント

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

 

TAPUKO THE GAMA(タプコザガマ)

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

 

まとめ

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

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

 - 動きで表現

  関連記事

「ACSL」のサイトのフライトシミュレーションがとにかくスゴい!

「ACSL|株式会社自律制御システム研究所」のホームページです。 ファーストビュ …

アニメーションをゆっくりとした動きにし、筆のようなフォントや落ち着いた配色で重厚感を感じさせるデザイン

北海道沙流郡平取町にある「二風谷アイヌ匠の道」のホームページです。 黒・白・赤の …

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

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

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

ブロックボタンの見やすいサイト

写真やボタンをブロックにしてデザインしているサイトです。ブロックすべてがボタンに …

もうすぐバレンタイン!2019年バレンタイン特設サイトを集めました!

明日はいよいよバレンタインデーですね! 皆さんはもう誰かにチョコレートを上げまし …

行ってうっとり!夏の鳥取の魅力がつまったサイト

観光スポットやグルメ情報など、四季折々の鳥取の「美」を紹介している「ANA 鳥取 …

一つのコンテンツで二つの情報が見れる

10月24日から行われるイベント「Any Tokyo 2015」のホームページで …

大豆を使った商品を取り扱っているサイトのデザインが、大豆の形を使ったデザインでおしゃれ!

岡山県岡山市に本社を構える「913  NEUF UN TROIS(ヌフアントロワ …

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

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