Emailifyプラグインで使えるコンポーネントを見るには、プラグインのヘッダーバーの下にあるカテゴリのタブをクリックします。各タブをクリックすると、そのカテゴリに含まれるコンポーネントが表示され、上下にスクロールして、選択したタブ内のサブカテゴリを見ながら探せます。
プリセットから追加したRowの順序を変更するには、(Auto Layoutが有効になっている)Emailifyのコンテナフレーム内で、そのRowを上下にドラッグして位置を変えます。
外部コンポーネントライブラリを閲覧する
動画チュートリアル:Figmaのデザインで500以上の無料HTMLメールコンポーネントを使う
この動画では、EmailifyのFigmaプラグインを使って、Figmaのデザインで500以上の無料HTMLメールコンポーネントを使う方法を解説します。
Emailifyプラグインに組み込まれているコンポーネントに加えて、EmailifyのWebアプリから外部コンポーネントライブラリのコンポーネントを閲覧して使うこともできます。これにより、Figmaのデザインに直接コピーできる、より幅広い既成のメールコンポーネントを利用できます。
外部ライブラリのコンポーネントを使うには:
- EmailifyのWebアプリにアクセスして、利用できるメールコンポーネントのカタログ全体を閲覧します
- カテゴリやテンプレートでの使用状況でコンポーネントを絞り込むか、特定の要素を検索します
- 任意のコンポーネントのCopy Figma Componentボタンをクリックして、そのHTMLスニペットをクリップボードにコピーします
- Figmaで、コンポーネントを貼り付けたいEmailifyフレームを選択します
- Cmd+V(Mac)またはCtrl+V(Windows)で、コンポーネントをEmailifyフレームに直接貼り付けます
貼り付けたコンポーネントは自動的にメールデザインに組み込まれ、ほかのEmailifyコンポーネントと同じようにカスタマイズできます。
外部コンポーネントは、EmailifyのAuto Layoutの構造を使っています。順序を変えるには、Emailifyのコンテナフレーム内でコンポーネントを上下にドラッグします。
スターターコンポーネントのカテゴリ
Emailifyでは、メールデザインに必要なものを探しやすいように、コンポーネントをいくつかのカテゴリ(とサブカテゴリ)に分けています。
Headers
主にメールの上部で使われます。ブランドロゴ、「ブラウザで表示」リンク、ナビゲーションメニュー、ソーシャルアイコンなどのコンポーネントがあります。
Images
画像コンテンツを表示するためのコンポーネントです。幅いっぱいの画像、(上にテキストを重ねるための)背景画像、ロゴグリッド、画像カード、グリッド、キャプションなどのコンポーネントがあります。
Content
段落、引用、お客様の声、著者のアバター、記事カード、機能アイコン、統計、プロモーションコード、商品カードなど、テキストベースのコンポーネントが含まれます。
Ecomm(Eコマース)
商品や購入完了後のメールに関連する要素を表示するのによく使われるコンポーネントのほか、Klaviyoで動的な商品グリッドを表示するためのKlaviyo専用のコンポーネントも含まれます。
CTAs(Call To Action)
主に、ユーザーに何かをクリックしたり行動を起こしたりしてもらうためのコンポーネントです。ボタン、リンク、背景画像付きのヒーロー、動画のサムネイル、機能タイル、アプリストアのボタン、ソーシャルメディアのアイコン、商品のヒーローなどのコンポーネントがあります。
Footer
主にメールの下部で使われます。ブランドロゴや住所の詳細、ソーシャルメディアのリンク、配信停止リンク、アプリのダウンロードボタンを表示するためのコンポーネントがあります。
ほかのカテゴリで追加したコンポーネントは、あとで簡単にアクセスできるように、自動的にFavouritesカテゴリに「ブックマーク」されます。Trashアイコンをクリックすると、お気に入りからコンポーネントを削除することもできます。この操作ではお気に入りの一覧からコンポーネントが削除されるだけで、ほかのカテゴリからは「削除」されません。