スマホやタブレットではよく使われている絵文字ですが、WindowsなどのPC（特にExcel！）ではほとんど使われていません。
使われていない理由の1つとして、Excelで絵文字を表示するととっても残念な感じになってしまいます。
Excelで絵文字使えたらドキュメント作成はかどるんじゃね？って思ったけど、これじゃあ誰も使わねぇな。。。 pic.twitter.com/XS5nN2pdx7
— はる🍥社内SE (@Harus0313) May 5, 2023
PNG形式に変換できれば使用用途が広がります。私もどうにかしてPNG形式の絵文字データを入手したく、SVGからPNGに変換しようとしたり試行錯誤しましたが、途中で断念しました。
断念した理由は、Microsoftがライブラリとして提供してくれているからです。MITライセンスでしかもオープンソースとして公開しています。
GitHubでPNGやSVGデータが公開されている
https://github.com/microsoft/fluentui-emoji
GitHubライブラリが提供されています。絵文字の数は全部で1,545個登録されています。
絵文字データはassetsフォルダに格納されています。
各絵文字フォルダの中身は以下のようになっています。
- 3D
PNGデータが格納されています。 - Color
SVGデータが格納されています。 - Flat
SVGデータが格納されています。 - High Contrast
白黒で作成されたSVGデータが格納されています。 - metadata.json
グループやキーワードなどの補足情報が格納されています。
Figmaは各パーツが細かく分かれてる
https://www.figma.com/community/file/1138254942249677742/Fluent-emoji-%E2%80%94-1
Figmaでデザインを作っている人には嬉しいニュースかもしれません。Figmaでも公開されています。しかも各パーツで分かれていて柔軟なカスタマイズが可能です。
このようにカテゴリごとに全ての絵文字が見れるようになっています。一画面で多くの絵文字を閲覧する場合は、GitHubよりFigmaの方がいいですね。
目や鼻、輪郭など全てパーツごとに描かれています。これぞオープンソースですね。というかFigmaでここまでやるのはすごいです。
Microsoft FluentUIとは
Microsoft Fluent UI は、MicrosoftのデザインシステムであるFluent Design Systemに基づいて、WebやWindowsアプリなどで使用できるUIコンポーネントやツールを提供しています。
React、React Native、ウェブコンポーネント、Windowsアプリ、iOSやAndroidアプリ、macOSアプリなどほぼ全てのプラットフォームで使用できます。
https://developer.microsoft.com/en-us/fluentui#
Fluent UIは、Word、Excel、Teams、Bing、Azureなど多くのMS製品で使用されているデザインシステムです。
今回紹介した絵文字は、FluentUIとしてMicrosoftが独自に描いたものです。FluentUIに触れてみてはいかがでしょうか。