見出し画像

「デザインシステムを学習したい人のための良記事」を6つ厳選してみた。

こんにちは。インターンのきやまです。

4月からセブンデックスにインターンとしてジョインし、9ヶ月が経ちました。

2019年はとても濃い時間を過ごして、デザイナーとしても成長を実感できた年になりました…しみじみ…

2020年は知識面qqも増やしていけたらな〜と思っています。

とはいえ、なんの知識を勉強したらいいんだー!(カリキュラムがない勉強できない人)

とりあえずデザイナー界隈の流行語を調べてみることに。

ふむふむ、近頃はデザインシステムなるものが流行っているらしい。

流行りにのっとけば間違いなし!(単純)

今回はデザインシステムの学習がてら、私が役に立ったなーと思った記事を珍しく真面目にまとめてみました!


デザインシステムとは?

デザインシステムというのは
デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するあらゆるルールを定めたもの
を指します。

デザインシステムが機能することで、

・チーム内でコミュニケーションのコストが格段に下がり、開発のスピードが上がる。(開発促進)
・デザインの品質を保証できる(品質保障)
・品質管理のコストが下がる/なくなる(効率化)
・デザイナーのセットアップが早くなる(戦力化)

という効果があります。

品質を保証する、統一性のとれたデザインが施せるということは、ユーザーの理解コストを下げ、体験を向上させることにも繋がります。

そして、デザインシステムを導入することで、

非生産的なコミュニケーションを効率化できる
→効率化された分時間が生まれる
→ユーザー体験を向上すべく策を考えたり、課題解決に取り組むことができる

本質的なデザインに時間を費やすことができます。

有名な事例として、ShopifyMailchimpなど、多くの企業がデザインシステムを機能させ、サービスの向上をさせています。

デザインシステムは大枠を理解することはできても、いざ実際に「自社でつくってみよう!」と思うと、かなりの労力が必要です。

「社内に浸透させるにはどうすればよいか。」
「いざ作ろうと思うと、何から始めればよいか。」

情報も多くないので、難しいですよね…

ということで、以下の記事を参考にしていただければ!と思います。


その1
デザインシステム、パターンライブラリ、スタイルガイドそれぞれの定義と違い

・デザインシステム
・パターンライブラリ
・スタイルガイド

これらは同じような意味で使われていることがありますが、決して同じものではありません。

この記事を読むまで、私はちゃんと理解せずになんとなーくデザイン用語を使っていたんだと反省…

それぞれの定義と関係性がわかりやすく説明されていて、 「デザインシステムとは何か」を理解する最初の一歩目になります!


その2
Shopifyのデザインシステム「Polaris」

もっとも優れたデザインシステムの事例として有名なものです。

社内のデザイナー向けのデザインシステムでなく、Shopifyでショップを開く人向けのものなので、めっちゃ丁寧に細かく説明されてるな〜と感じました。

(英語なので読むの大変ですが…)


その3
クラシルのWebチームでデザインシステムを少しずつ構築していっている話

実際にデザインシステムを作ったプロセスが書かれています。

流れを追うことができるので、「デザインシステムを作ってみよう!」と考えている人にはとても参考にりそうです。

過去の失敗も踏まえてのプロセスなので、説得感あるな〜と思いました。


その4
ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ! 

デザインシステムについて網羅的に書かれています。読み応えたっぷりです。

デザインシステムの理論を体系的に学ぶことができるので、一気に理解が進みます!

今まで他の記事で読んだ内容が、全部繋がった感じがしました。

実際にどのように作っていくかが書かれている第6章ゼロから始めるデザインシステム (実践編)は書籍版のみの公開となっています。


その5
Githubがデザインシステムを作るまでの道のり

GithubのプロダクトデザイナーおよびデザインシステムのリーダーのDiana Mounter氏へのインタビュー形式の記事で、前編・後編に分かれています。

デザインシステムの作成前と作成中だけでなく、作成後社内でどのように機能しているか、を詳しく話しているので、デザインシステムの運用の仕方を具体的に知ることができます!

デザイナーとエンジニアの繋がりの重要さを感じました。


その6
コデアルによるデザインガイドライン

数少ない日本語で書かれるデザインガイドラインの事例です。

細かいところまで作成されているので、「こういうものを作ればいいんだ!」という進む方向がわかります。

Polarisよりも規模が小さいので、私はこっちの方がゴールを想像しやすいな〜と思いました。

作成過程もnoteで公開されているので、そちらもどうぞ!


まとめ

デザインシステムを学ぶ上で役に立つ記事をまとめてみました。

今回さまざまなデザインシステムの作成に携わった人たちの記事を読んで、そこにかける熱意強い動機をとても感じられました。

私みたいに「とりあえず流行りにのっとくスタイル」で、目的を考えず安易に作成しても、うまく運用されないみたいです…猛省

なぜデザインシステムが必要なのかを明確にしてから作成することが、その後の有効な活用に繋がっていくんだ!と思いました。

日本では、デザインシステムを機能させていることを周知させている企業はまだまだ少ないです。

しかし最近ではSmartHRさんが公開するなど、徐々にデザインシステムが浸透していっているのも事実です。

日本でもこれから広がっていく可能性が高く、こういった事例が一つ出てくることで、流れが加速するのでは?と思います。

デザインシステムの開発に取り組む企業が増え、クリエイターの仕事がもっとおもしろくなりそうです。楽しみですね〜!

この記事が気に入ったらサポートをしてみませんか?