誰も教えてくれなかったUXUI必須知識、デザインシステム

📖 本1冊の価格！
本1冊の価格で、全18チャプターで構成された動画講義を受講！
更新され続ける講義を一生所有！

📝 コンポーネントの漏れを防ぐチートシート、チェックリストファイルを提供！
デザインシステムを管理していると、一つのコンポーネントでも様々なバージョンのUIが必要になることがあります。ボタンの場合、デフォルト＋ホバー状態のUI＋クリック時のUIなど、多様なバージョンのUIが必要です。また、使用ガイドも定めなければなりませんが、青いボタンはいつ使い、ゴーストボタンはいつ使うかといった関連ポリシーも決める必要があります。しかし、このように多様なケースを考慮して作成しなければならないため、うっかり何かを見落としてしまう可能性があります。そのような漏れを防ぐためのチェックリストを提供します。

👆 Googleが作成したデザインシステムの例。これをあの有名な「マテリアルデザイン（システム）」と呼びます。

一貫性がどうのこうのといった、難しくて曖昧な定義よりも、自分にとって馴染みのある1、2枚のイメージで覚えてください。 最初は文章よりもイメージで覚える方が理解しやすく、はっきりと長く記憶に残ります。

👆デザイナーなら、Figmaのイメージで覚えてください。

デザインシステム = Figmaにあるスタイル、コンポーネント + それぞれの使用ガイド（チーム内のデザイナーがNotion/Slack/その他のウェブサイトに記載したもの）

👆 開発者ならVScodeのイメージで覚えてください。

デザインシステム = VScodeにスタイル、コンポーネントコードが書かれている部分 + 各使用ガイド（チーム内のデザイナーがNotion/Slack/その他のウェブサイトに書き留めたもの）

オンライン講義プラットフォームで「デザインシステム」を一度検索してみてください。
おそらく関連する講義はほとんどないでしょう。講義の数が絶対的に不足しているだけでなく、カリキュラムの構成が非常にシンプルすぎるか、逆に長すぎる講義がほとんどのはずです。
YouTubeには、それでもまだ少しは量がありますが、YouTubeの動画にもやはり「ガイド」に関する具体的な内容はありません。
私たちの時間は限られており、特に韓国の社会人は非常に忙しいため、この講義には必ず必要な核心的な内容だけをぎゅっと詰め込みました！

デザインシステムはすべてのウェブ/アプリ製品の基本骨格となる内容であるため、デザイナーであれば特に必須として熟知しておく必要があります。
しかし、それほど重要な必須概念であるにもかかわらず、なぜ「デザインシステム」に関する講義が少ないのでしょうか？それは「デザインシステム」が表面的に目立つ業務ではなく、売上に直結する内容ではないからです。
「家事」に似ています。家事は毎日一生懸命やったとしても、あまり目立ちません。家事を頑張ったからといってお金が生まれるわけでもありません。家事は一生懸命やっても目立たず、お金になるわけでもないため、これまで過小評価されてきました。家事をどうすれば上手くできるかについて教えてくれる講義を見たことがある人は、おそらくほとんどいないでしょう。しかし、たった3日家事をしないだけですぐにボロが出るように、「デザインシステム」も気にかけなければ、作業時に不便な点に何度も直面することになります。そして、そのような大小の関連イシューが放置され続けると、後で取り返しのつかない状態になるかもしれません。
Google、Apple、Samsungなどの巨大企業には、デザインシステムだけを管理するチームが別にあります。これらの賢い企業が、理由もなくお金が余っているからといって、そのようなチームをわざわざ作ったりはしないでしょう？それほど彼らも、このデザインシステムというものの重要性をよく理解しているという証拠です。韓国国内では、Tossという会社が大規模にデザインシステムを再整備した後、年間15,800時間を節約しているそうです。
これほど影響力のあるシステムであるにもかかわらず、残念ながらデザインシステムについて教えてくれる人があまりにも少なすぎます。

これからも繰り返しお伝えしますが、この講義でなくても構いません。本でも、YouTubeを通じてでも、デザインシステムというものについて、ぜひ継続して学んでいってほしいと思います。 デザインシステムは非常に大きく発展してきましたが、依然として改善が必要な点が多くあります。より多くの人々が関心を持つことで、システムはさらに上方平準化されていくはずです。

🔥 ニデザインの講義だけにしかないもの

👍 継続的にアップデートされる講義！

IT分野の変化のスピードは非常に速いです。Figmaだけを見ても、アップデートのたびに多くのことが変わるため、常に勉強し続けなければならないほどです。したがって、速い変化のスピードに合わせて、継続的にアップデートされている講義かどうか、アップデート履歴を確認してみる必要があります。アップデートの頻度は、講義の質に対する講師のこだわりが反映される部分でもあります。

👍 受講生の否定的なフィードバックに耳を傾ける講師の講義！

レビューの評価だけでなく、講師が残したコメントにも注目してください。受講生の否定的なフィードバックに対して防御的な反応をしたり、あるいは形式的な回答をしたりする場合、講師として良い姿勢を持っているとは言い難いです。心から受講生たちが成長し、うまくいくことを願っているなら、受講生が「こういう点が残念でした」と言ったとき、「ああ、そうだね。この部分を見落としていたな。講義を補強しなきゃ」と考えるはずです。

1. 業務効率の向上

これはすでに多くの方がご存知の内容です。反復的な作業を減らしてくれる、製品全体にわたってデザインの一貫性を維持させてくれるなど。

2. 不要な口出しの防止

私自身もデザイナーであり、デザインが好きでこの仕事をしていますが、時折考え込んでしまう瞬間があります。デザインという分野は、誰でも私のデザインに対して、いつでも気軽に意見を言える分野です。例えば、通りすがりの営業チームのメンバーが「フォントが少し硬すぎませんか？」「このカラムの数字は中央揃えにしたほうが見栄えが良くないですか？」といった意見を出すことができます。他人の視点からのフィードバックはいつでも歓迎ですが、その事項をデザイナーが何も考えずに作業したのではなく、調査も行い悩み抜いて決定したものである場合、あるいは複数人が互いに全く異なる意見を言ってくる場合、デザイナーは朝の鳥のさえずりや自然の中のせせらぎを聞きながら、心身の安定を求めたくなることがあります。
しかし、デザインシステムを積極的に導入すれば、デザイナーだけのものではなく、全員の参加のもとに作られるシステムになるでしょう。全員の声を反映して決めたシステムなので、不満を持つ人の数も減るはずです。 異論が出るたびに、まとまりのない会議をする必要もなくなります。

3. ユーザビリティ改善の練習

継続的なユーザビリティの改善が必要だという点で、デザインシステムも一般的な製品と同じです。相違点は、自分が作るウェブ/アプリのユーザビリティを改善すればエンドユーザーが幸せになりますが、デザインシステムのユーザビリティを改善すれば自分とチームメンバーが幸せになるということです。自分の製品のユーザーは誰にでもなり得るため把握が難しく時間もかかりますが、自社のデザインシステムのユーザーは自社のチームメンバーに限定されているので、ユーザー調査やユーザビリティ改善の練習をするのにも最適です！

すでに会社で使用されているということは、デザインシステムのアップグレードに対するチームメンバーの抵抗感が少ないということも意味します！デザインシステムを使用していなかった会社に導入しようとすると、新しく学んで適応しなければならないことが多く、既存の作業を修正する必要も多いため、チームメンバーの抵抗感がかなり大きくなることがあります。この機会に、チームメンバーや全社的にデザインシステムの再整備について話し合ってみるのも良いでしょう！

IT分野は、あらゆる産業分野の中でも非常に変化が速い分野の一つです。新技術が毎日のように次々と登場しています。もし「デザイントークン」という言葉に馴染みがないのであれば、この講義でなくても構いませんので、他のどこかで簡潔に概念だけでも把握しておくことをお勧めします。

大企業の場合、デザインシステムだけを担当する別途のチームがあります。米国の場合、デザインシステムチームは通常4〜9名ほどのチームメンバーで構成されているそうです。しかし、中小企業やスタートアップの場合、デザインシステムを管理するメンバーが1〜2名である可能性が高いです。スタートアップのデザイナー一人が、大企業の7人よりも優れたデザインシステムを作るのは容易ではないでしょう。いくらその一人の能力が優れていたとしても、大企業の7人は一日中デザインシステムだけを研究し改善し続けているはずですし、スタートアップのデザイナー一人は限られた時間を削りながら、なんとか作り上げているはずですから。しかし幸いなことに、ありがたいことに、それらの大企業は丹精込めて作ったデザインシステムの内容を自社のウェブサイトを通じて公開しています。ですから、私たちは感謝の気持ちを持ってその内容を参考にし、自社ならではのデザインシステムへと発展させていけばいいのです。決して最初からすべてを自分一人で作ろうとしないでください。凄まじい試行錯誤が発生することになります。その代わりに、名だたるグローバルな専門家たちが知恵を出し合い、長い時間をかけて作り上げてきた内容を積極的に活用するのが賢明な判断です。

👆 ライブラリにコンポーネントを登録して取り出す方法

👆 見落としている部分はないか、チェックリストを活用する方法

👆 アトミックシステム

👆 トークンの概念と使用方法

📢 次の内容は扱いません
「開発者」がデザインシステムコードを扱う方法

Q. 非専門家でも受講できる講義ですか？

専攻よりはFigmaに関する予備知識の程度によって異なると言えます。Figmaでのコンポーネントの概念と、Figma Communityでオープンソースを検索できる程度の知識をお持ちであれば、受講に大きな支障はないでしょう。

Q. 授業内容はどのレベルまで扱いますか？

Figmaツールを使用してコンポーネントを一つひとつ直接制作する内容は含まれていません。講義でも何度か言及しますが、私たちの目標は迅速かつ効率的にデザインシステムを作り上げていくことです。大企業の名だたる専門家たちが集まり、長い時間をかけて作り上げた優れたデザインシステムを積極的に活用していきます！

• 現 ニーデザイン代表
• デザイン大学院修士課程修了
• 大企業からスタートアップに至るまで、様々なテーマや規模のプロジェクトに参画
• 実務経歴7年以上
• Youtube: @needesign (ニデザイン)

録音環境と機材が整っていなかったため、やむを得ず人工知能の音声を使用しました。この点、ご了承いただけますと幸いです。ですが、最も自然な音声を使用しましたので、それほど違和感はないかと思います。

• フィグマを使用するため、あらかじめ準備しておいてください。
• フィグマのコンポーネント、コミュニティの概念をご存知であれば、より理解しやすいと思います。