こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
ランディングページなどで「動く送信ボタン」を見たことはありますでしょうか？最近では申し込みボタンがきらりと光っていたり、ぶるぶると揺れていたり、さまざまな動きをするボタンがあります。
送信ボタンやテキスト文字や画像に動作をつける方法
動きをつける方法は色々とあります。JavascriptやCSSなど何を選ぶかはあなたの自由です。本記事では「テキストリンクや画像などに動きをつける方法」をいくつかご紹介いたします。
具体的な実装方法は別の記事で解説するので本記事ではどんな手法で動きをつけられるのか？という部分について学ぶことができます。技術を知ることで最適な解決策を覚えておきましょう。
１. Javascriptで動きをつける
もっともスタンダードな方法はJavascriptで動作を付ける方法です。
ただ、Javascriptでゼロから書くと大変なのでJavascriptのライブラリ「jQuery」を使うのがおすすめ。jQueryには「animateメソッド」という手法があります。アニメイトという名前の通り画像を上下移動や左右に振ったりと細かな指定が可能です。イージングと併用することで動きに余韻も持たせられます。
費用はピンキリでどこまで細かくアクションを作り込むかによって価格は変動してきます。この点は以下でご紹介する「CSS」や「GIFアニメーション」でも変わりません。時間がかかる実装は値段も高いです。
２. CSSで動きをつける
次にご紹介する方法がCSSで動作させる方法です。
最近のブラウザは優秀なのでCSSで動きを書くと正確に処理してくれます。業界では有名な話ですがIE（インターネットエクスプローラー）はCSSの解釈レベルが低いためうまく動かないことも多いです。
また、グーグルクロームやファイヤーフォックスなどCSSを正しく解釈できるブラウザが主体になってきているので理想的な動きが実現できるのであればCSSで実装するのがおすすめです。
３. GIFアニメーション化する
動作は「画像側で行う」という考え方がGIFアニメ化です。
JavascriptやCSSは画像に対して外側から動きの命令を行いますが、GIFアニメーション化では画像のなかにタイムラインという時間軸を設定してパラパラ漫画のような仕組みで動きを作っていきます。
ただし、１コマ１コマで画像の位置を指定していくため単調な動きになりやすく動きとしての仕上がりは「１」や「２」よりもチープになりやすいです。動きの強弱（緩急）という面ではJavascript（jQuery）の方が操作しやすいためどういった動きを作るか？や予算などから決定していくことになります。
まとめ
本日はウェブサイト上に設置したテキストや画像に動きを付ける方法をご紹介いたしました。
考え方のポイントとしては「何のために動作させるのか？」で選ぶと安心です。もし、ただテキストや画像が動いている状態をキープしたいという程度なのであれば「１〜３」どれでも問題はありません。
しかし、理想的な動きがあるならもっとも最適な方法を選びましょう。カンタンに言えば「動きにこだわるのか？予算にこだわるのか？」で選ぶべき最適な技術はその都度変わってきます。手短にどの技術でどこまでの動きを実現できるのか覚えたいのならまずは全手法で作ってみることをおすすめします。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
