Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS発デザインシステム「Cloudscape」を使ってUI爆速開発

J_3woo86
November 16, 2022

 AWS発デザインシステム「Cloudscape」を使ってUI爆速開発

J_3woo86

November 16, 2022
Tweet

Other Decks in Programming

Transcript

  1. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS発デザインシステム 「Cloudscape」を使ってUI爆速開発 小深田 翔一郎 A - 5 - 1 アマゾン ウェブ サービス ジャパン合同会社 プロフェッショナルサービス本部 Cloud Application Architect
  2. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. アマゾン ウェブ サービス ジャパン合同会社 プロフェッショナルサービス本部 Shoichiro Kobukata ⼩深⽥ 翔⼀郎 Cloud Application Architect
  3. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Cloudscapeの概要 Cloudscapeを使⽤したUI設計 Cloudscapeを使⽤した実装 まとめ Agenda
  4. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Cloudscapeの概要
  5. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. デザインシステムとは A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive. 訳︓ デザインシステムは、プロダクトをより効率的で⼀貫性を 保つためコードおよびデザインツールとしてドキュメント、 ビジュアルスタイル、コンポーネント、およびその他の ライブラリを提供するもの - Nathan Curtis(Defining Design Systems) https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935
  6. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. デザインシステム ライブラリ&開発ツール デザインガイドライン コンポーネント
  7. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. デザインシステムのメリット ⽣産性 ⼀貫性 コミュニ ケーション
  8. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 2016 aws-ui AWS Management Console Cloudscapeの歴史 Cloudscape Design System Jul 19, 2022
  9. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Cloudscapeの特徴 69 Components 35 Patterns 27 Demos visual mode Theme accessbiility responsibility ※2022年11月8日 基準
  10. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Componentsの種類 10 Category Layout Action Input Display Selection Feedback Collections Navigation Charts Tutorials 69 Components
  11. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. ex. Modal Component Click placeholer="ex. 完全に削除" を追記
  12. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 爆速Component1 - Property filter 実装例 選択肢の リスト 演算⼦と 選択⼿段 Calendarを 表⽰させる ことも可
  13. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 爆速Component2 - Attribute editor 増加 減少 実装例 初期値 内包する コンポーネント 増加、減少時の 挙動を実装
  14. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Patternsの種類 5 Category Communication Create and edit Delete Details View 35 Patterns
  15. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Patterns - Create resource Create and editカテゴリ 「新しいリソースを作成する」ためのUXの最適解 Modal Field: 1 Single page Fields : 2 ~ 15 or Groups: ~5 Multi page Fields : 15~ or Groups: 5~
  16. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Patterns - Create resource Flow charts Successful Unsuccessful With validation
  17. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Demosの種類 27 Demos
  18. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Cloudscapeを使⽤したUI設計
  19. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Figma design library
  20. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Figma design library Getting started Foundation Components (Sticker sheet) Library
  21. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Cloudscapeを使⽤した実装
  22. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 導⼊⽅法 - step 1 npm install @cloudscape-design/global-styles import '@cloudscape-design/global-styles/index.css' index.tsx 各種パッケージの導⼊
  23. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. npm install @cloudscape-design/components Reactコンポーネントを導⼊ コンポーネントのImport // ⼀つずつ import Button from '@cloudscape-design/components/button' // 複数まとめて import { Box, Button, FormField, Input, Modal, SpaceBetween } from '@cloudscape-design/components' 導⼊⽅法 - step 2
  24. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 移⾏の場合 aws-uiのnpmパッケージをCloudscapeのパッケージに差し替えのみでOK
  25. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. サンプル - 1/3 仕様︓ ・Open modalボタンをクリックしてModalを表⽰ ・'delete me'と⼊⼒するとModalが消える ・validation checkを⾏い、エラー時はtextboxを⾚く UI設計書 Modal Button Input
  26. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. サンプル - 2/3 必要な コンポーネント をImport 処理に必要な Stateを定義 Modal内の okボタンを押した時の Validation処理 Modal & Button から コピーしたコード Inputページから コピーしたコード onClick()を追加 仕様︓ ・Open modalボタンをクリックしてModalを表⽰ ・'delete me'と⼊⼒するとModalが消える ・validation checkを⾏い、エラー時はtextboxを⾚く
  27. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. サンプル - 3/3 × 仕様︓ ・Open modalボタンをクリックしてModalを表⽰ ・'delete me'と⼊⼒するとModalが消える ・validation checkを⾏い、エラー時はtextboxを⾚く UI設計書 完成画面
  28. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. まとめ
  29. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • Cloudscapeは、デザインから開発、運⽤まで⼀貫性のある品質を 効率的に実現する最適なソリューションです まとめ • お客様よりいただいたFeedBackを元にしたUXのベストプラクティス があります • まずは、Components・Patterns・Demosを通して、 ぜひ、Cloudscapeを体験してみてください
  30. © 2022, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Thank you! © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Shoichiro Kobukata アマゾン ウェブ サービス ジャパン合同会社 プロフェッショナルサービス本部 Cloud Application Architect