LuxeritasのアニメーションとLazy Load(画像遅延読み込み)の使い方

Luxeritas(ルクセリタス)のカスタマイズ（外観）の設定にある「アニメーションやLazy Road。」

悩む女性１

しかし、実際にどのように利用するのかわからない？

そんな悩みを持たれる方も少なくありません。

管理者

そこで、このアニメーションとLazy Roadの使い方をわかりやすく解説していきましょう。

アニメーションについて

アニメーションは、こうした設定を意図にして用いられます。当然画面動作に動きを付けることになりますので、画面処理に重さが発生しますが、気になるほどではないと思います。

アニメーションの設定は、なくてもSEO的に大きな影響はありませんが、あるとユーザーの利用に優しく使いやすさを追求できる設定となっています。

もし画面が表示速度が遅くなるようであれば、設定を控えるようにしましょう。この辺は、お好みで設定していきましょう。

アニメーションの正しい使い方を覚えよう！

それでは、アニメーションの設定項目の位置とその使い方を覚えましょう。

アニメーション設定項目位置

アニメーションの設定方法について

アニメーションには、大きく分けて下記４つの設定があります。

アニメーションカスタマイズ項目

このように、アニメーションには、「サイト名」「記事一覧のサムネイル」「SNSシェアボタン」「グローバルナビ」の設定があり、

そのアニメーション効果（動き）には、主に２つの設定があります。

このように、画像や文字に動きをつけることで、訪問してきていただいているユーザーに、クリックできる部分なのかをわかりやすくすることができます。

Lazy Load(遅延読み込み)とは

サイトが表示される最初の段階では、画像を読み込むのには、時間と処理能力が必要になります。

どんなにいい画像を使っていても、画像が重くて画面が開かなくては何の意味もありません。

そこで、このLazy Loadというのは、いっぺんに画像を読み込まず、その時に表示させるような機能です。画像に関連するCSSやJSファイルのみを読み込むことで、表示速度を改善することができます。

Lazy Loadの正しい使い方とは

それでは、続いて、Lazy Loadの使い方を解説していいきましょう。

Lazy Loadの設定項目位置

Lazy Loadの設定項目位置についても確認しておきましょう。

Lazy Loadの設定方法について

Lazy Loadの設定項目には、主に３つの項目に分かれます。

遅延読み込みを実装すると、画像が最初からは表示されません。表示されるときに、点のマークが表示されていて、数秒後に、画像が表示されます。

表示させるタイミングで本物の画像が表示されるという動作になります。

Lazy Roadの遅延読み込みは、サムネイル画像が非常にわかりやすいですので、設定したら、実際に読み込まれるときにすぐに表示されませんので、ぜひ確認してみましょう。

まとめ

このように、アニメーションやLazy Loadという機能は、決してなくてすぐに困るような機能ではありません。

ただサイトが重くなったりした場合、ユーザーの利便性を考えたときにこうした機能を利用して、サイトの表示速度を向上させ、ユーザーの直帰率を下げられるように運用することが望ましいので、上手に活用していきましょう。