この記事は ゲームエイト開発部 Advent Calendar 2023 の16日目の記事です。
イントロ
9月の初めにGame8の攻略記事における目次のデザインの改善を実施しました。
主な変更点は下記のとおりです。
- 背景色の変更
- 横線のスタイル変更
- 箇条書きの記号変更
| before | after |
|---|---|
 |
 |
ここで、箇条書きのスタイルを変更した際に、一部の環境でデザインが崩れてしまう問題が発生してしまい、緊急で修正することになった話を書こうと思います。
TL;DR
- 記号をIMEから入力する場合は機種依存文字に気をつける
- そもそもデザイン/レイアウトとして記号を使用する際は画像、FontAwesomeなどの使用を検討する
ことの発端
Game8のUX改善の一部で、イントロに記載したデザインの変更を実施することになりました。現行の箇条書き部分の記号は、下記のCSSで実装されていました。（簡単にするため重要でない箇所は端折っています）
&::before {
content: "-";
(省略)
}
このように、従来はハイフン( "-" )で表現していました。今回はこれを黒丸および白丸で表現することになるため、安直に文字( "●" , "○" )で表現しようと思いました。下記のイメージです。
&::before {
content: "●";
(省略)
}
(中略)
&::before {
content: "○";
(省略)
}
ここで誤りが発生してしまいました。IMEで "まる" を変換して "●" (U+25CF)を入力したつもりが、 "⚫︎" (U+26AB)を入力してしまいました。おそらくこの記事上だと絵文字に変換されてすぐに見分けはつくのですが、エディタ上では見分けがつかずに気づくことができませんでした。
また、この後Chromeのレスポンシブモード、iOSの当時の最新版である16.4で動作確認においても見分けが付かずにそのままリリースしてしまいました。
問題の発覚
リリース後少しするとiPhoneで見ると表示が崩れているという情報をいただきました。
動作確認したはず……と思いつつ色々調査をしたところ、iOS16.2以前だと "⚫︎" が絵文字として表示されており、そこで問題が発覚しました。
修正
今回は下記のように FontAwesome を使用することで一貫性を確保し、環境による表示の崩れを防止しました。
&::before {
content: "\f111";
font-family: 'FontAwesome';
(省略)
}
(中略)
&:has(a.a-outline__tree)::before {
content: "\f10c";
font-family: 'FontAwesome';
(省略)
}
結果と学び
上記の修正をした結果、環境に依存せず一貫した表示を行うことができました。
| iOS 16.4 | iOS 16.2 |
|---|---|
 |
 |
テキストベースの記号の場合、その見た目はフォント、ブラウザおよびOSなどさまざまな環境条件で異なる表示となる可能性があり、一貫性を保つのが困難になります。特に今回はデザインやレイアウトに関わる部分であるため、表示が異なることによって全体が崩れてしまう結果となってしまいました。
まとめ
当初は、簡単であることから横着して文字ベースの記号をリストアイコンとして使用しましたが、これが特定の環境で不適切に表示される問題に直面しました。今回はFontAwesomeを使用することで、一貫性や互換性を確保することができました。
この経験を通じて、デザインの一貫性を確保するためにFontAwesomeのようなアイコンフォントの使用することの有効性を再確認することができました。
Discussion