「ぽんっ！」のLPを作った — アプリと配色を揃え、Safariの表示崩れと戦う

家族向けのスタンプ帳アプリ「ぽんっ！」（旧称：でいりんぐ）のLPを作りました。アプリ本体とトーンを揃えること、そして Safari 特有の表示崩れへの対応に一番手をかけたので、その工夫を残します。

アプリと配色を「単一ソース」で揃える

ぽんっ！は「Warm & Analog（温かい紙とはんこ）」というトーンで、アプリ側に DESIGN.md の配色定義があります。LP はこれを そのまま参照元（単一ソース）として扱い、独自に色を決めないようにしました。

• 装飾・背景・境界には温かいオレンジ（--primary）
• 文字・CTA・アイコンには、紙色の上で AA（コントラスト比 4.5:1）を満たす濃いオレンジ --primary-strong: #A15613
• ダークモードは DESIGN.md の *Dark トークンに対応させる

アプリと LP で色が食い違うと安っぽく見えるので、「LP が勝手に色を決めない」ことを徹底しました。

日本語見出しの折り返し

日本語のキャッチコピーは、単語の途中で改行されると読みにくくなります。そこで見出しには次を指定し、文節（<wbr> 相当の区切り）でのみ折り返すようにしました。

.hero-title { word-break: keep-all; line-break: strict; }

Safari(WebKit) の画像間延びを潰す

いちばんハマったのが、Chrome では正常なのに Safari だと画像が縦に間延びする現象でした。

原因は、img に width / height を書いていなかったこと。WebKit は、画像の読み込み前に CSS の aspect-ratio を確定できず、属性がないと縦横比を無視してレイアウトしてしまう（結果として間延び＝CLS）ことがあります。Chrome では再現しないため気づきにくい罠でした。

対処はシンプルで、画像に実寸の width / height を明示します。

<img decoding="async" width="1320" height="2868"
     src="/service/ponto/static/hero.png" alt="ぽんっ！ アプリ画面">

この手の Safari 固有の崩れは Chrome で確認しても見つからないので、Playwright の WebKit エンジンで幅をスイープしながら検証するようにしました。家族セクションのキャラ画像が Safari でだけ出ない、といった不具合もこの方法で潰しています。

アクセシビリティと公開まわり

• prefers-reduced-motion で演出を抑制、noscript で JS 無効時のフォールバックを用意。
• キャラクター素材は、アプリ側リポジトリの正規の素材から取り込み（LP 用に描き起こさず、アプリと同じキャラで統一）。
• Google Play バッジは、Android 版が審査中の間は一時的に非表示にし、審査完了後に再表示しました（公開済みと誤認させて空振りさせないため）。

まとめ

LP は「アプリと世界観を揃える」ことが第一で、そのために配色は単一ソース（DESIGN.md）に従うのが効きました。そして忘れがちなのが Safari(WebKit) 固有の崩れ。img の実寸指定と、WebKit での実機（相当）検証をルーティンにするだけで、Chrome では気づけない事故を防げます。