「日本のEC売上を伸ばすなら、楽天市場は避けて通れません」の折り返しについて

原因1　見出しに日本語フォントが指定されていない

実装の見出しは font-family: Rubik, sans-serif になっています。Rubik は日本語のグリフを持たないため、日本語部分は sans-serif、つまり OS 標準のフォントで描画されます。Mac では Hiragino Sans、Windows では游ゴシックが使われるため、同じ CSS でも1行目の幅が変わります。

納品データは "Rubik", "Noto Sans JP", "Hiragino Sans", … と指定し、Noto Sans JP を Google Fonts から読み込むことで、どの OS でも同じ字幅になるようにしていました。実装では Noto Sans JP が読み込まれていないことも確認しています。

ご指摘の「伸ばすな」と「ら、」の間で切れる件も、これが原因です。列幅が1文字ぶん足りないとき、本来は「ら」の後で折り返しますが、句読点は行頭に置けない禁則処理が働くため、「、」と一緒に「ら」も次の行へ送られます。Mac では折り返し位置が1文字ずれるので「日本のEC売上」「を伸ばすなら、」となり、切れ方が環境で変わって見えている状態です。

原因2　コンテンツ幅 1200px の内側パディングを見込んでいませんでした（弊社の不備です）

実装ではコンテンツ幅 1200px のコンテナの内側に左右 24px のパディングが入るため、パネルは 1152px になります。一方、納品データはパネルの外形を 1200px とし、24px のガターはその外側に置く作りにしていました。この差で見出しの列幅が 492px → 468px と 24px 狭くなり、font-size 36px の1行目に必要な 478〜487px を下回るため3行に割れています。

1200px のコンテナの内側に 24px のパディングが入る前提でデザインデータを作るべきところ、こちらで入れ忘れておりました。申し訳ございません。パネルは 1152px のままで問題ありませんので、下記のとおり文字サイズの調整でご対応いただけますと幸いです。

原因3　Windows は常時スクロールバーのぶん不利になる

clamp(22px, 2.9vw, 36px) の vw はスクロールバーを含んだ幅で計算されます。Windows は常にスクロールバーが表示されるため、font-size はそのままで列幅だけが約15px 狭くなります。860〜1247px の範囲は元々余りが数 px しかないため、この15px で割れます。