UIデザインをぐっと引き立てる!UXライティングの実践ポイント集UIデザイン#UI/UX#UXライティングUIデザインをぐっと引き立てる!UXライティングの実践ポイント集2019.12.20206viewsこんにちは、UIデザイナーのつのです。IT系のデザインに関わって1年半、デザインガイドラインの運用やABテスト、LP作成など、さまざまなWebとアプリのデザインに携わってきました。悩むことが多いのは、「言葉」の使い方です。記事全体では何を言いたいのか分からなくなってしまう事もあれば、たった1文字の違いだけで、ABテストの結果に数値の差が生まれることもありました。実例と合わせて整理してみました。ボタンやフォームなどの「パーツ」を示す「葉」から、長い文章などを指す「木」、そしてコンテンツ全体の「森」と3段階に分けて紹介します。参考URL/書籍UXライティングとは?そもそもUXライティングとは、どんなものを指すのかをご存知でしょうか。UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。その他のプロダクト使用に関する指示などが含まれます。言葉を使ってコミュニケーションすること全般を指しているようです。多岐にわたる「言葉」を、対象に伝わりやすくアウトプットすることを指すのですね。UXライティングが必要なのか?分かりにくいUXライティングの事例LINEが燃えている件、見に行ってみると文言が良くない。「分かりにくい」と話題になったことがあります。私も実際に見てみましたが、確かに文章として分かりにくい印象を受けました。素直にそうできないかもしれませんね。良いライティングの事例アプリのアップデート文言アスリートと同じく、Nikeはパフォーマンスを最大限に高める努力を惜しみません。Club(トレーニング)では、サービスへの真摯さがユーモアを交えて伝えられています。公式アプリ(漫画・ゲーム)では、漫画内で使われているワードを応用し、勢いをそのままテキストにしています。作品愛が伝わり、アップデートしたくなるテキストです...!プッシュ通知の文言(名前):😈デビル│FRIDAY👿金曜は一番リタイアが多いよ👻ふんばろう!(名前):🎁遂に2週間!今日はゴホービを獲得する日です!Gohobee(トレーニング)では、トレーニングを毎日続けられるよう、離脱しやすい日には励ましのコメントが来ます。通知元の名前が変えられるので、好きな人やキャラ名に変えてモチベーションを高めることができます。now(飲食店サーチ)では、テキストのユースケースが豊富に考えられています。上記は、日曜の16時に届いた通知です。飲みに行こうか悩んでいる人の背中を押すのに絶好のタイミングですね。一緒に悩んでお店決めるのもイイよね。こちらは木曜の16時に届いた通知。定時のすこし前の時間帯で、突発的に飲みに行きたい気持ちを後押ししています。このように、UXライティングを意識することで、ユーザーとサービスの心理的距離をぐっと近づけることができるのです。信頼関係に大きく関係する要素と言えそうです。UIデザイナーが言葉を考えるのか?この理由は、大きく分けて2つあります。1つ目の理由は、Webやアプリの制作環境では、言葉を専門にチェックする人はいない事が多いからです。本や雑誌など紙媒体の世界では、大抵の場合編集者や校正担当の方が言葉のチェックをしています。Webやアプリの制作環境では、編集/校正担当がいないことも珍しくありません。2つ目の理由は、UIを考えるプロセスに、言葉を考える事も含まれているからです。「この文字量はボタンに収まらない」と思った経験がある方はいあませんか?あるいは、「見出しはこう変えたほうが、より伝わりそうだ」と考えたことはないでしょうか。UIを考えるプロセスの中に、UIを構成する要素としての言葉が切っても切り離せない存在として関わっているということです。Webやアプリの視覚伝達手段の1つに言葉を挙げるならば、それについてもUIデザイナーが意識したいポイントだと思います。それでは次の項目から、具体的に気をつけたいことについて説明します。「葉」にあたる「パーツまわり」で気をつけることを見ていきます。アクションするボタンには「何をどうできるのか」を書く人は文章をほとんど読まず、画像やパーツ単位で情報をスキャンしています。よって、ボタンだけで「何ができるのか」を爆速で判断できるように配慮するのが吉です。ひとつのボタンで伝えたいことは1つに絞る動作は簡単な形に分解して、ひとつひとつ伝えるのがベストです。まとめてしまうと、動作2つのどちらか一方の理解がおろそかになる恐れがあるためです。画像の場合、「個人情報に同意する」を押さないと予約ボタンを押せないので、きちんと段階を踏んで進むことができます。一度に説明せず、段階ごとに伝える入力フォームでは、入力後は大抵「入力情報の確認」に進むと思います。次に進むボタンが「商品を注文する」だと、「いきなり購入確定されるのかな」と不安に思ってしまいます。よって、ボタンの先にある「入力情報の確認」についてだけ言及しましょう。画面に進捗バーを置くと、現在地と前後のステップが分かりやすくなります。「今のところ作業はこのくらいまで終わっていて、残りはこのくらいあります」と示し、ユーザーに安心感を持ってもらう為のものです。そのため、ボタンには次のステップのみを示したほうが、わかりやすいです。理由がない限り、専門用語を使わないユーザーの中には、今日はじめてインターネットに繋いだ人もいるかもしれません。「ユーザーが何をすれば解決するのか」が伝わる言葉にしましょう。次に、いくつかの文章が繋がった「木」の部分を見ていきます。「ユーザーが文章を読んだらどんな気持ちになるのか」を意識して作ることが大切です。日本語の文章は漢字・ひらがな・カタカナと異なる密度でできています。その結果、緩急のリズムが生まれるため、素早く読むことが可能と言われています。読みやすいリズムを作りましょう。上の例文では、「の」が連続しています。別の助詞に言い換えると一気に読みやすくなります。読みやすい文章を書く上で気をつけるポイントがまとめられています。編集者向けの本ですが、文章のルールに興味がありましたら、ぜひご一読を。長い文章ほど、ストレスなく読める工夫をするPinterestの利用規約は、ブロックごとに「要約」があり、ここを読むだけでも何の話か理解できます。難解な言葉を使っていないため、初心者にも分かりやすいです。読むことがストレスになりがちな規約の文章を、そういうものだからと、ユーザーに一方的に押し付けることのない親切心を感じます。ユーザーのせいにしない404ページにきてしまうのは、遷移前の無効なURLリンクをクリックしただけの可能性が高いです。ユーザーに落ち度がないことが多いのです。よって、エラーをただ羅列するのではなく、まずは謝罪して、ユーザーの気持ちに寄り添いましょう。するとユーザーは落ち着いて「次どうすればいいのか」を判断しやすくなります。404ページに限らず、エラーは心理を大きく揺さぶるいやな存在です。間違いを強いるのではなく、その先の選択肢を提示しましょう。最後にコンテンツ全体の「森」の視点で見てみましょう。言葉が変わると「前にあった言葉とどう違うんだろう」と心配になってしまいます。入力データの正確さが求められるフォームや予約サービス系では気をつけたいポイントです。上記のように、サービス全体の表記ルールを決めておくと、そもそもユーザーを混乱させることは無くなります。制作時に「この表記で良かったっけ?」と余計な時間をかけず、言葉を決めることができます。コンテンツらしい声をつくるもしもコンテンツをキャラクター化したら、そのキャラクターはどんな言葉遣いをするでしょうか。力強いマッチョな男性?言葉遣いは、よりコンテンツらしさが現れます。文法の使い方についても、忘れずにチェックしましょう。具体的には、(意図的なものを除き)コンテンツ内でいきなり性格が変わった言い方をしていないか、ですます調や言い切りなど語尾の形は揃っているかなどです。–インターネットを使っていると、言葉だけで判断を求められるシーンは多岐にわたります。フリマアプリでは、顔が見えない相手を信頼して商品や金銭をやりとりします。面識のある人にメッセージを送る時も、相手が今何を考えているかは、その場にいなければわかりません。言葉は、発信元の伝えたいことに限らず、雰囲気、すべてを表さざるを得ないのです。しても不安定な存在だと思います。思いが言葉に乗るでしょう。SNSで今日感動したことや面白かったことをシェアするときは、その気持ちが言葉に強く出ると思います。言葉に思いを乗せることも、デザインできることではないでしょうか。表層に責任を持つUIデザイナーこそ、担える重要な役割だと思います。記事で紹介したポイントは、今日この瞬間から意識できるものばかりです。参考URL/書籍1ユーザーを導く言葉をデザインする「UXライティング」という考え方2Webコピーライティングの新常識-ザ・マイクロコピー3インタフェースデザインの実践教室―優れたユーザビリティを実現するアイデアとテクニック4なるほどデザインニジボックスのサービスについて詳しく知りたい方はこちら!UI/WEBデザインについてUIデザイン#UI/UX#UXライティング関連記事UIデザイン2019.9.13【初心者向け】デザインは「感覚」ではなく「理論」。@nijibox_jpCONTACTお仕事のご相談はこちらからお気軽にお問い合わせください。