カスタムUIを作る覚悟 / The determination to create a custom UI

iOS/iPadOSアプリを作る上で、開発者としての基本姿勢はAppleの標準APIを使ってUIを実現することです。
Appleが用意した高レイヤーのAPIを使うことで、簡単にリッチなUIを実現できます。

しかし、そういったAPIは高レイヤーがゆえに、時には小回りがきかないことも事実です。
そのような場合に、UIViewからフルスクラッチでカスタムUIを作ることが選択肢になります。
Appleが提供するAPIにはない表現を実現することができ、みなさんのアプリの世界観にピッタリなカスタムUIを提供できます。

ただ、カスタムUIを実際に作るとなると、標準APIがカバーしてくれていた多くのことを自前でカバーする必要が出てきますが、そのコストは過小評価されがちです。
アニメーション、ジェスチャー、インタラクション、パフォーマンス、入力デバイス、アクセシビリティ...
開発者はこれら全てに対して、Appleが用意した標準のUIと並んでも違和感がないレベルまで実装し、メンテナンスし続ける「覚悟」が求められます。

このトークでは実際に自分が作ったカスタムUI、作らなかったカスタムUIを題材に、以下の流れで話をします。

どういう場合にカスタムUIを作るべきか、作らないべきか
カスタムUIを実装する時、どのような点に注意すればいいのか
実装されたカスタムUIに対して何を確認したらいいのか
カスタムUIを導入する際の覚悟
このトークを通じて、みなさんがiOS/iPadOSアプリ開発者として、適切にカスタムUIと向き合えることを目指します。

----

発表の中では動画が多用されています。
そちらを確認したい方は、後日iOSDC Japan公式のYouTubeから投稿される発表動画をご確認ください。
https://iosdc.jp/2025/
https://fortee.jp/iosdc-japan-2025/proposal/c5ee3a90-1624-4912-8e52-c8049869d3b8

Transcript

1. ΧελϜ6*Λ࡞Δ֮ޛ ·ͭ͡
   !NUK@K
2. The new native app
3. อੵ ! Timelab CEO / Product Manager ؏Ҫ " Designer / macOS nativeίΞϝϯόʔ ·ͭ͡ # App Developer / ๻ usagimaru $ Software Designer / Developer / macOS nativeίΞϝϯόʔ
4. ΧελϜUI: 
 Apple͕ఏڙ͢ΔAPIʹ͸ͳ͍දݱͰ࣮ݱ͞ΕͨUI
6. ΧελϜUIΛ࡞Δ͜ͱ͸೉͍͠ ୯ʹݟͨ໨Λ
 ࣮૷͢Δ͚ͩͳΒ·ͩ͠΋...
7. ࣮ྫ ࣮૷ͨ͠ྫ 1. φϏήʔγϣϯόʔͷλΠτϧ 2. γʔτ ࣮૷͠ͳ͔ͬͨྫ 3. ೔෇ϐοΧʔ
8. ࣮૷ͨ͠ྫ̍ φϏήʔγϣϯόʔͷλΠτϧ
9. ࣮૷ͨ͠ྫ̍ φϏήʔγϣϯόʔͷλΠτϧ • Ξχϝʔγϣϯ: φϏήʔγϣϯόʔͷτϥϯδγϣϯ ͜͜ʹ஫໨
10. ࣮૷ͨ͠ྫ̍ φϏήʔγϣϯόʔͷλΠτϧ • Ξχϝʔγϣϯ: φϏήʔγϣϯόʔͷτϥϯδγϣϯ • ΞΫηγϏϦςΟ: ʮಁ໌౓ΛԼ͛ΔʯͰϒϥʔΛ΍ΊΔ
12. ʮઃఆʯʼʮΞΫηγϏϦςΟʯʼʮը໘දࣔͱςΩεταΠζʯ
13. ʮઃఆʯʼʮΞΫηγϏϦςΟʯʼʮը໘දࣔͱςΩεταΠζʯ
14. ʮઃఆʯʼʮΞΫηγϏϦςΟʯʼʮը໘දࣔͱςΩεταΠζʯ
16. ʮಁ໌౓ΛԼ͛ΔʯOFF ʮಁ໌౓ΛԼ͛ΔʯON
17. ࣮૷ͨ͠ྫ̎ γʔτ
19. ࣮૷ͨ͠ྫ̎ γʔτ ΠϯλϥΫγϣϯ&ΞΫηγϏϦςΟ: άϥόʔ
20. ࣮૷ͨ͠ྫ̎ γʔτ ΠϯλϥΫγϣϯ&ΞΫηγϏϦςΟ: άϥόʔ άϥόʔ
21. άϥόʔΛλοϓ͢ΔͱɺσΟςϯτΛॱ൪ʹબ୒Ͱ͖·͢ɻ
    άϥόʔ͸7PJDF0WFSʹ΋ରԠ͓ͯ͠Γɺ
    Ϣʔβ͸ը໘ΛݟͣʹγʔτͷαΠζΛมߋͰ͖·͢ɻ γʔτ | Apple Developer
23. ࣮૷͠ͳ͔ͬͨྫ ೔෇ϐοΧʔ • ίϯύΫτ࣌ͷจࣈͷϑΥϯτΛੈք؍ʹ
 ͋ͬͨ΋ͷʹม͔͑ͨͬͨ • ͜ͷϑΥϯτΛมߋ͢ΔAPI͕ఏڙ͞Ε͓ͯΒͣ
 ΧελϜUIͱ࣮ͯ͠૷͢Δඞཁ͕͋ͬͨ
24. ࢦͰૢ࡞ͨ͠৔߹
25. τϥοΫύου
 + ΩʔϘʔυͷ৔߹
26. τϥοΫύου
 + ΩʔϘʔυͷ৔߹
27. τϥοΫύου
 + ΩʔϘʔυ +஍Ҭ͕ΞϝϦΧͷ৔߹
28. τϥοΫύου
 + ΩʔϘʔυ +஍Ҭ͕ΞϝϦΧ +ݴޠ͕ӳޠͷ৔߹
29. Apple Pencilͷ৔߹
 ʢεΫϦϒϧʣ
30. ͜Ε΍ΔΜ...ʁ • ඪ४API͸͜ΕΒΛશͯରԠ͍ͯͯ͠ɺϢʔβʔͷظ଴஋΋͜ͷϨϕϧ • ·ͩະ֬ೝͷڍಈ΋ଟ͋͘Γͦ͏ʢಛఆͷ஍Ҭͱݴޠͷ૊Έ߹ΘͤͷΑ͏ͳʣ • ͜ΕΒΛશͯରԠ͢Δͷ͸ίετ͕ߴ͗͢Δ • ʮϑΥϯτΛগ͠ม͍͑ͨʯͱ͍͏զʑͷ౎߹ͷͨΊ͚ͩʹ
 ϢʔβʔମݧΛԼ͛ͯ͠·͏ σβΠϯΛमਖ਼ͯ͠ඪ४APIΛ࢖༻͢Δ͜ͱʹ
31. Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε
32. Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε
33. ΞΫηγϏϦςΟ • VoiceOver • μΠφϛοΫλΠϓ • Ϙλϯͷܗ • ΦϯΦϑϥϕϧ • ಁ໌౓ΛԼ͛Δ • ࢹࠩޮՌΛݮΒ͢ ͳͲͳͲ...
34. ΞΫηγϏϦςΟ • VoiceOver • μΠφϛοΫλΠϓ • Ϙλϯͷܗ • ΦϯΦϑϥϕϧ • ಁ໌౓ΛԼ͛Δ • ࢹࠩޮՌΛݮΒ͢ ͳͲͳͲ...
35. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ σϑΥϧτ
36. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ σϑΥϧτ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ ͢Δ͜ͱͰ͢ɻ খ͘͞
37. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ σϑΥϧτ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ ͢Δ͜ͱͰ͢ɻ খ͘͞ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ͠ ͯͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬͯUI Λ࣮ݱ͢Δ͜ͱͰ͢ɻ େ͖͘
38. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱͯ͠ͷجຊ࢟੎͸ Appleͷඪ४APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUIΛ࡞Δ֮ޛ 9݄20೔15:40~
39. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃ ऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४ APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUI... 9݄20೔15:40~ ୯७ʹจࣈΛେ͖͘͢Δ͚ͩͰ͸ɺෆద੾ͳ৔߹΋% λΠτϧ͕লུ͞Ε͍ͯΔ ༨ന
40. จࣈαΠζ͕େ͖͍࣌͸
 ඞཁʹԠͯ͡ϨΠΞ΢τΛมߋ͢Δ
41. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃ ऀͱͯ͠ͷجຊ࢟੎͸Appleͷඪ४ APIΛ࢖ͬͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUI... 9݄20೔15:40~
42. iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ ΧελϜUI... 9݄20೔15:40~
43. ΧελϜUI... 9݄20೔15:40~ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ
44. ΧελϜUIΛ࡞Δ֮ޛ 9݄20೔15:40~ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ
45. ʢϛϡʔδοΫɺϝʔϧɺϝοηʔδ౳΋ྑ͍ྫʣ จࣈαΠζʹԠͯ͡ϨΠΞ΢τΛมߋ͢Δ& ΧελϜUIΛ࡞Δ֮ޛ 9݄20೔15:40~ iOS/iPadOSΞϓϦΛ࡞Δ্Ͱɺ։ൃऀͱ ͯ͠ͷجຊ࢟੎͸Appleͷඪ४APIΛ࢖ͬ ͯUIΛ࣮ݱ͢Δ͜ͱͰ͢ɻ
46. λϒόʔͷจࣈ͸
 ϑΥϯταΠζ͕େ͖͘ͳΒͳ͍
47. ௕ԡ͠
48. ϥʔδίϯςϯπϏϡʔΞʔ จࣈαΠζΛେ͖͘Ͱ͖ͳ͍ͱ͖
 ௕ԡ͠Ͱઆ໌ͱը૾ΛදࣔͰ͖Δ
49. Tips: ίϯτϩʔϧηϯλʔʹʮςΩεταΠζʯΛஔ͘͜ͱͰ؆୯ʹ֬ೝՄೳ
50. "Get started with Dynamic Type" https://developer.apple.com/videos/play/wwdc2024/10074/
51. Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε
52. ΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ
53. ΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ ͲΜͳαΠζʹͯ͠΋ॊೈʹ
 ద੾ͳϨΠΞ΢τʹͳΔ͔Ͳ͏͔
54. ΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ ΩʔϘʔυ͚ͩͰ͋Δఔ౓
 շదʹૢ࡞͕Ͱ͖Δ͔
55. ΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ ϗόʔΤϑΣΫτ͕
 ద੾͔Ͳ͏͔
56. ΢Πϯυ΢ͷϦαΠζ Ϛ΢ε / τϥοΫύου  Apple Pencil ΩʔϘʔυ εΫϦϒϧ͕ద੾ʹ
 ಈ࡞͢Δ͔Ͳ͏͔ ※ςΩετϑΟʔϧυʹ
 ݟ͔͚ͤͨϘλϯ͸ಛʹ஫ҙ
57. Ͳ͏͍͏఺Λ֬ೝ͢Δ΂͖͔ • ΞΫηγϏϦςΟ • iPadOS • Ξχϝʔγϣϯ • δΣενϟʔ • ΠϯλϥΫγϣϯ • ύϑΥʔϚϯε
58. ʮશͯʹରԠ͠ͳ͚Ε͹͍͚ͳ͍ʯͱ͍͏࿩Ͱ͸ͳ͍͕
 ʮରԠ͠ͳ͍ͱ͍͏൑அΛͨ͠ / ରԠͰ͖͍ͯͳ͍ʯͱ͍͏ೝࣝ͸ඞཁ
59. Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ
60. Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘
61. Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘ • Androidͱͷ౷Ұ͚ͩΛ໨తʹͨ͠ΧελϜͷφϏήʔγϣϯ / 
 ίϯτϩʔϧ͸ආ͚Δ
62. Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘ • Androidͱͷ౷Ұ͚ͩΛ໨తʹͨ͠ΧελϜͷφϏήʔγϣϯ / 
 ίϯτϩʔϧ͸ආ͚Δ • νʔϜͷٕज़ྗ / ڠۀ౓ / ϓϥοτϑΥʔϜ΁ͷཧղ౓
63. Ͳ͏͍͏৔߹ʹΧελϜUIΛ࡞Δ΂͖͔ʁ • φϏήʔγϣϯ΍ίϯτϩʔϧ͸೉қ౓͕ߴΊͳͷͰආ͚Δ • ίϯϙʔωϯτʢඪ४ͷίϯτϩʔϧΛ૊Έ߹ΘͤͨUIʣ ͸໰୊ʹͳΓʹ͍͘ • Androidͱͷ౷Ұ͚ͩΛ໨తʹͨ͠ΧελϜͷφϏήʔγϣϯ / 
 ίϯτϩʔϧ͸ආ͚Δ • νʔϜͷٕज़ྗ / ڠۀ౓ / ϓϥοτϑΥʔϜ΁ͷཧղ౓
64. UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷
65. UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ Ξχϝʔγϣϯ ೖྗσόΠε ΞΫηγϏϦςΟ ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ
66. UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ ೖྗσόΠε ΞΫηγϏϦςΟ ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ Ξχϝʔγϣϯ ௕͞͸ʁ ΞχϝʔγϣϯΧʔϒ͸ʁ ό΢ϯε͸Ͳ͏͢Δʁ
 ॳ଎͸ʁ Ξχϝʔγϣϯதʹ
 ΠϯλϥΫγϣϯ͸ड͚෇͚Δʁ
67. UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ Ξχϝʔγϣϯ ೖྗσόΠε ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ ΞΫηγϏϦςΟ ελΠϧ͸ʁ ϥʔδίϯςϯπϏϡʔΞʔΛ࢖͏ʁ μΠφϛοΫλΠϓ ϨΠΞ΢τ͸ม͑Δʁ
68. UIσβΠφʔ ΤϯδχΞ ੩తͳσβΠϯ ࣮૷ Ξχϝʔγϣϯ ೖྗσόΠε ΞΫηγϏϦςΟ ύϑΥʔϚϯε ΠϯλϥΫγϣϯ ϩʔΧϥΠθʔγϣϯ ੹຿͕ᐆດ
69. ڥքΛҾ͖͗͢ͳ͍ • UIσβΠφʔͱΤϯδχΞͷؒͰɺ੩తͳσβΠϯҎ֎ͷ৘ใ͸ු͖͕ͪ • FigmaͳͲͰʮֆʯΛϕʔεʹίϛϡχέʔγϣϯ͍ͯ͠Δฐ֐ • ු͍ͨ৘ใ͸UIσβΠφʔ/ΤϯδχΞ͕૬ޓʹੵۃతʹर͍ʹ͍͘ඞཁ͕͋Δ • ίϯτϩʔϧ΍φϏήʔγϣϯͷΧελϜUIʹऔΓ૊Ή࣌͸
 ಛʹີͳڠۀͱ૬ޓͷཧղ͕ٻΊΒΕΔ • ΧελϜUIʹରͯ͠ɺUIσβΠφʔ/ΤϯδχΞͱઢΛҾ͘ͷͰ͸ͳ͘
 ಉ͡ΫϦΤΠλʔͱͯ͠औΓ૊Ή
70. ͱ͜ΖͰ....
72. ΧελϜφϏήʔγϣϯόʔ ΧελϜπʔϧόʔ
73. iOS 18·Ͱʹ࡞ΓࠐΜͰ͍ͨ
 ΧελϜUI͸iOS 26ʹ௥ैͰ͖ͣ...
74. શͯΛࣺͯΔܾஅΛ͠·ͨ͠'
75. େมʁ • ΧελϜUIΛ࡞Δͱ͍͏ͷ͸ͦ͏͍͏͜ͱ • ΧελϜUI͸... • ࣮૷͢Δͷ΋େม • ϝϯςφϯεΛ͢Δͷ΋େม • ऴྃ͸ಥવདྷΔ • ָͳ࣌͸ͳ͍ • ΧελϜUIΛ࡞Δʹ͸ ֮ޛ ͕ඞཁ
76. ·ͱΊ | ΧελϜUIΛ࡞Δ֮ޛ • ඪ४UI͕αϙʔτͯ͘͠Ε͍ͯͨશͯΛࣗ෼Ͱ໘౗ݟΔ֮ޛ • UIσβΠφʔͱΤϯδχΞؒͷີͳڠۀΛ͢Δ֮ޛ • ࡞Δͷ΋࡞͔ͬͯΒ΋େมɺͳͷʹऴΘΓ͸ಥવདྷΔ͜ͱΛड͚ೖΕΔ֮ޛ
77. એ఻
78. TestFlightʹ޲͚ͯӶҙ੡࡞த https://calicocat.app
79. X ΛϑΥϩʔͯ͘͠Εͨํʹ
 CalicoεςοΧʔΛ্ࠩ͛͠·͢ʂ @CalicoApp