最近お仕事の合間にwebを少しずつ触るようになりました。
社会人時代全く知識がないまま案件を抱えることがあり、その案件をきっかけに少しずつWordPressを触るようになって、今に至ります。
触ると言っても、主にブログや実績等の装飾部分でフロントページはまだまだWordPressテーマのデフォルトのまま…。
とは言え、見てもらった時に「おっ！」となってほしいと思って、WordPressプラグインを使ってサイト訪問時のローディングアニメーションを入れみました。
目次
ページの読み込み中にロゴを表示させてみた
ローディングというとゲームなんかでもよくありますよね。
読み込んでいる時にパーセンテージやキャラクターが動いたり、ゲーム内のお役立ち情報が出てきたり。
と言ってもweb初心者がいきなりお役立ち情報を表示させることはちょっとハードルが高いけど、パーセントが表示されるだけだと味気ない気がする…。
初挑戦にして応用がやりたい性分が発動して色々調べてみたら、WordPressのプラグインを使えば簡単にオリジナルのアニメーションを設定できることがわかりました。
実際にやってみたのがこちら。
テスト。ローディングアニメーション。 pic.twitter.com/4XQfnlU9hI
— 愛美／叩き上げのグラフィックデザイナー (@b_mnm666) December 8, 2020
URLからアクセスするとそれっぽいロゴがくるくるしてからフロントページに移りました。
今回はスマートフォンから確認していますが、PCブラウザからでも表示されています。
一見すごく手の込んだことをしているような感じを出していますが、ローディングアニメーションを設定するのにコードは触っていません！素材とWordPressプラグインがあるだけで簡単に設定することができます！
読み込み中にアニメーションが入れられるWordPressプラグイン「Loading Page with Loading Screen」
今回使用したのは「Loading Page with Loading Screen」という無料のプラグイン。
WordPressのダッシュボード「プラグイン」→「新規追加」から検索するとすぐに出てくるので、インストールも簡単です！
このプラグインは日本語に対応していないので、設定画面は英語で書いてあﾙので、英語が苦手なわたしはこちらのブログ記事を参考に設定を行いました！
このプラグインではデフォルトのアニメーションがいくつかあるので、それらを使えばすぐにでもアニメーションを表示させることができます。
またGIFをアップロードすることでオリジナルのアニメーションを表示させることができるということなので、わたしはオリジナルロゴのGIF動画を作成し、使用しました。
今回は使用したGIF動画作り方についてもご紹介したいと思います！
グラデーションを魅力的に見せる。Photoshopでアニメーション作成
今回は自身のポートフォリオサイトのローディングアニメーションということで、ロゴを使って「読み込みをしている」というのがわかるものがいいなと思いました。
「大きな動きがあるものがいいな」と考えたのですが、シンプルなwebサイトをコンセプトにしているので、最小限の動きにしたいと考え、色の変化に落ち着きました。
そこで参考にしたのがこちらの記事です。
Adobe Photoshopを使用して、美しいグラデーションを使ったアニメーションを作ることができます。
こちらの記事では、グラデーションが不規則に動くようなアニメーションですが、わたしは「読み込み」が伝わるように、時計回りに規則的に変化するアニメーションにしてみました。
こちらの記事では動画と合わせてその手法を紹介しているので、Photoshopをお持ちの方はぜひ試してみてください！
まとめ
ローディングアニメーションを設定することで少し手の加わったサイトという感じなりましたが、その後のフロントページへのハードルが上がったような気がしました…。
でも、オリジナル感が感じられるようになったのはいいなと思っています。
またアニメーションを使うことでwebサイトの表示が重くなることがあったり、アニメーションを見せたいが為に長く表示させてしまうとサイトから離脱してしまうなんてこともあるので注意が必要です。
英語と数字が苦手なわたしですが、ステキなプラグインのお陰で少しずつオリジナルのwebサイトへ変化させることができました。今後もWordPressに四苦八苦しながらもwebサイトを作り上げていくところをブログにしていきたいと思っています。
次回はWordPressでのフロントページや固定ページをリニューアルについて綴っていきますので、ぜひお付き合いくださいませ！
Adobe ソフトが気になる方にオススメ！
Adobe Creative Cloud コンプリートはIllustratorやPhotoshop以外にもInDesign・Acrobat Pro等のAdobeソフトがフルで使えるサブスクリプション型のプランです。
現在（2021.1.15時点）Amazonを経由するとAdobe Creative Cloud コンプリート12ヶ月版が少しリーズナブルな費用で使うことができるようですので、これからAdobeソフトを使いたいと考えている方はぜひ参考にしてみてください！
