本文へ移動
技術を、自社の仕事に。
判断と実行を助けるメディア

記事を検索

絵文字は端末側で描かれる — Emoji 18.0対応で決めること

目次 · 6項目

公開したページを見た担当者から、「この絵文字、私の画面では別の絵になっています」と言われる場面を考えます。制作側のMacでは意図どおりに出ていて、先方のWindowsやAndroidでは違う絵が出ている。端末のどのフォントにもその文字が無ければ、四角い箱(いわゆる豆腐)などの代わりの表示になります。

絵文字は画像ではなく文字です。ページでフォントを指定していなければ、どんな絵になるかは、書いた側ではなく見る側の環境(OS、ブラウザ、アプリが持つフォント)が決めます。この一点を共有しないまま制作を進めると、公開後に「直してください」と言われても、制作側では直しようがありません。

何が更新されたのか

Unicode Consortiumは2026年9月16日にUnicode 18.0を公開し、絵文字の規格もEmoji 18.0になりました。新しく加わった絵文字は、ひび割れた顔、灯台、隕石(英語名はmeteor)、ピクルス、消しゴムなど9文字です。このうち左向きと右向きの親指には肌の色の違いが5種類ずつあり、それを含めると19になります。

Googleは、自社の絵文字ライブラリであるNoto Emojiをこれに合わせて更新しました。GitHubのリポジトリ(googlefonts/noto-emoji)には、従来の平面の2D版に加えて、立体的なデザインのNoto 3DのフォントとPNG画像が置かれています。編集部がフォントに含まれる文字を読み出したところ、2D版・3D版とも新しい9文字を含んでいました。Unicode 18.0対応を示す「v2026-09-24-unicode18_0」というタグも付いています。フォントのライセンスは、2D・3DともSIL Open Font License 1.1です。

Noto 3Dそのものは、7月17日(世界絵文字デー)にGoogleの公式ブログで紹介されていたものです。9月17日のGoogle Designの記事は、PixelのスマートフォンからGoogle全体へ年内に展開し、その後ほかのGoogleアプリと、Nothing・Lenovo・Xiaomi・OPPO・Motorolaなどパートナー各社の一部の端末へ広げるとしています。

9月21日付のGoogle Play開発者サービス(v26.37)のリリースノートにも、車載機器・PC・スマートフォン・TV・ウォッチ向けに「より大きく、より洗練されたシステム絵文字フォントのダウンロードに対応」という項目があります。Noto 3Dの名前は書かれていませんが、Android端末の絵文字フォントはOSの版だけでは決まらない、と見ておくのが安全です。

ここで押さえるのは「新しい絵文字が増えた」ことよりも、同じ文字コードに対して、環境ごとに別々の絵が割り当てられている状態が、また一段更新されたことです。同じAndroidでも、Noto 3Dが届いた端末とそうでない端末では、同じ文字が別の絵で描かれます。

同じ文字が、どこで別の絵になるか

絵文字が描かれる場所を分けて考えると、どこで差が出るかがはっきりします。

描かれる場所何に依存するか制作側で制御できるか
閲覧者の端末OS・ブラウザと、そこに入っている絵文字フォントの版できない
ページで読み込むWebフォント制作側が指定したフォントと、ブラウザが対応する形式できる。ただし容量と表示の遅れが増える
画像・SVGとして配置制作側が用意した素材できる。文字としては扱われない

1行目が既定の状態です。制作側は何も制御していません。新しく加わった絵文字は、各OSが対応するまで表示できない期間があります。たとえばWindows 11では、2025年9月に公開されたEmoji 17.0への対応が、1年後の2026年9月10日にRelease Preview(一般公開前の確認用の配信)の更新として案内され、端末ごとに段階的に届く形でした。Emoji 18.0の文字も、閲覧者の環境がそろうまで時間がかかると見ておきます。

絵文字が描かれる場所を、閲覧者の端末のフォント(制御できない)、ページで読み込むWebフォント(容量が増える)、画像・SVGとしての配置(文字ではなくなる)の3段に分け、メール・帳票・RSSはページとは別の環境で表示されることを添えた編集部の概念図。実際の表示比較ではない

納品物に入れる前に決める4項目

  1. その絵文字は装飾か、意味を持つか。 「注意」「完了」のような状態を絵文字だけで表していると、別の絵に変わった時点で意味が壊れます。意味を持たせるなら文字か記号で書き、絵文字は添える側に回します。
  2. 読み上げでどう聞こえるか。 絵文字には、Unicodeの関連データ(CLDR)で言語ごとの短い名前が定められていて、読み上げに使える名前と位置づけられています。読み上げソフトがこの名前を読めば、文中の絵文字も読み上げの流れに入ります。見出しや本文の途中に置く場合は、読み上げた文章として成立するかを確認します。文字まわりの見え方をどこまで保証するかの考え方は拡大表示に耐えるUIの作り方でも扱いました。
  3. 新しい絵文字を使うか。 Emoji 18.0で増えたものは、当面は出ない環境があります。キャンペーンのページなど公開期間が短いものほど、避けたほうが無難です。
  4. フォントを同梱するか。 見た目を揃えたいなら、絵文字フォントを読み込む選択肢があります。2DのNoto Color EmojiはGoogle Fontsでも配信されていて、9月28日に編集部が取得した時点でEmoji 18.0の文字を含んでいました。ファイルは文字の範囲ごとに11個に分かれ、ページに出てくる文字を含むものだけが読み込まれます。全部を合わせるとChrome向けで約2.1MB、Safari向けは形式が異なり約4.0MBでした。一方、Noto 3DのTTFは、GitHubにある版で1ファイル約36〜229MB(旗を除いた版でも約34〜218MB)あり、そのままWebフォントとして読み込ませる大きさではありません。読み込む容量と、表示が遅れる時間を見積もってから決めます。

確認する場所は、ページの中だけではない

見落とされやすいのは、サイト本体ではない場所です。

  • 通知メールや自動返信メールの本文
  • OGP画像ではなく、SNSに渡すタイトル・説明文
  • 管理画面に入力された記事タイトル。一覧やRSSに流れます
  • PDFで出力する帳票

メールや帳票は、閲覧環境がブラウザとは別です。ページでは問題なく出ていた絵文字が、メールクライアントやPDFの生成側で欠けることがあります。運用に入ってから気づくと、送信済みのメールは直せません。

Webの機能が各環境でどこまで使えるかを判断する基準については、Web Platform Baselineを基準にしたサイト設計にまとめています。どの絵文字を表示できるかは端末のフォントで決まるため、Baselineでは判定できません。それでも、「どこまで揃うことを前提にするか」を先に決める考え方は同じです。

いま手元でできる確認

公開中のサイトで絵文字を使っている箇所を洗い出してください。目で探すより、テキストを機械的に走査したほうが漏れが出にくくなります。JavaScriptなら、正規表現の \p{Extended_Pictographic}(u フラグ付き)で、絵文字とその候補になる記号を拾えます。編集部がNode.js 22で試したところ、Emoji 18.0の新しい9文字も拾えた一方、©や®も一緒に拾い、国旗と、数字や#を囲むキーキャップは拾いませんでした。国旗とキーキャップも含めるなら、/\p{Extended_Pictographic}|\p{Regional_Indicator}|\u20E3/u のように条件を足します。洗い出しの目安として使い、最後は目で確かめます。

拾えたら、その絵文字が「意味を持っているか」を判定します。意味を持っているものが見つかったら、そこが直す対象です。装飾として置かれているだけなら、絵が変わっても意味は失われません。ただし豆腐になると不具合に見えるため、新しい絵文字は装飾でも避けます。

見た目を完全に揃えたいという要望が出た場合は、必要な箇所だけを画像やSVGに置き換える方法を提案してください。フォントを同梱するより、読み込む量を抑えやすくなります。画像は文字として扱われないため、代替テキストで意味を伝えます。Noto Emojiの画像素材を使うなら、ライセンスはリポジトリのREADMEで確認します(画像の多くはApache License 2.0で、旗などに例外があります)。

2026年9月28日に、Unicode Consortiumの発表とEmoji 18.0の一覧、Googleの公式ブログ(7月17日)とGoogle Designの記事(9月17日)、Noto EmojiのGitHubリポジトリ(README、ライセンス、2D・3Dのフォントと画像、タグ)、Google Play開発者サービスのリリースノート、Windows Insider Blog、Unicodeの関連データ(CLDR)の定義を直接確認しました。2D・3Dのフォントが新しい9文字を含むことは、編集部がフォントの文字表を読み出して確かめました(3D版は腕時計向けの版で確認)。Google Fontsの配信ファイルの数と容量は、同じ日にChrome向け・Safari向けの配信内容を1回ずつ取得した値で、実際のブラウザで読み込まれる量や時間は測っていません。正規表現の結果は、Node.js 22.22.2で数種類の文字を試した範囲のものです。各端末・ブラウザ・メールクライアントでの実際の表示、Noto 3DのTTFを読み込んだ場合の表示、読み上げソフトでの読まれ方は確認していません。Noto 3Dがどの端末にいつ届くかについて、公式の案内は「年内にPixelから、その後ほかのGoogleアプリとパートナーの端末へ」までです。

サイトの表示品質の確認や、公開前のチェック項目の整備は、グリームハブへご相談ください。

Sources

この記事を共有XFacebook
鈴木 翔

技術の可能性に魅了され、学生時代からプログラミングとデジタルアートの分野に深い関心を持つ

この記事のテーマを、自社の次の一歩へ

Webサイトで、実現したいことから。

使う人の目的、必要な機能、更新の体制を整理し、制作・改善で最初に取り組むことを考えます。

  • サイトの目的
  • 機能と使いやすさ
  • 公開後の運用
Web制作・改善を相談する

構想段階からご相談いただけます。この記事の情報を相談フォームに引き継ぎます。

最新記事をメールで受け取る・Web制作ガイドを読む
無料ダウンロード

Web制作 費用・発注・集客 完全ガイド【2026年版】

費用相場・制作会社の選び方・集客戦略をPDFにまとめました。

The PDF and newsletter emails are currently in Japanese.

メルマガにも登録されます。いつでも解除可能です。