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　まぁし

   

   View Slide

2. 知念 昌史 / まぁし Twitter@chocodogmagic

   ● 沖縄でリモートワーク/元・美容師

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/

   アクセシビリティ/SEO/パフォーマンス改善/CMS

   ● スプラトゥーン3（弓：S+17 / XP1900）

   ● ポケモン：スカーレット：育成がんばり中

   株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主

   

   View Slide

3. Design for spatial user interfaces

   https://developer.apple.com/videos/play/wwdc2023/10076/ 

   

   View Slide

4. Use multiple layers

   

   View Slide

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

   

   View Slide

6. Use multiple layers

   

   

   View Slide

7. レイヤーで分解する

   

   View Slide

8. Use multiple layers

   

   View Slide

9. 横から見ると・・・

   

   View Slide

10. Use multiple layers

    

    View Slide

11. すりガラス風のWindow

    

    View Slide

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

    

    View Slide

13. すりガラス風のWindow

    

    

    View Slide

14. すりガラス風のWindow

    

    

    View Slide

15. font-weightは太く

    大画面でも見やすいように

    

    View Slide

16. iOSでRegular → spatialではMediumへ

    

    View Slide

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

    

    View Slide

18. 他にも情報が盛りだくさん！

    WWDCの動画を見てみてね！

    

    View Slide

19. ありがとうございました！

    Twitter まぁし@chocodogmagic

    フォローしてね

    PWA Nightは

    毎月第3水曜日

    　　　　　　　　参加してね！

    平日9:00〜SpacesでWeb情報発信中！
    

    TAMで一緒にお仕事しませんか？

    お仕事のご依頼・各職種の採用も募集中

    

    View Slide