急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing

リリースから急成長を続けているWINTICKETですが、年々プロダクトが抱える負債も大きくなり、そのうちの一つが“ライティング”でした。このセッションでは、サービス内で使われている言葉すべてを精査、ガイドラインを整備し統一するという大きなプロジェクトを、事業成長のスピードを落とさずに少ないリソースでどのように実現していったかについて事例とともに紹介します。

https://cadc.cyberagent.co.jp/2024/sessions/winticket-writing/

Transcript

2. Designer 若森 龍太朗 2022年度 新卒入社 @ryutarowkm
3. CONTENTS ちいさくはじめるライティング改善のプロセス 若森 龍太朗 前半 良いライティングを浸透させる施策の実践 原島 一桂 後半
5. レース映像を ライブ配信 AI予想など 項目が充実 豊富な データベース ABEMA 番組連動
6. FY2020 FY2021 FY2022 FY2023 1Q 2Q 3Q 4Q 1Q 2Q 3Q 4Q 1Q 2Q 3Q 4Q 1Q 2Q 3Q 4Q 17 35 72 137 192 319 393 446 528 679 735 779 889 922 968 990 取扱高 単位：億円 リリースから約2年間で競輪投票サービスNo.1へと急成長 サイバーエージェント決算資料より引用
7. サービスのライティング改善
8. ライティング サービス内で使われる言葉すべてのこと
11. ライティングあり ライティングなし
12. ライティング、実は結構難しい。
15. ⁨ ⁩ “良いライティング”は気づかれにくい
16. 効果が見えにくい ライティング改善 事業インパクトの ある施策 ライティングが重要なのは明白。 でもなかなか優先度が上がらない。
17. 2022.10〜 ライティング改善をスタート サービスリリースから4年目のタイミング
18. ライブ映像とライブ配信って どっちが正しいですか？ AppとWebで文言が 違うかも ... ... ... どういう背景でこの言い回し になったんだろ？
19. UX負債 UX Debt
20. 有志のメンバーで ライティング改善チームを組成 DESIGN APP WEB 事業の成長スピードは落とさず、品質にどう向き合うか
21. ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ちいさくはじめるライティング改善プロセス 01 全画面のライティングチェック 足元の課題を可視化する 02 ガイドラインの制作 ライティング改善のための基盤をつくる 03 浸透施策の実施 改善を続けていくための仕組みづくり Writing Guideline Product UI Page State Title Message Button /Link Help Center Campaign Contents TVs Contents
22. ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 01 全画面のライティング チェック 既存全画面のスクリーンショットを書き出しFigma上 に並べ、ライティングを精査。
23. 「“は”ありません」と「“が”ありません」 どっちが正しいかな 「“は”ありません」と「“が”ありません」 どっちが正しいかな 「〇〇画面に〜」って他でも使って る表現だっけ？ 「〇〇画面に〜」って他でも使って る表現だっけ？ 「選ぶ」って表記してるとこも あった！統一したいね 「選ぶ」って表記してるとこも あった！統一したいね
24. 229項目 Web 100箇所 / App 73箇所 / Design 56箇所 これだけの数が「良いライティング」になるなら やる価値ありそう！ ライティングへの感度かなり上がった！
25. 02 ライティングガイドラインの作成 洗い出した改善項目をもとにWINTICKETのライティングガイドを作成
26. ライティング改善の基盤 としてのガイドライン
27. ライティングガイドラインの役割 絶対に守らなければいけないルール 思考停止でルールに則ってライティングしてしまう 運用されず時間とともに機能しなくなっていく ライティングするときの道しるべ 完成されたものではなく、改善していくもの 迷いが減り、統一感が出る
28. Writing Guideline Product UI Page State Title Message Button /Link Help Center Campaign Contents TVs Contents ガイドライン適用範囲の整理 将来的な理想状態も見据えつつ 、 優先度の高いプロダクト内の文言をメインの適用範囲に まずは小さく
29. ガイドライン Slack上での議論 意思決定の背景を残す ガイドライン自体を見直せる余白をつくる
30. 用語 「選ぶ」ではなく「選択」と 表記する 「選ぶ」は日常生活の話し言葉で使われ、「厳密 ではない軽い感覚で1つ選ぶ」というニュアンスを 持ちます。 一方で、「選択」は「フォーマルな場面で選ぶこ と・適切なものを選ぶこと」を示唆しているよう なニュアンスを持ちます。 これを踏まえ、サービスとして軽い感覚で候補要 素を選ぶ場面の少なさや、選択行為の重要性を加 味して 「選択」 に統一します。
31. エンプティステート アクションに対して ポジティブにサポートする エンプティステートがユーザーのアクションによっ て変化する場合、そのアクションをサポートする ようなライティングをします。 何をすべきなのかがわからない 次のアクションに繋がりにくい とるべきアクション⁨⁩を ポジティブにサポートする
32. その他ガイドライン できることを伝えるときは基本 「〜できます」を使う 基本は冗長にならないよう「〜できます」を使い ます。ただ以下の場合*によっては「〜することが できます」を使うケースもあります * 行動（できること）をより強調したいとき * 他の選択肢もあり、「やりたかったらできるけど、しなくて もいい」というニュアンスを含むとき 基本は「〜できます」 「やりたかったらできるけど、 しなくてもいい」のニュアンス
33. 03 ライティング改善箇所の修正 「Rewrite Project」と称し、既存ライティングの改善箇所を実装・デザインともに書き直していく
34. ライティングチェック ツールの開発 ガイドラインを直接参照せずとも、ライティング 品質が担保できる仕組みづくり
35. 前半まとめ 実用性を求めて、ちいさくはじめる どうやってライティングの優先度を上げていくか？ 完璧さより、維持し続けられる仕組み 限られたリソースでどこに注力すべきか？
36. 実用性を求めて、 ちいさくはじめる 効果がわかりにくい ちいさくはじめる。 からこそ周りから 共感を得られ、応援される活動にするため、 まずは足元の課題から どうやってライティングの優先度を上げていくか？
37. 完璧さより、 維持し続けられる仕組み 完璧さを意識するとなかなか進まない。 、メンバーが抜けても変わらず 続いていく に注力する。 改善を前提に 仕組みづくり 限られたリソースでどこに注力すべきか？
38. Web Frontend 原島 一桂 2023年度 新卒入社 @1keiuu
39. ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ちいさくはじめるライティング改善プロセス 01 全画面のライティングチェック 足元の課題を可視化する 02 ガイドラインの制作 ライティング改善のための基盤をつくる 03 浸透施策の実施 改善を続けていくための仕組みづくり Writing Guideline Product UI Page State Title Message Button /Link Help Center Campaign Contents TVs Contents
40. 既存ライティングの改修 ガイドラインに即していない 文章・用語の洗い出し
41. で全ページのスクリーンショットを撮影 Web：Puppeteer App：Golden Test
42. Web100箇所、App73箇所の修正 既存ライティングの改修 Github Projectsで修正箇所を Issueとして管理
43. 既存ライティングの改修 エンジニアがライティングについて考える機会に コードレビューをすることで Web 2人 App 1人
44. 浸透施策の実施 ライティングガイドラインの整備と既存ライティングの改修はできた。 ただ、全員がルールに則った文章を書けるようにするのは難しい... 文章を添削するシステムを作って 誰もがガイドラインに沿った文章を書けるように！
45. Slack Appの作成 textlintによる文章校正の結果を返してくれるBot 浸透施策の実施
46. 浸透施策の実施 管理画面へのライティング チェックツール導入
47. お知らせ記事ページ キャンペーンの情報や新機能の告知 ライティングチェックツールの導入
48. ・文章校正ツールには を使用 textlint ・指摘箇所をハイライトするために の導入 Monaco Editor
49. ライティングチェックツールの導入 Good ・通信が発生しないので応答が早い ・（サーバー上で動かす場合に比べて）実装期間 が短い Bad ・ルール変更のたびにアプリケーション側に変更を 加える必要がある ・Figmaプラグインなど様々なプラットフォームか ら利用できるようにしたい ブラウザ完結での実装 @textlint/script-compiler を使ってコンパイルしたスクリプトをブラウザ上で動かす
50. textlintを動かして添削結果を返すAPIサーバー ライティングチェックツールの導入 管理画面 添削したい文章 添削結果
51. textlintのルールプリセットを作成 ライティングチェックツールの導入 textlint-rule-prh yaml管理で表記揺れを検出できる textlint-rule-preset-JTF-style JTF日本語標準スタイルガイドに即していない文章 を指摘
52. WINTICKETオリジナルの カスタムルールも追加 公開されているルールプラグインに加えた 推奨 / 非推奨のワード ライティングチェックツールの導入
53. 今後の展望 生成AIへの置き換え 9 textlint（正規表現）に比べてより柔軟な指摘ができる Figmaプラグイン 9 Ameba Spindleでの事例 9 を参考v FigmaAIにベータ版で実装されており導入できるか検証