Slack用カスタム絵文字を、チャットで読める形にする
Slackのカスタム絵文字は小さく表示される場面が多いため、ただ派手に作るだけでは読みにくくなります。文字量、色、縁取り、背景差を確認しながら作ることが重要です。EmojiLab.はスマホでも操作しやすいUIで、プレビューを見ながら調整できます。
先に決めること
- 文字数はできるだけ短くする。日本語の漢字は画数が多いほど小サイズで詰まりやすくなります。
- ライト背景とダーク背景の両方で確認する。片方だけで見える色は、もう片方で埋もれることがあります。
- 外側線は輪郭を保つために使う。背景から分離できない場合は、白または黒系の外側線が有効です。
- 明るい黄・橙・黄緑系は白背景で弱くなりやすいため、必要に応じて黒い内側線を細く足します。
EmojiLab.で作る手順
1. 文字を入力
上段・下段に分けて、1文字あたりの面積を確保します。
上段・下段に分けて、1文字あたりの面積を確保します。
2. 色を選ぶ
PCCSブライトトーンを参考にした色から選び、ライト/ダーク背景で比較します。
PCCSブライトトーンを参考にした色から選び、ライト/ダーク背景で比較します。
3. 線を調整
外側線で背景から分離し、必要な場合だけ内側線で塗り色を補助します。
外側線で背景から分離し、必要な場合だけ内側線で塗り色を補助します。
4. スコアを見る
APCAコントラスト、縮小耐性、総合スコアを見て、問題箇所と改善コメントに沿って調整します。
APCAコントラスト、縮小耐性、総合スコアを見て、問題箇所と改善コメントに沿って調整します。
よくある失敗
- 白背景で黄色が消える: 黒い内側線を細く足すか、塗り色を少し濃くします。
- 太字の漢字が潰れる: ウェイトを下げる、内側線を細くする、字間を少し広げます。
- 横長すぎる: 幅揃えや上下分割を使い、正方形領域を効率よく使います。
実際に作る
EmojiLab.では、Slack風プレビューとデザインスコアを見ながら、透過PNGとして書き出せます。
EmojiLab.を開く