運用・保守を重ねた基盤サービスだからこそ、デザインシステムを作ろう【続編】
LIFULL HOME'S でBtoB領域のデザインを担当している、望月です。
前回は以下の記事で、クライアント向けの物件入稿管理サービスでデザインシステムを作ってみた話をしました。
前回の記事の要点をまとめると以下になります。
・デザインシステムは、クライアントの利用実感を損なわない範囲でサービスの品質基準を定めていくことを目的としている
・サービスデザインに共通言語を持たせることが、安定したサービスを提供し続けられるカギとなる
・長く保守・運用が必要なサービスでは、デザインシステムという共通言語が存在することが職種間の将来的なコラボレーションを大きく助けていくことに繋がる
デザインシステムを構築することは、サービスをつくる上で重要なことがご理解いただけたのかなと思います。
今回の記事では、デザインシステムをどのようにチーム内で可視化し運用していったのか、その具体的な内容やプロセスをご紹介します！どうぞよろしくお願いします！
デザインシステムの構成要素
デザインシステムは、以下の要素で構成されています。
デザインシステムを構成する3つの要素
デザインシステムの構成要素を3つに分けると、以下のようになります。
・デザイン原則
・原則に基づいたルール (スタイルガイド)
・原則に基づいたツール (コンポーネントライブラリ)
デザイン原則については、LIFULLで共通で策定されているものがあるので、そちらを念頭におきながらスタイルガイドやコンポーネントライブラリを作成し、各プロダクトの設計を進めていきます。
今回は作成事例として1つの対B向けサービスを取り上げてみます。
A. スタイルガイドの作成
LIFULL HOME'S の物件情報を管理するツールに LIFULL HOME'S｜Manager 新築一戸建てと呼ばれるサービスがあります。
このサービスのデザインを行う際に共通指針となるスタイルガイドを作成しました。
デザインシステムの概念やそれに関するドキュメントやアセットがない状態でサイトのデザインを行うと、
・作業者ごとにUI表現が異なってしまう
・情報のまとめかたやレイアウトの設計思想がずれてしまう
・デザインの共通言語がない状態だとチェック者によっても基準や観点がずれる
…などなど
上記のような課題が生まれてきてしまうと考えられます。
そのような課題を解消するために、以下を意識して作成しています。
チーム内において共通理解を図る (→ 職種を超えたコラボレーションの実現)
デザイン作業・デザインチェックの効率化
デザイントークンやコンポーネント化のための実装指針
作成プロセスとしては、デザインチーム内で担当分担を行いディスカッションや確認を行っていきます。最終形が出来上がったら、スタイルガイドを管理するマスターのXDデータにまとめておきます。
このようにスタイルガイドを作成することで、チーム内でのデザインや実装、仕様策定に関するコミュニケーションが、一段と効果的かつスムーズになっていったと思っています！
またスタイルガイドは、デザイントークンやコンポーネント化を行う際の実装方針の基盤にもなり得るものなので、エンジニアやディレクターなどの他職種とのコミュニケーションにも大変役に立つものになります。
B. コンポーネントライブラリの作成
戸建てManagerのプロジェクトでは、Adobe XD を用いてデザインを行なっています。多岐にわたるページのデザインを1つのマスターデータで管理しています。
スタイルガイドをもとにして作成したデザインアセットをXDのCCライブラリに登録しておくと、作業のさらなる効率化やデータ作成の齟齬を防ぐことが可能になります。
CCライブラリに登録したデザインアセットはどのXDデータからも簡単に参照できるので、デザイン作成やパーツの運用・管理がグッとしやすくなるかと思います。
共通言語の可視化はサービス品質の向上を加速させる
いかがだったでしょうか。
サービス設計における共通言語を作り、適切に運用できるようにしておくことは、チーム内でのコラボレーションの質を向上させ、サービスの品質向上にもつながります。
そのためには適切な共有手段の選択と、何より言語作りの基盤となるチームワークがとても大切であると考えています。
お読みいただきありがとうございました！
---
クリエイティブ本部 デザイン部 サービスデザインユニット サービスデザイン1グループ
望月 陽太
2017年新卒入社。LIFULL HOME'S 売買領域のサービスデザインからキャリアをスタート。途中、LIFULLのコーポレートや地方創生に関するブランドデザインを経験。現在は LIFULL HOME'S のBtoB領域のデザインに従事している。（2022年10月時点）
この記事が気に入ったらサポートをしてみませんか？