こんにちは、阿久梨絵です！
iPhone でWebサイトを見ていて、「Safariでは綺麗なのに、Chromeだと崩れてる…」と感じたこと、ありませんか？
同じ端末、同じOS、同じURL──なのに、表示が違う。
それは、単なるブラウザの違いではなく、“レンダリングエンジンの構造”と“Web制作者の設計意図”のすれ違いから生まれています。
今回は、iPhoneにおけるSafariとChromeの表示差を、Web制作者の視点から構造的に整理してみます。
同じiPhoneでも“中身のエンジン”が違う？
実は、iPhone上のChromeは、Safariと同じレンダリングエンジン（WebKit）を使っています。
Appleの制約により、iOS上のすべてのブラウザはWebKitベースで動作します。
つまり、SafariとChromeは“見た目は違っても、心臓は同じ”。
それでも表示が違う理由──3つの構造差
1. ブラウザごとの“CSS初期値”が違う
・SafariとChromeは、独自のスタイル初期値（User Agent Stylesheet）を持っている
・たとえば`input`や`button`の余白・角丸・フォントサイズなどが微妙に異なる
・Web制作者がCSSリセットをしていないと、“見え方の差”が露出する
“同じタグ”でも、“見え方”はブラウザ依存。
2. JavaScriptの挙動が微妙に違う
・iOS版ChromeはWebKitベースでも、JavaScriptの実行タイミングやイベント処理がSafariと異なることがある
・特にスクロールイベントやタッチ挙動で、UXの違和感が生まれやすい
“動きの違い”は、ユーザーの安心を揺らがせる。
3. フォントレンダリングの差
・SafariはApple独自のフォントレンダリングを採用
・Chromeは、WebKitベースでもGoogle ChromeのUI層が干渉することがある
→ 結果、同じフォントでも太さ・間隔・にじみ方が違って見える
“文字の見え方”は、感情の印象を左右する。
Web制作者ができること
1. CSSリセットを導入する
・normalize.cssやdestyle.cssなどを使い、ブラウザ初期値の差を吸収する
2. フォント指定は慎重に
・`-apple-system`, `BlinkMacSystemFont`, `Segoe UI`, `Roboto`など、OSごとのフォールバックを意識する
3. 実機での表示確認を怠らない
・iPhoneのSafariとChromeで、実際に表示・操作を確認する
・特にフォーム・ボタン・アニメーションは、“触ってみて違和感がないか”を重視
“見える安心”は、コードだけでは作れない。
まとめ
iPhone のSafariとChromeは、
技術的には同じWebKitベース。
でも、CSS初期値・JavaScriptの挙動・フォントレンダリングなど、
“見え方”に影響する要素は、ブラウザごとに微妙に違う。
その違いが、
「なんか崩れてる」「文字が変」「動きが違う」──そんなUXの違和感を生みます。
だからこそ、Web制作者は、
“コードの正しさ”だけでなく、“見え方の安心”を設計する必要がある。
iPhoneという同じ器の中でも、
“見え方の差”は、ユーザーの感情に直結する。
その違和感を拾い、整えることが、
Web制作における“優しさの設計”なのかもしれません。
阿久梨絵でした！
