Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
デザインシステム再考
自己紹介
佐藤伸哉(@nobsato)
● 株式会社シークレットラボ代表取締役
● Google Developers Expert (Product Design)
● Google認定デザインスプリントマスター等々
● 海外のデジタルエージ...
Design Systems
デジタルプロダクトのための
デザインシステム実践ガイド
デザインシステムとは?
デザインシステムとは、目的を達成するために首尾一貫した
ルールで編成された、お互いに関連つけられていたパータ
ンライブラリーとその実践方法です。
パターンは繰り返される要素で、これらを組合せてインター
フェースを設計しま...
デザインシステムとは?
● デザインの考え方/原則の定義
● 見栄えや見え方の定義
● うごきや振る舞い、インタラクションの定義
● どこで使うかの定義
● どのように使うかの定義
● どのように管理していくかの定義 …etc.
上記を関係者が...
デザインシステムのブーム、火付け役?
Design Language System (DLS) (2016, Airbnb)Material Design + Lollipop (2014, Google)
https://airbnb.des...
デザインシステムのブーム、火付け役?
Design Language System (DLS) (2016, Airbnb)
https://airbnb.design/building-a-visual-language/
デザインシステムのブーム、火付け役?
原子 分子 有機体 テンプレート ページ
Atomic Design
Brad Frost (@brad_frost)
http://atomicdesign.bradfrost.com
/
2017、日本でもアプリ界隈を中心にデザインシス
テムのブーム到来、海外記事が沢山翻訳
デザインシステム、再興の風潮
● InVisionやSketchなど、アプリで自動的にライブラ
リーやデザイン管理の制作環境の充実
● 様々な開発環境/オープンフレームワークの充実
● デザイン開発のためのコラボレーションツール
● 完成度の高...
海外で議論され見えてきているデザインシステム
の今後の課題
● 運用のための専門組織体制が必要。
● 経営資産としての投資が必要。
● マルチプラットフォームからクロスプラットフォームへ
の対応に必要な高度な技術と計画的な戦略、その
ための体制...
デザインシステムはなぜ必要なのか?
https://www.marvel.com/captainmarvel
デザインシステムはなぜ必要なのか?
開発者のスキルや開発状況、運用継続年数によって、
簡単に「進化」してしまうデザイン、など
デザインシステムはなぜ必要なのか?
首尾一貫した最良のユーザーエクスペリエ
ンスを提供し、使う人だけでなく、作る人も
ハッピーになるため。
デザインシステムの内容
● デザイン原則
● カラーシステム
● タイポグラフィー
● アイコンシステム
● スタイルガイド/レイアウトパターン
● パターンライブラリー
● コードキット/テンプレート
● 制作ツール/開発ツール
● ワークフ...
デザインシステムの導入
● まずはデザイン原則から
● 現状のUIインベントリー
● ビジュアルスタイルガイド
● パターンライブラリーやUIコンポーネント集(コンコレ)
● 実装テンプレート/コードキットが備わったデザインガイドラインの開
発...
https://www.ampproject.org/ja/about/amp-design-principles/
デザインシステムの導入の課題
デザインシステムとは、たんにデザインガイドラインを作
ることではなく、組織論や運用論です。(by 監訳者)
UIのコンコレやパターンライブラリー、コード
キット開発、担当者任命は力技。
組織体制はそうはいかない…。
The 7S Frameworkでデザインシステムの導入を
考える
組織構造
戦略
管理
システム
共有価値
スキル
人材
スタイル
ハードのS
組織構造
管理システム
戦略
ソフトのS
スキル (Skill)
人材 (Staff)
スタイル ...
代表的なデザインシステム
● Material Design by Google
● Fluent Design System by Microsoft
● Carbon Design System by IBM
● Lighting Desi...
デザインシステムコーリション、
はじめます
● 3月からデザインシステムに組んでいる事
業会社10社程度で構成したメンバーで業界
発展のための健全な勉強会コミュニティを
始めます。
● レベルに関係なく、全員が発表者。
● 当初は招待制で開始。...
Thank you.
Tokyo
design.systems
Episode 1
2019.3.2x (TBD)
BizReach x Rakuten
Powered by UX RUN
INEVITABLE ja night #8:  Design Systems Reboot - Excerpt
Prochain SlideShare
Chargement dans…5
×

INEVITABLE ja night #8: Design Systems Reboot - Excerpt

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

  • Soyez le premier à commenter

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

×