BASEプロダクトチームブログ

ネットショップ作成サービス「BASE ( https://thebase.in )」、ショッピングアプリ「BASE ( https://thebase.in/sp )」のプロダクトチームによるブログです。

UXライティングのレビュー工数をtextlintで90%削減した件

はじめに

この記事はBASE Advent Calendar 2022の13日目の記事です。 はじめまして、BASEでエンジニアリングマネージャーをしている渋谷と申します。 今回は、textlintを導入したところレビュー工数が90%削減できたので技術的にどのようなアプローチをしたかについて紹介させていただきます。

背景

弊社にはUXライターが在籍しており、BASEプロダクト全般におけるテキストの品質を向上させる、UXライティングを行っています。

テキスト版デザインシステムとして「運用ガイドライン」「用語リスト」を作成し、あらゆるタッチポイントにおいて、日々テキストコミュニケーションの最適化を図っています。

UXライターが文言を作成するケースもありますが、UXライターでない方が文言を作成するケースが多く、その場合UXライターがレビューすることで品質を担保しています。

そのような取り組みの中で見えてきた2つの課題がありました。

  • ことばのトンマナ(トーン&マナー:デザインやスタイルに一貫性を持たせること)をひたすら磨く作業が、現状のテキストデザイン作業の大半を占めていること
  • 運用ガイドラインがあっても、品質の担保は、最終的にはどうしても属人的にならざるを得ないこと

つまり、表面的にはトンマナが統一されていることによって、一定のテキスト品質は担保されている一方、UXライティングの本来の役割である「体験をデザインすること」という本質に時間を割けていなかったのです。

そこでtextlintを導入し、トンマナを機械的に統一させようという試みがスタートしました。

(具体的な背景についてはUXライターの藤井が執筆したこちらの記事に詳しく記載されているので、ぜひ御覧ください)

textlintとは

textlintJSer.infoなどでおなじみのazuさんが開発されているOSSで、テキストファイルやMarkdownのための文章校正ツールです。

.textlintrcにルールを記述するとそのルールに従い校正が実行されます。

アプローチについて

大きく分けて2つのことを行いました。

  • textlintのためのルール設定
  • 誰でも使える環境の構築

textlintのためのルール設定

ルール設定までの経緯について

UXライターはもちろん非エンジニアであり、textlintの使い方に慣れていなかったため、エンジニアである私がサポートしながら進めることになりました。

設定したい校正ルールをUXライターの方にリスト化してもらい、そのリストに対してエンジニアの私がどのtextlintルールを適用できるか一つ一つ検討し、今回導入するパッケージを決定していきました。

設定したルールについて

弊社では下記パッケージを導入しています。

特に今回役立ったのはproofdictです。 proofdictは表記揺れやtypoなどを検知するための辞書管理ツールです。 弊社では単語の表記揺れ対策はもちろん、 下記のようなBASE独自ルールについてもproofdictを活用しました。

  • ()かっこは半角を使用しない
  • ・・・は……(全角三点リーダを2回繰り返す)にする
  • 金額表記は¥(全角)+半角スペースで表記する

誰でも使える環境の構築

textlintは文章校正がメインの機能になっており、利用する場合にどのエディタを使うかは利用者側に委ねられています。エンジニアの方はローカル環境にtextlintを npm install した上で、VSCodeなどのエディタ経由で利用することが多いと思います。しかし、今回の要件では非エンジニアの方がtextlintを利用するため、ローカル環境の構築はハードルが高く現実的ではありません。

そこでtextlint/editorです。 chrome拡張を使ってブラウザ上で文章校正を行うことができます。独自設定をインストールすることで独自の.textlintrcを反映させることもできます。

その結果わずか2ステップで導入することができました。

  • ステップ1:chrome拡張のインストール
  • ステップ2:BASE独自設定のインストール

ただし、このchrome拡張は2022年11月時点でtextareaタグのみに反応する仕様となっており、弊社で利用しているドキュメントツールであるKibelaやGoogleDocsでは利用することができませんでした。 そこで、textareaを有しテキスト内容をローカルストレージに自動保存する簡易なWebエディタを自作しそちらを使ってもらう運用にしました。

(この記事もそのエディタを利用して執筆しています)

導入した結果

UXライターの方いわく、「レビュー前のテキストの品質は、『トンマナ』という文脈においてはとんでもなく担保された! トンマナレビュー工数、体感で約90%削減!」とのことでした。

本来の役割である「体験をデザインすること」という本質に時間を割けるようになったそうです。

私としてもそのような結果は大変うれしく思いますし、なによりazuさんには感謝の気持ちでいっぱいです。

おわりに

本記事では、弊社でtextlintをどのように運用しているかについて説明しました。読んでいただいた方の助けに少しでもなれば幸いです。

明日はmatzzさん、yuniさんの記事が公開予定です、ぜひご覧ください。