アコーディオンブロック
長いメールを読みやすく保つための展開可能なセクションです — FAQ、注文詳細、利用規約など — 必要かどうかに関わらず、すべての受信者にすべてを読ませることはありません。
仕組み
メールとホスティングされたライブビューは、1つの共有マークアップツリーではなく、意図的に2つの異なる実装を使っています。ライブビュー(本物のブラウザ)では、各項目はネイティブの<details>/<summary>要素です。これはCSSの小技よりもアクセシブルです: キーボードで操作でき、ネイティブの開閉マーカーを備え、そのままスクリーンリーダーでも機能します — メールのレンダラーとコードを共有するためだけに、これを諦める理由はありません。
メールHTMLでは、<details>への対応はメールクライアント間で一貫していないため、各項目は代わりにカルーセルやスクラッチブロックと同じ、隠しチェックボックスとラベルを使った:checkedテクニックを使います。これは隠しチェックボックスと、クリック可能なタイトルとしてスタイルされた<label>、そしてチェックボックスがチェックされるまでdisplay:noneになっているコンテンツ用の<div>です。チェックされた瞬間、#item-id:checked ~ .acc-content{display:block}というルールがそれを表示します。各項目は独立して切り替わります — 「一度に1つだけ開く」という動作はありません。
そのCSSテクニックが有効にならない環境(Outlookのワードエンジンや、<style>ブロックを除去するクライアント)では、フォールバックは別の場所へのリンクではなく、最も安全な既定値です: すべての項目がすでに展開された状態でレンダリングされます。クライアントが実行できないジェスチャーの裏に何かが隠されることは一切ないため、簡素化されたクライアントの受信者も、開閉の操作性こそないものの、FAQや注文詳細の全文を最初から目にできます。これはスクラッチブロックが景品の表示に使っているのと同じ「安全な既定値」パターンを反映しています。
設定可能なフィールド:
- 背景色、パディング、ボーダー(幅/スタイル/色)、ボーダーの角丸 — アコーディオンの外側のカードに適用され、すべての項目で共有されます。
各アコーディオン項目(独立して追加・並べ替えできる子ノード)は次を持ちます:
- タイトル — 常に表示されるヘッダーテキストで、タップすると展開/折りたたみされます。
- 本文 — その下に表示される本文テキストで、改行はそのまま保持されてレンダリングされます。
- 項目ごとに独立したタイトルの色/タイトルのフォントサイズと本文の色/本文のフォントサイズ — 注意事項や強調したいFAQ項目を他と差別化できます。
アコーディオンはテキストや画像ブロックと同様の純粋なコンテンツです — 項目を展開してもインタラクションイベントにはなりません。受信者がどの項目を開いたかは何も記録されず、このブロックは回答ダッシュボード、CSVエクスポート、プロジェクトのWebhookのいずれにも表示されません。
例
Subject
Your order questions, answered
商品ローンチやオンボーディングメールの下部にあるFAQセクションは、メイン本文を短く保ちながら、誰もが聞く5つの質問に答えられます。詳細を必要としない受信者はそれが展開された状態を見ることは一切なく、詳細を必要とする受信者でも、クライアントがそもそも折りたたみに対応していなければ、完全に展開されたフォールバックを受け取れます。注文確認メールでは、配送詳細・返品ポリシー・項目別の価格を、長い文章の壁ではなく3つの折りたたみセクションにまとめられます。ニュースレターの振り返りでは、記事1件につき項目を1つ使い、見出しをタイトルに、2文の要約を本文にすることで、受信者は見出しをスキャンし、興味があるものだけを展開できます。
静的フォールバックの見え方
<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
<label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
Do you offer refunds?
</label>
<div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
Yes — within 30 days of purchase, no questions asked.
</div>
</div>
ここでは隠しチェックボックスとその:checkedスタイルルールは省略されています — それらはキネティック専用ティアに包まれているため、それらをスキップするクライアントでは.acc-contentを隠すルールが存在せず、図のとおり既定で展開された状態でレンダリングされます。