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

「スクローリーテリング」から考えるジューシーなメディア / Data Visualizatio...

「スクローリーテリング」から考えるジューシーなメディア / 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 Hisamoto

December 29, 2023
Tweet

More Decks by Sorami Hisamoto

Other Decks in Technology

Transcript

  1. !TPSBNJ ٱຊۭւ ͻ͞΋ͱͦΒΈ !TPSBNJ ٱຊۭւͻ͞΋ͱͦΒΈ ‣ ιϑτ΢ΣΞΤϯδχΞ ‣ ڈ೥ʢʣ͔Β๺ւಓࡏॅ ‣

    Ґஔ৘ใՄࢹԽूஂʮ.*&36/&ʯॴଐ ‣ ੲ͸ࣗવݴޠॲཧΛ΍͍ͬͯ·ͨ͠ σʔλՄࢹԽίϛϡχςΟͷΈͳ͞Μɺ͜Μ͹Μ͸ʂ
  2. σʔλ KBXJLJQFEJBPSHXJLJ౦ւಓޒेࡾ࣍@ ුੈֆ HJUIVCDPNKBQBOSPBEKQ(PLBPEP.BQ HJUIVCDPNTPSBNJUPLBJEPTDSPMMZUFMMJOH ֆ Վ઒޿ॏ ʮ౦ւಓޒरࡾ࣍೭಺ʯʢอӬಊ൛ʣ ύϒϦοΫυϝΠϯ ֗ಓ

    lKBQBOSPBEKQ(PLBPEP.BQzσʔληοτ $$#:/$4" ʮࣣཬͷ౉͠ʯʢւ࿏ʣ͸2(*4Ͱखॻ͖ ॓ 8JLJQFEJBهࣄ͔ΒखಈͰ४උ ֓ཁจ͸8JLJQFEJB"1*͔Βऔಘ લॲཧ͸+VQZUFS/PUFCPPLͱͯ͠ӾཡՄೳ
  3. l*XBTJOXFCEFTJHOBUUIFUJNF BOEDBOUFMMZPVUIBUQSF4OPXGBMM  UIFBTLGSPNBOFXDMJFOUXBTBMXBZTlXFXBOUBXFCTJUFMJLF "QQMFz TJNQMF DMFBO JOUVJUJWF "GUFS4OPXGBMM "QQMFXBTTUJMMIFME

    VQBTBNPEFM CVUMFU`TKVTUTBZUIBU4OPXGBMMXBTJNNFEJBUFMZBEEFE UPUIFDPOWFSTBUJPOBTBWFSCŠlXFXBOUUP4OPXGBMMPVSTJUFz*O GBDU JGZPVMPPLBUUIF"QQMFTJUFUPEBZ ZPVDPVMEBSHVFUIBUJUIBT CFFODPNQMFUFMZ4OPXGBMMFEz #JMM4IBOEFS 5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH]/JHIUJOHBMF OJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH ΫϥΠΞϯτ͔Βɺ 4OPXGBMMͷલ͸ʮ"QQMFͷΑ͏ͳαΠτΛʯ  4OPXGBMMͷޙ͸ʮTOPXGBMM͍ͤͨ͞ʯ Ò Ó
  4. 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 άϥϑΟοΫ͕ΦϚέͰ͸ͳ͘ͳͬͨ ϏδϡΞϧεΩϧΛ࣋ͭਓʑ͕δϟʔφϦζϜۀք΁஫໨͢Δ͖͔͚ͬ
  5. 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ʮΠϯλϥΫςΟϒͳ΋ͷΛݮΒͨ͠ʯ
  6. 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
  7. 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 ‣ ਓؒͷೝ஌ೳྗʹ͸ݶΓ͕͋Δ ‣ εΫϩʔϦʔςϦϯά͕ॿ͚ͱͳΔ ‣ εϓʔϯͰ৯΂ͤ͞ΔΑ͏ʹաอޢʹ ୯७Խͯ͠
  8. 5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH#JMM4IBOEFS  IUUQTOJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH l4DSPMMZUFMMJOHJTBDUVBMMZBQFSGFDUNJNJDSZPGWJEFPXJUIUIFBEEFEBCJMJUZ UPTMPXJUEPXOPSTQFFEJUVQ BMMXIJMFTFFJOHFWFSZGSBNFBMPOHUIFXBZ *U`TMJLFIJHIMZQFSGPSNBOUWJEFPTDSVCCJOHXIFSFXFEPO`UNJTTBCFBU 5IJOHTIBQQFOJOBMJOFBSXBZ

    PWFSUJNF POFUIJOHBUBUJNF KVTUMJLF SFBMJUZCVUCFUUFS CFDBVTFXFIBWFTPNFDPOUSPMPWFSUIFQBDFBOE EJSFDUJPOl ‣ εΫϩʔϦςϦϯά͸ɺಈը࠶ੜ੍ޚͷ׬ᘳͳ໛฿ ‣ ݱ࣮ͱಉ͘͡ɺ௚ઢతʹɺ࣌ؒΛ͔͚ͯɺ Ұ౓ʹͻͱͭͮͭى͜Δ ‣ ϖʔεͱํ޲ΛίϯτϩʔϧͰ͖Δ͔Βɺ͞Βʹྑ͍
  9. .JDSPTPGU64150 IUUQTXXXIPXUPHFFLDPNXIZEPNJDFIBWFTDSPMMXIFFMTNJDSPTPGUJOUFMMJNPVTFUVSOT ࣸਅIUUQTXXXDPNQVUFSPSHQSPpMFTEPVHMBTFOHFMCBSU μάϥεɾΤϯήϧόʔτ Ϛ΢εͷൃ໌ऀ ਓؒͱػցͷΠϯλϑΣʔεʹؔ͢Δ෼໺ͷύΠΦχΞ ݱ୅ͷίϯϐϡʔλΛઌऔΓ͢Δʮ͢΂ͯͷσϞͷ฼ʯ ʣ Ò Ó

    5IFNPVTFXBTKVTUBUJOZQJFDFPGBNVDIMBSHFSQSPKFDU  BJNFEBUBVHNFOUJOHIVNBOJOUFMMFDU Ϛ΢ε͸ɺਓؒͷ஌ੑΛ֦ு͢ΔͨΊͷɺ ΋ͬͱେ͖ͳϓϩδΣΫτͷ΄ΜͷҰ෦ʹ͗͢ͳ͔ͬͨɻ 'BUIFSPGUIF.PVTF%PVH&OHFMCBSU"OFYDMVTJWFJOUFSWJFXJO4VQFS,JET4PGUXBSF3FWJFX IUUQTXXXTVQFSLJETDPNBXFCQBHFTGFBUVSFTNPVTFNPVTFIUNM
  10. ੈل຤ ࠷ॳظͷөը #FSOBSE$IBSEÈSF -FT-VNJÈSF 1BZPU-BVTBOOF $SFEJUT"SDIJWFT$IÃUFBV-VNJÈSF IUUQTFONXJLJQFEJBPSHXJLJ'JMF$JOFNBUPHSBQIF1SPKFDUJPOQOH ͦͯ͠ੈلʹ͸  ө૾͔ͩΒͦ͜Մೳͳ৽͍͠දݱ

     lୈࣣܳज़z͕։Ֆͨ͠ ʮөը͸ͦͷ஀ੜ͔Βੈلͦͦ͜͜ͷ৽ڵܳज़Ͱ͋Δɻͦͷ࠷ॳظɺ༡Ԃ஍ͷΞτϥΫγϣϯ·ͨ͸ݟੈ෺খ԰ͷݺͼ෺Ͱ͋ͬͨɻ ౰࣌ɺөը͸େऺޘָͰ͔͠ͳ͘ɺܳज़ͱͯ͠͸ೝΊΒΕͯ͸͍ͳ͔ͬͨɻ ೥͔Βөըʹ͍ͭͯͷࣥච׆ಈΛ࢝ΊͨϦονϣοτɾΧχϡʔυ͸ɺ өըΛطଘͷܳज़δϟϯϧͱରൺ͠ͳ͕ΒɺͦͷಛੑͷఆٛΛࢼΈɺ೥ʹʰୈܳज़એݴʱΛஶͨ͠ɻ өըͷ࠷େͷಛ௃Ͱ͋Δಈ͘ө૾΍ޫֶతͳޮՌ͸ɺ࣌ؒܳज़ʢԻָɺࢻɺ෣གྷʣͱۭؒܳज़ʢݐஙɺூࠁɺֆʣΛ૯߹͢Δ΋ͷͰ͋Δɻ ΑͬͯΧχϡʔυ͸൪໨ͷܳज़ɺୈܳज़ͱ͍͏໊લΛөըʹ༩͑ͨɻʯ ੴాඒل ୈܳज़ɿݱ୅ඒज़༻ޠࣙయʛඒज़ؗɾΞʔτ৘ใBSUTDBQFz IUUQTBSUTDBQFKQEJDUJPOBSZNPEFSO@IUNM