チャット欄で読めるスタンプの作り方

最終更新日: 2026-08-16

作ったスタンプがチャット欄で潰れて読めない、暗い背景で同化する——配信スタンプで最も多い失敗の原因と、24px相当でも読ませるための具体的な対処をまとめます。

なぜチャット欄では読めなくなるのか

スタンプを作るときの編集画面は数百ピクセルありますが、実際にチャット欄へ表示されるのは 24〜28px 程度です。面積にすると 10 分の 1 以下で、編集画面で「ちょうどいい」と感じた密度は、そのままではまず潰れます。

さらに配信のチャット欄は、ダークテーマの利用者が多い一方でライトテーマの人もいます。片方の背景でしか確認していないと、もう片方で背景と同化して輪郭が消えます。

最も効果が大きいのが文字数です。28px の正方形に収まる情報量はごくわずかで、文字数が増えるほど1文字あたりの面積は急激に小さくなります。

「おつかれさまでした」のような長い言葉は、「おつ」のように略すか、 2行に分けて1行あたりの文字数を減らします。

細い線は縮小時に真っ先に消えます。日本語なら極太のゴシック体や丸ゴシック体を選んでください。明朝体は縦横の太さの差が大きく、横線が消えて読めなくなります。

毛筆風・手書き風のフォントは雰囲気は出ますが、線が細く複雑になりがちです。使う場合は文字数をさらに減らすか、フチを厚めにして輪郭を補強します。

スタンプが背景と同化する問題は、フチでほぼ解決できます。効果的なのは2重のフチです。

外側を白にするとダーク背景で、黒にするとライト背景で特に効きます。どちらのテーマでも使うなら、白文字＋濃い色のフチ＋外側に白フチのような構成にすると両方で成立します。

フチを太くしすぎると、今度は文字の内側が潰れます。等倍表示を見ながら「文字の隙間が埋まらない範囲で最大」を狙うのが目安です。

赤と緑のように色相は違っても明るさが近い組み合わせは、小さくすると溶け合って見えます。読みやすさを決めるのは色相ではなく明度差です。

白黒に変換したときにはっきり差が出る組み合わせ（明るい文字＋暗いフチ、またはその逆）を選んでください。彩度の高い色同士を隣り合わせるより、明暗をはっきり分けるほうが効きます。

背景の立ち絵と文字を1枚の画像に描き込んでしまうと、「文字だけ大きくしたい」「文字だけ動かしたい」といった調整のたびに作り直しになります。レイヤーを分けておくと、片方だけを差し替えたり、前後関係を入れ替えたりが後からできます。

ここまでの調整は、すべて実際の表示サイズで確認して初めて意味を持ちます。拡大表示で整えたバランスは、等倍では別物になります。

PochiSta では編集しながら、チャット欄を模したプレビューで 24px 相当の見え方と、ダーク／ライトの切り替えをその場で確認できます。モバイルではキャンバスのすぐ下にプレビューを常時表示しています。

この記事の内容は PochiSta で実践できます

各プラットフォームの規格に合わせたサイズ・容量へ自動で最適化して書き出せます。登録不要・完全無料で、画像はブラウザの外に出ません。