Luxeritas(ルクセリタス)でアニメーションとLazy Load(画像遅延読み込み)の使い方を覚えよう
Luxeritas(ルクセリタス)のカスタマイズ（外観）の設定にあるアニメーションやLazy Road。しかし、実際にどのように利用するのかわからない方も多いのではないでしょうか？
そこで、このアニメーションとLazy Roadの使い方をわかりやすく解説していきましょう。
アニメーションとは・・・
アニメーションとは、サイト内にあるタイトルやサムネイル画像等に動きを付けることで、クリックできるよ～。等と知らせてあげるためのものです。
アニメーションは、こうした設定を意図にして用いられます。当然画面動作に動きを付けることになりますので、画面処理に重さが発生しますが、気になるほどではないと思います。
利用が必要な時：ユーザーの利便性を考慮する場合
アニメーションの設定は、なくてもSEO的に大きな影響はありませんが、あるとユーザーの利用に優しく使いやすさを追求できる設定となっています。もし画面が表示速度が遅くなるようであれば、設定を控えるようにしましょう。この辺は、お好みで設定していきましょう。。。
アニメーションの正しい使い方を覚えよう！
それでは、アニメーションの設定項目の位置とその使い方を覚えましょう。
アニメーション設定項目位置
設定項目位置：「Luxeritas」⇒「カスタマイズ（外観）」⇒「アニメーション」
アニメーションの設定方法について
アニメーションには、大きく分けて下記４つの設定があります。
＜アニメーションの４つの設定＞
- タイトル
- サムネイル画像
- SNSシェアボタン
- グローバルナビ
このように、アニメーションには、「サイト名」「記事一覧のサムネイル」「SNSシェアボタン」「グローバルナビ」の設定があり、
そのアニメーション効果（動き）には、主に２つの設定があります。
- ズームイン ⇒ 文字や画像を浮かせるように表示させます
- ズームアウト ⇒ 逆に文字や画像が小さくなるように表示されます
このように、画像や文字に動きをつけることで、訪問してきていただいているユーザーに、クリックできる部分なのかをわかりやすくすることができます。
Lazy Load(遅延読み込み)とは
Lazy Loadというのは、別名遅延読み込みとも言われ、この手法は、サイトが表示される最初の段階では、画像を読み込むのには、時間と処理能力が必要になります。
どんなにいい画像を使っていても、画像が重くて画面が開かなくては何の意味もありません。そこで、このLazy Loadというのは、いっぺんに画像を読み込まず、その時に表示させるような機能です。画像に関連するCSSやJSファイルのみを読み込むことで、表示速度を改善することができます。
Lazy Loadの正しい使い方とは
それでは、続いて、Lazy Loadの使い方を解説していいきましょう。
Lazy Loadの設定項目位置
設定項目位置：「Luxeritas」⇒「カスタマイズ（外観）」⇒「アニメーション」
Lazy Loadの設定方法について
Lazy Loadの設定項目には、主に３つの項目に分かれます。
遅延読み込みを実装すると、画像が最初からは表示されません。表示されるときに、点のマークが表示されていて、数秒後に、画像が表示されます。
表示させるタイミングで本物の画像が表示されるという動作になります。
利用が必要な時：サイトの表示速度が遅い場合やサイトが重たい場合
Lazy Roadの遅延読み込みは、サムネイル画像が非常にわかりやすいですので、設定したら、実際に読み込まれるときにすぐに表示されませんので、ぜひ確認してみましょう。
まとめ
このように、アニメーションやLazy Loadという機能は、決してなくてすぐに困るような機能ではありませんが、サイトが重くなったりした場合、ユーザーの利便性を考えたときにこうした機能を利用して、ユーザーの直帰率を下げられるように、運用していきましょう。
