UIUXデザイングループのグループ長を担当させていただいている小田と申します。
一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。
今回はモノタロウのデザインシステムのお話をしたいと思います。
デザインシステムの始まり
これは数年前の話です。
何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。 また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。
サービスの品質を上げるPDCAを早く回す為に土台（図1）を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。
分散していたスタイル：
作成したボタンのデザインシステムの一部：
図1：
詳細な過程は省きますが、基本のデザインの指針を持つために役員とディスカッションを重ねてデザインキーワード（図2）を決定しました。 キーワードを指針に具象のUIデザインがぶれないように全体像をくみ上げていきました。
メールデザインの方でもデザインを刷新する機会があり、刷新したデザインがキーワードの印象をユーザーに与えられているかSD法で検証し、有意差が出る結果になっています。
図2：デザインキーワード
サイト全体のUIパーツを洗い出す
デザインはサイトのメイン導線のページを主軸にして、リデザイン案を何案か作成しました。その中で一つのデザインを採用して、UIのパーツを分解していきました。
パーツをどういう単位でグルーピングするかは、アトミックデザインを参考に、モノタロウではどう展開するかをディスカッションして取り捨て選択して、グループを作りました。
細かく定義しすぎると再利用が難しくなるので、答えを出すのが難しかった記憶です。 レイアウト面では同時にグリッドシステムを検討して導入しました。
再利用可能なCSS設計
CSSの設計は、OOCSS、BEM、SMACSS、FLOCKSを参考にメリットデメリットを比較して、どこまで各方針のルールを守ると運用しやすいかをディスカッションしました。
結果、ファイル構成はOOCSSとSMACSSの掛け合わせ、CSSの書き方はBEMメインでSMACSSの良い所取りの構成になっています。
デザインシステムをサイトに反映、積み上げていく
初版が出来たデザインシステムを実際のサイトに充ててABテストを実施し、調整しながら展開していきました。
実際に反映してみると、足りないパーツや熟考しきれていない挙動などが出てきます。それを課題として修正して、常にデザインシステムを変更して積み上げていきました。
デザインシステムを正解とせずに常に「生き物」として柔軟に変更を考えていきましょう、とグループ内で話しています。
デザインシステムにルールの策定が必要に
規模が拡大するにつれて
積み上げていくことでコンポーネント・UIパーツ（後述からパーツと記載）の精度は上がってきていました。
ただ、それらのパーツを取り扱うにあたり、パーツ同士を組み合わせた時の前後の文脈が実装者個人の解釈によって違うので、認識のずれが発生することがありました。
また、デザインシステム作成後に入社したメンバーにとっては、パーツそのものの前提がわからず使いづらいといったことも起きていました。
モノタロウでは活発にデザインレビューをしているので品質は担保できるのですが、その分ディスカッションが長くなってしまいがちでした。
コミュニケーションルール策定の流れ
そこで、デザインシステムの中に、パーツを取り扱う為のルールを策定する事にしました。 ルールを定義するにあたって、他サイトのデザインシステムのルール内容を真似するという事はしませんでした。
UIのパーツはモノタロウのサイトを使うユーザーに対して、サイトが返答する「コミュニケーション」になります。
B2BのECサイトにとって鉄板の（一般化された）コミュニケーションの前例は少ないですし、独自である事に価値がある為、モノタロウのサイトを基本にコミュニケーションの分類を検討し、分類を各項目にして、各項目について文章作成しレビューでブラッシュアップしていきました。
レビューで気にしていた事は、モノタロウではどうすべきかという指針を書けているか、という事でした、ものによっては単に一般的な記事の寄せ集めのUIパーツの説明になってしまうので、「コミュニケーション」を読んで各人が実装する時に判断出来る材料になるようにしました。
コミュニケーションルールを策定する一連の流れは、UIデザイナーの中でもデザインリードという役割を担ってくれているメンバーに担当していただき、思考錯誤しながら作成してくれました、品質を守って案件を推進するメンバー自身が作る事で、実案件にも生きやすいですし、本人たちも学びになったという事でした。
ルールも一回作って終わりでは無いので、微調整を繰り返して行く予定です。
社内デザインシステムTOPページ：
これから
技術変化からの変更もありますが、それよりも根本的に考えていかないと行けないのは、変化に柔軟に対応できるように、手元の問題より先の視点を持って、何が本当に必要でどう実装思想を持つか、という、「設計」に比重をかけて考えます。
そして設計を重ねていき、作業を平準化すれば単純作業になっていくので、次々と来る曖昧なものを分解して、構成しなおして構造化していくという立ち振る舞いが大事になってきます。
こういった取り組みに興味がある方は是非MonotaROの求人要項をご確認ください。
