We have a new web app: Creatopy! And your Bannersnack account is safe and sound. Log in to Bannersnack.

最も効率的なHTML5アニメーショ
ンツールをさらに表示

ダイナミックなアニメーションビジュアルを作成するためのスムーズなHTML5トランジションとエフェクト

ステップバイステップ

アニメーションバナーの作り方

  • 1

    サイズを選択します

    サイズを選ぶことがオンラインアニメーションを作成する最初のステップです。Googleディスプレイネットワークで一般的に使用されているプリセットサイズの1つを選ぶことも、サイズをカスタマイズすることも可能です。ディスプレイのカテゴリのサイズは18以上用意してあります。

  • 2

    テンプレートまたは1から作成します

    次に、既存のテンプレートから始めるか、1から始めるかを決めます。テンプレートはカテゴリごとに用意されており、数千点のテンプレートがあるので作業時間を短縮することができます。一方、HTML5バナーを1から作成する場合、私たちのアニメーションエディタは極めて直感的で、製作にかかる労力を省くことができます。またたくさんの人の注目を集めることができるオンラインアニメーションを作成することができます。

  • 3

    要素を追加します

    自分のフォント、ロゴ、画像、SVGをワークスペースにアップロードして使うことができます。もっと別の要素が必要ですか? Creatopyの豊富なライブラリから選んで、デザインの一部に加えましょう。

  • 4

    デザインを編集します

    デザインをアニメーション化して、その時間や遅延を設定します。各アセットにアニメーション効果を追加したら、タイムラインバーをドラッグしてその長さを決めます。さらにHTML5バナーのミドルアニメーションを追加することで、エフェクト間のスムーズなトランジションを実現させることもできます。プラットフォーム上で独自のエフェクトを作成することもできます、Magic Animatorツールを使えば、たったワンクリックでHTML5バナーをアニメーション化することもできます。オンラインでアニメーションを作成するのがいかに簡単なのかをご覧ください。

  • 5

    ダウンロードします

    カスタムアドネットワーク用にはHTML5形式、もしくはGoogle広告と互換性のある標準形式でダウンロードすることができます。アニメーションバナーはアカウントに保存されますので、デザインを微調整してまた別の機会に使うこともできます。

フレンドリーなインターフェース

今まで使ったことのない最もシンプルなタイムライン

Creatopyは、必要なすべてのツールが満載された最新のオンラインHTML5エディタを提供しています。 複雑で直感的なアニメーションタイムラインとダイナミックなスライド管理システムを備えており、すべてが使いやすいインターフェイスでまとめられています。

アニメーションプリセット

すぐに作成できる32個の既成のアニメーションプリセット

直感的なビジュアルインターフェイスを使用してHTML5でアニメーションを作成します。ライブラリからエフェクトやトランジションを使用して、様々なアニメーションを作成することで、デザインに活気を与えましょう。 Creatopyには32のプリセットが用意されており、どのデザインも簡単にアニメーション化できます。コーディングスキルは必要ありません!

正確なコントロール

高度な変数を使用したカスタムアニメーション

あなただけのアセットをCreatopyに追加しましょう。独自のフォント、ロゴ、イメージ、またはSVGファイルをアップロードしましょう。テキストアニメーションの長さや遅延を調整したり、カスタム変数を追加したり、スムーズなスライドトランジションを作成してアニメーションを作成できます。あなたのデザインを際立たせ、さらに注目を集めることができます。

簡単にアニメーション化

Magic Animatorを使用してワンクリックでアニメーションを視覚的に表現

あまり時間をかけられない場合は、HTML5エディタでMagic Animatorツールを使用するだけで、ワンクリックでアニメーションを作成できます。できるだけ一貫性を残しながら、アニメーションプロセス全体を大幅に簡素化し、数分で高品質の結果を提供します。

FAQ

最も一般的なサイズは?

Googleによれば、PCとモバイルでいくつか異なるサイズがあります。PCの最適なサイズは、200×200、240×400、250×250、250×360、300×250、336×280、580×400、120×600、160×600、300×600、 300×1050、468×60、728×90、930×180、970×90、970×250、980×120。モバイルの場合は、300×50、320×50、または320×100も使えます。

より魅力的なアニメーションバナーにするにはどうすればよいですか?

抑えておくべき点は次の点です。推奨サイズをしっかり守る。広告を目立たせるような色を選ぶ。ブランドのロゴを加える。広告全体に一致するフォントを選ぶ。わかりやすい見出しをつける。この他にもテキストに色をつけて特定の言葉を強調させることもできます。すべての要素が見えるように白の空白を加えることも忘れないようにしましょう。最後にトランジションなどの効果を加えることで、ダイナミックで注目を集めるバナーにすることができます。

自分のウェブサイト用のアニメーションヘッダーを作ることはできますか?

もちろんです。自分のウェブサイト用のアニメーションヘッダーも作成できます。訪問者の縁ゲージメントを高めて、ウェブサイトをさらにみてもらえるようにすることができます。アニメーションヘッダーを作るなら、Creatopyを使えば直感的で使いやすいデザインツールをご用意しています。高画質のストックフォトや動画を加えたり、アイコンや図形を試してみたり、アニメーション効果を加えて、ウェブサイトにぴったりのヘッダーを作ることができます。

CTA
始める

プロフェッショナルで
汎用のレスポンシブ広告を制作

ビジュアル制作プラットフォームのCreatopyを使えば、アニメーションのHTML5バナーをわずか数分で制作できます。 ウェブサイトや広告キャンペーン用の印象に残りやすいディスプレイ広告を制作しましょう。 すぐに使えるアニメーションテンプレートや無料のストックフォトのライブラリをご用意しています。