ホバースタイルはすべての環境で対応しているわけではありません。 現時点では、メールクライアントにおけるホバースタイルへの対応はまだ比較的少ないため、この点に注意し、ホバースタイルを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。メールクライアントがホバースタイルに対応していない場合、ユーザーがボタンにカーソルを合わせても、ボタンのホバー状態は通常の状態と同じ見た目にフォールバックするだけです。

動画チュートリアル：FigmaからエクスポートするHTMLメールのボタンにホバー効果を追加する

この動画では、EmailifyのFigmaプラグインを使って、FigmaからエクスポートするHTMLメールのボタンにホバー効果を追加する方法を解説します。

Emailifyの「🔗 Button」レイヤーには、ホバー状態を適用できます。Settingsパネルを開いた状態でレイヤーを選択し、Button Hover Stateエリアで、ホバー時に選択したボタンレイヤーへ適用したい16進数のカラー値を入力するか、アニメーションのトランジションのオプションを選択します（両方も可）。

次のプロパティの一部またはすべてを設定できます。

• Background Color
• Text Color
• Transition

プラグインのHTMLプレビュー機能を使って、ホバー状態をプレビューできます。

テキストリンクとナビゲーションリンクにホバー状態を追加する

動画チュートリアル：FigmaからエクスポートするHTMLメールのテキストリンクにホバー時の色を追加する

この動画では、EmailifyのFigmaプラグインを使って、FigmaからエクスポートするHTMLメールのテキストリンクにホバー時の色を追加する方法を解説します。

Emailifyの「✍️ Text」や「🍔 Navigation」レイヤーには、ホバー状態を適用できます。Settingsパネルを開いた状態でレイヤーを選択し、Links Hover Stateエリアで、ホバー時に選択したレイヤー内のテキストリンクへ適用したい16進数のカラー値を入力します。

必要に応じてFade Transitionトグルを有効にすることもできます。有効にすると、ホバー時のリンクのテキスト色の変化に、ゆるやかな色のトランジションが加わります。

プラグインのHTMLプレビュー機能を使って、ホバー状態をプレビューできます。

ホバースタイルはすべての環境で対応しているわけではありません。 現時点では、メールクライアントにおけるホバースタイルへの対応はまだ比較的少ないため、この点に注意し、ホバースタイルを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。メールクライアントがホバースタイルに対応していない場合、ユーザーがボタンにカーソルを合わせても、ボタンのホバー状態は通常の状態と同じ見た目にフォールバックするだけです。