Relic_20220420-LT_ogoshi

UXライティングに取り組もう！

2022年4月20日（水）に開催された『Relic Tech Meetup Online #05 フロントエンド×デザイナーLT大会 』の資料です。

▼イベント詳細
https://relic-inc.connpass.com/event/244833/

▼株式会社Relic
https://relic.co.jp/

▼デザイナー・エンジニアを募集中！
https://relic.co.jp/recruit/

Transcript

1. UXライティングに取り組もう！
   © Copyright 2022 Relic Inc. All rights reserved.
   生越 裕紀子（おごし ゆきこ）
   

   View Slide

2. 目的
   1
   というデザイナーがUXライティングに取り組む方法♡
   専属のUXライターがいなくても
   
   利用者により良い体験を届けたい！
   

   View Slide

3. 目次
   1 自己紹介
   2 UXライティングって？
   3 どのように取り入れたの？
   4 UXライティングをやっていくには？
   5 付録
   2
   

   View Slide

4. １ 自己紹介
   こんにちは
   生越 裕紀子（おごし ゆきこ）
   株式会社Relic
   
   プロダクトイノベーション事業本部 サービスデザイン事業部 所属
   https://note.com/oyssi/
   デザイナー
   2021年1月入社
   好きな食べ物：あまいもの、お茶、馬刺し
   大好きなもの：SixTONES
   3
   

   View Slide

5. １ 自己紹介
   4
   ソーシャルゲームのテストケース作成
   ハードウェアのマニュアル制作
   ハードウェアの説明書翻訳
   ライティング関連
   テクニカルライティングの知識が
   
   必要な領域をやっていました。
   

   View Slide

6. １ 自己紹介
   5
   UXライティングを知った
   
   きっかけはSlack
   Slackの「全未読」empty 画面
   

   View Slide

7. 2
   UXライティングって？
   さっきから言ってるけどなにそれ
   6
   

   View Slide

8. 2 UXライティングって？
   7
   プロダクトライディング
   とか
   コンテンツライティング
   UXライティング
   

   View Slide

9. 2 UXライティングって？
   8
   0 ユーザーに行動を促すも#
   0 利用の助けになるもの
   

   View Slide

10. 2 UXライティングって？
    9
    広告コピー
    7 ユーザーの心に刺さるも0
    7 行動・購買の起因になるもの
    UXライティング
    7 ユーザーの心を刺さないも0
    7 行動の手助けをするもの
    

    View Slide

11. 2 UXライティングって？
    10
    UXライティング
    マイクロ
    
    コピー
    マイクロコピーとの関係性は、
    
    諸説ありますが、
    
    UXライティングの一部
    
    という解釈が最もとっつきやすい
    
    かなと思います
    

    View Slide

12. 2 UXライティングって？
    11
    マイクロコピー
    G 行動を起こすモチベーションを向上させる
    CTA（行動喚起）、特定の行動を促すもの
    UXライティング
    G ユーザーの心を刺さないもf
    G 行動の手助けをするもの
    

    View Slide

13. 2 UXライティングって？
    12
    1 サービスを利用するとき、
    
    利用者が触れるインターフェイス
    
    （例：ボタンやメニュー、エラーメッセージ）
    2 サポートなどUXに関連するもの
    
    （例：FAQなど）
    3 プロダクト内の説明文
    4 メルマガ
    ユーザーとの接点になる文章
    

    View Slide

14. 2 UXライティングって？
    13
    最小のUIデザイン
    

    View Slide

15. 3
    どうのように取り入れたの？
    実例でイメージを掴もう
    14
    

    View Slide

16. 3 どのように取り入れたの？
    15
    ボタンのラベルは「なにができるのか」
    
    を判断できるテキストにする
    編集内容を登録してもよろしい
    ですか？
    登録する
    いいえ
    編集内容を登録してもよろしい
    ですか？
    はい
    いいえ
    

    View Slide

17. 3 どのように取り入れたの？
    16
    Primary、Secondaryレベルのボタンは、
    
    動詞にする
    決定する 登録する
    Primary Secondary Navigation
    ※ここは体言止め
    情報を編集
    

    View Slide

18. 3 どのように取り入れたの？
    17
    すべて体言止めでもあり
    決定 登録
    Primary Secondary Navigation
    ※ここは体言止め
    情報を編集
    

    View Slide

19. 3 どのように取り入れたの？
    18
    動詞か体言止めかは、メリデメがある
    動詞と体言止め
    
    使い分けるとき
    体言止めのみ
    動詞にすることで、判断に
    意思をもってもらいやすい
    表現がシンプルになり、保
    守管理がしやすい
    使い分けが難しい
    操作に意思決定感を出しに
    くい
    メリット デメリット
    

    View Slide

20. 3 どのように取り入れたの？
    19
    テキスト幅の検討
    ＜参考＞視覚的提示: 1.4.8 を理解する｜WCAG 2.0解説書
    
    https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森
    で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
    
    またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼の
    ミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴ
    など、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい
    青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、
    40文字以内（MAX 651px）
    

    View Slide

21. 4
    UXライティングを
    
    やっていくには？
    ライティング基礎を知ろう
    20
    

    View Slide

22. 4 UXライティングをやっていくには？
    21
    ライティング基礎を知ろう！
    長い文章は、ライティング基礎を知ると検討しやすい！
    

    View Slide

23. 4 UXライティングをやっていくには？
    22
    1 プロダクトを理解する
    2 伝える相手を明確にする
    3 伝える目的を明確にする
    4 とりあえず書いてみる
    5 調整する
    6 チームでつくる
    整理
    評価
    やる
    

    View Slide

24. 4 UXライティングをやっていくには？
    23
    1 プロダクトを理解する
    g なにをするためのサービスなのW
    g 利用者にとって、どういう意味（メリットなど）があるW
    g 競合とどのように違うのW
    g どういう目的でどういう時や場所で使うのか（用途の確認）
    サービスの概要を説明できるようになればOK！
    仕様書を最低3回は読む
    

    View Slide

25. 4 UXライティングをやっていくには？
    24
    2 伝える相手を明確にする
    7 性3
    7 年5
    7 職0
    7 年収
    7 居住R
    7 家族構F
    7 趣D
    7 休日の過ごし方
    ユーザー層はどういう人なのか（ペルソナ）
    

    View Slide

26. 4 UXライティングをやっていくには？
    25
    2 伝える相手を明確にする
    V 知識：ITリテラシーはどれくらい？投資リテラシーはr
    V 意識：どのような価値観や常識をもっている？悩みや課題はr
    V 心情：読むときや読んだ後、どういう心情になる？
    どのような特徴がある？相手の知識や心情に配慮しよう！
    V 専門家向けでない場合以外、専門的な用語は避けt
    V 使用する漢字は常用漢字を使n
    V 中学校3年生が理解できる表現にする
    

    View Slide

27. 4 UXライティングをやっていくには？
    26
    3 伝える目的を明確にする
    「いろんなことを伝えたい！」そう思って、詰め込むと、
    
    目的が増えてしまいます。
    
    目的が増えると、内容や表現が中途半端なものになりやすく、
    
    伝えたい情報がなにも伝わらなくなります。
    なにをどうしたいのか、どうなってほしいのか
    

    View Slide

28. 4 UXライティングをやっていくには？
    27
    4 とりあえず書いてみる
    書かないと！！！！！
    
    なにも始まらないので！！！
    

    View Slide

29. 4 UXライティングをやっていくには？
    28
    5 調整する
    1つの文が1つの内容を示す、ということです。
    
    冗長になりにくく、簡潔な文章になります。
    
    また、主語と述語の関係性が明確で、「ねじれ文」が発生しにくいです。
    サービスにもよります。SNSでは、一文は30文字程度を推奨されているこ
    ともあります（1秒に覚えておける文字数は10文字程度。単記憶は3秒）
    
    基本的には、50文字程度におさめておくのが良いでしょう。
    一文一義で書く
    一文は50文字で書く
    

    View Slide

30. 4 UXライティングをやっていくには？
    29
    5 調整する
    人は五感を通じて入ってきた外界の情報を0.5秒ほどで処理します。
    
    パッと見の印象で「漢字が多くてなんだか小難しい」と認識されると、
    利用者が離脱したり、そもそも読んでもらえません。
    専門家向けでない場合、なるべく易しい表現に変えましょう。
    
    専門用語を使う場合、覚えてもらいたい場合は、事前に説明が必要です。
    
    中学校3年生がわかる表現を目指しましょう。
    漢字は全体の30%だけ使用する
    難しい表現や専門用語は、説明してから使う
    

    View Slide

31. 4 UXライティングをやっていくには？
    30
    5 調整する
    説明は、利用者を主語にして、説明しましょう。
    
    利用者が操作するとき：能動態（マウスカーソルを移動します。）
    
    自動的に行われる動作：受動態（メッセージが表示されます。）
    「５〜６０００個のりんご」は、りんごが何個あるのでしょうか？
    
    「エラーが出ることもあります」は、出ないときもあるのでしょうか？
    
    利用者がなにをして良いのかわからない表現は避けましょう。
    利用者の視点を意識する
    曖昧な表現は使わない
    

    View Slide

32. 4 UXライティングをやっていくには？
    31
    5 調整する
    人は、否定されると処理がしにくくなるそうです。
    
    否定表現を使うと、利用者も否定的な気持ちになったり、不安になった
    りします。
    
    「絶対に禁止する！」という強い表現以外では、否定表現は使わないよ
    うに意識しましょう。
    （例）
    
    「利用規約に同意しないと、サービスを利用できません」
    
    　→「利用規約に同意すると、サービスをご利用いただけます」
    否定的な表現は使わない
    

    View Slide

33. 4 UXライティングをやっていくには？
    32
    5 調整する
    手順の説明は、行動特性に配慮する
    T 目標形成：行動の意味や目標（文頭にもってくるw
    T 実行：利用者が行う行c
    T 評価：行動や操作の結果がわかるようにする
    目標形成
    実行 評価
    

    View Slide

34. 4 UXライティングをやっていくには？
    33
    5 調整する
    手順の説明は、行動特性に配慮する
    悪い例：
    
    　Tap on item to see it's properties
    
    　アイテムをタップしてこのプロパティを確認する
    良い例：
    
    　To see item's properties, tap on it
    
    　アイテムのプロパティを確認するには、タップしてください
    

    View Slide

35. 4 UXライティングをやっていくには？
    34
    6 チームでつくる
    v 検討しているうちに視野が狭くなt
    v 客観性が失われる（パッと見の感想がわからないC
    v そもそも仕様を理解しきれておらず、誤った説明をしている
    v 圧倒的な客観性（パッと見の感想が言ってもらえるC
    v 認識齟齬を指摘してもらえt
    v 良い表現が思い浮かばないときに相談できる
    ひとりでやるデメリット
    みんなでやるメリット
    

    View Slide

36. 4 UXライティングをやっていくには？
    35
    1 ガイドラインを味方につけよう！
    「JIS日本規格」や「公用文作成の考え方」について（建議）で国語に詳
    しい先生が検討した、ガイドラインがある。
    
    （付録の資料をぜひ読んでね♡）
    2 サービスのコピーや取説をメモしておこう！
    UXライティングは、自然で気がつきにくいもの。
    
    「わかりづらいなぁ」「どのように表現したら良いかな」と迷いやすい
    言い回しを、「他サービスではどのように表現しているのかな？」と意
    識するだけでも勉強になります。
    
    Notionやスプレッドシート、メモ帳などにメモしておきましょう。
    

    View Slide

37. 4 UXライティングをやっていくには？
    36
    3 トーン＆マナーを考えよう！
    利用者とシステムがどれくらいの距離感なのかを検討しましょう。
    
    Slackのように親しみやすい言い回しも素敵ですが、システム管理画面に
    はちょっと合わないこともあります。
    
    利用者とどういう距離感なのか、どういう言い方・表現をするのかをプ
    ロジェクト内ですり合わせるのが良いですね。
    4 単語帳をつくろう！
    自戒。どうしても、表記が揺れてしまいます。
    
    「開く」なのか「ひらく」なのか…、「TOP」なのか「ホーム」なの
    か…。「このサービスではこういう意図で、この単語に統一していま
    す」というガイドラインを書いておきましょう。
    
    一貫した表現をつかいましょう（自戒）。
    

    View Slide

38. 4 UXライティングをやっていくには？
    37
    5 誰かに読んでもらうための文章を書こう！
    自分以外の誰かに読んでもらう文章を普段から書いて練習しましょう。
    
    Twitterはカジュアルなので、短い文章でも日報などがオススメです。
    
    noteや技術ブログも良いですね。
    6 本を買って、正しい知識を得よう！
    インターネットでも知識を得ることができます。
    
    ただ、情報が散乱していたり、精査されていない情報だったりするの
    で、情報がまとまった本を買って勉強するのがオススメです。
    7 全部やろうとしない
    全部できなくても大丈夫です。一歩ずつ改善していきましょう。
    

    View Slide

39. 全部やれなくても大丈夫
    一歩ずつやっていきましょう。
    
    まずは、単語帳をつくって表記揺れをなくすだけでも、
    
    読みやすい文章になります。
    38
    

    View Slide

40. 39
    圧倒的感謝
    ご静聴ありがとうございました！
    

    View Slide

41. 5
    付録
    入り切らなかった情報たち
    

    View Slide

42. 5 付録
    書いたら確認する、チェック項目
    「②伝える相手を明確にする」で確認したペルソナや、利用者の特徴と
    照らし合わせましょう。
    ペルソナと照らし合わせる
    利用者の悩みや不安を解消できる回答はありますか？
    操作に必要な情報はありますか？
    前提となる知識の説明はありますか？
    誰が操作するのか、主語は明確ですか？
    伝えるべき内容はありますか？
    

    View Slide

43. 5 付録
    全体の確認
    一文一義（一文一行動）になっていますか？
    一文は50文字程度になっていますか？
    主語と述語は対応していますか？
    漢字は全体の30%の使用にとどめていますか？
    説明は、読み手の視点に合っていますか？
    簡潔でわかりやすい文章ですか？（無駄な敬語はありませんか？）
    表現は統一されていますか？（文末や用語）
    曖昧な表現を使っていませんか？
    書いたら確認する、チェック項目
    

    View Slide

44. 5 付録
    リテラシー
    難しい表現になっていませんか？（中学生が理解できる表現に！）
    専門用語は使っていませんか？（使う場合は事前に説明しよう）
    心情への配慮
    利用者を否定していませんか？
    差別的な用語や表現はありませんか？
    アクセシビリティ
    読み上げの邪魔していませんか？（空白でレイアウト調整するのはNG！）
    書いたら確認する、チェック項目
    

    View Slide

45. ■ITリテラシー
    名前：
    ■悩み・不安
    ■サービス対象リテラシー ■心情の変化
    性別
    
    年齢
    
    職業
    
    年収
    居住地
    
    家族構成
    
    趣味
    
    休日の過ごし方
    

    View Slide

46. ■ITリテラシー
    名前：藍州　ぱぴ子（アイス　パピコ）
    ■悩み・不安
    ■投資リテラシー ■心情の変化
    性別
    
    年齢
    
    職業
    
    年収
    女性
    
    42歳
    
    会社員
    
    500万円
    普段からスマホで検索したり、SNSアプリを使うことはある。
    
    スマホメインで、PCでサービスを利用する機会は少ない。
    SNSで投資が流行っていることを知り、興味をもった。
    
    SNS投稿を読んで投資について見たりはするが、詳しい知識はな
    い。また、どうすれば知識を得られるのかわからないでいる。 投資で騙されるんじゃないか やり方がわかる、信頼できる
    不安・恐怖 安心
    東京都文京区
    
    夫、長男（中1）、長女（小3）
    
    映画鑑賞、ショッピング
    
    趣味の時間をすごす
    居住地
    
    家族構成
    
    趣味
    
    休日の過ごし方
    借金を背負うのでは
    
    ないか？
    借金を背負うのでは
    
    ないか？
    騙されてしまうかも
    しれない
    騙されてしまうかも
    しれない
    情報収集の仕方が
    わからない
    情報収集の仕方が
    わからない
    税金などの扱いが
    わからない
    税金などの扱いが
    わからない
    会社に申請すべきか
    わからない
    会社に申請すべきか
    わからない
    記入例
    写真やイラスト
    

    View Slide

47. 5 付録（参考にオススメ！）
    40
    タイトル / リンク
    「公用文作成の考え方」について（建議）
    概要 現代日本語書き言葉均衡コーパス
    （BCCWJ）
    その4　音声読み上げに配慮したテキスト
    表記（総務省）
    詳細
    ライティングの書き方の参考になります。
    表現が一般的に使われているか検索できるサイト。
    
    少納言は登録なしで使えます。
    音声読み上げに配慮した表記の仕方を図で詳しく解
    説されています。
    日本語スタイルガイド(第3版)
    言葉ダイエット メール、企画書、就職活
    動が変わる最強の文章術
    テクニカルライティングの教科書です。テクニカル
    にだけでなく、ライティングの基礎を学べます。
    冗長になり
    やすい文章を
    簡潔にわかり
    やすい表現に
    変える方
    法を学べます。
    ワーク
    もあるので
    ぜひ！
    

    View Slide

48. 圧倒的大感謝
    これで本当に終わり♡
    

    View Slide