「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。

そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。

「なぜそのタイミングでつくったの？」
「Design Systemをつくった目的は？」

そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。

※撮影時のみ、マスクを外しています。

Design System誕生のきっかけを与えた、ロゴリニューアル

ーメルカリグループでDesign Systemが誕生・導入されたのは2019年夏ごろでした。なぜこのタイミングだったんでしょうか？

@kitaj：もともと、開発効率向上や見た目の一貫性を担保したいニーズはありました。そんななか、大きなきっかけになったのが2018年10月に実施した、ロゴなどのリブランディングです。同時に、以前まではバラバラだったカラーやデザインのトンマナも一気に整え、「共通言語」として使えるようにDesign Systemをつくることにしました。

北井孝直（@kitaj）

ーバラバラだった？

@tottie：Design Systemができるまでは、フリマアプリ「メルカリ」でつくられてきたデザインには「同じようで同じじゃない」ものがいくつかありました。ロゴに使われている赤色も、よ〜く見ると色が違っていたり。一時は、アプリ内に7種類の赤色があったんですよ？

ー7種類！？

@kitaj：もちろん、どれもぱっと見では「同じ赤」に感じるレベルのものですが（笑）。これまでのメルカリは、急成長を遂げるためにスピードを最優先してサービスをつくってきました。その結果、デザインを担当するメンバーによって、フォントサイズやカラーなどのスタイルが異なることもあったんです。しかし、事業・組織規模ともに拡大した今は、これまでのやり方では通用しない。プロダクトにおけるデザインルールを統一していく意味合いも込め、Design Systemが求められていたんです。

@tottie：あと、メルペイ誕生もきっかけの1つでしたよね。@kitajさんが言うように、デザイナーによって少しずつデザインへの認識が異なるなか、会社をまたぐようになるとさらに認識のズレを揃えるハードルが上がってしまう。そういった理由もあり、このタイミングでデザインガイドラインを含む Design Systemの需要は高まっていました。

戸塚香里（@tottie）

@morishy：当初、Design Systemづくりに専属チームはなく、Product Designチームのメンバーが兼務。内容がかたまり始めた段階で、エンジニアやPM、TPMも加わり、社内に専属チームができました。

見え方も実装も異なるアプリ・Webをどう統一した？

ー「デザインの共通認識をつくる」となると、どんな工程が必要だったんですか？

@tottie：一番慎重に、そして大事に進めたのが「認識のすり合わせ」です。そこで、まず取り組んだのが、デザインガイドラインの作成でした。これまでメルカリでは、 Design Principles（デザイン原則）と呼べるものがなかったんです。今後より事業も組織も大きくなるなか、先ほど@kitajさんも話していたデザインのアウトプットだけでなく、「メルカリが大切にするデザイン」の解釈が人によって異なってしまう可能性もありました。

そのため、メルカリ・メルペイでワークショップを合同で実施し、メンバーが潜在的に感じていたことを言語化。それをもとにDesign Principlesを作成し、さらにDesign Systemのスタイルやコンポーネントを定義。コンポーネント単位でUIガイドラインもつくりました。

@morishy：同時に、OSごとの認識も整理しました。メルカリは、リリース当時はアプリだけでしたが、しばらくしてWeb版も誕生しています。しかし、アプリとWebでは機能差分があったり、UIも違っていたり…。とはいえ、お客さまにとっては同じ「メルカリ」なんですよね。一貫したサービス体験を提供するために、共通認識をつくるところからスタートしました。異なる仕様をクロスプラットフォームでどう扱うかを議論し、共通管理する方法を検討したんです。

森下彰子（@morishy）

@tottie：機能差分や見た目だけでなく、それぞれのOSごとに異なったガイドラインが存在し、かつ実装言語も構造も違う。共通UIとして管理しつつ、デスクトップならではの仕様をどうするかは悩みました。ここは、@morishyさんが寄り添ってくれていた部分です。

ーアプリとWebページでは、検索フォームも違いますもんね。

@tottie：そうなんです。デスクトップではマウスのほかにキーボード操作も想定するため、異なる設計をする必要があります。なので、現場メンバーとのすり合わせは重要。iOS、Android、Webそれぞれのプラットフォームのエンジニアへヒアリングし、いろいろなガイドラインや他社サービスのDesign Systemを参考にしながら設計していきました。

ーそうして完成したDesign Systemですが、特にこだわったところは？

@tottie：ダークモードの切り替えと、アクセシビリティコントラストですね。カラースタイルは慎重に検討し、ダークモードとライトモードの切り替えで背景色と文字色が変化しても、共通のコントラスト比率になるように設計しています。これによって、モードが切り替わっても、お客さまに安定した視認性を提供することができます。ここは、Design Systemを担当することになったとき、個人的にも「ちゃんとやろう」と思っていた部分でもあります。（※ダークモード対応は現在開発中です）

ーメルペイ側とは、どうやって話し合いを進めたんですか？

@tottie：一時期はメルカリ・メルペイ両方のデザイン定例に出席し、「今どんなUIが動いているのか」を把握。Design Systemで新しいコンポーネントをつくるときに「これは使い勝手が良い」「これは不便」「イレギュラーのケースにどう対処するか」などをヒアリングしました。定例で質問しづらいところは、1on1でフォローもしていましたね。

導入後、「業務効率があがった」と感じるメンバーは9割以上！

@kitaj：僕はどちらかというと「Design Systemを使う側」として、各チームにオンボーディングしていく役割。PMもエンジニアも、Design Systemを導入することで将来的に開発での負担を下げられることは理解してくれていました。ただ、今までの開発スタイルを変えることもあり、導入コストは高かったですね。ようやく、それぞれの開発チームでもDesign Systemで用意されたアセットを使ってつくる…の認識が浸透したと感じ始めています。これは僕だけでなく、デザインチームが一丸となってトライしたところでもあります。

@kitaj：また、Design System自体がここ数年で業界のスタンダードになりました。僕らとしても、このタイミングでDesign Systemづくりに携われたことは非常にいい経験でしたね。僕自身もデザイナーとして、UIを考えたりリサーチしたりするなど、本当にフォーカスすべき業務に時間をかけられるようになりました。

@tottie：ですね！導入前後でとったアンケートで「業務効率があがった」と感じるデザイナーはメルカリ・メルペイ合わせて9割以上でした。効果は出始めています！

@morishy：Design SystemがあることでUIのルールが整い、お客さまに一貫したサービス体験を提供できます。そして、デザイナーは「どのようにその体験を設計するか」に集中できるようになる。これも、Design Systemの目的の1つでした。私もデザイン業務のスピードが格段に上がったと感じたときは、感動しましたね…。仕組み化は大変でしたが、情報設計ができれば、あとはコンポーネントを入れて調整するだけ、とできたのは本当に良かったです。

ーよかった！

@tottie：私たちデザイナーの本来の仕事は「お客さまにどんなサービス体験を提供するか」を考えること。メルカリで働くデザイナーがそこにしっかり時間をかけられるよう、さらに磨き込んでいきたいですね！