絵文字をPNGで使いたい人必見!MSが絵文字をMITライセンスで公開

HTML/CSS

スマホやタブレットではよく使われている絵文字ですが、WindowsなどのPC(特にExcel!)ではほとんど使われていません。

使われていない理由の1つとして、Excelで絵文字を表示するととっても残念な感じになってしまいます。

PNG形式に変換できれば使用用途が広がります。私もどうにかしてPNG形式の絵文字データを入手したく、SVGからPNGに変換しようとしたり試行錯誤しましたが、途中で断念しました。

断念した理由は、Microsoftがライブラリとして提供してくれているからです。MITライセンスでしかもオープンソースとして公開しています。

GitHubでPNGやSVGデータが公開されている

GitHub - microsoft/fluentui-emoji: A collection of familiar, friendly, and modern emoji from Microsoft
A collection of familiar, friendly, and modern emoji from Microsoft - GitHub - microsoft/fluentui-emoji: A collection of familiar, friendly, and modern emoji fr...

GitHubライブラリが提供されています。絵文字の数は全部で1,545個登録されています。

絵文字データはassetsフォルダに格納されています。

各絵文字フォルダの中身は以下のようになっています。

  • 3D
    PNGデータが格納されています。
  • Color
    SVGデータが格納されています。
  • Flat
    SVGデータが格納されています。
  • High Contrast
    白黒で作成されたSVGデータが格納されています。
  • metadata.json
    グループやキーワードなどの補足情報が格納されています。

Figmaは各パーツが細かく分かれてる

Fluent emoji — 1 | Figma Community
Fluent emoji are ready to use!This file includes a portion of the full set - Smileys & Emotion, Body, Animals & Nature.The emoji have been built to be as flexib...

Figmaでデザインを作っている人には嬉しいニュースかもしれません。Figmaでも公開されています。しかも各パーツで分かれていて柔軟なカスタマイズが可能です。

このようにカテゴリごとに全ての絵文字が見れるようになっています。一画面で多くの絵文字を閲覧する場合は、GitHubよりFigmaの方がいいですね。

目や鼻、輪郭など全てパーツごとに描かれています。これぞオープンソースですね。というかFigmaでここまでやるのはすごいです。

Microsoft FluentUIとは

Microsoft Fluent UI は、MicrosoftのデザインシステムであるFluent Design Systemに基づいて、WebやWindowsアプリなどで使用できるUIコンポーネントやツールを提供しています。

React、React Native、ウェブコンポーネント、Windowsアプリ、iOSやAndroidアプリ、macOSアプリなどほぼ全てのプラットフォームで使用できます。

Home - Fluent UI
The official front-end framework for building experiences that fit seamlessly into Microsoft 365.

Fluent UIは、Word、Excel、Teams、Bing、Azureなど多くのMS製品で使用されているデザインシステムです。

今回紹介した絵文字は、FluentUIとしてMicrosoftが独自に描いたものです。FluentUIに触れてみてはいかがでしょうか。

自作サイト:絵文字サーチ

このライブラリをまとめたサイトを作ってみました!!よかったら使ってみてください。pngやsvgデータをダウンロードできるようになっています。

絵文字1,545種類!絵文字サーチ
絵文字をPNGやSVGで公開しています。使用しているライブラリはMITライセンスで公開されているものです。

コメント

タイトルとURLをコピーしました