WWDC2023-Recap-LT

PWA Night vol.52 ～Google I/O & WWDC Recap〜のLT登壇資料です。

Design for spatial user interfacesから抜粋して紹介しています。
https://developer.apple.com/videos/play/wwdc2023/10076/

Transcript

1. WWDC 2023 Recap LT
 2023/6/21　まぁし

2. 知念 昌史 / まぁし Twitter@chocodogmagic
 • 沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • スプラトゥーン3（弓：S+17 / XP1900）
 • ポケモン：スカーレット：育成がんばり中
 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主

3. Design for spatial user interfaces
 https://developer.apple.com/videos/play/wwdc2023/10076/ 

4. Use multiple layers

5. Safariのアイコンを例に考える

6. Use multiple layers
 

7. レイヤーで分解する

8. Use multiple layers

9. 横から見ると・・・

10. Use multiple layers

11. すりガラス風のWindow

12. 外が明るくても暗くても溶け込む

13. すりガラス風のWindow
 

14. すりガラス風のWindow
 

15. font-weightは太く
 大画面でも見やすいように

16. iOSでRegular → spatialではMediumへ

17. 色を使う時はテキストではなく背景に

18. 他にも情報が盛りだくさん！
 WWDCの動画を見てみてね！

19. ありがとうございました！
 Twitter まぁし@chocodogmagic
 フォローしてね
 PWA Nightは
 毎月第3水曜日
 　　　　　　　　参加してね！
 平日9:00〜SpacesでWeb情報発信中！ 
 TAMで一緒にお仕事しませんか？
 お仕事のご依頼・各職種の採用も募集中