アニメーション見出しブロックを使用すると、SeedProdページに魅力的なアニメーション見出しを表示できます。このブロックは、変化したり、強調表示されたり、回転したりする目を引くテキストを作成するのに役立ち、訪問者の注意を引き、重要なメッセージを強調します。
アニメーション付き見出しは、ヒーローセクションやランディングページ、プロモーションバナーなど、複数の価値提案やキーメッセージを動的で魅力的な方法でアピールしたい場面に最適です。多彩なアニメーションスタイルと視覚効果を活用すれば、訪問者の目を引き、関心を維持する見出しを作成できます。
アニメーション見出しブロックをページに追加する
SeedProdページにアニメーション見出しブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン＞ブロックで、アニメーション見出しブロックをページの目的のセクションにドラッグ＆ドロップします。
アニメーション見出しブロックはブロックパネルに表示され、ページの任意のセクションにドラッグできます。
ステップ2: コンテンツ設定の構成
追加後、アニメーション見出しブロックをクリックして設定を開きます。コンテンツタブでは、アニメーションスタイル、テキスト内容、タイミングをカスタマイズできます。
見出し：
- スタイル：2種類のアニメーションスタイルから選択可能 – ハイライト（視覚的な形状や下線でテキストを強調）またはローテーション（複数のテキストバリエーションを循環表示）
- 形状：ハイライトスタイル使用時、テキスト周囲に表示される形状を選択します。オプションには円形、波線、下線、二重線、二重下線、ジグザグ下線、斜線、取り消し線、X線があります。それぞれが独自の視覚的強調効果を生み出します
- 見出しテキスト前:アニメーション部分の前に表示される固定テキストを入力してください。このテキストは常に表示され、アニメーション部分の設定を行います（例: 「私たちは」）
- 見出しの後：アニメーションまたはハイライト表示するテキストを入力してください。回転スタイルの場合、コンマで区切った複数の単語やフレーズを追加でき、それらが順番に表示されます（例：「専門家、プロフェッショナル、イノベーター」）。
- 無限ループ：連続アニメーションの有効/無効を切り替えます。有効時はアニメーションが無限に繰り返され、無効時は一度だけ再生されて停止します。
- 表示時間（ms）：各単語またはアニメーション効果の表示時間をミリ秒単位で設定します。値が大きいほどアニメーションが遅くなり、小さいほど速くなります（例：2000ms = 2秒）。
- 遅延（ms）：アニメーションサイクル間の休止時間をミリ秒単位で制御します。これによりテキスト変更の間に余裕が生まれます
- 揃え:見出し全体の水平方向の配置を設定します（左揃え、中央揃え、右揃え）
- フォントサイズ：見出しテキストのサイズを調整し、目立ちやすく読みやすいようにしてください
- レベル：アニメーション見出しに使用するHTML見出しタグを選択してください（h1、h2、h3、またはh4）。これはページのSEOと視覚的階層の両方に影響します。
コンテンツタブでは、アニメーションスタイルの選択、テキストのカスタマイズ、アニメーションのタイミングと動作の制御を行うオプションが提供されます。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、アニメーション見出しブロックの外観をカスタマイズできます：
スタイル:
- タイポグラフィ：見出しのフォントファミリー、太さ、スタイル、その他のテキストプロパティを制御します
- ストロークの色：テキストの周囲または背後に表示されるアニメーション形状やハイライトの色を設定します（ハイライトスタイル使用時）
- 色：見出しのテキスト色を選択し、十分なコントラストと可読性を確保してください
- テキストシャドウ：見出しテキストに影効果を追加し、奥行きと強調を加えます。「なし」「ヘアライン」「小」「中」「大」「特大」「2倍特大」「カスタム」から選択可能
スペース:
- 余白：見出しブロックの周囲のスペース（上、右、下、左）を制御します。これにより、見出しと周囲の要素の間に表示されるスペースが決まります。
- パディング：見出しブロック内の内側の間隔（上、右、下、左）を調整します。これにより、テキストとブロックの端の間に余白が生まれます。
属性：
- CSS ID:ヘッドラインブロック用に自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス:テーマまたはカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します
- カスタム属性:見出しラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-animation|headline)
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でヘッダーブロックを非表示にする
- タブレットで非表示:タブレット端末では見出しブロックを非表示にする
- モバイルで非表示:モバイル端末では見出しブロックを非表示にする
アニメーション効果：
- エントランスアニメーション：見出しがスクロールして表示される際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。これにより、ブロックのエントランスアニメーションが最初に再生され、続いて見出し自体のテキストアニメーションが再生される、重ね合わせのアニメーション効果が実現されます。
[詳細設定]タブでは、タイポグラフィ、色、テキストシャドウ、間隔、登場アニメーションなどのスタイル設定オプションを提供します。
ステップ4: 変更を保存する
アニメーション見出しブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
アニメーション見出しブロックをページに追加できました！この動的なブロックは、複数のメッセージをアピールしたり、魅力的なアニメーションで重要なポイントを強調したりする、注目を集める見出しの作成に役立ちます。さまざまなアニメーションスタイル、形状、タイミングを試して、視聴者を惹きつけ、メッセージを効果的に伝える見出しを作成しましょう。