PWA Night vol.52 ~Google I/O & WWDC Recap〜のLT登壇資料です。
Design for spatial user interfacesから抜粋して紹介しています。 https://developer.apple.com/videos/play/wwdc2023/10076/
WWDC 2023 Recap LT 2023/6/21 まぁし
View Slide
知念 昌史 / まぁし Twitter@chocodogmagic ● 沖縄でリモートワーク/元・美容師 ● 技術コミュニティ運営 ○ PWA Night(東京)/ v-okinawa(沖縄) ● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/CMS ● スプラトゥーン3(弓:S+17 / XP1900) ● ポケモン:スカーレット:育成がんばり中 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主
Design for spatial user interfaces https://developer.apple.com/videos/play/wwdc2023/10076/
Use multiple layers
Safariのアイコンを例に考える
レイヤーで分解する
横から見ると・・・
すりガラス風のWindow
外が明るくても暗くても溶け込む
font-weightは太く 大画面でも見やすいように
iOSでRegular → spatialではMediumへ
色を使う時はテキストではなく背景に
他にも情報が盛りだくさん! WWDCの動画を見てみてね!
ありがとうございました! Twitter まぁし@chocodogmagic フォローしてね PWA Nightは 毎月第3水曜日 参加してね! 平日9:00〜SpacesでWeb情報発信中! TAMで一緒にお仕事しませんか? お仕事のご依頼・各職種の採用も募集中