【解説】テキストフローアニメーションの使い方｜Aurora Design Blocks

動きのある文字で、読者の目を惹きたい！そんなときに活躍するのが、Aurora Design Blocksの「text flow animation」ブロックです。
この記事では、スクロールで流れるテキストを表示する方法を、画像付きで解説します。

テキストフローアニメーションとは？

テキストが画面の横にスクロールして流れるブロックです。

視線を集めたり、印象的なフレーズを見せたりするのに効果的で、キャンペーンや目立たせたい見出し、ブランディング要素としても◎。

手順①：ブロックの追加

まず、「＋」ボタンからブロックを選択し、
[aurora-design-blocks]text flow animation をクリックします。

手順②：スクロールさせるテキストを入力

表示されたエリアに、スクロール表示したいテキストを入力します。
たとえば：

Hello everyone, how are you?

手順③：スクロール幅の設定

ブロック上部の「配置」から、テキストのスクロール幅を選べます：

• なし：メインコンテンツと同じ幅
• 幅広：幅広（1200px）
• 全幅：ブラウザ横いっぱいに流れる（オススメ）

手順④：文字の色・フォント・サイズを変更する

右側のブロック設定から、以下がカスタマイズ可能です：

• 文字色：HEXカラー指定可能（例：#FF0000で赤）
• フォントサイズ：スライダーで調整（例：49）
• フォントファミリー：Arial Black / Impact などを選択可能

実際の表示イメージ

設定が完了すると、入力したテキストが横方向にアニメーション表示されます。

こんな時におすすめ！

• キャンペーンや期間限定のお知らせを目立たせたいとき
• ブログの冒頭にキャッチコピーを流したいとき
• 「じっとしてない動き」で読者の目を引きたいとき

おわりに

デザインにちょっとした“動き”を取り入れるだけで、サイト全体の印象はグッと洗練されます。
Aurora Design Blocksのテキストフローアニメーションブロックで、魅せるブログ演出を楽しんでみてください！