何かお困りですか?よくある質問とその回答をまとめました。

サポートページ aero-right 小さく表示させたい画像が、スマホでは大きく表示されてしまいます。対処法はありますか?

小さく表示させたい画像が、スマホでは大きく表示されてしまいます。対処法はありますか?

テンプレート&メールエディタ 画像ギャラリー 更新日 12月 19, 2018

Benchmark Emailは、スマートフォンでの表示を自動的に最適化(レスポンシブ対応)する仕様となっております。 そのためフォントサイズや改行が最適化され、受信環境に左右されず読みやすいメールを配信することができます。

しかしながら、「小さく表示させたい画像(ロゴマーク)が、スマートフォンでは大きく表示されてしまう」といったお悩みを時々耳にします。

例えば、ロゴ画像の大きさを下記のようにしたとします。(PC画面での表示の場合)

 

これをスマートフォンで見た場合、以下のようになりました。

このロゴ画像を、スマートフォンで見た時だけ下記のように少し小さくしたい、という場合の対処方法をご紹介します。

 

スマートフォン版の表示サイズだけを小さくする方法

 

使用する画像を、左右の余白を含めた画像へ置き換えることを試してみてください。

今回の例で使用したのは、W50×H73のロゴ画像です。

W50×H73

この画像の左右に空白を足し、追加で2種類の画像を用意します。

W400×H73

 

W500×H73

 

※この画像作成はBenchmark Email上では行えません。画像編集ソフトで作成してください。

実験として、これらの画像を並べてメールデザインを作成します。

 

まずはPC版での見え方を見てみましょう。

3つの画像の見え方に変化はありません。 では次に、スマートフォンでの表示を確認します。

PC版では同じ大きさに見えていた画像ですが、モバイル版では見え方に差が出ています。

画像の横幅を変えて、お好みの表示サイズへと調整してください。

注意点

・スマートフォンと一口に言っても、機種やOS、メーラーによって見え方は変化します。

・今回は表示確認をBenchmark Email上のプレビュー機能で行いました。プレビュー機能での表示はイメージであり、厳密にスマートフォンと同じとは限りません。サイズを拘って調整される場合は、メールを自分のアドレスへ配信するなどして確認してください。

・W600以上の画像はPC版での表示も変わってしまいます。(幅がPC版枠を超えるため、全体が縮小された結果、小さく表示されます。)

・サイドの空白枠は0で実験を行っています。

問題は解決しましたか?
0 0

Benchmarkから業界トレンド&最新情報をお届けします

ご登録頂きありがとうございます!

登録を完了させるには、認証メールのご確認をお願いします。

質問の回答が見つかりませんか?

サポートへお問い合わせ'

お問い合わせ履歴を閲覧する