UXライティングについて、基本概要とテクニックをまとめました。
UXライティングとは
ユーザーが快適に操作できるよう言葉を設計・執筆すること
サービスの大部分は言葉で構成されているので、重要
- ユーザー自身が今やっていることの文脈を理解できる
- やるべきことがわかる
- 何すると良いか判断できる
- その後の操作も迷うことなく進行できる
文字もUIのパーツである
文字というパーツ(=UI)を用いて、顧客体験(=UX)を向上させる。
ユーザーは読まない
- 一語でも少なく、一字でも少なく
- 28%しか読まれない
- 人間は流し読みが基本
- 文字よりも画像、図の方が記憶、理解しやすい
UXライティングの3原則
-
明確(Clear)
- ユーザーにとって分かりやすい言葉を使うこと
- 曖昧な表現や専門用語を避け、誰でも理解できる文章にする
- ユーザーにとって分かりやすい言葉を使うこと
-
簡潔(Concise)
- 必要な情報だけを、できる限り短く伝えること
- 冗長な説明や無駄な言葉を省き、すぐに意味が伝わるようにする
- 必要な情報だけを、できる限り短く伝えること
-
有用(Useful)
- ユーザーの行動や判断に役立つ情報を提供すること
- 次に何をすればよいか、何が起こったのか、ユーザーに必要な情報を示す
- ユーザーの行動や判断に役立つ情報を提供すること
トーン
人間でいう「話し方」や「態度」 にあたるもの
同じ内容でも「やさしい」「フレンドリー」「プロフェッショナル」「カジュアル」「丁寧」など、話し方によって印象は大きく変わる。
そして、そのトーンを決める際に、「プロダクトの擬人化」がよく使われる。
プロダクトの擬人化
アプリを「人」として捉え、人格を持たせて、言葉づかい・キャラクター性を出すこと
例:
「エラーが発生しました」
↓
「ごめんなさい、ちょっと困っています。もう一度試してもらえますか?」
親しみやすさや信頼感を高め、ユーザー体験を向上させるために使われる。
ここからは実際のプロダクトでも使えるテクニックをまとめました。
文章量
- 1文あたり
40-60文字以内に収める- 人が一度の理解できる文字数である
- 人が眼球を動かさずに知覚できる文字数は、
13文字前後- それを超えると疲れてしまう
- ぱっと見で理解させる
- 文字量を減らすために
表、図解を活用する
表記ルール
語尾を揃える
体言=「名詞」のことで、用言=「動詞」「形容詞」「形容動詞」など
- 体言止め
- 「名詞」で締めくくる表現方法、硬い印象だが判読性は高い
- 保存
- 編集
- 削除
- 「名詞」で締めくくる表現方法、硬い印象だが判読性は高い
- 用言止め
- 「動詞」で締めくくる表現方法、丁寧な印象
- 保存する
- 編集する
- 削除する
- 「動詞」で締めくくる表現方法、丁寧な印象
文章の寄せ方向のルール
文章の寄せ方向を本文、タイトルなどセクションごとに統一することで、無意識的にユーザーの目線に一定のルールが生まれ、内容を把握しやすくなる。
-
左寄せ
- 読み始める位置が常に一定なので、読みやすい
- 長文や説明文、リストなどに適している
- 日本語は左から右へ読むので、自然な視線移動ができる
-
中央寄せ
- 見た目が整い、バランスが良い印象を与える
- タイトルや見出しなど、目立たせたい部分に適している
- 余白を利用して、デザインに開放感や上品さを演出できる
-
右寄せ
- 金額など、桁を揃えたい数値データの表示に適している
- サブ情報や補足説明
- レイアウトのバランスを取るために使うこともある
寄せ方向が混在しすぎると目が疲れてしまうので、基本は左揃えで、目立たせる要素を中央で、重要度の低いものを右の空いてるスペースに置くのがいいと思います。
文章
1) 主語はユーザー
主語をシステム側ではなく、ユーザー側にする。
以下のNG例は、システムがやっていいか?なので、システムが主語になっている。
NG:編集内容を破棄してもよろしいでしょうか?
OK:編集内容を破棄しますか?
2) 受動態は避け、能動態(〜する)を使う
受動態は冗長で、長くなる。基本的には能動態で短く書くのが良い。
NG:パスワードが誤って入力されました
OK:パスワードが違います
3) 二重否定文は避ける
誤解や混乱を招くので、使わないようにする。
NG:すべての項目が未入力でない場合にのみ、次へ進めます。
OK:すべての項目が入力されている場合のみ、次へ進めます。
4) ひらがな 7 : 漢字 3の黄金比
漢字の印象:硬くて真面目
平仮名の印象:親しみ、柔らかい印象
黄金比を必ず守らないといけない訳ではない、以下のNG例は逆に読みにくい。
NG:キャッシュレスですばやくお支払い!
OK:キャッシュレスで素早くお支払い!
5) 1文1意にする
1つの文に1つの意味だけ込める。複数の意味がある場合は分ける。
NG:画面が自動で切り替わるまでブラウザを閉じないでください。
OK:画面が自動で切り替わります。そのままお待ちください。
単語
1) 助詞を入れて、単語と単語を見やすくする
単語が2つ以上並ぶと読みにくくなるので、接続詞を使って余白を取る。
以下のNG例は、漢字続きで一目では読みにくい。
NG:新規会員登録完了しました
OK:新規会員の登録が完了しました
2) 専門用語を避け、誰でも分かる言葉を使う
NG:認証情報
OK:パスワード
3) 表記揺れ
表記揺れは、1つの意味を表す言葉が2つ以上の異なる表記で書かれていること
以下の様な表記揺れをなくし、揃えることでユーザーを混乱させない。
-
ログインとサインイン -
前払いと先払い
4) こそあど言葉を避ける
「これ / その / あの」といった指示語は避ける。
以下のNG例は、どこを示しているかわからない。
NG:ここからわかるように~、
OK:図1の表からわかるように~、
文字/記号選び
1) 年月日の表記法を統一
- ハイフン
2025-06-21- 誤解が少ない
- システムが扱いやすい
- スラッシュ
2025/6/21- 見慣れていて親しみやすい
- 年月日
2025年6月21日- 年月日情報の重要が高い時に使う
- 高齢者にも分かりやすい
2) 丸括弧 ()
日本語の場合は全角、英数字の場合は、半角をきちんと分ける
3) 読点 、
「」 の前に 、 はつけない。
NG:この度は、「株式会社XXX」をご利用いただき、ありがとうございます。
OK:この度は「株式会社XXX」をご利用いただき、ありがとうございます。
4) 句点 。
文の終わりに打つのは当然ですが、以下の場合は打たない。
- タイトル / 見出し
- ボタンラベル / フォームの選択肢
文章を括弧でくくるとき、括弧直前の文末に句点は打たない。
NG:~~です(管理画面にて削除できます。)。
OK:~~です(管理画面にて削除できます)。
括弧内に複数の文が含まれているときは、各文の間にだけ打つ。文末には打たない。
NG:(~~です。~します。)
OK:(~~です。~します)
まとめ
ボタンの中のテキスト、説明文とか、どう書けばいいか悩む事は多いものです。
今後も有益なテクニックを新しく知ったら追加していきます。