クリックされる! アニメーションバナーの作り方

※当サイトにはプロモーションが含まれています。

クライアントクライアント

クリック率が高いバナー画像を作ってくれ!

にゃテックにゃテック

おけまるだにゃ。

WebサイトやSNSなどで商品やサービスを紹介する際には、当たり前ですが、“クリック率の高い画像”を使うことが望ましいと思います。

自分も今まで多くのバナーを制作してきましたが、個人的に今まで反応がよかったのは下記のような動きのある画像(アニメーションGIF)ではないかと感じています。

DomoAI|バナーアニメーション
DomoAIで作成

今までは、こういったアニメーションGIFを作るのは大変でしたが、DomoAIなどの動画生成サービスを利用することにより、簡単に作成することができるようになりました。

今回は、アニメーションを作成できるツール「DomoAI」を使って、上記のような動きのあるバナー画像を作成する方法をまとめました。

なお、下記のボタンから登録すると、DomoAIの有料プランを10%オフで利用できます。

DomoAIの支払い方法はこちら

バナー画像の作成方法について

アニメーションの元となる画像を2~5つ程度作成します。

今回のアニメーション画像は、“始まり”と“終わり”の画像の2つを作成しました。

アニメーションの開始となる画像
開始点となる画像
アニメーションの終了となる画像
終点となる画像

このようなバナー画像は、ChatGPTGeminiなどのAIツールを使って1回で作成することも可能だと思います。

ただ、指示工程が複雑になるほど生成結果に偶然性が入り込みやすく、意図したデザインを安定して再現するのが難しくなるので、自分は以下の手順で作成しました。

開始点となる画像の作成方法について

開始点となる画像の作成方法についてです。

  1. ChatGPTで女の子のみの画像を作成
  2. 無料対象のスマホ画像をAdobe Stockからダウンロード
  3. Photoshopなどを使用してバナー画像の作成(タイトル、ボタン、スマホと女の子の画像を合成)
にゃテックにゃテック

スマホ内に女の子の画像を収めるには、“クリッピングマスク機能”を使います。

Photoshop|クリッピングマスクを作成

にゃのらいとにゃのらいと

Photoshopの代わりにCanva(有料版)を使ってもいいにゃ。

これで、開始点となる画像の作成が完了です。

終点となる画像の作成方法について

終点となる画像の作成は、Nano Banana Proを使うと簡単です。

Nano Banana Proとは?

GoogleのGeminiで使える高性能な画像生成・編集AIです。文字の描写が正確で、細かい修正もしやすく、仕上がりの安定感が特長です。
なお、「Nano Banana」と「Nano Banana Pro」は、性能がまるで違うので注意してください。

なお、DomoAIでは、Nano Banana Proを使用して画像を作成することもできます。

Nano Banana Proでは、複数枚の画像をアップロードして、それらの画像を参照して画像を生成することができるので、今回は次の2つの画像をDomoAIにアップロードしました。

  1. 開始点となる画像
  2. 最初にChatGPTで作成した、女の子のみの画像

これらを元にして、画像生成をおこないました。

DomoAI|Nano Banana Proモデル

なお、プロンプト(Prompt)は日本語で直接書くよりも、AIツールを使って英文で作成して指示した方が、安定した結果になりやすいと思います。

これで、終点となる画像が作成できました。

アニメーションの作成方法について

続いて、DomoAIを使ってアニメーション画像を作成していきます。

DomoAIには「フレームから動画へ(Frames to Video)」という機能があり、2~8枚の画像をアップロードすると、その間を補完する形でアニメーションを生成できます。

今回はこの機能を使い、開始点となる画像と終点となる画像の2枚をアップロードして、アニメーションを作成します。

DomoAI|フレームから動画へ(Frames to Video)

なお、プロンプト(Prompt)を入力しなくても、AIが内容を自動的に補完してアニメーションを生成してくれます。

にゃテックにゃテック

また、ケースによっては、あえて指示(プロンプト)を入れない方が、意図に近いアニメーションが生成される場合もあります。

満足する動画が作成できたら、その動画をダウンロードします。

なお、ダウンロードされるファイル形式はMP4です。

MP4からGIFへ変換

ダウンロードしたファイルは、MP4形式のため、GIF形式へ変換します。

自分の場合は、Adobe Media Encoderを使用し、ファイルサイズなどを調整したうえで書き出しましたが、同ソフトを使用していない方も多いと思います。

その場合は、CanvaAdobe Expressなどのオンラインサービスを使って、MP4からGIFへ変換することが可能です。

Canva|MP4からGIFに変換

ただし、細かいファイルサイズや画質の調整は有料プランでないと制限される場合があるため、その点には注意してください。

にゃテックにゃテック

冒頭にあるバナー画像内の“Domo AIのテキストアニメーション”は、Adobe Premire Proを使用してアニメーション効果を追加しています。

アニメーション画像を使用する際の注意点について

今回、作成したようなアニメーション画像は、動きのない画像と比べてクリック率が高くなる傾向があるのですが、使用する際には注意点もあります。

それは、Google広告では、過度にクリックや行動を促す演出が問題視される場合があるという点です。

たとえば、下記のようにボタン操作を強く意識させるような矢印のアニメーションは、広告審査で落とされる原因になります。

そのため、LP(ランディングページ)やSP(セールスページ)をGoogle広告に出稿する場合、このようなコンバージョンを強く促す動きのある演出は含めないことを推奨します。

とはいえ、ブログのサイドバーなどに設置した場合は、クリック率が高くなる傾向も見られるので、用途に応じて使い分けてみてください。

なお、今回使用した DomoAIは無料で試すことができます。

興味があれば、下記より登録して試してみてください。

にゃテックにゃテック

上記から登録すると、有料プランが10%オフになります。