Figmaデザインファイルの表紙を統一してアクセス性を向上させてみた

楽天は全社的にFigmaを使用しています。
本当に便利なので、デザイナーだけでなくプロデューサーやエンジニアも利用しています。

ラクマでは多数のPJが並行して走っているため、PJごとにデザインファイルを作成しています。
大きなPJではフェーズごとに個別のデザインファイルがあります。

私はサービスのリブランディングからデザインシステムのアップデートを担当し始めたのですが、データ編集中に意外と他の事業部の人が見に来ていることに気づきました（かくいう私も適当なワードで検索をかけてデザインファイルを覗いたりしています）。

表紙の見た目は多様ですが、表紙の設定されている事業部はスタイルが統一されていてサービスロゴが入っているため、キーワード検索を入り口としても、このデザインファイルがどこの何なのかが分かりやすくなっています。

AS-IS

ラクマはこのように「センタリング」「デザインファイルごとに色を変える」といった緩めのルールで運用していました。

In progress

たたきを作ってみました。

変更点

・モノクロ
・PJ名大きめ
・左上にラクマロゴを配置
・slackのチャンネルとリンクを追加
・情報は英語で
・いつ頃のPJなのか

- slackのチャンネルとリンクを追加した訳

レイアウトを組むにあたり過去のやりとりで気になったことを思い出し、下記を考慮しました。

PJに最初から参加している人ならslackチャンネルとFigmaファイルの名前が異なっていても問題なく把握できると思うのですが、QAやPRなど、後から参加される方から「この質問がこのチャンネルで合っているかわからないんですが…」と聞かれることがたまにあり、しかもFigmaのURLは人伝てに既にご存知だったりすることがあります。

チャンネル名を後から変えるのは影響を考えると厳しいため、デザインファイルの表紙にリンクを貼ることにしました。

後任デザイナーが経緯を探す時にも便利かもしれません。

- 情報は英語で

WantedlyでもRakuma Global Membersという記事シリーズが公開されている通り、ラクマは日本人の比率が多いとはいえ外国出身の英語話者のメンバーもいます。

また、楽天には横断的なUXチームがあり、頻繁にガバナンスレビューをお願いしているのですが、レビュワーの方が英語話者の時があります。
（ガバナンスレビュー用のFigmaは頑張って英語で概要を書いてます↓ おかしなところはご容赦ください）

情報へのアクセス性に言語の壁があったら嫌だな…と思ったため、デザインファイルも表紙から英語化することにしました。

Review

ラクマデザインチームの良いところは、どんなに雑なたたきでもレビューをしてくれるところです。
とても気に入ってるカルチャーです。

すぐさま数名のメンバーが反応してくれて、爆速で仕上がっていきました。
（slackへの雑な投稿↓）

載せられそうなレビューだけ載せますが、皆さん毎回すごいスピードでリアクションをくださるので嬉しいです…。

この神レビューをしてくれたメンバーはかもめちゃんという方で、今年のFigmaが主催するグローバルカンファレンスにスピーカーとして登壇していました。

After

完成しました！
PJ名とSlack Channelが必ずしも一致しないため、分けて記載することにしました。
これをコンポーネント化し、使用方法と一緒にデザインシステムに追加しました。

おわりに

今回はゆるりと業務改善の話を書いてみました。
ラクマデザインチームでは、日々こういった細かな改善や議論が闊達に飛び交っています。
カルチャーフィットしそうだな〜と思った方は、ぜひご応募ください！

ラクマ事業部でのUXデザイナーの取り組みもご覧ください。