Webサイトの見出しやキャッチコピーに、少し動きを加えてみたい。
そんなときに使えるのが、無料の「TEXT ANIMATION BUILDER（テキストアニメーションビルダー）」です。
文字が左から現れる、1文字ずつ順番に登場する、ふわっと浮かび上がるなど、さまざまな文字アニメーションを、プレビューで確認しながら作成できます。
HTMLやCSSを一から書く必要はありません。好きな動きを選び、文字や色を設定するだけで、Webサイトに組み込めるコードを出力できます。
WordPressのカスタムHTMLブロックはもちろん、一般的なHTMLサイトでも使用できます。
まずは、実際に文字を動かしてみてください。
TEXT ANIMATION BUILDERとは？
TEXT ANIMATION BUILDERは、Webサイト用の「動く文字パーツ」を作成できるツールです。
キャッチコピー、見出し、本文などにアニメーションを設定し、その動きやデザインを画面上で確認しながら編集できます。
作成したデザインは、HTMLとCSSのコードとして書き出せるため、既存のWebサイトにも組み込めます。
専門的なコードを直接編集することなく、文字の動きから装飾、サイズ、配置まで調整できるのが特徴です。
主な機能
| 機能 | できること |
|---|---|
| アニメーション | 42種類の動きから選択 |
| 文字編集 | 見出し・本文を個別に設定 |
| デザイン | 書体・文字サイズ・文字間隔・色を変更 |
| 装飾 | 下線・囲み・マーカーなどを追加 |
| 動きの調整 | 再生速度・開始時間・移動距離などを変更 |
| プレビュー | PC・スマホの表示を切り替え |
| コード出力 | HTML・CSSの一括コピー、個別コピー |
| ファイル保存 | 単体で表示できるHTMLファイルを保存 |
42種類の文字アニメーションを用意
あらかじめ用意された42種類の動きから、目的に合ったものを選択できます。
カテゴリーは「登場」「文字集合」「強調・装飾」の3つ。見本を探すための検索機能も備えています。
1. フェード・スライドなどの登場アニメーション
文字全体が動きながら現れる、基本的なアニメーションです。
フェードイン、左右・上下からのスライド、ズームイン、回転、ぼかしからの出現、タイプライターなどを用意しています。
例えば、企業サイトのメインコピーをゆっくり表示したり、サービス紹介の見出しを横から登場させたりする使い方ができます。
2. 1文字ずつ動く文字集合アニメーション
文字全体ではなく、1文字ずつ異なるタイミングで登場するアニメーションです。
左右から順番にスライドインする動きのほか、バラバラの方向から文字が集まる、文字が降ってくる、回転しながら集合するなどのパターンがあります。
印象的なキャッチコピーや、特に注目してほしいメッセージに使えます。
3. 文字を目立たせる強調・装飾アニメーション
文字を揺らしたり、光らせたり、ゆっくり浮遊させたりするアニメーションです。
パルス、点滅、光沢スライド、横方向のストレッチ、呼吸するような動きなどを選べます。
動きをつけることで、通常の静止した文字とは異なる視覚的な表現が可能になります。
文字の色や装飾も自由にカスタマイズ
TEXT ANIMATION BUILDERは、動きだけでなく、文字そのもののデザインも変更できます。
見出しと本文のそれぞれに、書体、太さ、文字サイズ、文字間隔、アニメーションを設定できます。
書体はゴシック、明朝、等幅の3種類から選択可能です。
また、文字カラーは単色だけでなく、左右2色のグラデーションにも対応。企業のブランドカラーやWebサイトの雰囲気に合わせた調整ができます。
下線・囲み・マーカーなどの装飾
見出しには、アンダーバー、二重線、短い下線、点線の囲み、左ライン、背景帯、マーカー風などの装飾を追加できます。
装飾の色や線の太さも変更でき、装飾自体にアニメーションを設定することも可能です。
「見出しが登場してから下線が描かれ、最後に本文が現れる」といった順番のある演出も作成できます。
使い方は簡単！5つのステップ
操作画面は、左側にアニメーションの見本、中央にライブプレビュー、右側に編集パネルを配置しています。
作成からコードの書き出しまで、基本的には次の5ステップで進めます。
STEP 1：好きな動きを選ぶ
左側の「動きの見本」から、使いたいアニメーションをクリックします。
カテゴリーや検索機能を使って、目的に合うものを探してください。
STEP 2：見出しと本文を入力する
右側の編集パネルで、表示したい文字に変更します。
見出しと本文は別々に編集でき、それぞれ異なる動きを設定できます。
見出しだけ、本文だけを表示したい場合は、不要な入力欄を空欄にしてください。
STEP 3：文字のデザインと動きを調整する
文字サイズ、書体、色、装飾などを設定します。
アニメーションの速度や開始時間、スライドする距離も変更できます。
再生回数は初期設定で1回ですが、繰り返し再生に切り替えることも可能です。
STEP 4：ライブプレビューで確認する
中央のプレビューでは、設定を変更するとアニメーションが再生されます。
「もう一度再生」ボタンを押せば、何度でも動きを確認できます。
PCとスマホの表示切り替えにも対応しているため、画面幅による見え方の違いも確認できます。
STEP 5：HTML・CSSを書き出す
デザインが完成したら、「HTML＋CSSを一括コピー」をクリックします。
コピーしたコードを設置先のHTML入力欄などに貼り付ければ、作成した文字パーツを利用できます。
HTMLとCSSを別々に管理したい場合は、個別のタブからそれぞれのコードをコピーしてください。
「HTMLファイル保存」を使えば、単体で表示できるHTMLファイルとして保存することもできます。
WordPressや一般的なHTMLサイトで使える
作成したコードはWordPress専用ではありません。HTMLとCSSを組み込めるWebサイトで利用できます。
WordPressの場合
投稿や固定ページにある「カスタムHTML」ブロックに、一括コピーしたコードを貼り付けます。
コードエディターでの編集に慣れていない方でも、作成したパーツを比較的簡単に設置できます。
ただし、使用中のテーマやプラグイン、サイトのCSSによって表示が異なる場合があります。公開前に動作を確認してください。
一般的なHTMLサイトの場合
出力したHTMLとCSSを、サイトのソースコードに組み込みます。
一括コードを使用するほか、HTMLとCSSを個別に管理する方法も選べます。
Webサイト制作時の装飾パーツや、ランディングページのキャッチコピーなどに活用できます。
こんな場面におすすめ
TEXT ANIMATION BUILDERは、Webサイトのさまざまな場面で利用できます。
- 企業サイト： メインビジュアルのキャッチコピーや企業メッセージに。
- ランディングページ： 商品やサービスの特徴を伝える見出しに。
- 採用サイト： 採用メッセージや社員紹介のタイトルに。
- キャンペーンページ： キャンペーン名や告知コピーの演出に。
- 個人サイト・ブログ： 記事内の見出しや目立たせたいメッセージに。
動きの大きさや速度を調整できるため、落ち着いた表現から印象的な演出まで、サイトの目的に合わせて使い分けられます。
利用するときの注意点
文字アニメーションは、使いすぎるとページが読みにくくなる場合があります。
見出しやキャッチコピーなど、特に伝えたい部分に絞って使用するのがおすすめです。
また、本ツールは設置先とのCSSの競合を抑えるため、出力するコードに固有クラスを使用しています。ただし、すべての環境で同じ表示や動作を保証するものではありません。
公開前にはバックアップを取り、PC・スマートフォンの両方で表示を確認してください。
なお、OSで動きを減らす設定が有効になっている場合は、アニメーションを停止する仕様です。
まとめ｜動く文字を、見ながら簡単に作成しよう
TEXT ANIMATION BUILDERは、文字アニメーションをプレビューしながら作成し、HTML・CSSとして書き出せる無料ツールです。
42種類のアニメーションから好きな動きを選び、文字や色、装飾を変更するだけで、オリジナルの動く文字パーツを作成できます。
WordPressや一般的なHTMLサイトの見出し、キャッチコピー、メッセージなどに、ぜひ活用してみてください。
動く文字を、見ながらつくる。
TEXT ANIMATION BUILDERで、Webサイトの文字表現を広げてみましょう。
