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

Emojis in UX writing
MARKETER

絵文字。

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

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

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

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

Emojis in UX writing

▲CTAを絵文字だけで表現するのは避けたい(出典:UX Collective)

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

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

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

Emojis in UX writing

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

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

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

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

Emojis in UX writing

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

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

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

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

Emojis in UX writing

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

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

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

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

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

Emojis in UX writing

▲右側の絵文字は意味が伝わりにくい(出典:UX Collective)

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

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

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

Emojis in UX writing

▲絵文字はOK、エモーティコンや顔文字はNG(出典:UX Collective)

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

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

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

Emojis in UX writing

▲左の絵文字のほうが右の絵文字よりも視認性が高い(出典:UX Collective)

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

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

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

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

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

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

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

(執筆:Ryan Tan 翻訳:中島あすか 編集:泉 提供元:UX Collective

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

30,000人以上が使う日本最大級のお仕事マッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 30,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ