Slack 絵文字を透過にする方法とダークモード対策

Slack のカスタム絵文字でいちばん見た目に効くのが透過です。 背景が残っているだけで「素人が作った感じ」になり、ダークテーマを使っている同僚の画面では 白い四角がずらりと並ぶことになります。

そもそも透過とは

画像の各ピクセルは、色（赤・緑・青）に加えて不透明度という情報を持てます。 この不透明度がゼロのピクセルは、下にあるもの（Slack の背景）がそのまま透けます。 PNG と GIF は不透明度を持てますが、JPEG は持てません。 JPEG で書き出した時点で背景は必ず何かの色で塗りつぶされます。

PNG と GIF では透過の作りが違います。PNG は 0 から 255 の 256 段階で半透明を表現できますが、 GIF は「完全に透明」か「完全に不透明」の 2 段階しかありません。 そのため動く絵文字（GIF）では、影やぼかしの縁がギザギザに見えます。

単色背景を透過にする

Slack 絵文字メーカーに画像を置き、 「単色の背景を透過にする」を有効にしてください。 四隅の色から背景色を自動で推測しますが、色見本から自分で指定することもできます。

肝心なのが「どこまで近い色を消すか」のスライダーです。 これは背景色からどれだけ離れた色までを背景とみなすかを決めるつまみです。

• 低すぎる：完全に同じ色だけが消えるので、JPEG 圧縮でわずかにばらついた背景が まだら模様として残ります。
• 高すぎる：絵の中にある背景と似た色まで消えて、絵に穴が開きます。 白背景の絵で、白いシャツや白目が消えるのが典型です。

50 前後から始めて、プレビューを見ながら上下させてください。 縁がわずかに残る場合、当ツールはしきい値の少し外側を半透明に落とすので、 ぱっと見のギザギザは目立ちにくくなっています。

余白も一緒に詰める

透過にすると、それまで背景だった部分が「何もない領域」になります。 このとき「まわりの余白を自動で詰める」を有効にすると、 透明な部分を切り落としてから 128px に収め直すので、絵そのものが一回り大きく表示されます。 22px の世界では、この差はかなり効きます。

ダークモードで読めるかを必ず見る

Slack にはライトテーマとダークテーマがあり、どちらを使うかは各自の設定です。 自分がライトテーマなら、ダークテーマの人の画面は想像するしかありません。 当サイトのプレビューは、白い背景と暗い背景の両方に同時に置いて見せます。

ここで問題になるのが黒い線と黒い文字です。透過した黒文字は、 ダークテーマの画面ではほとんど見えません。対策は二つです。

1. 白い縁取りを付ける。文字絵文字なら、文字の色を黒、縁を白にすると どちらのテーマでも読めます。当サイトの「文字から」タブに縁取りの設定があります。
2. 中間の明度の色を使う。オレンジ・青・緑などは、 白背景でも暗い背景でも十分なコントラストが出ます。

透過しないほうがいい場合

写真をそのまま絵文字にする場合など、背景を抜くと何の写真か分からなくなることがあります。 その場合は無理に透過せず、丸く切り抜くのが定番です。 また、社内で使うロゴなどは、ブランドの規定で背景色が決まっていることがあります。 規定がある場合はそちらに従ってください。

透過できているかの確かめ方

書き出した PNG をブラウザのウィンドウにドラッグして開いてみてください。 背景が市松模様（グレーの格子）に見えれば透過されています。 白く見えるなら、その時点で透過されていません。 Slack にアップロードしてから気づくより、ここで確かめるほうが早く済みます。

macOS のプレビューや Windows のフォトビューアーは、 透過部分を白や黒で塗って表示することがあります。 これは表示側の都合なので、透過されているかの判断には使えません。 ブラウザで開くのがいちばん確実です。

当サイトのプレビューも市松模様の上に絵を置いています。 さらにその下に、ライトテーマとダークテーマを模した背景で実寸のプレビューを並べているので、透過の有無と、その結果どう見えるかを同時に確認できます。 ここで白い四角が見えていたら、透過の設定を見直してください。