情報設計で共通言語を作りデザインにも活かす。カラーミーショップデザイナーてっちゃんの紹介
こんにちは！GMOペパボ EC事業部 デザインチームでプロダクトデザイナーをしています、tecchanです。最近は長男の子育てに奮闘しつつ、第二子が生まれるので育休を取得予定です。
生まれてくる子供の名前の画数についてスプレッドシートで分析したりしています。
業務では主に、カラーミーショップの管理画面の情報設計とUIデザインを行っています。また、ショッピングカート周りの改善も行っています。
これらと並行して、デザインシステムの推進役と、カラーミーショップのドメインモデルの策定、という大きなミッションにも取り組んでいます。
カラーミーショップにおけるデザインシステムの推進
GMOペパボでは現在、Inhouseというデザインシステムの開発を進めています。
Pepabo Design : Inhouseとは
デザインシステムとは、ブランドがタッチポイントを活用した体験設計を効率的におこなうために、あらかじめ原則やガイドラインを定めて、その実装としてカラーパレットやコンポーネントライブラリなどのアセットを用意したものです。
GMOペパボでは、カラーミーショップ以外にもminneやSUZURIなどの複数サービスを運営しています。
各サービスが個別に考えているような、原則やガイドライン、実装していたアセットのうち、重複しているものをすべてのサービスで使えるように一般化して活用できるように、あらかじめ用意しておいたものが共通基盤デザインシステム「Inhouse」です。
Inhouseはあたりさわりのない「ふつう」のプロトタイプを目指しています。
例えばチェックボックスに関しては、「基本的にONまたはOFF（trueまたはfalse）の値を持ち、2つの値から1つを選択・切り替えるために使用する」とか「2つ以上の値から単数選択する場合はラジオボタンが望ましい」等の基本的なことが書かれています。
それに加え、サービスによって挙動が分かれていそうな「indeterminate（mixed）な状態のチェックボックスをクリックした際の挙動について」の見解など「チェックボックスはこうあるべき」が記載されています。
このように、異なるサービスであっても当たり前に実現されていて欲しい要件やその指針となる記述がすでに用意されているということです。
カラーミーショップもこの基盤に乗り、車輪の再開発をなくし、デザインの判断コストを下げて、よりユーザーに価値を届けることに思考を集中できるよう取り組んでいます。
既存のカラーミーショップの開発環境に対して、Inhouseを取り込むための課題（レガシーなコードに新しいコードを入れ込むのをどうするか、すでにあるコンポーネントからの移行戦略など）があり、それらを解消すべく、橋渡し役として動いています。
ドメインモデルの策定
今後予定している管理画面の改善に向け、情報整理のために、使用されている言葉を集め、サービスのコアとなるような言葉とは何なのかを検討しています。
そして、これらの言葉の関係性を図示し、今までの構成を改めて見直せるようドメインモデルを策定しています。また、ドメインモデルで使用する言葉は実装上で使用される言葉とも一貫して使用されるべきもののため、ユビキタス言語を作成しています。
ドメインモデルができると、コンテンツモデル（実際にパブリッシュされる構造に関する図）を体系立てて作成できるようになり、ユーザーの認知に即した情報の提示ができるようになります。
さらに将来的には、機能開発の際の判断コストの削減が期待できます。例えば「営業日カレンダー」という機能に対して何かを改善したいという場面で、ショップというオブジェクトの属性である「営業日」という概念の他に、「配送」というオブジェクトが関わってくるんだろうな、という予測がつきやすくなり、その予測自体をチームで共有できます。結果として開発のスピードアップを見込めるのではないかと思っています。
職種ごとのドメインモデル活用のメリット
また、ドメインモデルはさまざまな職種に役立ちます。
例えば、デザイナーにとっては、ドメインモデルで使用する「オブジェクト」は、OOUIで使用する「オブジェクト」と本質的には同じため、オブジェクトベースでUIを設計しよう！となった際の材料として、ドメインモデルは役に立ちます。オブジェクト間の関係性が明確になり、破綻しにくい設計をすることができます。
エンジニアにとっては、ドメインモデルはそのドメインにおけるビジネスの知識を参照するのに役立ちます。ユーザーのために何が必要なのかを見失わず、データベース設計を行ったり、既存のデータベース設計の改善ポイントに気づくための助けになるかと思います。
プロダクトマネージャーにとっては、ドメインモデルはコミュニケーションツールとして役立ちます。職種の性質上、様々なステークホルダーとコミュニケーションを行う機会が多く、知識を噛み砕いて説明する時に概要を示す図としてドメインモデルを利用できそうだと思っています。また、ユビキタス言語を使用することで、他チームへ用語の理解を波及させることもできそうです。
5年前と今とで自分の成長を感じること
5年前の時点では、情報設計に関する解像度がまだ低かったなぁと思います。思い返すと、当時の自分は、何が解らないのか解らない、という状態でした。
※ 5年前のインタビュー記事
ペパボテックブログ : ペパボデザイナー巡り、次世代最強「てっちゃん」に聞く
2019年にCDO（kotarokさん）が入社したことをきっかけに、デザインのスキルについて更に詳細に言語化がされました。また、エキスパートスキルエリアが再定義され、ペパボのデザイナーが何を軸にどう関わるべきかが分かり、自分が専門分野としたい「情報設計」について、どんな知識が必要なのかが見えてきました。
ペパボHRブログ : デザイン経営を導入し、デザインの力でイノベーションを起こす！CDO就任インタビュー
また、特に成長のきっかけになったと感じたポイントとして、社内勉強会があります。
ペパボでは隔月でデザイナーの社内勉強会「Designer's MTG（通称デザミ）」を行っています。過去にIAをテーマにしたデザミにて、kotarokさんがわかりやすさを作るIAというテーマで話した回があり、学びがとても多く、モチベーションが高まりました。
山道でガイドがいるように、ペパボという環境で今後の成長の道筋が見えました。情報設計のエキスパートを目指しながら、事業部の枠を超えて活躍し、ユーザーさんに価値を届けられるプロダクトをデザインしていきたいです。
今後もカラーミーショップのデザインにご期待ください！
デザイナー向け会社紹介資料