モバイルメールのデザインは、読む順序が基本です。拡大しなくても、お客様がオファーと重要な条件、次に取る行動を理解できるようにします。デスクトップでは余裕のあるShopifyの商品一覧も、スマートフォンでは小さな画像の列になりかねません。まず狭い画面向けに作り、文章が長くなった場合、画像が表示されない場合、列が縦に並んだ場合も確認しましょう。
読み進める順序を明確にする
メッセージの中心部分には、シンプルな一列の構成を使います。画像が表示されなくても意味が通る順番で、伝えたいこと、補足説明、主な行動を配置してください。追加の商品ブロックは主な行動を後押しし、競合しないようにします。
重要な文章は画像ではなく、選択やコピーができる通常のテキストで表示します。オファーや条件を読むために、販促画像を拡大しなくてはならない状態は避けましょう。メールで表示しやすいフォントを選び、本文は読みやすいサイズにします。16ピクセル前後は出発点として使えますが、実際の表示を確認してください。翻訳文が長くなったら、文字を小さくするのではなく縦のスペースを増やします。
最初の画面で伝えることを一つに絞る
デスクトップ用の一覧を組む前に、幅の狭い画面での見え方を考えます。新商品の案内なら、商品名、用途を説明する一文、補足画像、価格に関する情報、ボタンという順番が考えられます。最初に見える範囲だけでもオファーを理解できるようにしましょう。大きな装飾用バナーのせいで、役立つ情報が何画面も下へ押し出されてはいけません。
本文はまず16ピクセル程度と十分な行間で組み、送信したメールで確認します。これは設計の出発点であり、ラベルや見出しまですべて同じサイズにするという意味ではありません。本文と見出しの違いをわかりやすくし、主な行動の周囲には適度な余白を保ちます。窮屈なレイアウトを解消するためにテンプレート全体を縮小するのは、たいてい適切な方法ではありません。
商品カードを2つ並べる場合は、画像、商品名、価格、リンクを一つのカード内にまとめます。スマートフォンで縦並びになっても、各商品の情報がひとまとまりで見えるようにします。画像だけを先に並べ、その後に説明をまとめる構成では、どの情報がどの商品に属するのか、読者が組み立て直さなくてはなりません。
コンテンツに合わせて各要素を伸縮させる
デスクトップの見た目を整えるためだけに、テキスト領域の高さを固定したり、手動の改行を入れたりするのは避けます。ボタンの余白には長いラベルが収まるゆとりを持たせ、タップできる範囲を十分に広くします。近接するリンクは間隔を空け、指で誤ったリンクを選びにくくしてください。
情報を伝える画像には内容を説明する代替テキストを付け、装飾用画像で余計な読み上げが起きないようにします。ダークモードによる変化も含め、実際の背景色とのコントラストを確認してください。モニターでは上品に見える薄い色のラベルも、屋外のスマートフォンでは読みづらい場合があります。
問題が見つかるプレビュー環境を揃える
有用な確認項目には、幅の狭いスマートフォン、大きめの画面、画像が表示されない状態、対応している場合はダークモード、実際に近い顧客データが含まれます。翻訳では最も短い言語だけでなく、最も長くなるバージョンも確認しましょう。メール全体を見てから、特に問題が出やすい商品名、価格表記、ボタン、フッターリンクを個別に点検します。
- ボタンのラベルが折り返された場合は、高さを伸ばし、余白を確認します。行動を示す言葉を切り捨てないでください。
- 商品名が次のブロックに接触する場合は、高さの固定を外し、折り返すスペースを確保します。
- 画像がなくなると重要な情報が失われる場合は、その情報を通常のテキストへ移し、画像は補助として使います。
- 近くにあるリンクを個別にタップしにくい場合は、間隔を広げるか、競合する行動の数を減らします。
表示が崩れるケースも意図的に試す
Sendvioで実際の顧客データを使ってプレビューし、幅の狭い画面で確認します。長い名前、パーソナライズ情報の欠落、長い価格表記、極端に長い商品名を試してください。そのうえで、顧客がよく使うメールアプリにテストを送ります。
2商品を紹介するキャンペーンでは、縦に並んだときの順番を確認します。商品画像、名前、価格、行動ボタンがひとまとまりで表示される必要があります。分かれてしまうなら、ブロックを簡素化しましょう。デスクトップの配置を何としても再現することが目的ではありません。拡大や推測、横スクロールをせずに意味が伝わり、次の行動がわかることが大切です。
実際に使う文字色と背景色の組み合わせでコントラストを確認します。通常のテキストはコントラスト比4.5:1以上、大きな文字は3:1以上が、アクセシビリティを考える際の目安です。この数値だけで完全なアクセシビリティ審査ができるわけではありませんが、色の判断を感覚だけに頼らずに済みます。見出しだけでなく、小さなグレーのラベルも確認しましょう。
修正した要素は再利用できるテンプレートに保存し、大きく変更した後には再度テストします。優れたモバイル用テンプレートは、横スクロールを防ぐだけではありません。実際に利用されるメール環境の中で、読む順序とオファーの理解しやすさを保ち、無理なく次の行動を取れるようにします。