※当サイトにはプロモーションが含まれています。
最近は見かけなくなりましたが、以前は、CTA（Call To Action）のボタンの上に動きのある矢印のアニメーションが、ランディングページやセールスページによく使われていました。
このような矢印のアニメーションです。
今回は、このような矢印のアニメーションを、Photoshopを使って３分で作る方法について説明します。
３分で作れる矢印のGIFアニメーションの作り方
今回、使用しているPhotoshopのバージョンは、25.3.1です。
Photoshopの画面構成の名称は、下記をご参照ください。
- PhotoShopの画面構成の説明
A.メニューバー：画面の一番上、オプションバーの上に表示され、全般的な設定ができます（ファイルを開く／閉じるなど）B.オプションバー：メニューバーの下に表示され、ツールの詳細設定ができます（ブラシであれば太さなどの変更など）
C.ツールバー：画面の左側に表示され、作業に使える様々な道具が収納されています（図形の作成など）
D.パネル：設定の一部が画面の右に表示され、オプションバーではできない詳細設定ができます
では、photoshopを使って、３分で作れる矢印のGIFアニメーションの作り方についてです。
①三角形を３つ作成します。
②フレームアニメーションを作成
メニューバーから、
ウィンドウ > タイムライン
を選択します。
「フレームアニメーションを作成」を選択します。
③タイムラインに新規フレームを追加する
タイムラインのメニューから、「新規フレーム」を選択します。
なお、２つフレームを追加したいので、もう１つ新規フレームを追加します。
すると、タイムラインはこのようになると思います。
④フレーム１を作成する
フレーム１を選択して、表示させる矢印（レイヤー）を選択します。
⑤フレーム２を作成する
フレーム２を選択して、表示させる矢印（レイヤー）を選択します。
⑥フレーム３を作成する
フレーム３を選択して、表示させる矢印（レイヤー）を選択します。
ちなみに、この状態でGIFを作成すると次のような感じになります。
これでは動きが急すぎるので、残像を表示させて動きを滑らかにしたいと思います。
⑦アニメーションフレームをトゥーインを作成
フレーム１とフレーム２の間にアニメーションを増やして、矢印の動きを滑らかにします。
フレーム１とフレーム２を選択した状態で、タイムラインの下部パネルから「アニメーションフレームをトゥーイン」アイコンを選択します。
パラメーターにチェックが入っている事を確認にし、追加するフレームを３つにします。
するとフレーム１とフレーム２の間に、３つフレームが追加されました。
フレーム２とフレーム３の間も、同じようにフレームを3つ追加します。
⑧タイムラインの秒数を調整する
今回のGIFアニメーションはループさせたいので、最後の矢印に少しだけ溜めを作りたいと思います。
最後のフレームの「∨（下向きの角括弧）」を選択して、0.2秒に設定します。
ループ設定を「無限」にして、再生ボタンで動作確認をしてみましょう。
⑨GIFで画像を描き出す
動作に問題なければ、GIF形式で書き出しましょう。
メニューバーの
ファイル > 書き出し > Web用に保存（従来）
を選択。
保存形式を「GIF」にして「保存」ボタンを押します。
これで完成です。
さらに、何もないフレームなどを作成して、ディレイを調整してみます。
すると、こういったパターンのものが作成できました。
GIFアニメーション作りの参考になれば幸いです。
CSSでも繰り返し動く矢印を作ってみました。
前回、Photoshopを使って、このようなGIFアニメーションの矢印を作りました。 今回は、2つの矢印が繰り返し動くアニメーションをCSSで作ってみました。 繰り返し動く矢印アニメーションのCSS 繰り返し動く矢印アニ …
Adobeソフトの基本操作を安く学べるオンラインスクール
なお、オンラインスクールのアドバンススクールでは、Photoshop、Illustrator、Dreamweaver、Premiere Pro、After Effects、InDesignなどが動画で学べて、Adobe Creative Cloudの１年間プランを68,800円 (税込)で利用することができます。
にゃのらいと 何故、こんなに安いにゃ？
それは、オンラインスクールに入学するため、学生・教員個人版のプランが適用されるためです。
その為、法人の申し込みはＮＧですが、個人であれば申し込み可能です。
にゃのらいと 商用利用はできるのかにゃ？
Adobeに問い合わせて確認したところ、個人であれば商用利用は可能とのことでした。
Adobe Creative Cloudを安く使いたい方、Adobeソフトの基本的な使い方を学びたい（復習したい）方など、この機会に申し込まれてみてはどうでしょうか？
なお、講座の受講期間は6ヶ月です。
