
説明しすぎないことでわかりやすくする-UXライティングのはなし
セカンドファクトリーのUI/UXデザイナーのさくしまです。
最近はデザインの知識を増やすため、様々なセミナーに参加しています。
その中で業務に役立った情報をピックアップして紹介していこうと思います。
(シリーズ化頑張ります💪)
UXライティングの話
日々の業務で役に立ったトピックの一つが「UXライティング」です。存在は以前から知っていましたが、改めて学ぶことで得られた気づきがたくさんありました。
UXライティングとは?
まずUXライティングという言葉の定義についてなのですが、いい感じの定義があったので以下に引用します。
UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。
つまり、ユーザーが操作するときに迷わないように、どうテキストを表示するかをデザインすることがUXライティングといえます。
いいUXライティングは、UIに溶け込む形で、ユーザーの操作を支援します。
今回はその中でも文章量を短くしようということに焦点を当てて、私が大事だと感じた3つのポイントについて話していこうと思います。
1.文章は1文字でも短くしよう
UXライティングでは、「文字は短ければ短いほどよい」と言われています。
理由は、ユーザーのほとんどは画面上のテキストを読まないからです。
文章を読むことはかなりのエネルギーを使う行為のため、脳みそが省エネのために読み飛ばしを行う傾向があるのです。
どのぐらい読まないかについては以下のような研究もあります。
近年はスマートフォンの普及によって、文章はさらに読まれにくくなっています。なので、一文字でも短い文章にするということが重要です。
短くする工夫には、以下のようなものが考えられます。
主語を省略できる場合は省略する
体言止めや箇条書きを活用する
冗長な表現を削る
例:「〜することができます」「〜が可能です」→「〜できます」
体言止めや箇条書きを活用するのは、特に 他言語に展開する時の翻訳のしやすさにも跳ねてくるので、体感としてかなりおすすめです。
2.不要な情報を隠そう
全ての情報を画面上に表示する必要はありません。むしろ、重要な情報を見落とさないように、必要な情報だけを見せることが大切です。
隠す基準は以下です
今の作業に関係あるか? :
本題と無関係なら、詳細ページやアコーディオンで隠す。頻繁に使う情報か? :
初回だけ見ればいいものはツールチップに入れる。特定の場面・ユーザーにのみ必要な情報か? :
常に出さずに、条件に応じて表示する。
実例
ある案件で、「新機能の警告をどのように表示するか?」という課題がありました。
その時に私が検討したポイントは以下です。
1. 誰に影響のある情報か?
→一部の機能を使用しているユーザーにのみ影響が出る
2. その操作を行なって取り返しがつくか
→破壊的処理を行うため、確実に確認が必要
この結果、該当の機能を使用しているユーザーにだけ、操作前に警告ダイアログを表示することに決まりました。
関係ないユーザーには警告は出てこないので、不要な心配をせずに操作を進めることができます。

3.長い説明文の前には短い見出しをつけよう
いくら文章を短くしても、どうしても長い説明が必要な場面はあります。そんな時は、文章の冒頭に13文字以内の短い見出しをつけましょう。
なぜ13文字なのか?
それは、人間が瞬間的に理解できる文字数の限界が13文字程度だからです。
眼球運動をせずに知覚できる範囲が9〜13文字とされています。
たとえば、有名なのはYahoo!ニューストピックスの見出しです。
トップページで見た時に、瞬時に情報として処理できるように、13文字を取り入れたのだと予想されます。
※ただし、13文字だと意味の誤認が多かったため、2022年時点で15.5文字に拡張されました。
ただ、私も厳密に13文字を数えているわけではありません。だいたい600pxぐらいの横幅で1行に収まる程度を基準にして、要約するようにしています。

このあたりは私もまだ試行錯誤中なので、レビューをもらいながら日々改善しています。
参考情報
今回参考にした情報は以下です。
セカンドファクトリーデザインチームは日々学びながら成長していける
UIデザイナーを募集しています。
まずは軽い雑談からスタートするなど、簡単なミートアップも常時行なっていますので、お気軽にお問い合わせください!