Share
Embed
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
ボタンやリンクなどのUI要素が小さいと操作しづらいですが、操作性を定量的に検討できないのがデザイナーにとって悩ましいポイントでした。我々の開発したツール群「Tappy」を使うと、UI要素の大きさに基づいてタップ成功率を高精度に推定でき、リンクが小さすぎる箇所や、不必要に画面を占有しすぎているボタンなどを特定できます。このトークでは以下の内容を含みます。
・Tappyの使い方
・Tappyの活用事例
・タップ成功率の計算方法の理論的背景
LINEヤフーTech (LY Corporation Tech) PRO
July 01, 2025
Transcript
32 slides
-
+PJOFE:BIPP+"1"/3FTFBSDI -FBEFS )VNBO$PNQVUFS*OUFSBDUJPO5FBN 3FTFBSDI"SFB )VNBODPNQVUFSJOUFSBDUJPO )$* BOEVTFSJOUFSGBDFT 6* &TQFDJBMMZ IPXUPEFTJHOCFUUFSXFCQBHFTBQQTUIBUVTFSTJOUFSBDUXJUI
4FMGJOUSPEVDUJPO 4IPUB:BNBOBLB 1I%JO&OHJOFFSJOH .FJKJ6OJWFSTJUZ *IBWFPOFDBUBOEUXPEPHT -
5SBEJUJPOBMMZ JUIBTCFFOEJGGJDVMUUPRVBOUJUBUJWFMZFWBMVBUFUIFVTBCJMJUZPGNPCJMF6*T *GBVTFSTVDDFFETUJNFTPVUPGUBQBUUFNQUT UIFUBQTVDDFTTSBUFJT 5BQQZ 5PPMGPSFTUJNBUJOHUBQTVDDFTTSBUFTPG6*FMFNFOUT FH CVUUPOT MJOLT PONPCJMFXFCQBHFTBQQT
😄&BTZUPUBQ 😢'SFRVFOUFSSPST -BSHF TNBMM 4VDDFTT &SSPS TVDDFTTSBUF -
8IFONBOZ6*TNVTUCFQMBDFEPOBTDSFFO EFTJHOFSTDBOOPUBMXBZTGPMMPXHVJEFMJOFT &H "OESPJEEFTJHOHVJEFMJOFSFDPNNFOET6*FMFNFOUTUPCFBUMFBTUNNJOTJ[F IUUQTTVQQPSUHPPHMFDPNBDDFTTJCJMJUZBOESPJEBOTXFS IMKB ✘ *UJTPGUFOOPUGFBTJCMFUPFOTVSFUIBUFWFSZ6*FMFNFOUJTNNPSMBSHFS 8IFOB6*FMFNFOUJT)NNʷ8NN JUJTVODMFBSIPXBDDVSBUFMZVTFSTUBQJU
4VDDFTTSBUFTBMMPXGPSEFDJTJPOTCBTFEPORVBOUJUBUJWFJOEJDBUPST &H l-FU`TFOTVSFBUMFBTUBTVDDFTTSBUFGPSBMM6*TPOUIJTXFCQBHFz ✘ .FBTVSJOHUBQTVDDFTTSBUFTCZIBWJOHNBOZQFPQMFUBQIVOESFETPGUJNFTJTDPTUMZ %JGGJDVMUZJO6*EFTJHO -
• 0QUJNJ[JOHBEQMBDFNFOUUISPVHI%0.BOBMZTJT<8V /FVSPDPNQVUJOH> • %FUFDUJOHQIJTIJOHBUUBDLTUISPVHI%0.BOBMZTJT<.BP 1SPDFEJB$PNQVU4DJ> • &TUJNBUJOHUBQQBCMFFMFNFOUTJOTDSFFOTIPUTVTJOHDPNQVUFSWJTJPO <4DIPPQ $)*>
• %FUFDUJOHUBQQBCMFFMFNFOUTJOTDSFFOTIPUTVTJOHBVUPNBUFECPUT<8V 6*45> ✔5BQQZDBOJEFOUJGZXIFUIFSFWFSZQJYFMPOUIFTDSFFOJTUBQQBCMF XJUIBMNPTUOPMBH 3FTFBSDISFMBUFEUP5BQQZXFCBQQ -
%JGGJDVMUZJOEFUFDUJOH6*TUISPVHI$7 &YBNQMFTXIFSFDPNQVUFSWJTJPOUFDIOJRVFTDBOOPUEJTUJOHVJTIUBQQBCMFBSFBT )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL
)ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL 'SPNBQQFBSBODFBMPOF JUJTEJGGJDVMUUPEFUFSNJOFFYBDUMZ XIJDIBSFBTBSFUBQQBCMF 0OMZUIFUFYUJUTFMGJTUBQQBCMF 5IFBSFBBSPVOEUIFUFYU JTBMTPUBQQBCMF 5IFUBQQBCMFSFHJPODIBOHFTEFQFOEJOH POUIFQMBDFNFOUPGTVSSPVOEJOHMJOLT -
3FMBUFESFTFBSDIPOUBSHFUQPJOUJOH 7BSJBCJMJUZPGUBQQFEQPJOUT "JNFEQPTJUJPO 'JUUT`MBX <'JUUT > 1SFEJDUUBQUJNF𝑇 𝑇 = 𝑎
+ 𝑏 log! 𝐷 𝑊 + 1 4DINJEU`TMBX <4DINJEU > 1SFEJDUUBQQPJOUWBSJBCJMJUZ𝜎 𝜎 = 𝑎 + 𝑏 𝐷 𝑇 &SSPSSBUFNPEFM <8PCCSPDL > 𝐸𝑅 = 1 − erf 2.066 𝑊 𝐷 2 "!#$ % − 1 2 -
$MJDLDPPSEJOBUFTGPMMPXBOPSNBMEJTUSJCVUJPO 7BSJBODF𝜎!DBOCFFTUJNBUFECBTFEPOUIFTJ[F𝑊 𝜎! = 𝑎 + 𝑏𝑊! 1SPCBCJMJUZUIBUBDMJDLGBMMTXJUIJOUIFUBSHFUJT𝑆𝑅 = 𝑃
− " ! ≤ 𝑋 ≤ " ! = erf " ! !# 5IFPSFUJDBMCBDLHSPVOEPG5BQQZ 3FMBUJPOTIJQCFUXFFOUBSHFUTJ[F8BOEDMJDLDPPSEJOBUFWBSJBODFМ<#J 6*45> %JTUBODF𝐷 4J[F𝑊 4VDDFTT &SSPS &SSPS 𝑥! 𝑥" 'SFRVFODZ 𝜎! [mm!] 𝑊! [mm!] Z Y 3 -
VTFSTUBQQFEWBSJPVTCVUUPOTUJNFT UBQT <:BNBOBLB *44> 'PSFMMJQUJDBMUBSHFUT UIFIJUBSFBJTDBMDVMBUFEVTJOHUIFCPVOEJOHSFDUBOHMF 5BQDPPSEJOBUFTBSFOPSNBMMZEJTUSJCVUFEFWFOGPSSFDUBOHVMBSUBSHFUT<6TVCB *44> .PWFNFOUEJTUBODFIBTMJUUMFFGGFDUPOUIFWBSJBODFPGUBQQPJOUT<:BNBOBLB
*44> .PEFMBOEEBUBVTFEGPS5BQQZ 𝑋~𝑁(𝜇! , 𝜎! ") 𝑌~𝑁(𝜇# , 𝜎# ") 𝑃 𝑆 = / $ 1 2𝜋𝜎% exp − 𝑥" 2𝜎% " 1 2𝜋𝜎& exp − 𝑦" 2𝜎& " 𝑑𝑥𝑑𝑦 8 ) 𝑅 = 𝑥, 𝑦 | − 𝑊 2 ≤ 𝑥 ≤ 𝑊 2 , − 𝐻 2 ≤ 𝑦 ≤ 𝐻 2 𝜎% " = 𝑎 + 𝑏𝑊" 𝜎& " = 𝑐 + 𝑑𝐻" -
"UBTLXIFSFQBSUJDJQBOUTUVSOCBDLBUBOBJNFEQPTJUJPO "GUFSNBOZSFQFUJUJPOT UIFUVSOBSPVOEQPJOUTGPSNBOPSNBMEJTUSJCVUJPO #FDBVTFUIJTJTTJNJMBSUPUBSHFUDMJDLJOHPOB1$ JUJTGSFRVFOUMZDJUFEFWFOJOSFDFOUSFTFBSDIQBQFST &OEQPJOUWBSJBCJMJUZJOBJNJOHUBTL "SFTFBSDIUPQJDTUVEJFETJODFUIFUIDFOUVSZ 8PPEXPSUI 345IFBDDVSBDZPGWPMVOUBSZNPWFNFOU1TZDIPMPHJDBM3FWJFX .POPHSBQI
4VQQMFNFOUT 7PM /P QQr 5VSOBSPVOEQPJOUTGPMMPX BOPSNBMEJTUSJCVUJPO -
*UJTPGUFOTUBUFEUIBUNPEFMTGPSFTUJNBUJOHTVDDFTTSBUFTDBOTVQQPSUEFTJHOFST • lPVSXPSLBMTPQSPWJEFTUIFGPMMPXJOHJOTJHIUTGPSJOUFSGBDF EFTJHOJOWPMWJOHQPJOUJOHBUNPWJOH UBSHFUTz<;IBOH $)*> • lPVSNPEFMDBOIFMQJNQSPWFJOUFSGBDFEFTJHOJOSFBMXPSMEBQQMJDBUJPOTTVDIBT73 BQQMJDBUJPOTBOEHBNFTz<)VBOH $)*>
• lJUDBOCFVTFECZ6*EFTJHOFSTJOEFTJHOJOHBOEFWBMVBUJOHUPVDITDSFFOVTFSJOUFSGBDFTz <.B 6*45> )PXFWFS UIFSFXFSFOPTUVEJFTFYBNJOJOHXIFUIFSTVDINPEFMTBSFBDUVBMMZVTFGVMJOUIF6*EFTJHO XPSLPGQSPGFTTJPOBMEFTJHOFSTBOEFOHJOFFST *OPVSSFTFBSDI XFDPOEVDUFEJOUFSOBMJOUFSWJFXTXJUIVTFSTPGUIFXFCBQQWFSTJPOPG5BQQZ $MBJNTGPSNPEFMTJOQSFWJPVTTUVEJFT -
63-TBOBMZ[FE 6OJRVFVTFST 6OJRVF63-T
5PUBMOVNCFSPGBOBMZTFTTIPXO JOUIJTGJHVSFJT 0WFSPGUIFSFNBJOJOH63-T XFSFBOBMZ[FEUJNFT 6TBHFTUBUVTPG5BQQZXFCBQQ 'JSTUUISFFNPOUITBGUFSUIFQVCMJDSFMFBTF +BOVBSZ r"QSJM 63-TBOBMZ[FEPSNPSFUJNFT -
"NPOHUIFTNBSUQIPOFNPEFMTVTFEGPSBOBMZTJT UIPTFTFMFDUFEUJNFTPSNPSF 5IFEFGBVMUTFUUJOH J1IPOF XBTUIFNPTU GSFRVFOUMZDIPTFO 5IFSFXFSFBMTPNBOZBOBMZTFTDPOEVDUFEVTJOH NVDIPMEFSNPEFMT FH
J1IPOF XIJDIJTPWFSZFBSTPME 6TBHFTUBUVTPGUIF5BQQZXFCBQQ 'JSTUUISFFNPOUITBGUFSUIFQVCMJDSFMFBTF +BOVBSZ r"QSJM -
8FBSFDPNQFUJOHXJUIPUIFSNFEJBGPSVTFST`UJNF &H EVSJOHNJOPGEBJMZJOUFSOFUVTF VTFSTTQFOEQBSUPGUIBUUJNFPO-:$PSQPSBUJPOTFSWJDFT #ZQSPWJEJOHDPNGPSUBCMFTFSWJDFTBOEBQQT FH GFXPQFSBUJPOFSSPST • 6TFS`TQFSTQFDUJWF
8BTUFEUJNFEVSJOHJOUFSOFUVTFDBOCFSFEVDFE • 1SPWJEFS`TQFSTQFDUJWF 6TFSTBSFNPSFMJLFMZUPDPOUJOVFVTJOHUIFJSTFSWJDFT 8IZDPOEVDU6*SFTFBSDIBU-:$PSQPSBUJPO 6TFSGSJFOEMZ6*TBSFJNQPSUBOUGPSCPUIVTFSTBOETFSWJDFQSPWJEFST $JUFEGSPN IUUQTXXXTPVNVHPKQNBJO@DPO UFOUQEG 57WJFXNJO *OUFSOFUVTBHFNJO BTPG -
6TFSTEJTMJLFXFCTFSWJDFTUIBUXBTUFUIFJSUJNF • *GBXFCQBHFMPBETXJUIJOTFD POMZPGVTFSTMFBWF • *GMPBEJOHUBLFTTFD UIFESPQPVUSBUFJODSFBTFTUP 5BQQZEFWFMPQNFOUUFBN`TQFSTQFDUJWF • *OBEEJUJPOUPOFUXPSLSFTFBSDIEFWFMPQNFOU
JNQSPWJOH6*EFTJHODBOBMTPQSPWJEFDPNGPSUBCMFTFSWJDFTBOESFEVDFXBTUFEUJNF %FWFMPQNFOUGPSDPNGPSUBCMFTFSWJDFT $JUFEGSPNl%PFT1BHF-PBE5JNF3FBMMZ"GGFDU#PVODF 3BUF 1JOHEPN3PZBMz 1JOHEPN IUUQTXXXQJOHEPNDPNCMPHQBHFMPBEUJNFSFBMMZ BGGFDUCPVODFSBUF -
&SSPSDMJDLJOHJODVSTBEEJUJPOBMBDUJPOT BOEFYUSBUJNF UPSFDPWFSGSPNUIFFSSPS ᶃ "DDJEFOUBMMZTFMFDUJOHUIFXSPOHMJOL POFBCPWFUIFJOUFOEFEPOF ᶄ $MJDLJOHUIFCSPXTFS`Tl#BDLzCVUUPOUPSFMPBEUIFQSFWJPVTQBHF ᶅ 4DSPMMJOHUISPVHIUIFQBHFUPGJOEBOEDMJDLUIFDPSSFDUMJOLBHBJO
8BTUFEUJNFCZFSSPSPQFSBUJPO &YUSBTUFQTSFRVJSFEUPSFDPWFSGSPNVTFSNJTUBLFT -
4MJHIUMZPMEFSEBUB ':2GJOBODJBMSFTVMUT NJOQFSVTFSQFSEBZ • /VNCFSPGNPOUIMZMPHHFEJOVTFS*%TNJMMJPO • 5PUBMVTBHFUJNFCZMPHHFEJOVTFST TNBSUQIPOF 1$ CJMMJPOIPVST
*GFSSPSDMJDLTPDDVSEVSJOHNJO dTFDPGFYUSBXPSLJTOFFEFE dPGUPUBMUJNF ✘*ODPOWFOJFOUBOEXBTUFEUJNFGPSVTFST ✘'PSTFSWJDFQSPWJEFST JUSFQSFTFOUTBTJHOJGJDBOUMPTTPGPQQPSUVOJUZ • *GUIBUXBTUFEUJNFIBECFFOTQFOUVTJOHUIFTFSWJDF JUDPVMEIBWFMFEUPJODSFBTFE TBMFTGPSTIPQQJOHTJUFTPSNPSFBEWJFXTGPSOFXTTJUFT #FDBVTFEFTJHOJOH6*TUIBUQSFWFOUVTFSFSSPSTJTTPJNQPSUBOU XFEFWFMPQFE5BQQZ 6TBHFTUBUVTPG-:$PSQPSBUJPOTFSWJDFT $JUFEGSPNIUUQTTZJNHKQJEPDTJSBSDIJWFTQSFTFOUKQQSFTFOUBUJPOQEG