この記事は、SmartHR Advent Calendar 2024 (シリーズ2)の11日目の記事です。

はじめに

SmartHRでは、チャットツールとしてSlackを利用しています。

弊社のSlackには大量の「カスタムemoji¹」が登録されています。
本記事執筆時点（2024/12/09）では30,000個を超えており、さらに日々増え続けています。
他社に比べて多いかどうかはわかりませんが、個人的にはめちゃくちゃ多いなと感じています。

ちなみにemojiが多くて困ることは決してなく、むしろ毎日のコミュニケーションを円滑にしています。
弊社のSlack emoji文化については、「オープンでフラットな文化」を醸成し急成長した SmartHR の Slack 活用術 | Slack や、Slack の歩き方 #2 すきな emoji は？｜SmartHRオープン社内報｜株式会社SmartHR をご覧ください。

Slack emoji、作ったことありますか？

ところで、Slackを利用されている皆さんはカスタムemojiを作ったことがありますか？

私はたくさん作っています！
入社半年で133個のカスタムemojiを作成し、社内のカスタムemoji作成数ランキングで堂々の1位を獲得しました²。
（平均して、1日に1個作っていました）

ここからのセクションは、emoji作成に一家言がある人間として書くことにします。

さて、ここからが本題です。
より多くの人にemojiコミュニケーションを楽しんでほしいと思って活動（？）する中で、なんとなく意識するようになったことがあります。
今回はそれらを整理し、再現性のありそうなものをtipsとしてご紹介します！

画像で表現されている内容と、emojiの名前をなるべく一致させましょう。スクリーンリーダーを使っているユーザーにも判別しやすくなります。

emojiの名前： :arigatou:

このemojiは、画像で表現されている言葉 (ありがとうございます)と、emojiの名前（arigatou）が一致していません。
そのため、スクリーンリーダー利用者が、画像で表現されている内容を読み取れず、意図とは異なる文脈で利用してしまう可能性があります。

emojiの名前：:arigatougozaimasu:

Slackではライトモード・ダークモードを選べます⁴。どのカラーモードでも視認しやすいカラーリングとなるようにしましょう。

ライトモードの場合、背景となる白色と文字色のコントラスト比が低く、視認しづらくなっています。

ライトモード・ダークモードどちらの場合でも、背景色と文字色のコントラスト比⁵が高く、視認しやすくなっています。
そのため、どんなユーザーにとっても見やすい状態です。

Slackの設定で「アニメーションを自動的に再生する⁶」をOFFにしている場合、アニメーション有りのemojiは1コマ目に固定されて表示されます。
この状態でも内容を判別できる状態にしましょう。

コマにわけると...

1コマ目に、アルファベットの「A」全体が収まっています。こうなっていると、「アニメーションを自動的に再生する」がOFFの場合でも、内容を判別しやすくなります。

アニメーションがついたemojiを作成する場合、激しい点滅やモーションを伴うものは避けましょう。
多くの場合は見づらいemojiとなってしまいますし、激しい点滅が苦手な方もいます⁷。

ここまで、私的emoji作成tipsをいくつかご紹介しました。

もちろん、これらが絶対正しいというわけではありません。イラスト・写真なのか文字表現なのか、あるいはemojiを利用するユーザーの特性によっても、「使いやすい」emojiのあり方は異なると思います。
自分はこうしているよというものがあれば、ぜひコメントで教えていただけると嬉しいです

emojiは楽しく作って楽しく使えることが一番だと思っているので、みなさんも気軽にemojiを作ってみてほしいなと思っています！

最後に、私がヘビーユーズしているemoji作成サイトをご紹介します。
使いやすくて高機能なので、オススメです！

Slackでは、プリセット以外にもemojiを追加できます。詳しくは、ワークスペースにカスタム絵文字とエイリアスを追加する | Slackを参照してください。 ↩
自分調べ：2023年7月〜12月のうちに登録されたカスタムemojiを集計 ↩
Slack emojiをテキストとしてコピーして、テキストエディタなどにペーストすると、emojiの名前が出力されます。例えば「推奨パターン」のemojiをコピーすると、:arigatougozaimasu:がテキストとして出力されることになります。 ↩
Slack でダークモードを使用する | Slack ↩
詳しくは背景色と文字色のコントラスト比が4.5:1（大きな文字: 18px以上は3:1）以上ある | ウェブアクセシビリティ簡易チェックリスト | SmartHR Design Systemを参照してください。 ↩
画像と絵文字のアニメーションを管理する | Slack ↩
詳しくは達成基準 2.3.1: 3 回の閃光、又は閾値以下を理解するを参照してください。 ↩