※当サイトにはプロモーションが含まれています。
最近は見かけなくなりましたが、以前は、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の１年間プランを39,980円 (税込)で利用することができます。
にゃのらいと 何故、こんなに安いにゃ？
それは、オンラインスクールに入学するため、学生・教員個人版のプランが適用されるためです。
その為、法人の申し込みはＮＧですが、個人であれば申し込み可能です。
にゃのらいと 商用利用はできるのかにゃ？
Adobeに問い合わせて確認したところ、個人であれば商用利用は可能とのことでした。
Adobe Creative Cloudを安く使いたい方、Adobeソフトの基本的な使い方を学びたい（復習したい）方など、この機会に申し込まれてみてはどうでしょうか？
楽天市場の検索結果
Adobe アドビ Photoshop Elements 2025 3年版
19,580円(税込)【送料込】
【商品紹介】 ■写真や動画編集を簡単に Elements 2025 とはAIと自動化技術を活用して、写真や動画編集を簡単に行えるソフトウェアです。複雑な操作を必要とせず、ガイドに従って編集スキルを向上させられます。 ■フォトリールやスライドショーなどで簡単に共有可能 最新のテクスチャやグラフィックを使用して、クリエイティブな作品を作成し、
初心者からちゃんとしたプロになる Photoshop基礎入門 改訂2版 [ おの
2,530円(税込)【送料込】
おのれいこ エムディエヌコーポレーションオノレイコ 発行年月：2024年06月21日 予約締切日：2024年04月17日 ページ数：320p サイズ：単行本 ISBN：9784295205944 おのれいこ（オノレイコ） 福岡県産フリーランスWebデザイナー。西南学院大学卒業後、不動産系の企業に入社。その後Web業界へ転身し、現在はWeb
Photoshop 10年使える逆引き手帖【CC完全対応】［Mac ＆ Wind
2,640円(税込)【送料込】
藤本 圭 SBクリエイティブフォトショップジュウネンツカエルギャクビキテチョウシシーカンゼンタイオウマックアンドウインドウズタイオウ フジモト ケイ 発行年月：2018年06月22日 予約締切日：2018年06月20日 ページ数：368p サイズ：単行本 ISBN：9784797398267 藤本圭（フジモトケイ） 1972年生まれ。（株
新世代Photoshop 超入門 [ タマケン ]
![新世代Photoshop 超入門 [ タマケン ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/4115/9784802614115_1_3.jpg?_ex=128x128)
2,420円(税込)【送料込】
タマケン ソシムシンセダイフォトショップ チョウニュウモン タマケン 発行年月：2023年08月29日 予約締切日：2023年07月11日 ページ数：248p サイズ：単行本 ISBN：9784802614115 タケマン 1988年生まれ。福岡県出身。Webデザイナー／グラフィックデザイナー。ブログ、YouTube、Twitter、Ti
作りたい！からはじめる 気ままにフォトショ＋Photoshop基本ガイド付き [
2,200円(税込)【送料込】
中田麻里絵 コネクリ エムディエヌコーポレーションナカタマリエ コネクリ 発行年月：2024年09月20日 予約締切日：2024年09月19日 ページ数：224p サイズ：単行本 ISBN：9784295206781 中田麻里絵（ナカタマリエ） 大手教育系企業にて編集・マーケティングの業務に従事するなかで、グラフィックデザインの世界に興味
