Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

INEVITABLE ja night #8: Design Systems Reboot - Excerpt

434 views

Published on

INEVITABLE ja night 第8回 エクスペリエンスドリブンへの不可避な流れ: 「デザインシステム再考」発表資料、公開用抜粋版(2019年3月1日、Google Japan)
https://cloudplatformonline.com/2019-inevitable-ja-night-8-jp.html

Published in: Design
  • Be the first to comment

INEVITABLE ja night #8: Design Systems Reboot - Excerpt

  1. 1. デザインシステム再考
  2. 2. 自己紹介 佐藤伸哉(@nobsato) ● 株式会社シークレットラボ代表取締役 ● Google Developers Expert (Product Design) ● Google認定デザインスプリントマスター等々 ● 海外のデジタルエージェンシーの日本での活動支 援を中心に、企業のデジタル戦略やデザイン戦略 のコンサルティング、デザイン顧問、プロダクト開発 のデザイン支援などをしています。
  3. 3. Design Systems デジタルプロダクトのための デザインシステム実践ガイド
  4. 4. デザインシステムとは? デザインシステムとは、目的を達成するために首尾一貫した ルールで編成された、お互いに関連つけられていたパータ ンライブラリーとその実践方法です。 パターンは繰り返される要素で、これらを組合せてインター フェースを設計します。 パターンの例としては、…(省略)…実践方法とは、特にチー ムで作業を行う場合に、どのようにパターンを制作…(以下 省略) Alla Kholmatova (@craftui)
  5. 5. デザインシステムとは? ● デザインの考え方/原則の定義 ● 見栄えや見え方の定義 ● うごきや振る舞い、インタラクションの定義 ● どこで使うかの定義 ● どのように使うかの定義 ● どのように管理していくかの定義 …etc. 上記を関係者がいつでも参照できるようにしたもの
  6. 6. デザインシステムのブーム、火付け役? Design Language System (DLS) (2016, Airbnb)Material Design + Lollipop (2014, Google) https://airbnb.design/building-a-visual-language/
  7. 7. デザインシステムのブーム、火付け役? Design Language System (DLS) (2016, Airbnb) https://airbnb.design/building-a-visual-language/
  8. 8. デザインシステムのブーム、火付け役? 原子 分子 有機体 テンプレート ページ Atomic Design Brad Frost (@brad_frost) http://atomicdesign.bradfrost.com /
  9. 9. 2017、日本でもアプリ界隈を中心にデザインシス テムのブーム到来、海外記事が沢山翻訳
  10. 10. デザインシステム、再興の風潮 ● InVisionやSketchなど、アプリで自動的にライブラ リーやデザイン管理の制作環境の充実 ● 様々な開発環境/オープンフレームワークの充実 ● デザイン開発のためのコラボレーションツール ● 完成度の高いデザインシステムの外部公開 ● DesignOps、DesignOrgなどのデザイン組織論
  11. 11. 海外で議論され見えてきているデザインシステム の今後の課題 ● 運用のための専門組織体制が必要。 ● 経営資産としての投資が必要。 ● マルチプラットフォームからクロスプラットフォームへ の対応に必要な高度な技術と計画的な戦略、その ための体制が必要。
  12. 12. デザインシステムはなぜ必要なのか? https://www.marvel.com/captainmarvel
  13. 13. デザインシステムはなぜ必要なのか? 開発者のスキルや開発状況、運用継続年数によって、 簡単に「進化」してしまうデザイン、など
  14. 14. デザインシステムはなぜ必要なのか? 首尾一貫した最良のユーザーエクスペリエ ンスを提供し、使う人だけでなく、作る人も ハッピーになるため。
  15. 15. デザインシステムの内容 ● デザイン原則 ● カラーシステム ● タイポグラフィー ● アイコンシステム ● スタイルガイド/レイアウトパターン ● パターンライブラリー ● コードキット/テンプレート ● 制作ツール/開発ツール ● ワークフロー/運用システム  …etc.
  16. 16. デザインシステムの導入 ● まずはデザイン原則から ● 現状のUIインベントリー ● ビジュアルスタイルガイド ● パターンライブラリーやUIコンポーネント集(コンコレ) ● 実装テンプレート/コードキットが備わったデザインガイドラインの開 発 ● ワークフローや運用体制の設計、運用マニュアル ● 運用向け開発ツールの導入 ● 組織体制の準備 ● 効果測定… etc.
  17. 17. https://www.ampproject.org/ja/about/amp-design-principles/
  18. 18. デザインシステムの導入の課題 デザインシステムとは、たんにデザインガイドラインを作 ることではなく、組織論や運用論です。(by 監訳者) UIのコンコレやパターンライブラリー、コード キット開発、担当者任命は力技。 組織体制はそうはいかない…。
  19. 19. The 7S Frameworkでデザインシステムの導入を 考える 組織構造 戦略 管理 システム 共有価値 スキル 人材 スタイル ハードのS 組織構造 管理システム 戦略 ソフトのS スキル (Skill) 人材 (Staff) スタイル (Style) 共有価値 (Shared value) 企業努力で対応可能。 比較的変化が容易 個人の能力や経験、価 値観など個人努力。 変化に時間がかかる https://www.mckinsey.com/business-functions/strategy-and-corporate-finance/our-insights/enduring-ideas-the-7-s-framework
  20. 20. 代表的なデザインシステム ● Material Design by Google ● Fluent Design System by Microsoft ● Carbon Design System by IBM ● Lighting Design System by Salesforce ● Predix Design System by GE ● Spectrum by Adobe ● Atlassian Design ● Airbnb Design ● Polaris by Shopify …etc.
  21. 21. デザインシステムコーリション、 はじめます ● 3月からデザインシステムに組んでいる事 業会社10社程度で構成したメンバーで業界 発展のための健全な勉強会コミュニティを 始めます。 ● レベルに関係なく、全員が発表者。 ● 当初は招待制で開始。一般枠も予定。 ● 興味ある方は直接聞いてください。 Tokyo design.systems Episode 1 2019.3.2x (TBD) BizReach x Rakuten Powered by UX RUN!
  22. 22. Thank you. Tokyo design.systems Episode 1 2019.3.2x (TBD) BizReach x Rakuten Powered by UX RUN

×