ホームページを制作していると、パソコンでは普通の記号なのに、スマホで見ると絵文字に変わってしまうことがあります。
例えば矢印や記号などが、スマートフォンではカラフルな絵文字として表示されるケースです。
これはバグではなく、スマートフォンのフォント仕様によって起きる現象です。
仕組みを理解しておかないと、意図しないデザイン崩れにつながるため、原因と対策を知っておくことが重要です。
スマホだけ絵文字になる主な原因
スマホのフォントが「絵文字フォント」を優先する
スマートフォンのOSには、絵文字専用のフォントが標準で入っています。
iPhoneであればApple Color Emoji、AndroidであればNoto Color Emojiなどです。
これらのフォントは、特定のUnicode文字を自動的に絵文字として表示する仕組みになっています。
例えば次のような文字です。
→
✔
⭐
➡
☑
パソコンでは普通の記号として表示されることが多いですが、スマホでは「絵文字として認識」されてしまうことがあります。
その結果、デザインの意図とは違うカラフルな絵文字になってしまいます。
よく起きるパターン
ホームページ制作で特に起きやすいのは次のケースです。
・矢印記号をテキストで書いている
・チェックマークを文字で入れている
・装飾としてUnicode記号を使っている
・フォント指定をしていない
特に「→」「✔」「★」などはスマホで絵文字になりやすい代表例です。
対策① CSSでフォントを指定する
もっとも基本的な対策は、CSSでフォントを明示的に指定することです。
スマホはフォント指定がないと、OSのデフォルトフォントを使います。
その際に絵文字フォントが優先されることがあります。
そのため、本文やUIパーツには必ずフォントを指定しておくことが重要です。
例えば次のような指定です。
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
これだけでも、絵文字化を防げるケースがあります。
対策② 記号ではなくSVGや画像を使う
矢印やチェックマークなどの装飾は、Unicode文字ではなくSVGで作るのが安全です。
理由はシンプルで、SVGなら表示が完全にコントロールできるからです。
例えば以下のような要素は、SVG化した方が安定します。
・ボタンの矢印
・リストのチェックアイコン
・見出しの装飾
・CTAボタンの矢印
デザインの再現性を考えると、文字よりSVGの方が確実です。
対策③ CSSの疑似要素でアイコンを作る
矢印程度のシンプルな装飾なら、CSSだけで作る方法もあります。
borderを使って矢印を作る方法や、transformで角度を付ける方法です。
この方法ならフォントに依存しないため、スマホでも絵文字になることはありません。
対策④ 絵文字化しやすいUnicodeを使わない
そもそも絵文字化しやすいUnicodeを使わないのも重要です。
例えば次のような記号は、スマホで絵文字化する可能性があります。
・チェックマーク
・星マーク
・矢印系記号
・丸付き記号
これらは装飾として使うのではなく、アイコンとして作る方が安全です。
まとめ
ホームページ制作でスマホだけ絵文字になる原因は、スマートフォンの絵文字フォントがUnicode文字を自動的に絵文字として表示するためです。
対策としては次の4つが基本です。
・CSSでフォントを明示的に指定する
・装飾記号をSVGにする
・CSSでアイコンを作る
・絵文字化しやすいUnicodeを使わない
デザインを安定させるためには、「記号は文字として使わない」という考え方が重要です。
特に矢印やチェックマークは、テキストではなくアイコンとして扱う方が、スマホ・PC問わず確実に同じ表示になります。
