アイコンフォントの代わりにEmojiを使用する

⚠この記事が公開されたのは 2021年12月15日で、内容が古く、間違っている可能性があります。

ページ内でアイコンを使用する際にFontAwesomeなどのアイコンフォントが普及し便利になりました。

しかし「フォントデータのサイズが大きくページが重くなる」「CDNでフォントデータの読み込みに失敗した際にアイコンが表示されずに文字化けしてしまう」という問題あります。

しっかりとしたデザインを行うにはアイコンフォントを使用したほうがマッチしやすいのですが、「使用しているアイコンフォントに目的のアイコンがない」「別のアイコンフォントをわざわざ追加したくない」「ページの読み込みを軽くしたいのでアイコンフォントを使用したくない」というケースもあるのではないでしょうか。

その場合に私はEmojiを使用しています。

アイコンフォントの代わりにEmojiを使用するメリット

  • コピーペーストで入力が簡単
  • 機種依存文字なのでデータのDLやCDNのリンクが不要
  • WindowsやMacなどPCでも使用でき、入力も簡単(Emojiパネルを呼び出すショートカット – Win: [スタート] + [.] キー, Mac: [Control] + [Command] + スペース キー)
  • Unicodeに対応
  • アイコンの種類が多く使いやすいものが多い(Full Emoji v14.0 3633種類 ※2022/12/15現在)
  • ガラケーでも対応できるEmojiがある(ほぼ無意味)

アイコンフォントの代わりにEmojiを使用するデメリット

  • 機種依存文字なのでOSやデバイスによって対応するEmojiのデザインに違いがある
  • Emoji(Color)はデザインが固定しているのでカラーの変更はできない(アイコンサイズはフォントサイズで変更可能)→ページのデザインにあわずアイコンのデザインが目立ちすぎて浮いてしまう等
  • ブラウザやOS・デバイス・プラットフォームによっては文字化けするEmojiがある

よく使うアイコンとの比較

FontAwesomeUnicode Emoji
スマイル  😀
ハート
カート 🛒
警告  
禁止🚫
バツ ❎❌✖
クエスチョン 
インフォ 
NEW🆕
電話  ☎📞
携帯電話📱📲
PC 💻🖥
FAX📠
Eメール  📧✉
メモ📝
カレンダー  📅📆
フォルダ   📁📂
ラベル 🏷
お金  💰💴
クレジットカード 💳
ピン  📌📍
チェック  ✅☑✔
国旗🎌
若葉マーク🔰
ATM🏧
的矢🎯

おすすめリンク

https://lets-emoji.com/emojisearch/
日本語キーワードで絵文字を検索可能(※Unicode Emoji 13.0)、Unicodeだけでなく数値文字参照(HTML Entity)も対応
https://unicode.org/emoji/charts/emoji-list.html
Unicode Emoji 14.0に対応したリスト。Sampleをクリックすると、様々なデバイスやサービスに対応した絵文字の見え方を確認できます。絵文字と注釈の順序は、UnicodeCLDRデータに基づいています。絵文字シーケンスには、[コード]列に複数のコードポイントがあります。最近追加された絵文字は、名前と輪郭が描かれた画像に⊛がマークされています