テーマ、スマートフォン、ダークモード
メールの見た目はテーマから決まるので、1か所を変えるだけでテーマを使うすべてのブロックのスタイルが変わります。このページでは、テーマ、ブランドキットとフォント、スマートフォンでのメールの変化、ダークモードを説明します。
テーマ
左のレールからテーマパネルを開きます。セクションは次のとおりです。
- カラー: ブランド、アクセント(ブランド色の上のテキスト)、テキスト、控えめなテキスト、背景、カード背景。ブロックの色フィールドは独自の色の代わりにこれらを参照でき、その場合はテーマに合わせて変わります。
- タイポグラフィ: メールのフォントと、見出し1〜4、本文、小それぞれのサイズ、太さ、行の高さ、文字間隔、スマートフォンでのサイズ。見出しはこのサイズを使い、独自のサイズを設定していないテキストブロックも同様です。
- ボタン: プライマリ、セカンダリ、アウトラインの3つのスタイル。それぞれに背景、テキスト、枠線、角、内側の余白があります。ボタンはスタイルを選んだうえで独自の色も設定できます。
- リンク: リンクの色と下線の有無。
- レイアウト: ページの背景、メールの幅(デスクトップでは560〜720 px。スマートフォンでは常に画面に収まります)、カードの内側の余白と角、ブロック間の間隔、テキストの方向。
- ダークモード: 下記を参照してください。
テーマのないメールはこれまでどおりに表示されます。すべての既定値が従来の見た目です。
ブランドキット
設定 › ブランドキットでブランドキットを一度設定します。ロゴ(ライトとダーク)、色、フォント、ボタンのスタイル、SNSリンク、フッターの情報(多くの国でマーケティングメールに必要な郵便住所を含む)です。Webサイトから取り込むを使うと、ホームページからロゴ、色、フォント、SNSリンクを読み取り、残すものを選べます。
新しいメールはキットから始まります。テーマパネルのブランドキットを適用で既存のメールにキットをコピーでき(元に戻すと以前の状態に戻ります)、ヘッダーとフッターのセクションはキットのロゴ、リンク、住所を読み込みます。Mia AIはキットの見た目とブランドボイスで文章を書きます。
フォント
どのフォント選択画面にも、Web セーフフォント、厳選したGoogle Fonts、あなたのフォント(アカウントでアップロードしたWOFF2ファイル。最大20フォント、1ファイル2 MBまで)が並びます。すべてのWebフォントには代わりに使うWebセーフフォントがあり、選択画面にはWebフォントを表示するメールアプリと代替フォントを表示するアプリが示されます。全一覧はメールクライアントのサポート状況を参照してください。
スマートフォンでの設定
メールはスマートフォンの画面に自動で合わせます。カラムは縦に並び、画像は収まり、タイポグラフィのスマートフォン用サイズが適用されます。さらに、インスペクタのモバイルセクションで、ブロックごとにスマートフォン向けの調整ができます。
- 表示する画面: すべての画面、スマートフォンのみ、デスクトップのみ。
- スマートフォンでの余白、スマートフォンでの文字サイズ(テキスト、見出し、リスト、ボタン)、スマートフォンでの配置。デスクトップと同じのままにすると、ブロックはデスクトップの値を使います。
- カラムは、スマートフォンで縦に並べるか、逆順で縦に並べるか、カラムごとにスマートフォンでの幅を決めて横並びのままにするかを選べます。
スマートフォンでの設定は、幅620 px以下の画面に適用されます。クラシックOutlookなどのデスクトップアプリはデスクトップのレイアウトのままです。キャンバスをモバイルに切り替えると確認でき、その間はインスペクタでの余白、文字サイズ、配置の変更がスマートフォンだけに適用されます。
ダークモード
テーマパネルのダークモードには3つの設定があります。
- 自動: ダークモードのアプリが、中間色のテキストと白い背景を標準的な暗い色に変えます。ブランドカラーはデザインどおりのままです。
- カスタム: 同じ色の変換を、自分のダーク用パレット(テキスト、控えめなテキスト、カード背景、ページ背景、リンク)で行います。パレットはライト用の色から作られ、編集できます。各ブロックではダークモードのテキストとダークモードの背景も設定でき、画像はダークモード用のバージョンに切り替えられます。
- オフ: ダークモード用のスタイルは送信されません。Apple MailとOutlookはデザインどおりにメールを表示しますが、Gmailアプリは反転させることがあります。
独自のダーク用の色を適用するのは一部のアプリだけで、ほかのアプリは自分でメールの色を変えます。メールアプリのプレビューでは、各アプリのダークモードを計測結果のとおりに確認できます。
表示する場所: インタラクティブかフォールバックか
すべてのブロックには表示する場所の設定があります。すべてのアプリ、インタラクティブメールが動く場所のみ、フォールバック表示の場所のみです。「Webで投票する」のように、ブロックがフォールバックになる場所でだけ意味のある文にはフォールバック専用のテキストブロックを、「カードをタップして裏返す」のような案内にはインタラクティブ専用のブロックを使います。キャンバスでは、プレビュー中のバージョンで非表示になるブロックに枠線が付きます。