Noto Emojiとは
Google Fontsにて提供されている、Emojiが白黒で表現されたUnicode絵文字。
今回はこれでサービスのアイコンをすべてまかなうことができないかと考えました。
補足：Noto Emojiについての説明は以下の記事に詳しく記載されています
https://forest.watch.impress.co.jp/docs/news/1408856.html
Noto Emojiをアイコンとして使ったサービス
このサービスをNuxt.js+Firebase+Algoliaで個人開発しました。
画面を制作するにあたり、アイコンをSNSのアイコンなどの一部を除きすべてNoto Emojiを使用しています。
使い方
emoji用のclassを作って
.emoji {
font-family: "Noto Emoji",sans-serif;
}
こんなかんじで適用するだけ
<h1><span class="emoji">📣</span>なんらかの見出し</h1>
使用例
見出しに添えるアイコンにつかったり
空のサムネイル部分の絵の意匠、上矢印、バツボタン、追加の部分のプラスボタン、リストの横のチェックマークなどもnoto emojiを使っています
結論
アイコンとしてNoto emojiを使うことは十分に可能 と表現して差し支えないと考えます。
今回使ってみましたが単なる単色の文字なので、色・大きさともに気を使って使う必要がなくかなり楽に取り回しができました。
ただしいくつかの制限や留意すべき事項があったので以下に記載していきます。
Noto Emojiをアイコンとして使う場合に注意すべき事項
Firefoxなど一部のブラウザではNoto Emojiが適用されない状態で表示される
FirefoxでNoto Emojiの画面をみたときのスクショ
なんでこんなことになるの…？？？
申し訳ないことにこの現象が起こる理由がわからなかったのですが、一部のemojiはNoto Emojiが適用されません。上記のスクショ画像を見ていただけるとわかると思うのですが、ハートマークなど意外とメジャーどころのemojiがこの現象を起こすので結構厳しいです。
今回は個人開発なのでFirefoxのブラウザのシェア率は３％程度という数値を鑑み、Firefoxはサポートしないという判断にしました。とはいえ３％のシェアは単純に考えて１００人のうち3人なのでそれなりにユーザー数がいるようなサービスだと無視はできない数値かなとも思います。
丸いフォントとの相性が悪い、かも？
これは実装ではなく見た目のデザイン面の話ですが、Noto Emojiは基本的に線の終端が角状になっていてソリッドな形状になっています。
これにより丸文字フォントと組み合わせると微妙に違和感が出てしまったので、あまりおすすめできません（筆者の使い方センスが悪いだけという可能性は大いに有り得そうです）。
デザインのトーンに留意
Noto Emojiはアイコンとしての癖は少ないですが、ソリッドな割には可愛らしい印象の絵柄が多いので、Noto Emojiをアイコンに使う場合のデザインのトーンを決めるときはその点に留意すると良いかもしれません。
５種類太さがあるので細いものを選べばクールに、太いものを選べばポップな見た目の用途にも対応できそうですが、読み込みが遅くなるので使用する太さの種類は絞ることが望ましいです。
独自機能があるようなサービス・アプリの場合は使わないほうが良いかも
当たり前の話ですが、emojiになるような意匠というのはある程度汎用的なものです（ 🎋とか🍣とか月餅とか見てると微妙に懐疑的にはなりますが）
そのため、独自の機能を持つようなアプリやサービスの場合に機能にちゃんと合った意匠のemojiを探すというのは難しいところになります。
UIでよく使うような部分では シェア や コピー を表すようなemojiというのも執筆時点ではありません。
使ってみると意外と「合うのが無いな〜」ってなるシーンは多かったので、Figmaなどで設計してる段階で採用するかどうかをジャッジすると良いかなと思います。
まとめ
個人開発やプロトタイピングに採用するなら大いにあり、という感触です。
大規模なものになってくると独自のアイコンを作らざるを得なくなってくることが予想されること、それをNoto emojiのトーンとウェイトを合わせたり、フォントとして取り回すということは面倒になりそうです。
とはいえアイコンを手描きするというのは結構時間がかかる作業なので、Noto Emojiを使って楽をさせてもらうのをデザイン作業の選択肢として持っておくのは良いんじゃないかなと思います