はじめに
オンラインサロン事業部のデザインを担当している中山です。
2022年の1月に異動してきてから、あっという間に1年が過ぎました。
ここでは、私が開発グループに加わってから新たに取り組んだオンラインサロン開発チームのfigma運用方法をご紹介します。
figmaの運用ルールを整えた理由
オンラインサロンには管理画面、専用コミュニティ、SALON LIVE、トップページ、入会ページ、ライブラリページ、マイサロン等、多くのデザインファイルが存在しています。
以前は特に運用ルールがなく、各個人がデータを管理している状況でした。
2022年に、開発グループに多くのメンバーが加わったことをきっかけに、大人数でもスムーズなコミュニケーションをとり、作業効率を向上させることを目的にfigma運用ルールを設定しました。
各デザインデータの一覧作成
figmaのホーム画面では、お気に入りのファイルを表示しておくことはできますが、階層があるため全てのファイルを俯瞰してみることはできません。
そこで、新しく加わるメンバーにもデザインファイルの構造の全体感がすぐに把握できるように、各デザインデータの一覧を作成しました。
運用ルール
1.デザインデータ作成方法
デザイン開始日、タスク管理ツールのURLの記載場所、ステータスのラベルをそれぞれのデザインデータに添え、誰が見ても何に関するデザインかをわかりやすく伝えます。
残しておきたい情報に関しては仕様を書く緑のカード、メモを書く赤のカードを用意しました。2種類のカードをデザイン上に残しておくことで、「仕様や挙動が書いてある」ということが色で区別できます。また、メモのカードではデザインの経緯や議論した内容を共有し、再度同じような議論の繰り返しを防ぐことができます。
これらのラベルやカードは、汎用できるようにすべてコンポーネント化しています。
2.DevelopingファイルとMasterDesignファイル
デザインデータには大きく分けてDevelopingファイルとMasterDesignファイルの2種類があります。デザイン作業をDevelopingファイルで行い、実装後、MasterDesignファイルにマージします。
3.Pagesの使用方法
実装前のデザインデータは「--↓↓実装前↓↓--」下部にデザインファイルを置いておきます。
実装が終わると「--↓↓実装完了（後でマージ）↓↓--」下部にファイルを移動させます。マージの作業は急ぎのタスクではないため、時間が空いた際にデザイナーがMasterDesignにマージさせます。
運用ルールを整えてみて
今までバラバラだったデータ名が統一され、ステータスもラベルなどによって分かりやすくなったなど良かった点もありましたが、誰がどのタイミングでステータスラベルを変更するかが曖昧だったことから、完了しているデザインに「レビュー中」ラベルがついたまま残っているといったこともあり、これから改善していく必要があります。
また、デザインのマージ作業に関しては業務として優先度が下がりがちで、マスターデザインにマージされないままデザインが残ったままになる問題があるため、解決策を模索しています。
最後に
2023年も新たなメンバーを迎え、さらに賑やかで活気のあるオンラインサロン開発チームになります。
「前よりもfigmaデータが見やすくなった」と、メンバーに少しでも感じてもらえるように、これからも小さなところから改善していきます。
DMMオンラインサロンでは開発チームのメンバーを募集しています。
少しでもご興味を持たれた方、まずはカジュアル面談で気軽にお話ししてみませんか？
