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

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.
6. © 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
7. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. デザインシステム ライブラリ＆開発ツール デザインガイドライン コンポーネント
8. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. デザインシステムのメリット ⽣産性 ⼀貫性 コミュニ ケーション
9. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. 2016 aws-ui AWS Management Console Cloudscapeの歴史 Cloudscape Design System Jul 19, 2022
10. © 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日 基準
11. © 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
12. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. ex. Modal Component Click placeholer="ex. 完全に削除" を追記
13. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. 爆速Component1 - Property filter 実装例 選択肢の リスト 演算⼦と 選択⼿段 Calendarを 表⽰させる ことも可
14. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. 爆速Component2 - Attribute editor 増加 減少 実装例 初期値 内包する コンポーネント 増加、減少時の 挙動を実装
15. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Patternsの種類 5 Category Communication Create and edit Delete Details View 35 Patterns
16. © 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~
17. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Patterns - Create resource Flow charts Successful Unsuccessful With validation
18. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demosの種類 27 Demos
19. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Cloudscapeを使⽤したUI設計
20. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Figma design library
21. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Figma design library Getting started Foundation Components (Sticker sheet) Library
22. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. Cloudscapeを使⽤した実装
23. © 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 各種パッケージの導⼊
24. © 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
25. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. 移⾏の場合 aws-uiのnpmパッケージをCloudscapeのパッケージに差し替えのみでOK
26. © 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
27. © 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を⾚く
28. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. サンプル - 3/3 × 仕様︓ ・Open modalボタンをクリックしてModalを表⽰ ・'delete me'と⼊⼒するとModalが消える ・validation checkを⾏い、エラー時はtextboxを⾚く UI設計書 完成画面
29. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. まとめ
30. © 2022, Amazon Web Services, Inc. or its affiliates. All rights reserved. • Cloudscapeは、デザインから開発、運⽤まで⼀貫性のある品質を 効率的に実現する最適なソリューションです まとめ • お客様よりいただいたFeedBackを元にしたUXのベストプラクティス があります • まずは、Components・Patterns・Demosを通して、 ぜひ、Cloudscapeを体験してみてください
31. © 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