$30 off During Our Annual Pro Sale. View Details »

WWDC2023-Recap-LT

Chinen
June 21, 2023

 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/

Chinen

June 21, 2023
Tweet

More Decks by Chinen

Other Decks in Design

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