Upgrade to Pro — share decks privately, control downloads, hide ads and more …

文字拡大されても怖くない レイアウト作りのコツ

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Tiphaine Tiphaine
July 14, 2023
Technology
3.1k
5

文字拡大されても怖くない レイアウト作りのコツ

Shibuya.apk #43
https://shibuya-apk.connpass.com/event/288211/

Avatar for Tiphaine

Tiphaine

July 14, 2023

More Decks by Tiphaine

See All by Tiphaine
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
410
Lottieアニメーションをカスタマイズしてみた
Avatar for Tiphaine tahia910
0
330
Customize your Lottie animations
Avatar for Tiphaine tahia910
0
180
2024年のナビゲーション・フォーカス対応：Composeでキーボード・ナビゲーションをサポートしよう
Avatar for Tiphaine tahia910
0
1.2k
Navigation Focus Support in 2024: Support Keyboard Navigation with Compose!
Avatar for Tiphaine tahia910
0
170
Handling focus in 2024
Avatar for Tiphaine tahia910
0
1.6k
Matomoを使ってみた
Avatar for Tiphaine tahia910
0
2.5k
社内でできるアクセシビリティのはじめかた
Avatar for Tiphaine tahia910
3
800
Raise accessibility awareness at work as an Android developer
Avatar for Tiphaine tahia910
1
220

Other Decks in Technology

See All in Technology
Do Vibe Coding ao LLM em Produção para Busca Agêntica - TDC 2026 - Summit IA - São Paulo
Avatar for Jessica Pauli de C Bonson jpbonson
3
150
はじめての MagicPod生成AI機能 機能紹介から活用方法まで
Avatar for MagicPod magicpod
0
110
Arcana: Production-Ready RAG in Elixir @ ElixirConf EU 2026
Avatar for georgeguimaraes georgeguimaraes
0
110
Percolatorを廃止し、マルチ検索サービスへ刷新した話 / Search Engineering Tech Talk 2026 Spring
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
140
Choose your own adventure in agentic design patterns
Avatar for Guillaume Laforge glaforge
0
150
AWS Agent Registry の基礎・概要を理解する/aws-agent-registry-intro
Avatar for Renya Kujirada ren8k
3
390
EMから幅を広げるために最近挑戦していること / Recent challenges I'm undertaking to expand my horizons beyond EM
Avatar for hiro-torii hiro_torii
1
120
生成AIが変える SaaS の競争原理と弁護士ドットコムのプロダクト戦略
Avatar for 弁護士ドットコム bengo4com
1
2.3k
AI時代における技術的負債への取り組み
Avatar for Tadashi Shigeoka codenote
1
1.7k
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.4k
M5Stack CoreS3とZephyr(RTOS)で Edge AIっぽいことしてみた
Avatar for misoji engineer iotengineer22
0
290
「誰一人取り残されない」 AIエージェント時代のプロダクト設計思想 Product Management Summit 2026
Avatar for mizushimac mizushimac
1
1.5k

Featured

See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
180
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
180
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
303
52k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
150
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
240
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
380
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k

Transcript

  1. Shibuya.apk#43ɹ2023.7.14ɹTiphaineɹ จࣈ֦େ͞Εͯ΋ා͘ͳ͍ ϨΠΞ΢τ࡞Γͷίπ

  2. ࣗݾ঺հ ✤ Tiphaine(ςΟϑΣϯ) ✤ AndroidΤϯδχΞ ✤ϝυϐΞגࣜձࣾ

  3. จࣈ֦େʁ ✤ Ϣʔβʔิॿػೳ ✤ ϑΥϯτͱදࣔ྆ํͱ΋ ✤ ୺຤ʹΑͬͯσϑΥϧτͷ ઃఆͰ͋Δ͔΋

  4. ·͊ɺSPΛ࢖͑͹ ͳΜͱ͔ͳΔͰ͠ΐ͏ …ͦͷ͸ͣͩͬͨ

  5. STORY TIME

  6. ʮܾఆϘλϯ͕ग़ͯͳ͍ Ͱ͚͢Ͳʔʯ

  7. None
  8. None

  9. จࣈ֦େΛ͢Δͱ Ϙλϯ͕ݟ͑ͳ͍

  10. ͔͠΋ ͜ͷը໘͚ͩ͡Όͳ͍

  11. 😇

  12. ࠶ൃ๷ࢭରࡦͷͨΊʹ ࢀߟ͕ཉ͍͠

  13. “ WCAG ୡ੒ج४1.4.4ɹςΩετͷαΠζมߋ (…)ςΩετ͸ɺ ίϯςϯπຢ͸ػೳΛଛͳ͏͜ͱͳ͘ɺ ࢧԉٕज़ͳ͠Ͱ200%·ͰαΠζมߋͰ͖Δɻ

  14. ➤ શͯͷςΩετΛ֦େͰ͖Δ ➤ શͯͷςΩετ͕ಡΊΔ ➤ શͯͷػೳ͕࢖͑Δ ໨ඪ

  15. ͍ͭ΋ಉ͡໰୊ʹͳΔ ࡞Δ࣌ʹରࡦͰ͖Δ

  16. ؾΛ͚ͭΔ΂͖ϙΠϯτ 1⃣ εΫϩʔϧ 2⃣ Margin/Padding 3⃣ লུͱվߦ

  17. 1⃣ εΫϩʔϧ ✤ ΧελϜϨΠΞ΢τɺ·ͨ͸ComposeΛ࢖͏ͳΒɺ શମεΫϩʔϧग़དྷΔΑ͏ʹ͠Α͏ AμΠΞϩάʹ͍ͭͯ εΫϩʔϧͰ͖ͳ͍ ➡︎

  18. 1⃣ εΫϩʔϧ ✤ AlertDialog͸௕͍ςΩετΛsetTitleͰઃఆ͠ͳ͍ AμΠΞϩάʹ͍ͭͯ AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ",

    /*…*/) .show() ̎ߦͰলུ͞Εͯ͠·͏ ➡︎

  19. AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setMessage(“λΠτϧʹඇৗʹ…”)

    .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() 1⃣ εΫϩʔϧ ➡ setMessageΛ࢖͓͏ AμΠΞϩάʹ͍ͭͯ

  20. ✤ ϢʔβʔͷखؒΛݮΒͨ͢Ίɺॏࢹ͍ͨ͠෦෼͚ͩΛ εΫϩʔϧൣғ͔Β֎ͦ͏ 1⃣ εΫϩʔϧ A෦෼తʹݻఆ͢Δ

  21. A෦෼తʹݻఆ͢Δ 1⃣ εΫϩʔϧ ݻఆ෦෼ εΫϩʔϧ Մೳ෦෼

  22. ✤ εΫϩʔϧͰ͖ΔࣄΛ໌֬ʹ͍͔ͨ͠Βɺ Πϯδέʔλʔ͸ফ͑ͳ͍Α͏ʹ͢Δ ✤ Compose͸·ͩͰ͖ͳ͍😣 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ android:fadeScrollbars="false" android:scrollbarAlwaysDrawVerticalTrack="true"

    android:scrollbarSize="4dp" android:scrollbarThumbVertical=“@color/…” android:scrollbars="vertical"

  23. 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ

  24. 2⃣ MARGIN / PADDING ✤ ࠨӈͷmarginΛ๨Εͳ͍

  25. 2⃣ MARGIN / PADDING ✤ ࠨӈ/্Լpadding΋๨Εͳ͍ʢಛʹΧελϜϏϡʔʣ

  26. ✤ padding͕ޮ͘Α͏ʹɺඞͣ minHeight/minWidthΛ࢖͓͏ 3⃣ লུͱվߦ AαΠζΛݻఆ͠ͳ͍ Modifier.defaultMinSize(minHeight = …) android:layout_height="wrap_content"

    android:minHeight=“@dimen/…”

  27. ✤ λοϓͯ͠ଓ͖͕ಡΊΔจষܥͳΒ🆗 ✤ ΞΫγϣϯΛى͜͢Ϙλϯܥ͸🆖 ❌ ✅ ✅ ✅ ELLIPSISͷ࢖͍ํ 3⃣

    লུͱվߦ

  28. ✤ Horizontal LinearLayoutɺ·ͨ͸ComposeͷRow͸ ෯ͷweightͳͲΛࢦఆ͠Α͏ ROWܥ͸ཁ஫ҙ ӈͷཁૉ͕֎΁ԡ͞Εͯ͠·͏ ⬆︎ 3⃣ লུͱվߦ

  29. ✤ ςΩετೖྗܥ͸ग़དྷΔ͚ͩϚϧνϥΠϯՄೳʹ͢Δ ✦ ʢจࣈ਺੍ݶͷӨڹͰແཧ͔΋😥ʣ ✦ ʢώϯτͷ௕͞ʹ߹Θͤͯվߦ͞Εͳ͍͔΋😭ʣ 3⃣ লུͱվߦ AςΩετೖྗʹ͍ͭͯ

  30. ⚠ ANDROID STUDIOͷϓϨϏϡʔ ✤ ࣮ػͱൺ΂ͯ෯͕޿͗͢Δ

  31. ݕূ୺຤ʹ͋Ε͹ແఢɿ Β͘Β͘εϚʔτϑΥϯ

  32. ·ͱΊ ✤ ϑϨʔϜϫʔΫΛ৴༻͗͢͠ͳ͍ ✤ ͻͨ͢ΒεΫϩʔϧΛೖΕΔ ✤ εΫϩʔϧͰ͖Δ͜ͱΛ໌֬ʹ͢Δ ✤ EllipsisΛਖ਼͘͠࢖͏ ✤

    Ͱ͖Δ͚ͩϚϧνϥΠϯՄೳʹ͢Δ

  33. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @tahia910ɹ