絵文字をUXライティングに活かそう！図解で学ぶ7つのポイント

絵文字。

友人や家族間でのフランクなやりとりのために生まれたその新しい文字は、いまやWebサイトやアプリでも活躍するようになりました。

たとえば、アメリカのテクノロジー系スタートアップが提供するサービスでは、ロケットの絵文字(?)をよく見かけます。絵文字は、全年齢に対して直感的に意味を伝えられ、読む人の目もひきます。つまり、UXにおいて効果的なのです。

今回は、より使いやすい製品やサービスをデザインするうえで絵文字をどう使うべきかについて、実例をベースに解説します。

1. 絵文字はテキストとセットで使う

▲CTAを絵文字だけで表現するのは避けたい（出典：UX Collective）

テキスト情報を、絵文字で補足したり強調したりすることは問題ありません。しかし、テキストを排除して絵文字だけで情報を伝えるのは避けましょう。端的にいうと、不可能です。

絵文字だけだと、そのボタンが何の動作を起こすのかユーザーは不安に感じます。とくに、CTAなど重要な箇所では意味が正確に伝わるよう、絵文字を使う場合はテキストとセットで使いましょう。

2. 絵文字の使いすぎに注意

▲長くて複雑な文章に、無理に絵文字を入れる必要はない（出典：UX Collective）

絵文字を使いすぎると、視認性が低下します。絵文字を過剰に使ったり、同じ絵文字をいくつも並べたりするのは避けましょう。絵文字は必要な場合のみ使用し、1文につき絵文字1つを上限にするのがおすすめです。

なにより問題なのが、ユーザーが音声読み上げソフトを使用していた場合です。読み上げソフトは絵文字のaltテキストを読み上げるため、絵文字を入れすぎると文章が複雑になり意味が伝わりにくくなります。

3. テキスト→絵文字の順番を守る

▲右のボタンは「近づく拳近づく拳近づく拳Let’s go」と読み上げられてしまう（出典：UX Collective）

テキストと絵文字を組み合わせて表記する際は、「テキスト」→「絵文字」の順番を守りましょう。

絵文字が文章より先にあると、パッと見で何を意味しているのか伝わりずらくなります。読み上げソフトを使っている場合も、ユーザーが混乱する要因になるでしょう。

4. 絵文字は文末に配置する

▲右の場合、読み上げソフトを使用していると文章の途中に「プレゼント」が入りこんでしまう（出典：UX Collective）

長い文章であっても、「テキスト」→「絵文字」の順番で記載するというルールは変わりません。絵文字は文末に使いましょう。

文中に絵文字を入れると、単純に読みにくくなります。読み上げソフトの場合でも、文中で絵文字のaltテキストが読まれるため、聞いている人を混乱させてしまでしょう。

絵文字を文章の最後に配置すれば、こうした混乱を防げるだけでなく、効果的に文章を強調することにも役立ちます。

5. 意味が伝わる絵文字を選ぶ

▲右側の絵文字は意味が伝わりにくい（出典：UX Collective）

さまざまな年齢、文化、宗教、国籍の読者を想定し、どんな読者にも意味が明確に伝わる絵文字を選びましょう。

たとえば、右下の絵文字は「祈り」「謝罪」「感謝」「ハイタッチ」などさまざまな解釈が存在します。こうした絵文字は混乱を招くため、避けるのが無難です。

6. エモーティコンや顔文字は避ける

▲絵文字はOK、エモーティコンや顔文字はNG（出典：UX Collective）

画像右のような「エモーティコン」や「顔文字」と、絵文字の大きな違いが、altテキストです。

読み上げソフトを使っている読者は、絵文字に遭遇してもaltテキストがあるため意味を把握できます。しかし、顔文字やエモーティコンにはaltテキストがないため、意味が伝わりません。

7. 明るい背景と暗い背景に対応した絵文字を選ぶ

▲左の絵文字のほうが右の絵文字よりも視認性が高い（出典：UX Collective）

明るい背景でも暗い背景でも見やすい、視認性が高い絵文字を使うようにしましょう。近年のユーザーは、デバイスをダークモードにしている可能性があるためです。

アクセシビリティの基本ルールのひとつが、適切なコントラストです。たとえば白背景に白いハートの絵文字を使うと、視認性が非常に低くなります。黒いハートも同様です。

もし使いたい絵文字の視認性が低い場合は、代替できる絵文字を探しましょう。ケーキに関連する絵文字だけでも3〜5種類あるため、多くの場合は代わりの絵文字が見つかるはずです。

肌の色が関係する絵文字については、上図のようにニュートラルな黄色を使いましょう。

絵文字をスマートに取り入れよう

プライベートのやりとりで絵文字を使う場合と、製品やサービスに取り入れる場合では、配慮すべきポイントが異なります。

アクセシビリティを保つためにも、今回取り上げた7つのポイントを意識して、絵文字をスマートに活用しましょう。

（執筆：Ryan Tan　翻訳：中島あすか　編集：泉　提供元：UX Collective）