デザインシステムってなに？

デザインシステムって聞いたことありますか？

アクセシビリティについて調べているときに
出てきた言葉なのですが、正直なんのことかよく分かりません・・・

こういう時はAIに聞いちゃいます。
今日の先生はMicrosoftのCopilotさん。お願いします。
 
 

デザインシステムって？

甲賀
デザインシステムってなんですか？

Copilot
デザインシステムとは、ウェブサイトやアプリなどのデジタルプロダクトのデザインや操作性を一貫して提供するための仕組みです。デザインの概念や原則、スタイルガイド、UIコンポーネントライブラリ、管理ツールなどがデザインシステムの構成要素となります。デザインシステムを導入すると、UXの向上や開発の効率化などのメリットがあります

甲賀
もっと簡単に言うと？

Copilot
デザインシステムとは、ウェブサイトやアプリの見た目や使い方を統一するためのルールやツールのことです。デザインシステムを使うと、ユーザーにわかりやすくて快適な体験を提供できます。😊

甲賀
ありがとうございます😊😊😊

出来の悪い生徒にも笑顔で教えてくれる先生にしっかり御礼を伝えました。
 

さらに、
デザインシステムの構成要素を3つに分けると、以下のようになるんだとか。

【デザイン原則】
プロダクトに関わるステークホルダーがプロダクトを作っていく上で大事にすることを言語化したもの
【原則に基づいたルール（スタイルガイド）】
デザイン原則に基づいて作られた、UIパターンやタイポグラフィ、カラースケールなどのガイドライン
【原則に基づいたツール（コンポーネントライブラリ）】
リストやボタンなど、再利用可能ですぐ使用できるコンポーネントをコードとセットで置いたライブラリ

 

カタカナばっかりで難しいですが簡単にまとめると、
 

コンセプトやルールを言語化してからデザインを作る。
それを再利用できるようにルールやマニュアル、素材をまとめておきましょう

 
といったところでしょうか。
では、デザインシステムを導入することでどのようなメリットがあるのでしょうか？
 

メリットは？

【効率化】
デザインシステムが提供するリソースを使うことで、デザインや開発の時間や手間を削減できます。また、デザインシステムがプロダクトのビジョンやブランドアイデンティティを明確にすることで、デザインや開発の方向性や優先順位を決めやすくなります。
【品質】
デザインシステムが提供するリソースは、デザイン原則に基づいて作られているため、デザインの一貫性や視認性、アクセシビリティなどの品質が高くなります。また、デザインシステムが提供するリソースは、テストやレビューなどの品質管理が行われているため、バグやエラーなどの問題が少なくなります。
【利用者体験】
デザインシステムが提供するリソースは、ユーザーのニーズや課題に応えるように作られているため、ユーザーにとって使いやすく、満足度の高いプロダクトになります。また、デザインシステムが提供するリソースは、企業のビジョンやブランドアイデンティティを反映しているため、ユーザーにとって魅力的で、信頼感の高いプロダクトになります。

 

 
ほうほう、
作る側にも、見る（使う）側にもメリットがあり、プロダクトのクオリティまで上がるという、絶大な力を持った魔導書のようなものではないですか！！
c rebootでもすぐに導入したい・・・！と思ったのですが、大きな力を手にするには、デメリットももちろんあります。

デメリットは？

【時間】
デザインシステムを作るには、デザイン原則や構成要素、ドキュメントなどを作成するために多くの時間がかかります。また、デザインシステムを運用するには、デザインシステムの更新やメンテナンス、教育や普及などを行うために多くの時間がかかります。
【コスト】
デザインシステムを作るには、デザインシステムの作成や公開に必要なツールやサービス、人材などのコストがかかります。また、デザインシステムを運用するには、デザインシステムの更新やメンテナンス、教育や普及などに必要なコストがかかります。
【自由度】
デザインシステムが提供するリソースは、デザイン原則やスタイルガイドなどの制約やルールに従って作られているため、デザインの自由度や創造性が制限されることがあります。また、デザインシステムが提供するリソースは、プロダクトの特徴やニーズに合わないことがあります。 

デザインシステムを作ること自体が作業となり負担も大きくなるわけですね。
どんなプロジェクトでもデザインシステムを作ればよいということではないようです。
実際にデザインシステムを導入、公開しているの企業は、規模が大きいものばかりでした。

日本でも、デザインシステムを導入している企業やプロダクトは多くあります。ここでは、その中から3つの事例を紹介します。
ドキュメントとしてWebサイトを公開しているのでよかったら見てみてください。

【LINE】

https://designsystem.line.me/
– デザイン原則として、「Simple」「Friendly」「Fun」「Trustworthy」の4つを掲げている

【Abema】

https://spindle.ameba.design/

– デザイン原則として、「Abemaらしさ」「ユーザーの視聴体験」「デザインの効率化」の3つを掲げている

【デジタル庁】

https://www.digital.go.jp/policies/servicedesign/designsystem

– デザイン原則として、「誰一人取り残されない」「利用者中心」「オープンで協働的」「効率的で効果的」「信頼できる」の5つを掲げている

まとめ

c rebootでは主に中小企業や個人のお客様のWebサイトを制作させていただくことが多いので
本格的なデザインシステムを作る機会はないかもしれませんが、
ルールやマニュアルを作って、様々なプロジェクトで共有することによって
以前やったことをなかなか思い出せないなんてことを防げると思いますし、
制作物のクオリティを上げる手助けになると思います。
また
近年、どんな方でも使えるようアクセシビリティを強化しなければならない、という方向に進んでいます。
アクセシビリティって何をすればいいんだ、と思った時は事例にあげたWebサイトを見てみるとよいかもしれません。