サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="はじめに">はじめに</h2>

<p>はじめまして！ 動画配信事業部 デザイナーの中田です。<br />
ユーザーの作品購入までの舞台となるDMM動画のECサイトにおいて、開発効率アップ⤴︎のため、日々カイゼンに勤しんでます！</p>

<p>今回は&nbsp;<strong>長期運用中のサービス「<a href="http://www.dmm.com/digital/" target="_blank">DMM動画</a>」の問題を解決しようとしている話</strong>&nbsp;をスタイルガイド編、コンポーネント編の2回に分けてお届けしたいと思います！</p>

<p>1回目のこの記事では、デザイナーの取り組みを中心に紹介させていただきます。<br />
自分たちと同様に、長期運用サービスの運用そのものや改修方法に悩まれている方の参考になれば幸いです。</p>

<h2 id="DMM動画の歴史">DMM動画の歴史</h2>

<p>「DMM動画」は、DMMが設立された1998年から20年間続いている長寿サービスです。<br />
まさにDMMとともに成長、拡大を続けてきました。</p>

<p>パソコンから始まり、フィーチャーフォン、スマホ、TV、ゲーム機、VR&hellip;&hellip;。<br />
新しい端末やコンテンツの普及に合わせて、視聴スタイルは日々変化しています。<br />
そんな&nbsp;<strong>新しい視聴スタイルをユーザーへ最速で届ける</strong>&nbsp;をモットーに、迅速に開発を進めてきました。</p>

<h2 id="速さを優先した開発の裏で起きていたこと">速さを優先した開発の裏で起きていたこと</h2>

<p>DMM動画ではサービスのデザインガイドラインが定義されていませんでした。<br />
10年前から存在するページもあれば、5年前に作られたページ、数ヶ月前に作られたばかりのページもあり、時期によってデザインがバラバラです。<br />
また、機能改修では対象となるページにのみ手を入れるため、同じデザインのページでも更新頻度に差があります。</p>

<p>その結果、同じ機能でもデザインの違うパーツや、同じデザインでも実装コードの違うパーツが混在する状態が生まれました。</p>

<p style="text-align:center"><img alt="" height="359" src="https://image.dmm-corp.com/xmbg731i1n8prs6m9xx68pw2lsa8" width="700" /></p>

<p>これまではその状態を抱えながらも「最速でリリースすること」を主軸に手を動かしてきました。<br />
ですが、そういった箇所が増えていくにつれ、一貫性のなさや再利用性の悪さが目につくようになり、メンテナンスコストの高さも頭を悩ませる問題になってきました。</p>

<h2 id="スタイルガイドを定義するまで">スタイルガイドを定義するまで</h2>

<h3 id="対策チーム発足">対策チーム発足</h3>

<p>1からデザインガイドラインを定義して、すべてを作り直せば解決しますが、スマートフォンだけで170ページ超あるDMM動画でフルリニューアルを行うには、膨大な時間がかかってしまいます。<br />
そこで、フルリニューアル以外で&nbsp;<strong>少しずつでもできること</strong>&nbsp;はないかと、ついに昨年、デザイナーとフロントエンドエンジニアで構成された&nbsp;<strong>UI管理し隊</strong>&nbsp;が発足！<br />
デザインの問題を解消すべく、パーツの一覧化、管理へ向けて動き出しました。</p>

<p>同じ時期、DMM動画の開発体制にも変化があり、デザイナー・フロントエンドエンジニア・サーバサイドエンジニアによるチームが組成されました。<br />
これまでは案件ごとにスキルを持った開発者でチームを組み、リリース後は解散していましたが、同じメンバーが継続していろいろな案件に携わるようになりました。<br />
デザイン・コード・プログラムの連携が取りやすくなったことで、デザインだけではなく実装コードの問題解消も視野に入ってきました！</p>

<h3 id="全体の把握">全体の把握</h3>

<p>DMM動画の場合、パーツの全容が見えない状態だったので、UIインベントリを作ることから始めました。</p>

<p>「<a href="http://bradfrost.com/blog/post/interface-inventory/" target="_blank">UIインベントリ</a>」は、サービスのUIパーツ、インタラクション、使用方法などをまとめたパーツカタログです。<br />
インターフェイスインベントリ、パーツリストとも呼ばれます。</p>

<p>サービスに使用されているパーツをもれなく抽出するため、DMM動画の全ページをリストアップ。<br />
以降の工程ではスクショを取らなくてもすむように、リストに沿って一度にスクリーンショットを集めていきます。</p>

<h3 id="パーツの分類">パーツの分類</h3>

<p>次にパーツを切り貼りして分類していきます。<br />
DMM動画のデザイナーは金沢と東京の二拠点で開発しているため、リアルタイムに共同作業ができるデザインツール「<a href="https://www.figma.com/" target="_blank">Figma</a>」を使用しました。</p>

<p>これまで、遠隔地での認識合わせにはSlackの画面共有を使っていました。<br />
画面共有ではhost側の操作が主体となるため、画面書き込みや口頭参加になる&ldquo;共有される側&rdquo;には細かなニュアンスは伝えづらく、修正も代表して一人が行なうものでした。<br />
また、作業ファイルも最新版をクラウド上で共有し、コンフリクトや巻き戻りに気を配る必要がありました。</p>

<p>一方で、Figmaを使ったやりとりでは、常に最新のファイルを同時に編集できます。<br />
通話しながら一斉に編集していくので完成までのスピードは早く、細かなニュアンスを伝えるのに四苦八苦することもありません。</p>

<p>今回は使っていませんが、Figmaにはシンボル化・プロトタイプ作成・コメント追加・コード書き出しと、UIデザインツールとして充実した機能が備わっています。<br />
これらの機能は無料版でも試すことができますので、気になった方はぜひ触ってみてください。</p>

<p>パーツの分類は次のように進めました。</p>

<ol>
	<li>大まかにパーツのカテゴライズを決めてFrame（アートボード）を作成</li>
	<li>カテゴライズに当てはまるパーツを貼っていく</li>
	<li>複数人でレビューを行い、カテゴライズの認識ずれを修正</li>
	<li>2〜3を繰り返し</li>
	<li>現在のUIインベントリが完成！</li>
</ol>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="402" src="https://image.dmm-corp.com/rvlhy02xl54gx3k65o039k173j2i" width="700" />
<figcaption>▲Frame。カテゴリーは何人かで出しました</figcaption>
</figure>
</div>

<p>&nbsp;</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="402" src="https://image.dmm-corp.com/9hq5lfr402qupluavhrlcqv7t0es" width="700" />
<figcaption>▲一気に集めていきます！</figcaption>
</figure>
</div>

<h3 id="スタイルの仕分け">スタイルの仕分け</h3>

<p>この段階では、まだ文字サイズや色などスタイルに一貫性がないため、UIインベントリを元にFigmaでスタイルを仕分けしていきます。</p>

<p>スタイルの仕分けは次のように進めました。</p>

<ol>
	<li>一貫性を持たせたいスタイル区分を決めてFrameを作成</li>
	<li>UIインベントリーを元に、スタイル区分に当てはまるスタイルを集める</li>
	<li>類似するスタイル同士を統合して、用途やルールを定義</li>
	<li>3で定義したルールを元に、既存ページに適用したカンプを作成</li>
	<li>複数人でレビューを行い、違和感や矛盾を感じるものを修正（現在このステップを実施中）</li>
	<li>3〜5を繰り返し</li>
</ol>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="402" src="https://image.dmm-corp.com/inmc3w4a2ze31g1i48j5d32kmles" width="700" />
<figcaption>▲色を抽出していく図</figcaption>
</figure>
</div>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="592" src="https://image.dmm-corp.com/e7fpknjb6xucb19gvk81cbw55umg" width="700" />
<figcaption>▲Before。ブレブレです</figcaption>
</figure>
</div>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="175" src="https://image.dmm-corp.com/a0h4k74a2rspou87tfdylesyfwe8" width="700" />
<figcaption>▲After！スッキリ！</figcaption>
</figure>
</div>

<p>&nbsp;</p>

<p>この先は、ある程度ルールを定義したスタイルガイドを元に、デザインデータを作成していきます。<br />
スタイルガイドは定義して終わりではないので、サービス展開に合わせて適宜アップデートをかけていきます。</p>

<h2 id="データ作成と管理について">データ作成と管理について</h2>

<p>デザインデータの作成には「<a href="https://www.sketchapp.com/" target="_blank">Sketch</a>」を使用します。</p>

<ul>
	<li>ライブラリ機能で、ドラッグ＆ドロップでページ組み立てができること</li>
	<li>シンボル機能で、修正すれば使用箇所すべてに反映できること</li>
	<li>プラグインの豊富さ</li>
	<li>外部サービスとの連携の良さ</li>
	<li>多くのサービスをプロジェクト管理できること</li>
</ul>

<p>以上の理由で選定しました。</p>

<p>外部サービスとの連携は、すでにDMM動画の一部プロダクトで導入されており、「<a href="https://www.invisionapp.com/" target="_blank">InVision</a>」を利用して画面の共有やレビューを行っています。</p>

<p>将来的に「<a href="https://support.invisionapp.com/hc/en-us/articles/115005685166" target="_blank">InVision Design System Manager</a>」や「<a href="http://www.standardinc.jp/reflection/article/abstractapp/" target="_blank">abstract</a>」「<a href="https://kactus.io/" target="_blank">kakutas</a>」との連携で、Sketchデータのバージョン管理も導入できないか検討中です。</p>

<h2 id="まとめ">まとめ</h2>

<p>いかがでしたでしょうか？</p>

<p>デザインとコード、プログラムを整備した近い未来、これまでできなかった広範囲の改善・修正を、これまでできなかったスピードでできるようになります。</p>

<p>動画配信事業部として、今後もより快適な動画サービスをお届けできるよう励んでいきますので、どうぞよろしくお願いします！</p>

<p>次回はフロントエンドエンジニアによる取り組みの、<a href="https://inside.dmm.com/articles/components/" target="_blank">コンポーネント編</a>です。<br />
実装コードの問題解決について紹介しますので、お楽しみに〜！！</p>

<p>&nbsp;</p>


DMM TV

動画

フロントエンド

デザイン

DMM動画サービスの問題を解決しようとしている話（スタイルガイド編）

DMM動画サービスの問題を解決しようとしている話（スタイルガイド編）

シェア

関連する求人

関連する記事

関連するサービス