Design Systemを学びたいデザイナーへ
こんにちは、UX/UIデザイナーのShannenです。
直近2年ぐらい、ずっとDesign System（下記DS）TeamでDSの構築＆運用しています。マスターになったとは言えないが、デザイナーはよくDSに誤解したり、勉強しようとしてもわからなったりするのを実感して、この記事を書きました。
もしかしてDSに興味があるデザイナーの力になれば幸いです。
DesignSystemをやるには認識してもらいたいこと
作業ベースのスキルを学ぶなら、GoogleやYutubeで検索すると、いくらでも出てきます。ただ、勉強する前にDSをいくつのポイントを認識してもらいたいです。
DesignSystemはデザインUIKitだけではない
実際に業務をやる時、DS＝デザインのガイド＋デザインUI Kitと認識しているデザイナー意外と多かったです。ただ、DSはそうではない。
デザインシステムの概念を尋ねると
At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. Think of it as a blueprint, offering a unified language and structured framework that guides teams through the complex process of creating digital products.
デザインシステムの核心は、製品や体験のルック＆フィールの一貫性を保つためのビルディングブロックとスタンダードのセットです。デジタル製品を作る複雑なプロセスを通してチームを導く、統一された言語と構造化されたフレームワークを提供する、ブループリントのようなものだと考えてください。
デザインシステムはチームに提供しているフレームワークとなり、デザイン上のものだけではなく、技術上のものでもあります。
「UIはコードで作られないと、何にもならない」と、私は現場で実感したことです。特にDSの現場で、Componentの定義はただ視覚的なパターンで済まなく、Property、Behavior、プラットフォームによって実現できることとできないことなど、デザインを超えることも考えないといけないです。
開発は敵ではない
なぜ、開発はそのデザインは作ってくれないの？なぜ、似たようなパーツを分けて考えないといけないの？
と、デザイナーからよく開発に持つ疑問でしょう。もちろん、お互いに自分らの専門領域の視点から出したもので、決して誰が悪いではないです。
要は、お互いにちゃんと意見を交換して、コミュニケーションを取ることです。
DS領域は特に、開発の意見を大事にしてください。DSの定義には、デザインをするより、デザインを超える技術上の構想、挙動などの配慮が多いため、むしろ開発視点からの意見は重要です。
DSを構築する前にも、開発ができることとデザインができることを明確し、どこまでの粒度を制限するかをお互いに認識をすり合わせましょう。
Platform Guidelineを熟読してください
ここはメインに指しているは、Human Interface Guideline（iOS）、Material Desgin（Android）とWCAGのことです。
定義したDSはこれらのプラットフォームで開発するため、それぞれの特徴、ベースとなったロジック、定義など知らないと、相当進めづらいと思います。
特にプラットフォームを横断するDSを構築する際、プラットフォームの差分によってどうしても統一できない要素は結構出てきます。
おそらく皆さんはUIデザインするにはガイドラインの重要性も認識されていると思いますが、DSをやるにはさらに毎日読むぐらい頻繁に確認しています、
DSの構築より、運用が大事
DSの目的としては、運用して、製品の統一性を保ち、チームの効率性を上がることです。重要なのは運用することです。
少しDSの経験を持つ方はすごく理解されていると思います。DSの構築は時間があればなんとなく立ち上がれます。うまく運用しないと、本来期待した効率上がることもできず、構築に投入した時間も無駄になります。
例えばチームのことを国として考えると、DSは国の法律です。どんな細かい法律を作っても、警察官、检察官、法律の教育など人々に法律を守ってもらうような行動も重要です。
DSの目的をうまく実現するには、DSを利用してもらうチームのユーザーの視点から運用ルールとドキュメントを大切にしてください。
DesignSystemをやるに欠けないスキル
ここも、細い作業のスキルを記載するより、必要な抽象度高いスキルをまとめました。難しいところと思いますが、DSをやるには重要なポイントと思います。
構造化思考
構造化の意味としては、「物事を分解・分類し、構造を明らかにすること」です。むしろDSもそういうことです。UIの分解、分類して、さらに組み合わせることです。
俯瞰的な視野
システムを作るため、一個を変えると、他の連動パーツにも影響するため、俯瞰的な視野を持つのは必要になってきます。
開発知識
実際にコーディングできるというより、開発のロジックを理解することです。デザインの視点から考えるのはもちろん、開発の視点からも考えられるのは、開発ともコミュニケーションがスムーズできるし、DSの定義には役立ちます。
Design System 勉強に参考になるサイト
最後、2年ぐらいデザインシステムをやっていて、自分に助かったDSの参考サイトもしゃあしたいと思います。役に立ったら嬉しいです。