サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

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


DMMオンラインサロン

コミュニティ

オンラインサロン

サーバサイド

バックエンド

フロントエンド

デザイン

見やすく！シンプルに！オンラインサロン開発チームのfigma運用ルール

プラットフォーム開発本部

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMM Factory

DMM FILMS

ぷらさぷ ～＋SURPRISE～

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMM FX

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM 地方創生

DMM.make 3Dプリント

DMM.make PRODUCTS

Seamoon Protcol by DMM Crypto

DMMバヌーシー

DMM EV ON

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Waitinglist

Algoage

DMMポイントクラブ

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

PCゲーム

通販

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

ハードウェア・プロダクト

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

VR体験

Web3

生成AI

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

社会インフラ

アミューズメント

ダイバーシティ

同人

ネットワーク

セキュリティ

ITインフラ

配信基盤

ペイメント

Android

データベース

ビッグデータ

データ分析

機械学習（ML）

MLOps

VR開発

フルスタック

プロトタイピング

グラフィックデザイン

イラスト作成

3DCG

モーショングラフィック

見やすく！シンプルに！オンラインサロン開発チームのfigma運用ルール

シェア

関連する求人

関連する記事

関連するサービス