【デザインシステムPJ】活動レポート第1回

はじめまして
デザインシステムPJです。

デザインシステムPJとは、デザインの一貫性の担保と、生産効率の向上により、顧客体験を向上させることを目指し、デザインシステムの構築に取り組んでいるPJです。

デザインシステムとは、一言で言えばデザインに関するあらゆる情報を内包している仕組みのことです。
デザインシステムは、デザイナーだけでなく、ディレクター、エンジニアなどサービスに関わる全ての方に知って、使っていただくことでより効果を発揮します。
そこで今回はPJの活動レポート第1回として、デザインシステムや、PJについて知っていただくために、PJ発足のきっかけや、取り組みについてお話ししたいと思います！

メンバー紹介

• I.M
  2023年9月中途入社。UXデザイン3課所属。
  CXLabのロゴ成作、スキイキのリニューアルデザインをはじめ、UIを中心とした社内の様々なデザインを担当。
  前職はインハウスのデザイナーとして、自社アプリのデザインを担当。
  英国ゴールデンレトリバーを飼っている。
• G.G
  新卒2年目。UXデザイン2課所属。
  マイナビ転職 WEB UI UXデザイン、その他サービスのLP制作やバナー、サムネイル制作などを担当。
  小さい頃から音楽と映画が好きなゲーマー。
• K.K
  2022年7月中途入社。UXデザイン1課所属。（大阪支社）
  マイナビPlaceロゴ制作、歯科衛生士Freshロゴ制作、とらのすけキャラクターデザイン（ゼネラルのイントラサイト用）、ジョブサーチアプリの UI デザインやメディカルゼネラル領域のサイトのデザインやコーディングなど領域問わず担当。
• Y.M
  2023年9月中途入社。UXデザイン2課所属。
  オーベンネーベンロゴ制作、マイナビ転職 APP/WEB UI UXデザイン、
  その他サービスのLP制作やUI改善などを担当。
  前職はインハウスのデザイナーとしてEC領域でのWEB周りのデザインを担当。
  派手さがなく言葉が少なめの映画やサスペンスもの・B級ホラー好き。
• Y.Y
  2023年新卒入社。4歳〜高校まで英語のみに特化。国際系学科出身。大学でビジュアルデザイン専攻→UI/UXデザイナー。
  紹介系をはじめ、多領域のデザイン制作に従事。LP、バナー作成。
  デジタルテクノロジー戦略本部ロゴ作成。UXリサーチPJ。
  サンフランシスコにてFIgma Configに参加。
  好きなもの多数。ハマっているのはコースター集めと体幹トレーニング。

PJ発足のきっかけ

課題

私たちUXデザイン部は、全社のサービスに携わらせていただいております。
1対1の担当制ではないため、一人が複数のサービスに携わり、一つのサービスに複数人が関わっています。
そのような中で、日々デザイン業務をする中で、課題に感じていることがありました。

1. 共通認識がない
   ・ガイドラインなどがないためデザインの基準がデザイナーの裁量に依存している
   ・ガイドラインがある場合も運用,更新がされていない状態
   ・デザインを言語化したもの（共通認識）がない状態
   (明確な方針が反映されない＝クオリティの担保が難しい)
2. ユーザビリティの考慮不足
   ・同社サービス内で同じ役割で異なる見た目のものが散見される
   ・他デザイナー間・外部ベンダーなど、共有した際に起こるカラーなどの微妙なズレが生じている
   ・WEBユーザビリティ・アクセシビリティについて考慮する必要がある(2024年4月に障害者差別解消法の改正法により、行政機関だけでなく民間事業者でも「合理的配慮の提供」が義務化されました)
3. 本質的ではないところにかかる工数
   ・どのデザインが最適なものか判断が難しい
   ・共通のコンポーネントがないため、毎回1からデザイン,実装をする必要がある

新しいサービスの案件を担当する度に、ガイドラインの在処を探したり、今あるデザインの正誤を判断するといったことも含めて、本来不要な部分に工数がかかってしまっていました。

これらの課題を解決するために、デザインの基準や指針となるガイドラインや、マイナビのサービスで包括的に扱えるコンポーネント（UIパーツ）が必要でした。
多岐にわたるマイナビのサービスに対応できるよう、私たちはデザインシステムの標準化に取り組みました。

デザインシステムとは？

デザインシステムとは

• デザイン原則：企業理念やブランドの方針をデザインに反映したもの。デザインの指針。
• スタイルガイド（ファンデーション）：デザイン原則に基づき、文字や色などのデザインに関するルールをまとめたもの。
• コンポーネントライブラリ：ボタンやナビゲーションなど、再利用できるUIパーツをまとめたもの。コードと連携しているため、コードを書く際に呼び出すことができる。

の3つが互いに作用してできている、デザインに関するあらゆる情報を内包している仕組みです。

デザインシステムは、近年徐々に聞くようになってきた概念で、Googleのマテリアルデザインや、国内ではデジタル庁などもデザインシステムを公開し、話題になっています。
デザインのイベントやメディアサイトなどで「デザインシステム」というワードを耳にすることは増えてきたものの、その制作過程や社内浸透の方法については、公開されている情報や文献が非常に少なく、PJでも試行錯誤しながら取り組んでいます。

デザインシステムにできること

デザインシステムがあることで、デザイン原則・スタイルガイドによって、デザインに携わる全員が、使っている色やフォント,指針が分かるため、デザインの一貫性やクオリティの担保ができます。
また、コンポーネントライブラリによって、デザインも開発も、あらかじめ作成されているコンポーネントを呼び出すだけで、ガイドラインやアクセシビリティが考慮されているUIパーツを利用することができ、圧倒的な工数削減につながります。
そして、デザイナー、コーダー、ディレクターなど、サービスに関わる全員の共通言語になることで、コミュニケーションコストの削減も期待できます。

現状の課題で出てきていた、

1. 共通認識がない
2. ユーザビリティの考慮不足
3. 本質的ではないところにかかる工数

の3つの課題についても、このように解決できるといえます。

デザインシステムに縛られる？

デザインシステムは便利そうだけど、
自由に作れなくなるんじゃ…？なんでも決められちゃうの？といった不安もあるかもしれません。

デザインシステムは縛りではありません

デザインシステムはあくまで意思決定の基礎です。
意図しない差分や、それらの集積による混乱が起きるのが課題であって、基礎を理解した上で、意図を持って外すことは問題ありません。
「自由を支える」システムでありたいと私たちは思っています。

デザインシステムPJの今後

私たちの目標は
デザインの一貫性の担保と、生産効率の向上により、顧客体験を向上させることです。

デザインシステムが全社的に運用されている状態を作ることで、ユーザーはマイナビのどのサービスを利用しても、アクセシビリティの担保や操作感の一貫性があり、誰もが混乱することなく使えるようにする
また制作サイドにおいては、本質的ではない部分に時間を取られることなく、顧客体験の向上を考えることに時間を使えるようになる

こうしたことでパーパスである、
一人ひとりの可能性と向き合い、
未来が見える世界をつくる。
に少しずつ近づけるのではないかと考えました。

デザインシステムに完成はありません。
利用しながら更新,改善を繰り返して運用していくものです。
デザイナーだけでなく、皆様からのご意見ご要望を取り入れながら、より使いやすい、誰もが使えるデザインシステムの作成を目指して活動して参ります。

今後の活動につきましては、本サイトにて共有させていただく予定ですので、是非ご覧ください。

デザインシステムPJをよろしくお願いいたします。