【プラグインで簡単】ホームページをリッチに見せるアニメーションの作り方

2023-03-22

「ホームページを作ってみたけど、なんだか寂しい印象だな…」
「もう少しリッチに見えるように工夫したい！」

そんな方はこちらの記事を参考に、WordPressで作ったWebサイトにアニメーションを追加してみてはいかがですか？

難しい設定はなく、また無料で使用することができます。
ここでは2種類のアニメーションを、動画でも設定方法を解説していますので是非チャレンジしてみましょう！

ホームページの作り方はこちらの記事で解説しているので、参考にしてみてください。

記事が見つかりませんでした。

ローディングアニメーションの設定方法

ローディングアニメーションとは、Webサイトを読み込んでいる時に表示されるアニメーションのことです。
こちらの動画のようなアニメーションを設定することができます。
リッチな印象になるのでおススメです。

早速アニメーションを設定していきましょう。

動画とテキスト、分かりづらい箇所には画像も使いながら解説していきますので安心してください。
こちらの動画と後述の解説を参考に設定していきましょう！

まずはプラグインを導入していきましょう。
WordPress管理画面の左側にある「プラグイン」にカーソルをあてると「新規追加」を選択することができます。

次に検索窓に「loftloader」と入力します。
すると星形のようなアイコンの「LoftLoader」が出現するので、「今すぐインストール」→「有効化」をクリックしましょう。

プラグインを有効化できたことを確認したら、管理画面の「設定」にカーソルをあて「LoftLoader Lite」をクリックしましょう。

設定項目は4か所のみです。1つずつ解説していきます。

項目	説明
Display on	ローディングアニメーションを表示する箇所を設定できます。・Sitewide = 全てのページを開く(遷移)する毎にアニメーションが発動します・Homepage only = TOPページを開いた時のみアニメーションが発動します全てのページで発動するとUI/UX的にもわずらわしさを感じる可能性があるので、「Homepage only」をおすすめします
Background	ローディング中の背景色等を設定できます。・Picks color = 背景色を選択できます。サイトの背景色と同じに設定すると良いでしょう。・Opacity = 透明度を選択できます。お好みの透明度を設定してみましょう・Ending Animation = ローディングが終了しTOPページを開く際のアニメーションを設定できます。こちらもお好みのものを設定しましょう。
Loader	ローディング中のアニメーションを選べます。数種類のアニメーションがあるのでお好みで。おススメはロゴ画像を設定するとリッチでかつユニークな印象を与えられます。ロゴのサイズは適宜調整しましょう。
More	ページの読み込みに時間がかかった場合でも、アニメーションを終了させることができる設定です。「Maximum Load Time」を10秒程度に設定しておくといいです。