スタジオ概要

スタジオはMailInAppのビジュアルメールビルダーです。ダッシュボード上のすべてのプロジェクトは、ここで開きます。

用途から始める

新しいプロジェクトはプロジェクト作成時に選ぶ用途——アンケート、プロモーション、ニュースレター、イベント、トランザクション、ダッシュボード、クラスルーム、スポーツチーム——から始めることができます。いずれかを選ぶと、そのトピックの実際のスタータテンプレートのカルーセルが開き、それぞれモックアップではなく実際にレンダリングされた大きなプレビューになっています。順に見ていって1つを選ぶと、通常のブロックで構成されたスタートレイアウトがキャンバスに読み込まれます(アンケート用の評価ブロック、プロモーション用のヒーローとクーポンなど)。読み込まれた後は特別な扱いはなく、他のブロックと同じように編集・削除・追加ができます。空白から始めるを選ぶとこれをスキップし、通常の初期状態のキャンバスが開きます。

選択画面についてはクイックスタートを、用途が回答ダッシュボードにどう影響するかについては回答とWebhookを、自分のテンプレートを非公開で保存したりコミュニティギャラリーに公開したりする方法についてはスタータテンプレートと自分のライブラリを参照してください。

ワークスペース

キャンバス — 画面中央にあり、メールをリアルタイムでレンダリングして表示します。要素をクリックすると選択でき、ブレッドクラムバーにはメール本文からその要素までのパスが表示され、各階層(祖先要素)もすべてクリックできます。
左サイドバー — アイコンをクリックして1つずつ開く4つのパネルです。挿入(ブロックライブラリ——セクション、テキスト、画像、ボタン、区切り線、スペーサーなどのレイアウトブロックや、カルーセル、投票、フォーム、カウントダウン、クイズなどのインタラクティブブロックをキャンバスへドラッグします。検索ボックスで名前による絞り込みもできます)、ツリー(メール全体の構造——ブロックの並べ替え、カルーセルの1枚のスライドのような入れ子の要素の選択、コンテナの折りたたみ、目のアイコンで削除せずにブロックを出力から隠す、ダブルクリックで名前を付けて自分用のメモを残すことができます。どのコンテナにも**+**があり、そのコンテナが受け入れる子要素の種類だけを検索できるピッカーが開きます——フォームの場合は挿入パネルの「入力」セクションと同じ入力バリエーションに展開されます——ドラッグせずに追加でき、同じピッカーが空のコンテナのキャンバス上の「ここにドロップ」というプレースホルダーの代わりに表示されます)、データ(データソースとマージタグ——ソースを接続し、オーディエンスを選び、フィールドを参照します)、テーマ(下記のテーマ設定を参照)です。
インスペクター — 選択中の要素のための右側パネルで、4つのタブに分かれています。コンテンツ(テキスト、リンク、投票の選択肢のようなブロック固有のフィールド)、スタイル(色、余白、枠線、カスタムCSS)、ロジック(繰り返しの紐付け、表示条件)、アクション(移動、複製、削除、⧉ 囲む…——ツリーパネルの**+**の逆の操作で、現在の選択項目をその場で新しいセクション、カラム、繰り返し、または適法に格納できるHTML要素の中に入れます。例えば1つだけのボタンに専用の背景を付けたり、1つのブロックを2カラムレイアウトに変えたりできます——そしてコンポーネントとして保存、再利用可能なコンポーネントを参照)です。タブの上にある検索ボックスで、4つのタブすべてのフィールドを一度に絞り込めます。

プレビューモード

キャンバスの上にある編集 / プレビューの切り替えで、表示内容を切り替えられます。

編集 — ブロック構造を選択・編集できます。
プレビューは、選択した受信者の行に対してマージタグ、表示条件、繰り返しを解決して表示し、その下に段階セレクターがあります。ライブビュー(受信者が実際に到達する同じReactページ)、送信版 — モダンと送信版 — Outlookは、受信者の受信トレイが実際に受け取るコンパイル済みの実際のHTMLをレンダリングします——Outlook段階では実際のOutlookクライアントが取る条件付きコメントの分岐を強制的に再現するので、Outlookを持っていなくてもフォールバックを確認できます。ダークモードの切り替えは、メールクライアントのダークモードでライブビュー段階がどのように表示されるかをシミュレートします。

ズームコントロール(50~150%、または幅に合わせる)は、元のデザインを変更せずにキャンバスの表示倍率だけを変えます。

元に戻す・やり直し・自動保存

デザインへのすべての編集——ブロックのドラッグ、フィールドへの入力、色の変更など——はCtrl/Cmd+Zで元に戻せます(やり直しはShift+Ctrl/Cmd+ZまたはCtrl/Cmd+Y)。これはテキストフィールド内からでも同じです。短時間に連続した編集(文章の入力やスライダーのドラッグなど)は、キー入力ごとに1ステップではなく、1つの取り消しステップにまとめられます。

スタジオは常に自動保存を行っています——保存ボタンはなく、タブを閉じても何も失われません。プロジェクトは中断したところからそのまま再開されます。あなたとチームメイトが同じプロジェクトを同時に開いている場合、2回目の保存では最初の変更を黙って上書きする代わりに**「他の場所で変更されました」**というバナーが表示されます。再読み込みして最新版を取得するか、コピーとして保存して自分の変更を新しいプロジェクトとして保持できます。

テーマ設定

テーマパネルでは、プロジェクト全体に適用される少数のトークン(ブランド、アクセント、テキスト、ミューテッド、背景の各色、フォントスタック、ボタンの既定の角丸半径)を設定できます。これにより、ブロックごとに色のフィールドを探し回る代わりに、リブランディングを1回の編集で済ませられます。色のフィールドにはトークン参照を設定でき、通常の色入力の横にスワッチピッカーとして表示されるほか、直接指定した色を設定することもできます。トークン参照があらかじめ設定されているブロック——ボタン、ソーシャルアイコン、フォーム/クイズの送信ボタンなど——はトークンを変更すると自動的にスタイルが更新され、直接色を指定したブロックはその色を保持します。テーマを設定していないプロジェクトはこれまでと同じようにレンダリングされます。このパネルは、コピー&ペーストした16進コードの代わりにブランドカラーを明示的にするだけのものです。

メディアライブラリ

画像を保持することだけを目的とするフィールドがあります: 画像ブロック、動画/音声ブロックのポスター(カバー)画像、カルーセルスライドの画像、フラッシュカードの表/裏の画像、商品ブロックの写真です。これらはURL入力欄の代わりに、インスペクター上でサムネイルと画像を選択…ボタンを表示します。クリックすると、(このプロジェクトだけでなく)アカウントにすでにアップロードされているものすべてのグリッドが開き、その場に5MBまでのPNG、JPEG、WebP、GIFを追加できる新規アップロードボタンもあります。1つ選ぶと、URLを入力した場合と同じように即座にフィールドへ書き込まれます。このピッカーはあくまで作成時の利便性のためのものであり、メール、ライブビュー、キャンバスでのブロックのレンダリング方法には何の影響もありません。

アップロードしたものはアカウント内のすべてのプロジェクトで共有されます。ロゴや商品写真を1回アップロードすれば、このピッカーが表示されるどこでも再利用できます。ライブラリ全体はダッシュボードナビゲーションのメディアからも参照でき、特定のプロジェクトに関係なくアセットのアップロード・表示・削除ができます。アセットを削除してもライブラリからのみ削除されます——すでにそのURLを持っているブロックは、自分で別のものに差し替えるまで、その画像を表示し続けます。

保存容量はプランの上限に対してカウントされ(料金を参照)、設定ではほかの使用量と並んでメーターとして表示されます。画像ではなくリンクを扱うフィールドもいくつかあります——スライドの任意のタップ遷移リンク、動画/音声ブロック自体のファイルsrc、ミーティングリンクの参加URLなどです。これらは通常のURL入力欄のままです。MailInAppが保存するのは画像のみで、動画/音声ファイルや任意のページは保存しません。

再利用可能なコンポーネント

スタイル付きのヘッダー、クーポンセクション、商品行など、また使いたくなるようなものを作りましたか?それを選択し、インスペクターのアクションタブを開いてコンポーネントとして保存してください。(このプロジェクトだけでなく)アカウントに保存され、以降はすべてのプロジェクトで挿入パネルの上部にあるマイコンポーネントに表示されます。ドラッグまたはクリックで、完全に独立した新しいコピーを挿入できます。同じリストから保存済みコンポーネントの名前変更や削除も行えます。これはプリビルドセクションの組み込みコンポジション(インタラクティブブロックを参照)とは異なります——それらはMailInAppに標準搭載されすべてのユーザーが使えるものですが、保存済みコンポーネントは自分自身のデザインから作られた、自分だけのものです。

ライブビュー

ツールバーの**ライブビュー ↗**ボタンをクリックすると、そのメールのホスティングされたWeb版——現在のデザインからレンダリングされた完全にインタラクティブなページ——が開きます。これはあなた自身のプレビューツールであると同時に、受信者のメールクライアントがインタラクティブ性をレンダリングできない場合に受信者が受け取る汎用のフォールバックでもあります。このリンクは署名済みで、30日間有効です。詳しくはライブビューのリンクを参照してください。

AIによる文章作成支援

件名で悩んでいますか?送信ページの件名フィールドの横にある**✨ 提案**をクリックしてください。MailInAppは、プロジェクトの名前、その用途、メールの既存の文章の短い抜粋をもとに、いくつかの候補を作成します。

提案はクリックして入力するだけのもので、プロジェクトに自動的に書き込まれることは一切ありません。提案のリクエストはアカウントの月間の上限にカウントされ(料金を参照)、すべてのプロジェクトとそれを編集する全員で共有されます。1つのフィールドだけでなくメール全体を作成・編集したい場合は、AIコパイロットを参照してください。

サイズの予算

Gmailは約102KBを超えるメッセージを切り詰めます——切り詰められたメールは<style>ブロックを失い、これによってすべてのCSSインタラクティブ性が黙って無効になります。スタジオは作成中、メールのコンパイル後のサイズをこの予算に対して常に追跡し、問題になる前に警告します。詳しくはエクスポートと送信を参照してください。