テキスト管理を助けるFigma Pluginを作っている話
こんにちは、Manabie International Plt LtdというEdTechスタートアップでデザイナーをしています、三上蒼太(@sota_mikami)です。
この記事は Figma 開発 Advent Calendar 2022 の25日目の記事です。
テキスト管理のPluginを作りました..
.. と言いたかったのですがまだできておりません!使いたいという方がいらっしゃいましたらぜひ応援のシェアやいいねをお願いします..!
アドカレのトリである25日目を登録しておきながら申し訳ないです🙇♂️
コンセプト検証用に作成した超ラフLPがこちらです。ヒアリングにご協力いただいた皆様、ありがとうございました!!🙇♂️
やりたいこと:表記揺れを(楽に)根絶したい
デザイナーとしてUIを策定する際に、そこそこの頻度で表記の統一を気にしながら作業しています。作業全体においては小さなことではあるのですが、積み重なる一定のストレスがあります。
プロダクトの辞書スプシがかなりの量になっており、そもそもそのスプシを開くこと自体に大きな心理的ハードルがある
頻出するプロダクトコピーであればもちろん覚えているが、その記憶を頼って横着した結果やはり表記揺れを発生させてしまい得る
簡易のVoice&Tone, Writingガイドラインも用意したがいちいち確認するのは正直面倒
複数プロダクトに関わっていてその表記ルールが異なる場合、脳内記憶は困難
とはいえガイドラインを都度見に行くことは正直したくない。。(アクセシビリティが悪い)
Textlintという日本人の方が作られているプロジェクトを発見しました。こちらを拝見するに、いろんな表記ルールをシステム化できるということがわかります
自社のライティングガイドラインと合うようにこれをGUIで設定できて、Figma上で校閲できるようになれば幸せかもしれない
と思っていたらtextreviewAPIなるものがリリースされた。これは好機だ
Textlintの仕組みを参考に、プロダクト辞書とライティングルールの目視チェックからデザイナーを開放し、機会に校閲を任せられるライティングアシスタントあるいは編集者さんのようなサービスを作りたい
というところから構想を始め、誠意開発中です..!
やりたいこと2:すでに実装済みのコピーを簡単に直したい
表記揺れが起こらないようにLintの仕組みを作ったとしても、それは開発フローにおける間違いを無くせるにすぎず、すでに実装してしまっているテキストの問題には関与できません
普段プロダクトを触りながら、文言や表現の違和感に気づくことがあります
より良いライティングにすべく改善したいのですが、以下のような課題感があります
(もちろんものによりますが)基本的にはテキスト更新はビジネスバリュー(≒売上)に直結しにくく、機能開発などを優先させてしまいがち
コピーの更新という、言ってしまえばただのコピペ作業をエンジニアに依頼するのが申し訳ない。
自分で直してPullRequestを作ってしまうのが早いが、弊社ではワークフロー的に今それがやりにくい。また仮にOpenだとしてもGitに苦手意識のあるデザイナーあるいはPM人口は一定いるので「気づいた人がプルリク作ればいい」論は多少乱暴かもしれない
コードに慣れていないデザイナーも、PMも、なんならプロダクト外の職種の人も、みんなでプロダクトコピーを改善してPR出して、エンジニアはApproveするだけでOkな世界線にしたい
いくつか似たアプローチでサービス提供しているツールはあるのですが、いくつかの理由で自社には合わなかったので自分で作ってみようと思いました。(ただしこのトピックは初期版では実装対象外で、少し先に取り組むつもりです)
22年5月のFigma Schemaで登壇されていたDittoさんが似たアプローチの一つ
もしご興味があればぜひ事前登録をお願いします!
なるべく早く動くものを作り、価値検証していきます
まずは1つ目の「やりたいこと」を中心に、デザイナー向けの「UXライティングアシスタント」として機能と体験を磨いていきます
ゆくゆくは2つ目の「やりたいこと」に目を向けて、プロダクトチーム向けの「プロダクトコピーに関するデザインシステムマネージャー」として、面倒な仕事を代替してもらえるようなサービスにアップデートさせたいと思っています
興味がある方はぜひ以下のLPより事前登録をお願いいたします..!
読んでいただきありがとうございます!サポートは次回の執筆に役立てさせていただきます。 普段はTwitterでつぶやいています 👉https://twitter.com/sota_mikami