Share
Embed
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
データ可視化イベント Data Visualization Japan Meetup 2023
https://datavizjp-2023.peatix.com/event/3803195/
動画: https://www.youtube.com/watch?v=kyE7Jvss4A8
Sorami Shiromizu
December 29, 2023
Transcript
189 slides
-
εΫϩʔϦʔςϦϯά ΠϯλϥΫγϣϯ ͱ ಡऀ δϡʔγʔͳϝσ ΟΞ ࣄྫհ ࡞Γํ έʔεελσΟ 4OPXGBMM
εΫϩʔϧͱ͍͏ߦҝ ײੑ ੑ ίϯϐϡʔλʔͱ৽͍͠දݱ -
!TPSBNJ ٱຊۭւ ͻ͞ͱͦΒΈ !TPSBNJ ٱຊۭւͻ͞ͱͦΒΈ ‣ ιϑτΣΞΤϯδχΞ ‣ ڈʢʣ͔Βւಓࡏॅ ‣
ҐஔใՄࢹԽूஂʮ.*&36/&ʯॴଐ ‣ ੲࣗવݴޠॲཧΛ͍ͬͯ·ͨ͠ σʔλՄࢹԽίϛϡχςΟͷΈͳ͞Μɺ͜ΜΜʂ -
4$30-- 4503:5&--*/( ʴ ε Ϋ ϩ ʔ ϧ ε τ
ʔ Ϧ ʔ ς Ϧ ϯ ά -
ԮݪथʰσʔλՄࢹԽೖʱ ߨஊࣾݱ৽ॻ Q ΠϯλϥΫγϣϯͷ׆༻ ΣϒαΠτεϚʔτϑΥϯΞϓϦʹ͓͍ͯɺ ʮϘλϯΛԡ͢ʯʮը໘ΛεΫϩʔϧ͢ΔʯʮਤΛ֦େ͢Δʯ ͱ͍ͬͨϢʔβʔͷಈ࡞ʹԠͯ͡ը໘͕มԽ͢Δ͜ͱΛ ʮΠϯλϥΫγϣϯʢํੑʣʯͱݺͼ·͢ɻ ΠϯλϥΫγϣϯɺσʔλՄࢹԽͷ͍উखΘ͔Γ͢͞Λ
େ্͖ͤ͘͞·͢ɻ͋ͳ͕ͨࢴͰͳ͘ 1$εϚʔτϑΥϯ্ͰσʔλՄࢹԽΛ࡞Ζ͏ͱ͍ͯ͠ΔͳΒɺ ΠϯλϥΫγϣϯΛ׆༻͠ͳ͍ख͋Γ·ͤΜɻ Ò Ó -
σʔλ KBXJLJQFEJBPSHXJLJ౦ւಓޒेࡾ࣍@ ුੈֆ HJUIVCDPNKBQBOSPBEKQ(PLBPEP.BQ HJUIVCDPNTPSBNJUPLBJEPTDSPMMZUFMMJOH ֆ Վॏ ʮ౦ւಓޒरࡾ࣍೭ʯʢอӬಊ൛ʣ ύϒϦοΫυϝΠϯ ֗ಓ
lKBQBOSPBEKQ(PLBPEP.BQzσʔληοτ $$#:/$4" ʮࣣཬͷ͠ʯʢւ࿏ʣ2(*4Ͱखॻ͖ ॓ 8JLJQFEJBهࣄ͔ΒखಈͰ४උ ֓ཁจ8JLJQFEJB"1*͔Βऔಘ લॲཧ+VQZUFS/PUFCPPLͱͯ͠ӾཡՄೳ -
ίʔυ 4DSPMMBNB 4WFMUF 6*ίϯϙʔωϯτͷཧ 4WFMUF,JUະ༻ .BQCPY(-+4 .BQ-JCSFϐον͕େ͖͘ͳΔͱෆ҆ఆ ݄ϦϦʔεͷWͰ҆ఆ༷ͨ͠ 6OP$44 ϢʔςΟϦςΟϑΝʔετ$44
5BJMXJOEΑΓݸਓతʹΈ 5VSGKT ࣍ͷ॓ͷํ֯Λࢉग़͠ɺ ΧϝϥϫʔΫʹར༻ -
4OPXGBMM5IF/FX:PSL5JNFT IUUQTXXXOZUJNFTDPNQSPKFDUTTOPXGBMM Ϛϧνϝσ ΟΞΛ;ΜͩΜʹऔΓೖΕͨΠϯλϥΫςΟϒͳهࣄ ‣ ໊Ͱϲ݄ؒҎ্੍͔͚ͯ࡞ ‣ ؒͰສ17 ສϏδλʔʢۙ͘5JNFTॳӾཡʣ
‣ ɺϐϡʔϦοπΝʔ ϐʔϘσ Οड ‣ ۀք༻ޠlUPTOPXGBMMzͱ͍͏ϑϨʔζʹ ‣ ΦϯϥΠϯδϟʔφϦζϜͷసͱͳͬͨ -
l*XBTJOXFCEFTJHOBUUIFUJNF BOEDBOUFMMZPVUIBUQSF4OPXGBMM UIFBTLGSPNBOFXDMJFOUXBTBMXBZTlXFXBOUBXFCTJUFMJLF "QQMFz TJNQMF DMFBO JOUVJUJWF "GUFS4OPXGBMM "QQMFXBTTUJMMIFME
VQBTBNPEFM CVUMFU`TKVTUTBZUIBU4OPXGBMMXBTJNNFEJBUFMZBEEFE UPUIFDPOWFSTBUJPOBTBWFSClXFXBOUUP4OPXGBMMPVSTJUFz*O GBDU JGZPVMPPLBUUIF"QQMFTJUFUPEBZ ZPVDPVMEBSHVFUIBUJUIBT CFFODPNQMFUFMZ4OPXGBMMFEz #JMM4IBOEFS 5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH]/JHIUJOHBMF OJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH ΫϥΠΞϯτ͔Βɺ 4OPXGBMMͷલʮ"QQMFͷΑ͏ͳαΠτΛʯ 4OPXGBMMͷޙʮTOPXGBMM͍ͤͨ͞ʯ Ò Ó -
XXXOZUJNFTDPNJOTJEFS TOPXGBMMBUIPXJUDIBOHFEKPVSOBMJTNIUNM TPVSDFPQFOOFXTPSHBSUJDMFT IPXXFNBEFTOPXGBMM IUUQTFOXJLJQFEJBPSHXJLJ4OPX@'BMM l*UHFOFSBUFEUIFJEFBBNPOHQFPQMFXJUIWJTVBMTLJMMTUIBUKPVSOBMJTNNJHIU CFBQMBDFGPSUIFN z.S%VFOFTTBJEl/PUQFPQMFXIPXFSFFYQFSUTBUUIF NPNFOU CVUQFPQMFJOTDIPPMXIPDPVMETFFBOPWFSMBQCFUXFFOBOBSFB
XIFSFUIFZIBEUBMFOUBOEUIFEJTDJQMJOFPGWJTVBMKPVSOBMJTNz 5IF(SBQIJDTEFTLIBTHSPXOTVCTUBOUJBMMZTJODFl4OPX'BMMz "OEOPMPOHFSBSFDIBSUT NBQTBOEBOJNBUJPOTDPOTJEFSFE MBTUNJOVUFTXFFUFOFSTGPSDPNQMFUFEBSUJDMFT 4OPX'BMMBU)PX*U$IBOHFE+PVSOBMJTN5IF/FX:PSL5JNFT IUUQTXXXOZUJNFTDPNQSPKFDUTTOPXGBMM άϥϑΟοΫ͕ΦϚέͰͳ͘ͳͬͨ ϏδϡΞϧεΩϧΛ࣋ͭਓʑ͕δϟʔφϦζϜۀք͢Δ͖͔͚ͬ -
8IZXFBSFEPJOHGFXFSJOUFSBDUJWFT"SDIJF5TF HJUIVCDPNBSDIJFUTFNBMPpFKCMPCNBTUFSUTFNBMPpFKTMJEFTQEG Archie Tse · Deputy Graphics Director ·
The New York Times · @archietse Why We Are Doing Fewer Interactives Por qué estamos haciendo menos gráficos interactivos /:5JNFTͷ5TFʮΠϯλϥΫςΟϒͳͷΛݮΒͨ͠ʯ -
8IZXFBSFEPJOHGFXFSJOUFSBDUJWFT"SDIJF5TF 3 rules for visual storytelling (2016 edition) 1.
If you make the reader click or do anything other than scroll, something spectacular has to happen. 2. If you make a tooltip or rollover, assume no one will ever see it. If content is important for readers to see, don’t hide it. 3. When deciding whether to make some- thing interactive, remember that getting it to work on all platforms is expensive. εΫϩʔ ϧҎ֎ͷ͜ͱΛͤ͞ΔͳΒɺ ͳʹ͔ܶతͳ͜ͱ͕ى͖ͳ͚ΕͳΒͳ͍ πʔ ϧνοϓϩʔ ϧΦʔόʔ ୭ݟͳ͍ͱఆ͠ɺॏཁใӅ͞ͳ͍ ΠϯλϥΫς ΟϒͳͷΛݕ౼͢Δͱ͖ɺ શϓϥοτϑΥʔ ϜରԠʹେ͖ͳίετ͕ ͔͔Δ͜ͱΛ೦಄ʹஔ͘ HJUIVCDPNBSDIJFUTFNBMPpFKCMPCNBTUFSUTFNBMPpFKTMJEFTQEG -
5IF3IZUINPG:PVS4DSFFO$ISJTUPQIFS#VUMFS IUUQTXXXDISCVUMFSDPNUIFSIZUINPGZPVSTDSFFO ‣ ʮͬ͟ͱݟΔʯͷԠɺʮಡΉʯͷબ ‣ ॏཁใҰ؏ͨ͠ॴ ‣ ʮ܁Γฦ͠ʯใ ‣
ʮۭനʯχϡʔτϥϧͰͳ͍ ʮߏʯͱʮϦζϜʯ ͞Ͱͳ͘ɺϦζϜͷ͕ܽ -
5IF4DSPMMZUFMMJOH4DPVSHF3PCFSU,PTBSB IUUQTFBHFSFZFTPSHCMPHUIFTDSPMMZUFMMJOHTDPVSHF εΫϩʔϦςϦϯάʹର͢Δҙݟ ܧଓతͳεΫϩʔϧʹରͯ͠ɺஅଓతͳεςοϓ શମͷ͕͞Θ͔Βͳ͍ ಛఆՕॴɺҠಈ͍ͨ͠ lεΫϩʔϧδϟοΩϯάzϢʔβʔૢ࡞ΛϓϩάϥϜଆͰॻ੍͖͑ͯޚ εΫϩʔϧͯ͠ΔͷʹεΫϩʔϧ͠ͳ͍ ણࡉͳεΫϩʔϧΛཁٻ͞ΕΔ
ೖΓࠞͬͨ͡ϝλϑΝʔྫ͑ʮ࠶ੜ։࢝εΫϩʔϧɺϦϓϨΠϘλϯʯ ͜ͷهࣄͰɺସͱͯ͠ʮεςοϓʯΛקΊ͍ͯΔ εΫϩʔϦʔςϦϯά্͕ख͍͔͘ͳ͍ͱ͖ -
5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH#JMM4IBOEFS IUUQTOJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH 5IFSFJTBUPOPGSFTFBSDIPOIVNBOT`MJNJUFEBCJMJUZUPSFUBJOJOGPSNBUJPO DPHOJUJWFMPBE BOEIPXUIBUBGGFDUTQSPDFTTJOHJOGPSNBUJPO<ʜ> 4DSPMMZUFMMJOHIFMQTTPMWFUIJTQSPCMFN
&WFSHSFFOTBZT CFDBVTFJU`TBCPVU TQPPOGFFEJOHPVSBVEJFODFl*UTPVOETMJLFJOGBOUBMJ[JOHUIFNCVUJU`TOPU z TIFBEET TBZJOHXFOFFEUPVOEFSTUBOEUIFNBOEUIFJSOFFET BOE BDLOPXMFEHJOHPVSDPHOJUJWFMJNJUBUJPOTBMMPXTVTUPDIPPTFNFUIPETPG DPOUFOUEFMJWFSZUPNBYJNJ[FPVSSFTVMUT ‣ ਓؒͷೝೳྗʹݶΓ͕͋Δ ‣ εΫϩʔϦʔςϦϯά͕ॿ͚ͱͳΔ ‣ εϓʔϯͰ৯ͤ͞ΔΑ͏ʹաอޢʹ ୯७Խͯ͠ -
5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH#JMM4IBOEFS IUUQTOJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH l4DSPMMZUFMMJOHJTBDUVBMMZBQFSGFDUNJNJDSZPGWJEFPXJUIUIFBEEFEBCJMJUZ UPTMPXJUEPXOPSTQFFEJUVQ BMMXIJMFTFFJOHFWFSZGSBNFBMPOHUIFXBZ *U`TMJLFIJHIMZQFSGPSNBOUWJEFPTDSVCCJOHXIFSFXFEPO`UNJTTBCFBU 5IJOHTIBQQFOJOBMJOFBSXBZ
PWFSUJNF POFUIJOHBUBUJNF KVTUMJLF SFBMJUZCVUCFUUFS CFDBVTFXFIBWFTPNFDPOUSPMPWFSUIFQBDFBOE EJSFDUJPOl ‣ εΫϩʔϦςϦϯάɺಈը࠶ੜ੍ޚͷᘳͳ฿ ‣ ݱ࣮ͱಉ͘͡ɺઢతʹɺ࣌ؒΛ͔͚ͯɺ Ұʹͻͱͭͮͭى͜Δ ‣ ϖʔεͱํΛίϯτϩʔϧͰ͖Δ͔Βɺ͞Βʹྑ͍ -
IUUQTTZOUBYGNTIPXDSFBUPSPGXPSEMFKPTIXBSEMF +PTI8BSEMFʢ803%-&ͷ࡞ऀʣᐌ͘ ‣ 6*ʹ͓͚Δʮδϡʔεʯ ‣ Ͳ͏ͬͯϑΟʔυόοΫΛ༩͑Δ͔ ‣ ݱ࣮Ͱɺࣄॠ࣌ʹى͜Βͳ͍ ‣ ࣌ؒΛ͔͚ͯɺΞχϝʔγϣϯΛ࡞ͬͨ
‣ ਓؒతɺࣗવɺΦʔΨχοΫͳҹ ‣ 803%-&ͷޭʹେ͖͘Өڹͨͩ͠Ζ͏ -
l+VJDFz.BUU,VDJD l+VJDFzXBTPVSXFUMJUUMFUFSNGPSDPOTUBOUBOECPVOUJGVM VTFSGFFECBDL"KVJDZHBNFFMFNFOUXJMMCPVODFBOE XJHHMFBOETRVJSUBOENBLFBMJUUMFOPJTFXIFOZPVUPVDIJU "KVJDZHBNFGFFMTBMJWFBOESFTQPOETUPFWFSZUIJOHZPVEP rUPOTPGDBTDBEJOHBDUJPOBOESFTQPOTFGPSNJOJNBMVTFS JOQVU*UNBLFTUIFQMBZFSGFFMQPXFSGVMBOEJODPOUSPMPG UIFXPSME BOEJUDPBDIFTUIFNUISPVHIUIFSVMFTPGUIF
HBNFCZDPOTUBOUMZMFUUJOHUIFNLOPXPOBQFSJOUFSBDUJPO CBTJTIPXUIFZBSFEPJOH ϏσΦήʔϜք۾͔ΒͷϑϨʔζ ʮઈ͑ؒͳ͍ɺ๛ͳϢʔβʔϑΟʔυόοΫʯ IUUQTTZOUBYGNTIPXDSFBUPSPGXPSEMFKPTIXBSEMF -
தଜ༐ޗʮͳΜ͔ͩɺؾ͍͍࣋ͪʯ Òॅ٢தଜ͞Μ͕ΣϒσβΠϯΛ͢Δࡍʹ৺͕͚͍ͯΔͷ ɹɹʮͳΜ͔ͩɺؾ͍͍࣋ͪʯͱ͍͏͜ͱͩͦ͏Ͱ͕͢ɺ ɹɹͦΕ۩ମతʹͲ͏͍͏͜ͱͳͷͰ͔͢ɻ தଜੜཧతʹؾ͍͍࣋ͪͱ͔ɺ৮͍ͬͯΔײ͡ ɹɹᴷϞχλʔ্Ͱܾͯ͠৮͍ͬͯΔΘ͚Ͱͳ͍ͷͰ͕͢ᴷɹɹ ɹɹͱ͍ͬͨͷ͕Ͳ͔͜Β͘Δͷ͔ͱ͍͏͜ͱΛ୳Γͳ͕Βɺ ɹɹ͍Ζ͍ΖͱͬͯΈ͍ͯ·͢ɻ ɹɹ৮Δલͷೝࣝͱɺ৮ͬͨ͋ͱͷೝࣝͱͷམࠩɻ ɹɹԿͱ͍͏͔ɺͦͷ໘ന͚ͩ͞Λٻ͍ͯ͠Δͱ͍͏ΠϝʔδͰ͢ɻ
ɹɹྫ͑ɺͨͩͷฏ໘ߏʹ͔͠ݟ͑ͳ͍ͷ͕ɺ ɹɹ৮ΕΔͱશવҧ͏ͷʹͳΔͱ͍͏ɺͦͷ໘ന͞Ͱ͢Ͷɻ ʰϓϩϑΣογϣφϧࣄͷྲّྀ ɹதଜ༐ޗΣϒσβΠφʔ ɹϫϯΫϦοΫͰɺੈքΛڻ͔ͤʱ /),ग़൛ -
.JDSPTPGU64150 IUUQTXXXIPXUPHFFLDPNXIZEPNJDFIBWFTDSPMMXIFFMTNJDSPTPGUJOUFMMJNPVTFUVSOT ࣸਅIUUQTXXXDPNQVUFSPSHQSPpMFTEPVHMBTFOHFMCBSU μάϥεɾΤϯήϧόʔτ Ϛεͷൃ໌ऀ ਓؒͱػցͷΠϯλϑΣʔεʹؔ͢ΔͷύΠΦχΞ ݱͷίϯϐϡʔλΛઌऔΓ͢Δʮͯ͢ͷσϞͷʯ ʣ Ò Ó
5IFNPVTFXBTKVTUBUJOZQJFDFPGBNVDIMBSHFSQSPKFDU BJNFEBUBVHNFOUJOHIVNBOJOUFMMFDU ϚεɺਓؒͷੑΛ֦ு͢ΔͨΊͷɺ ͬͱେ͖ͳϓϩδΣΫτͷ΄ΜͷҰ෦ʹ͗͢ͳ͔ͬͨɻ 'BUIFSPGUIF.PVTF%PVH&OHFMCBSU"OFYDMVTJWFJOUFSWJFXJO4VQFS,JET4PGUXBSF3FWJFX IUUQTXXXTVQFSLJETDPNBXFCQBHFTGFBUVSFTNPVTFNPVTFIUNM -
ਓೳʢ"*ʣͱਓ֦ؒுʢ)VNBO"VHNFOUBUJPOʣ Òɹྫ͑"QQMFͷࢥɺύʔιφϧίϯϐϡʔλΛ։ൃ ͨ͠ਓʑᴷᴷμάϥεɾΤϯήϧόʔτ͔ΒɺΞϥϯɾέ Πɺͦͯ͠εςΟʔϒɾδϣϒζͱ࿈ͳΔɺਓؒͷೳྗ Λ֦ு͢ΔʮΤϯύϫʔϝϯτʯͷͨΊͷଘࡏͱͯ͠ί ϯϐϡʔλΛଊ͑Δܥේͷதʹ͋Γ·͢ɻͪΖΜ͕ࣗ ϓϥοτϑΥʔϜΛॴ༗͍ͯ͠ΔͷͰ͕͢ɻ ɹ͜ΕɺਓؒΛࡶࣄ͔Βղ์͢ΔͨΊʹίϯϐϡʔλ Λ͏ͱ͍͏ࢥʹΑΔͷͰɺۙɺਓೳͱ ͍ۙͯ͠Δ(PPHMFͷࢥͱҟͳΔܥේʹ͋Γ·͢ɻࢥ
ͱͯ͠ݟͨͱ͖ʹʮύιίϯͷࢥʯͱʮਓೳʴ ϓϥοτϑΥʔϜͷࢥʯɺ࣮ࣅͯඇͳΔͷͳͷ Ͱ͢ɻɹ མ߹ཅҰʰຐ๏ͷੈلʱ 1-"/&54 -
ੈل ࠷ॳظͷөը #FSOBSE$IBSEÈSF -FT-VNJÈSF 1BZPU-BVTBOOF $SFEJUT"SDIJWFT$IÃUFBV-VNJÈSF IUUQTFONXJLJQFEJBPSHXJLJ'JMF$JOFNBUPHSBQIF1SPKFDUJPOQOH ಈ͔͵өը͕ಈ͘ͷΛ࠶ݱͯ͘͠ΕΔͱ͢ΔͳΒɺ ͜ͷ໋Λͻͬ͘Γฦͯ͠ɺ ಈ͘өըʹΑͬͯಈ͔͵ͷΛ࠶ݱ͢Δ͜ͱ͕Ͱ͖ΔͷͰͳ͍͔
Ò Ó ΞϨΫαϯυϧɾϓϩϛΦ ͝Ζ ӡՏͰಈ͘ΰϯυϥ͔ΒԊ؛ͷݐΛࡱӨͨ͠ʰધ͔ΒࡱӨ͞ΕͨେӡՏͷύϊϥϚʱ IUUQTKBXJLJQFEJBPSHXJLJγωϚτάϥϑ -
ੈل ࠷ॳظͷөը #FSOBSE$IBSEÈSF -FT-VNJÈSF 1BZPU-BVTBOOF $SFEJUT"SDIJWFT$IÃUFBV-VNJÈSF IUUQTFONXJLJQFEJBPSHXJLJ'JMF$JOFNBUPHSBQIF1SPKFDUJPOQOH ͦͯ͠ੈلʹ ө૾͔ͩΒͦ͜Մೳͳ৽͍͠දݱ
lୈࣣܳज़z͕։Ֆͨ͠ ʮөըͦͷੜ͔Βੈلͦͦ͜͜ͷ৽ڵܳज़Ͱ͋Δɻͦͷ࠷ॳظɺ༡ԂͷΞτϥΫγϣϯ·ͨݟੈখͷݺͼͰ͋ͬͨɻ ࣌ɺөըେऺޘָͰ͔͠ͳ͘ɺܳज़ͱͯ͠ೝΊΒΕ͍ͯͳ͔ͬͨɻ ͔Βөըʹ͍ͭͯͷࣥච׆ಈΛ࢝ΊͨϦονϣοτɾΧχϡʔυɺ өըΛطଘͷܳज़δϟϯϧͱରൺ͠ͳ͕ΒɺͦͷಛੑͷఆٛΛࢼΈɺʹʰୈܳज़એݴʱΛஶͨ͠ɻ өըͷ࠷େͷಛͰ͋Δಈ͘ө૾ޫֶతͳޮՌɺ࣌ؒܳज़ʢԻָɺࢻɺགྷʣͱۭؒܳज़ʢݐஙɺூࠁɺֆʣΛ૯߹͢ΔͷͰ͋Δɻ ΑͬͯΧχϡʔυ൪ͷܳज़ɺୈܳज़ͱ͍͏໊લΛөըʹ༩͑ͨɻʯ ੴాඒل ୈܳज़ɿݱඒज़༻ޠࣙయʛඒज़ؗɾΞʔτใBSUTDBQFz IUUQTBSUTDBQFKQEJDUJPOBSZNPEFSO@IUNM