Stripoメールエディターの外観設定

Published: 2024年10月22日 · Last updated: 2026年7月21日 · By Marcus Biel

外観タブでは、フォント、背景色、ボタンのスタイル、モバイル専用の書式設定など、メールの全体的なスタイルを管理できます。これにより、さまざまなデバイスやメールクライアントで一貫性と適応性を確保できます。

以下では、外観タブ内の各セクションについて詳しく説明します。

---

1. 一般設定

メール全体の外観と配置をカスタマイズします。これらの設定は、すべてのセクションにグローバルに適用されます。

• メッセージの配置: メールのコンテンツを左揃え、中央揃え、または右揃えにします。
• デフォルトのパディング: 新しい構造の周囲に均一な間隔を設定するか、上、右、下、左の各辺のパディングを個別に調整します。
• 全体の背景色: 16進数コードまたはカラーピッカーを使用して、メールの背景色を設定します。
• フォント: ArialやHelveticaなどの標準フォント、またはRobotoやLatoなどの装飾フォントから選択します。
• 行間: 4つのプリセットオプションから行間を調整します。
• 段落下部の間隔: 段落間の間隔を有効または無効にします。
• リンクの下線: メール内のすべてのリンクに自動的に下線を付けます（オン／オフを切り替え可能）。
• レスポンシブデザイン: さまざまな画面サイズ、特にモバイルデバイスに合わせてメールを調整できるようにします。
• RTLテキスト方向: アラビア語やヘブライ語などの言語で使用します。
• 背景画像: リンク設定も可能な背景画像を追加します。画像をドラッグ＆ドロップしてアップロードできます。

---

2. ストライプ

ストライプは、メールの大きな構造セクション（ヘッダー、コンテンツ、フッター、情報エリアなど）を表します。各ストライプは個別にスタイル設定できます。

ヘッダーストライプ

• テキストサイズ: ヘッダーテキストのサイズをカスタマイズします（8～72）。
• 背景色: 単色の背景色を設定するか、透明のままにします。
• コンテンツの背景色: ヘッダーセクション内の背景色を調整します。
• フォントカラー: テキストの色を設定します。
• リンクカラー: ナビゲーションなど、ヘッダー内のリンクの色を設定します。
• 背景画像: 任意で背景画像を追加します。

コンテンツストライプ

テキスト、画像、インタラクティブ要素に使用するメールの主要本文です。

• テキストサイズ: コンテンツのテキストサイズを調整します（8～72）。
• コンテンツの背景色: メインコンテンツエリアの背景色を設定します。
• フォントカラー: テキストのデフォルトカラーを設定します。
• リンクカラー: リンクの色をカスタマイズします。

フッターストライプ

通常、連絡先情報、法的情報、ソーシャルリンクに使用します。

• テキストサイズ: テキストサイズを設定します（8～72）。
• 背景色: 単色の背景を選択するか、透明のままにします。
• コンテンツの背景色: フッター内部の背景を設定します。
• フォントカラー: フォントの色を設定します。
• リンクカラー: フッター内のリンクの色をカスタマイズします。
• 背景画像: クリック可能なリンク付きの画像を任意で追加します。

情報エリアストライプ

免責事項、法的通知、追加情報に使用します。

• テキストサイズ: フォントサイズを設定します（8～72）。
• フォントカラー: フォントの色を設定します。
• リンクカラー: このストライプ内のリンクの色を調整します。

---

3. 見出し

メール内の階層構造と構成を整えるため、見出し（H1、H2、H3）の視覚的なスタイルを設定します。

• フォント: 見出しに使用するフォントを選択します。
• 行間: 読みやすさを考慮して行間を調整します。
• 見出しサイズ: H1、H2、H3見出しのサイズをカスタマイズします（8～72）。
• テキストスタイル: 太字または斜体を適用します。
• フォントカラー: 各見出しタイプに固有の色を設定します。

---

4. ボタン

メール内のボタンをデザインして、エンゲージメントを高めます。

• Outlookのサポート: VMLコードを使用してMicrosoft Outlookで適切に表示されるようにします（メールサイズが大きくなる場合があります）。
• ボタンカラー: ボタンのデフォルトカラーを設定します。
• ホバー時のボタンを強調表示: ホバー時の色効果を有効にします。
  • ホバーカラー: ホバー時の色を選択します。
• フォントカラー: ボタンテキストの色を設定します。
• テキストスタイル:
  • フォント: ボタンテキストのフォントを選択します。
  • フォントサイズ: テキストサイズを調整します（8～72）。
  • スタイル: 太字または斜体を適用します。
• 境界線の角丸: ボタンの角を丸くします（0～100）。
• 境界線:
  • 種類: 実線、破線、または点線の境界線を選択します。
  • 色: 境界線の色を設定します。
• パディング: ボタン内部のパディングを調整します（上、右、下、左）。

---

5. モバイル用書式設定

モバイル専用の設定を使用して、メールがモバイルデバイスで美しく表示されるようにします。

• ヘッダー、コンテンツ、フッター、情報エリアのテキストサイズ: モバイルで各セクションのテキストサイズをカスタマイズします。
• メニュー項目のフォントサイズ: ナビゲーションメニュー項目のフォントサイズを調整します。
• 見出しサイズ: モバイル表示でのH1、H2、H3のサイズを設定します。
• 見出しの配置: 見出しを左揃え、中央揃え、または右揃えにします。
• ボタンのテキストサイズ: モバイル用のボタンテキストサイズをカスタマイズします。
• 全幅ボタン: ボタンが画面幅全体に広がるようにします。
• 上部と下部のパディング: モバイルで見やすくなるようにパディングを調整します。
• コンテンツのマージン: モバイルでコンテンツ周囲のマージンを調整します（0～100）。

---

最後に

• テスト: 一貫性を確保するため、必ず複数のデバイスやメールクライアントでメールをテストしてください。
• アクセシビリティ: すべての人が利用できるよう、アクセシブルなフォント、適切な見出し構造、画像の代替テキストを使用してください。
• 最適化: 読み込みを高速化し、パフォーマンスを向上させるため、特にモバイルユーザーにとって重要なファイルサイズを最小限に抑えてください。