Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Designer 若森 龍太朗 2022年度 新卒入社 @ryutarowkm

Slide 3

Slide 3 text

CONTENTS ちいさくはじめるライティング改善のプロセス 若森 龍太朗 前半 良いライティングを浸透させる施策の実践 原島 一桂 後半

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

レース映像を ライブ配信 AI予想など 項目が充実 豊富な データベース ABEMA 番組連動

Slide 6

Slide 6 text

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へと急成長 サイバーエージェント決算資料より引用

Slide 7

Slide 7 text

サービスのライティング改善

Slide 8

Slide 8 text

ライティング サービス内で使われる言葉すべてのこと

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

ライティングあり ライティングなし

Slide 12

Slide 12 text

ライティング、実は結構難しい。

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

⁨ ⁩ “良いライティング”は気づかれにくい

Slide 16

Slide 16 text

効果が見えにくい ライティング改善 事業インパクトの ある施策 ライティングが重要なのは明白。 でもなかなか優先度が上がらない。

Slide 17

Slide 17 text

2022.10〜 ライティング改善をスタート サービスリリースから4年目のタイミング

Slide 18

Slide 18 text

ライブ映像とライブ配信って どっちが正しいですか？ AppとWebで文言が 違うかも ... ... ... どういう背景でこの言い回し になったんだろ？

Slide 19

Slide 19 text

UX負債 UX Debt

Slide 20

Slide 20 text

有志のメンバーで ライティング改善チームを組成 DESIGN APP WEB 事業の成長スピードは落とさず、品質にどう向き合うか

Slide 21

Slide 21 text

・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ちいさくはじめるライティング改善プロセス 01 全画面のライティングチェック 足元の課題を可視化する 02 ガイドラインの制作 ライティング改善のための基盤をつくる 03 浸透施策の実施 改善を続けていくための仕組みづくり Writing Guideline Product UI Page State Title Message Button /Link Help Center Campaign Contents TVs Contents

Slide 22

Slide 22 text

・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 01 全画面のライティング チェック 既存全画面のスクリーンショットを書き出しFigma上 に並べ、ライティングを精査。

Slide 23

Slide 23 text

「“は”ありません」と「“が”ありません」 どっちが正しいかな 「“は”ありません」と「“が”ありません」 どっちが正しいかな 「〇〇画面に〜」って他でも使って る表現だっけ？ 「〇〇画面に〜」って他でも使って る表現だっけ？ 「選ぶ」って表記してるとこも あった！統一したいね 「選ぶ」って表記してるとこも あった！統一したいね

Slide 24

Slide 24 text

229項目 Web 100箇所 / App 73箇所 / Design 56箇所 これだけの数が「良いライティング」になるなら やる価値ありそう！ ライティングへの感度かなり上がった！

Slide 25

Slide 25 text

02 ライティングガイドラインの作成 洗い出した改善項目をもとにWINTICKETのライティングガイドを作成

Slide 26

Slide 26 text

ライティング改善の基盤 としてのガイドライン

Slide 27

Slide 27 text

ライティングガイドラインの役割 絶対に守らなければいけないルール 思考停止でルールに則ってライティングしてしまう 運用されず時間とともに機能しなくなっていく ライティングするときの道しるべ 完成されたものではなく、改善していくもの 迷いが減り、統一感が出る

Slide 28

Slide 28 text

Writing Guideline Product UI Page State Title Message Button /Link Help Center Campaign Contents TVs Contents ガイドライン適用範囲の整理 将来的な理想状態も見据えつつ 、 優先度の高いプロダクト内の文言をメインの適用範囲に まずは小さく

Slide 29

Slide 29 text

ガイドライン Slack上での議論 意思決定の背景を残す ガイドライン自体を見直せる余白をつくる

Slide 30

Slide 30 text

用語 「選ぶ」ではなく「選択」と 表記する 「選ぶ」は日常生活の話し言葉で使われ、「厳密 ではない軽い感覚で1つ選ぶ」というニュアンスを 持ちます。 一方で、「選択」は「フォーマルな場面で選ぶこ と・適切なものを選ぶこと」を示唆しているよう なニュアンスを持ちます。 これを踏まえ、サービスとして軽い感覚で候補要 素を選ぶ場面の少なさや、選択行為の重要性を加 味して 「選択」 に統一します。

Slide 31

Slide 31 text

エンプティステート アクションに対して ポジティブにサポートする エンプティステートがユーザーのアクションによっ て変化する場合、そのアクションをサポートする ようなライティングをします。 何をすべきなのかがわからない 次のアクションに繋がりにくい とるべきアクション⁨⁩を ポジティブにサポートする

Slide 32

Slide 32 text

その他ガイドライン できることを伝えるときは基本 「〜できます」を使う 基本は冗長にならないよう「〜できます」を使い ます。ただ以下の場合*によっては「〜することが できます」を使うケースもあります * 行動（できること）をより強調したいとき * 他の選択肢もあり、「やりたかったらできるけど、しなくて もいい」というニュアンスを含むとき 基本は「〜できます」 「やりたかったらできるけど、 しなくてもいい」のニュアンス

Slide 33

Slide 33 text

03 ライティング改善箇所の修正 「Rewrite Project」と称し、既存ライティングの改善箇所を実装・デザインともに書き直していく

Slide 34

Slide 34 text

ライティングチェック ツールの開発 ガイドラインを直接参照せずとも、ライティング 品質が担保できる仕組みづくり

Slide 35

Slide 35 text

前半まとめ 実用性を求めて、ちいさくはじめる どうやってライティングの優先度を上げていくか？ 完璧さより、維持し続けられる仕組み 限られたリソースでどこに注力すべきか？

Slide 36

Slide 36 text

実用性を求めて、 ちいさくはじめる 効果がわかりにくい ちいさくはじめる。 からこそ周りから 共感を得られ、応援される活動にするため、 まずは足元の課題から どうやってライティングの優先度を上げていくか？

Slide 37

Slide 37 text

完璧さより、 維持し続けられる仕組み 完璧さを意識するとなかなか進まない。 、メンバーが抜けても変わらず 続いていく に注力する。 改善を前提に 仕組みづくり 限られたリソースでどこに注力すべきか？

Slide 38

Slide 38 text

Web Frontend 原島 一桂 2023年度 新卒入社 @1keiuu

Slide 39

Slide 39 text

・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ちいさくはじめるライティング改善プロセス 01 全画面のライティングチェック 足元の課題を可視化する 02 ガイドラインの制作 ライティング改善のための基盤をつくる 03 浸透施策の実施 改善を続けていくための仕組みづくり Writing Guideline Product UI Page State Title Message Button /Link Help Center Campaign Contents TVs Contents

Slide 40

Slide 40 text

既存ライティングの改修 ガイドラインに即していない 文章・用語の洗い出し

Slide 41

Slide 41 text

で全ページのスクリーンショットを撮影 Web：Puppeteer App：Golden Test

Slide 42

Slide 42 text

Web100箇所、App73箇所の修正 既存ライティングの改修 Github Projectsで修正箇所を Issueとして管理

Slide 43

Slide 43 text

既存ライティングの改修 エンジニアがライティングについて考える機会に コードレビューをすることで Web 2人 App 1人

Slide 44

Slide 44 text

浸透施策の実施 ライティングガイドラインの整備と既存ライティングの改修はできた。 ただ、全員がルールに則った文章を書けるようにするのは難しい... 文章を添削するシステムを作って 誰もがガイドラインに沿った文章を書けるように！

Slide 45

Slide 45 text

Slack Appの作成 textlintによる文章校正の結果を返してくれるBot 浸透施策の実施

Slide 46

Slide 46 text

浸透施策の実施 管理画面へのライティング チェックツール導入

Slide 47

Slide 47 text

お知らせ記事ページ キャンペーンの情報や新機能の告知 ライティングチェックツールの導入

Slide 48

Slide 48 text

・文章校正ツールには を使用 textlint ・指摘箇所をハイライトするために の導入 Monaco Editor

Slide 49

Slide 49 text

ライティングチェックツールの導入 Good ・通信が発生しないので応答が早い ・（サーバー上で動かす場合に比べて）実装期間 が短い Bad ・ルール変更のたびにアプリケーション側に変更を 加える必要がある ・Figmaプラグインなど様々なプラットフォームか ら利用できるようにしたい ブラウザ完結での実装 @textlint/script-compiler を使ってコンパイルしたスクリプトをブラウザ上で動かす

Slide 50

Slide 50 text

textlintを動かして添削結果を返すAPIサーバー ライティングチェックツールの導入 管理画面 添削したい文章 添削結果

Slide 51

Slide 51 text

textlintのルールプリセットを作成 ライティングチェックツールの導入 textlint-rule-prh yaml管理で表記揺れを検出できる textlint-rule-preset-JTF-style JTF日本語標準スタイルガイドに即していない文章 を指摘

Slide 52

Slide 52 text

WINTICKETオリジナルの カスタムルールも追加 公開されているルールプラグインに加えた 推奨 / 非推奨のワード ライティングチェックツールの導入

Slide 53

Slide 53 text

今後の展望 生成AIへの置き換え 9 textlint（正規表現）に比べてより柔軟な指摘ができる Figmaプラグイン 9 Ameba Spindleでの事例 9 を参考v FigmaAIにベータ版で実装されており導入できるか検証