概要
広告やメールマーケティング施策において、ユーザーがスマートフォンでサイトを閲覧することを想定し、表示を最適化する必要があります。
本記事では、モバイル端末での視認性を高め、PLAINERのデモを適切に表示させる手順をご説明します。
PLAINERのデモリンクを直接共有する場合
キャプチャ元が「レスポンシブ非対応のサービス、またはスクリーンショット」のケース
PC幅（例：1440px）でキャプチャしたコンテンツをスマートフォンで開いた場合、ガイドが等倍で表示されます。ガイドのボタンは通常サイズでタップでき、「次へ」などの操作が正常に行えます。
ただし、PC幅のキャプチャ素材は画面横幅を超える場合があります。その際は横スクロールで閲覧できます。
スマホでPCデザインを縮小表示したい場合は、共有URLに ?mobile_mode=true を追加してください。
スマホ端末で閲覧した際に、ビューポートを800px固定としてPCデザインを縮小表示します。PC端末で同じURLを開いた場合は何も変わりません。
例：
https://product.plainer.co.jp/content/xxxxx?mobile_mode=true
キャプチャ元が「レスポンシブ対応のサービス」のケース
URLに何もつけなくても、スマホで閲覧するとスマホ向けのUIでデモが表示されます。1つのコンテンツでPCとスマホそれぞれに最適化された表示が自動的に切り替わります。
?mobile_mode=true を付けると、スマホでもPC向けUIが800px縮小表示になります。レスポンシブの自動切替を無効にしたい場合のみ使用してください。
サイトに埋め込む場合
iframeで埋め込んだコンテンツをスマートフォンで表示した場合も、ガイドは等倍で表示されます。ガイドのボタンは通常サイズでタップでき、操作が正常に行えます。
ただし、PC幅のキャプチャ素材は画面横幅を超える場合があります。横スクロールで閲覧できます。
キャプチャ元がレスポンシブ対応の場合 → スマホUIで表示されます
キャプチャ元がレスポンシブ非対応 or スクリーンショットの場合 → ガイドは等倍で操作できます。キャプチャ素材は横スクロールで閲覧できます
PC用とスマホ用でコンテンツを分けて配布したい場合は、端末に応じてiframeで表示するコンテンツをJSで切り替えることもできます。
<div id="plainer-wrapper" style="margin: 0; padding: 0; overflow: hidden; height: 100vh"> <iframe id="plainer-iframe" style="border: none; width: 100%; height: 100%;" scrolling="yes" allow="fullscreen; clipboard-write"> </iframe></div><script src="https://product.plainer.co.jp/static/external/external.js"></script><script> (function() { var ua = navigator.userAgent; // A. デバイス判定 var isMobile = /iPhone|iPod/.test(ua) || (/Android/.test(ua) && /Mobile/.test(ua)); // B. PC用とスマホ用のURLを設定 var pcUrl = "PC用のコンテンツURL"; var spUrl = "スマホ用のコンテンツURL"; // C. 最終的なURLの決定 var finalUrl = isMobile ? spUrl : pcUrl; var contentId = finalUrl.split('/').pop(); // D. iframeへの反映 var iframe = document.getElementById('plainer-iframe'); iframe.id = contentId; iframe.src = finalUrl; if (typeof callFunction === 'function') { callFunction(contentId, finalUrl); } })();</script>
pcUrl にPC用コンテンツのURL、spUrl にスマホ用コンテンツのURLを指定してください。