高知こどもの図書館のウェブサイト制作から学ぶ “依頼者も制作チームも幸せ” なプロジェクト

5月5日に公開された「高知こどもの図書館」のウェブサイト。このサイトはクラウドファンディングで資金調達をし、アクセシビリティを意識したサイトをフリーランスのチームが制作しました。

公開された後に依頼者からも制作チームからも「幸せなプロジェクトだった」という声がでたサイトの制作過程を明らかにしながら、制作のポイントを6月24日の前半はディレクションやマネージメント中心に、7月8日開催の後半では実装に関してを中心にお話ししていきます。

Transcript

1. +VOLP/VLBHBֹլॱࢠ
   1
   

   View Slide

2. ࣗݾ঺հ
   ߴ஌͜Ͳ΋ͷਤॻؗͬͯͲΜͳαΠτʁ
   ൃ஫ऀ঺հ
   Ҋ݅ͷྲྀΕ
   νʔϜฤ੒ʹ͍ͭͯ
   πʔϧʹ͍ͭͯ
   ϫʔΫγϣοϓʹ͍ͭͯ
   

   ʢαΠτͷ໨తͷڞ༗ɾίϯςϯπʣ
   ϫʔΫγϣοϓʹ͍ͭͯʢϜʔυϘʔυʣ
   ࠓ೔ͷྲྀΕ
   2
   ੍࡞ͷਐΊํ
   ςετظؒ
   ӡ༻ʹ͍ͭͯ
   ·ͱΊ
   

   View Slide

3. 3
   ࣗݾ঺հ
   ֹլʢ෱Ҫʣॱࢠ
   உ໦ౡͱ͍͏ਓޱ໿ਓͷౡʹॅΉ΢Σϒ
   σβΠφʔɻʢ΢ΣϒσΟϨΫλʔɺࣸਅ
   ՈɺจචՈʣ
   உ໦ౡਤॻؗͱ͍͏ࢲઃਤॻؗΛ/10Ͱӡ
   Ӧதɻ
   

   ଟݴޠαΠτΛ੍࡞͢ΔνʔϜʮ$PXFCʯཱ
   ্ͪ͛ɻ
   5XJUUFSɿOVLBHB
   

   View Slide

4. IUUQTLPEPNPOPUPTIPLBOPSH
   ߴ஌͜Ͳ΋ͷਤॻؗαΠτͷ঺հ
   4
   

   View Slide

5. ߴ஌͜Ͳ΋ͷਤॻؗαΠτͷ঺հ
   5
   ಛ௃
   wΫϥ΢υϑΝϯσΟϯάͰࢿۚௐୡ
   wΫϥΠΞϯτ͸/10
   wࢠͲ΋Ή͚΢ΣϒαΠτ
   wΞΫηγϏϦςΟʹ͍ͭͯڧ͘ҙࣝ
   wϑϦʔϥϯεͷνʔϜ੍͕࡞
   ϙΠϯτ
   

   View Slide

6. ൃ஫ऀ঺հ
   6
   ೝఆಛఆඇӦར׆ಈ๏ਓߴ஌͜Ͳ΋ͷਤॻؗ
   ཧࣄɹמ୩໌ࢠ͞Μ
   

   View Slide

7. ˠΫϥϑΝϯલʹ঺հ
   ˠϫʔΫγϣοϓʢαΠτͷ໨తͷڞ༗ɾίϯςϯπʣ
   ˠΫϥϑΝϯʢΫϥϑΝϯ࣌ʹؾΛ͚ͭͨ͜ͱʣ
   ˠΫϥϑΝϯୡ੒
   ˠνʔϜฤ੒
   ˠ੍࡞εέδϡʔϧɿϫʔΫγϣοϓʢτϯϚφʣ
   ˠίϯςϯπܾΊˍ༧ࢉ
   ˠ੍࡞
   ˠ׬੒
   Ҋ݅ͷྲྀΕ
   7
   ϙΠϯτ
   

   View Slide

8. νʔϜฤ੒ʹ͍ͭͯ
   8
   w ϓϩδΣΫτϦʔμʔɾσΟϨΫγϣϯɿֹլॱࢠ
   w ϓϩδΣΫτϚωδϝϯτɿ੢઒ਅཧࢠ
   w σβΠϯɾΞΫηγϏϦςΟ؂मɿؒౢࠫ஌
   w ࣮૷ɿ΄Μͩͱ͠Ώ͖
   

   ɹͲͷΑ͏ͳج४ͰબΜͰ੠Λ͔͚͔ͨ
   

   ɹαΠτͷ໨తͷઆ໌
   

   ɹΞΫηγϏϦςΟͷ͜ͱ
   

   View Slide

9. νʔϜฤ੒ʹ͍ͭͯ
   9
   ࠓޙͷਐߦͰ͕͢ɺ
   w ੍࡞νʔϜإ߹ΘͤΦϯϥΠϯϛʔςΟϯά
   w ߴ஌͜Ͳ΋ͷਤॻؗ͞Μͱإ߹ΘͤΦϯϥΠϯϛʔςΟϯά
   ˠεέδϡʔϧͱఆظϛʔςΟϯάͷ༗ແʢࢀՃऀʣͳͲΛܾΊΔ
   ͱ͍͏Α͏ʹߟ͍͑ͯ·͢ɻ
   

   جຊతʹ͸໰୊ͳ͚Ε͹੍࡞νʔϜ͸4MBDLͰ΍ΓͱΓɺਤॻؗ͞Μͱͷଧͪ߹Θͤ͸ϝΠϯ͸ࢲ
   ͱਅཧࢠ͞ΜͰ͢Δͱ͍͏Α͏ʹߟ͍͑ͯ·͕͢ɺ΍Γ΍͍͢ํ๏ͳͲ͕ͦΕͧΕ͋Δͱࢥ͏ͷͰ
   إ߹Θͤͷ࣌ʹͦ͏͍ͬͨҙࣝ߹Θͤ΋Ͱ͖ͨΒخ͍͠Ͱ͢ʂ
   ·ͨإ߹Θͤͷεέδϡʔϧௐ੔ͷ࿈བྷΛվΊ͍͖ͯͤͯͨͩ͞·͢Ͷʔʂ
   

   View Slide

10. νʔϜฤ੒ʹ͍ͭͯ
    10
    ߴ஌͜Ͳ΋ͷਤॻؗɿ໊̓
    ΠϥετϨʔλʔɿ
    ᐻ֞จ೫ ͱ͓͔͖ͪ͋͜
    

    View Slide

11. w (PPHMFΞϓϦέʔγϣϯ
    

    ʢ(PPHMF%SJWFɺ(PPHMFεϓϨουγʔτɺ(PPHMFυΩϡϝϯτɺΧϨϯμʔʣ
    w 'JHNB
    w 4MBDL
    w 'BDFCPPLϝοηϯδϟʔ
    w OPUJPO
    w .JSP
    w ;PPN
    πʔϧʹ͍ͭͯ
    11
    

    View Slide

12. ୈҰ஄ϫʔΫγϣοϓ
    12
    Ϋϥ΢υϑΝϯσΟϯάલɿίϯςϯπʹ͍ͭͯ
    IUUQTNJSPDPNBQQCPBSEP+@M'PWG*
    

    View Slide

13. ୈೋ஄ϫʔΫγϣοϓ
    13
    Ϋϥ΢υϑΝϯσΟϯά੒ཱޙɿϜʔυϘʔυ
    IUUQTNJSPDPNBQQCPBSEV9K707-,UC
    

    View Slide

14. ٳܜ
    14
    IUUQTLPEPNPOPUPTIPLBOPSHIFOBDIPDPGPSFTU
    

    View Slide

15. ϛʔςΟϯάͷ΍Γํ
    ؾΛ͚͍ͭͯͨ͜ͱ
    ൃ஫ऀଆऔΓ·ͱΊɿמ୩͞Μ
    ֤छυΩϡϝϯτ΍ࢿྉʔ֤໾ׂʢϫΠϠʔɺϥΠςΟϯά
    ɺΠϥετʣ
    ਅཧࢠ͞Μ
    σβΠϯؒౢ͞Μͱ࣮૷ຊా͞Μʢޙฤ΁ʣ
    ༧ࢉ
    ࠔ೉ͩͱײͨ͜͡ͱɺͦΕͷ৐Γӽ͑ํ
    ίϯςϯπܾΊͱ༧ࢉɺ৐Γӽ͑ํ
    ਤॻؗଆ
    ੍࡞ͷਐΊํ
    15
    

    View Slide

16. ϛʔςΟϯάͷ΍Γํɹ࠷ॳͷώΞϦϯάγʔτ
    िճɺ࣌ؒʙ࣌ؒ൒ͷϛʔςΟϯά
    ؾΛ͚͍ͭͯͨ͜ͱɹ
    Ͱ͖Δ͚ͩΦʔϓϯʹਐΊΔɺஔ͍͚ͯ΅Γײ͕ͳ͍Α͏ʹ͢Δ
    ϞνϕʔγϣϯΛԼ͛ͳ͍
    ੍࡞ͷਐΊํ
    16
    ʮϓϩ͔ͩΒ͍ͭͰ΋ύʔηϯτͷྗ͕ग़ͤΔʯ
    ˠύʔηϯτͷྗ͕ग़ͤΔΑ͏ʹ੔͑Δ
    

    View Slide

17. ੍࡞ͷਐΊํ
    17
    ʮϓϩ͔ͩΒ͍ͭͰ΋ύʔηϯτͷྗ͕ग़ͤΔʯ
    ˠύʔηϯτͷྗ͕ग़ͤΔΑ͏ʹ੔͑Δ
    ΫϥΠΞϯτ
    աఔɿཁ๬ΛͪΌΜͱฉ͍ͯ΋Β͍͑ͯΔ͔
    ݁Ռɿཁ݅ʹ͋ͬͨαΠτ͕Ͱ͖͔ͨ
    ੍࡞νʔϜ
    աఔɿ੍࡞ҙਤΛཧղͯ͠΋Β͍͑ͯΔ͔
    

    ɹɹɹใुʹݟ߹ͬͨՔಇ͔
    ݁Ռɿຬ଍ͷ͍͘αΠτ͕Ͱ͖͔ͨ
    

    View Slide

18. ੍࡞ͷਐΊํ
    18
    ΫϥΠΞϯτ
    աఔɿཁ๬ΛͪΌΜͱฉ͍ͯ΋Β͍͑ͯΔ͔
    ݁Ռɿཁ݅ʹ͋ͬͨαΠτ͕Ͱ͖͔ͨ
    ੍࡞νʔϜ
    աఔɿ੍࡞ҙਤΛཧղͯ͠΋Β͍͑ͯΔ͔
    

    ɹɹɹใुʹݟ߹ͬͨՔಇ͔
    ݁Ռɿຬ଍ͷ͍͘αΠτ͕Ͱ͖͔ͨ
    ͦͷͨΊʹඞཁͳ͜ͱ
    ໌ࣔԽɺυΩϡϝϯτΛ࢒͢
    

    View Slide

19. ൃ஫ऀଆऔΓ·ͱΊ
    

    ɹ࠷ॳͷώΞϦϯάγʔτɹ੍࡞νʔϜ੹೚ऀɿֹլɺਤॻؗଆɿמ୩
    ֤छυΩϡϝϯτ΍ࢿྉʔ֤໾ׂʢϫΠϠʔɺϥΠςΟϯά
    ɺΠϥετʣ
    ਅཧࢠ͞Μ
    ੍࡞ͷਐΊํ
    19
    

    View Slide

20. ੍࡞ͷਐΊํ
    20
    σβΠϯؒౢ͞Μͱ࣮૷ຊా͞Μʢޙฤ΁ʣ
    ɹ'JHNB
    ɹϑΟʔυόοΫ΋ɺσβΠϯɾ࣮૷Ҋ΋ཧ༝Λ͖ͪΜͱڞ༗͢Δʢ໌ࣔԽʣ
    

    View Slide

21. ੍࡞ͷਐΊํ
    21
    σβΠϯؒౢ͞Μͱ࣮૷ຊా͞Μʢޙฤ΁ʣ
    ɹ'JHNB
    ɹϑΟʔυόοΫ΋ɺσβΠϯɾ࣮૷Ҋ΋ཧ༝Λ͖ͪΜͱڞ༗͢Δʢ໌ࣔԽʣ
    

    View Slide

22. ੍࡞ͷਐΊํ
    22
    σβΠϯϑΟʔυόοΫ΍ΓͱΓྫ
    ίϯςϯπͷനൈ͖ͷؙ͕໨ཱͭͷ͕ؾʹͳΔɺͱ͍͏
    ҙݟ͕͋Γ·ͨ͠ɻ
    

    ࠓޙௐ੔ՄೳͰ͠ΐ͏͔ɻ
    ໨ཱͭͷ͕ؾʹͳΔͱ͍͏ͷ͸ɺͲΜͳঢ়ଶͩͱྑ͍ͱ
    ࢥΘΕ͍ͯΒͬ͠ΌΔͷ͔΋͠ώϯτ͕͋Ε͹͓ฉ͔ͤ
    ͍͚ͨͩͨΒخ͍͠Ͱ͢ɻྫ͑͹΋͏গ͠৭ຯతʹ໨ཱ
    ͨͳͤ͘͞Δͱ͍͏Α͏ͳํ޲Ͱͨ͠ΒՄೳͰ͢ʂ
    

    

    View Slide

23. ੍࡞ͷਐΊํ
    23
    σβΠϯϑΟʔυόοΫ΍ΓͱΓྫ
    നൈ͖͕গ͠খ͘͞ɺؾ࣋ͪഎܠͷ৿͕ಁա͍ͯ͠Δͱ
    ΞΫηγϏϦςΟʹӨڹ͕͋ΔͷͰ͠ΐ͏͔ɻ͘Γൈ͍
    ͨΑ͏ͳന͕ࡍཱͨͳ͍ํ๏͕Կ͔ͳ͍͔ͱߟ͍͑ͯ·
    ͢ɻ
    ͘Γൈ͍ͨΑ͏ʹݟ͑Δͷ͕ؾʹͳΔͷͩͱࢥ͍·͠
    ͨɻಁաʹ͢Δͱಁա཰ԿͳΒͱ͔ɺ৭ʑͳ୺຤Ͱݟͨ
    ࣌ͷ৔ॴͱ͔Ͱ͹Β͖͕ͭग़ͯ͠·͏ͷͰɺഎܠ৭Λന
    Ͱ͸ͳۭͯ͘͠നײΛͳ͘͢Α͏ͳௐ੔͸Ͱ͖ͳ͍͔ͱؒ
    ౢ͞Μͱ΋΍ΓͱΓ͠·ͨ͠ʂҧ࿨ײ͕ݮΔΑ͏ͳௐ੔
    ͕Ͱ͖Ε͹ͱࢥ͍ͬͯ·͢ɻ
    छྨͷมߋҊΛݟͯ΋Β͏
    

    View Slide

24. ੍࡞ͷਐΊํ
    24
    A നΛಁա → τϯϚφ͕ඍົʹ߹Θͳ͍
    B എܠϕʔδϡന࿮ → എܠͱϦϯΫ෦෼͕ͭͳ
    ͕ͬͯݟ͑Δɾ৿͕͚ܽͯݟ͑ͳ͍͔ؾʹͳΔ
    C നʴ಺ଆʹઢ → ΨʔϦʔ͗͢ͳ͍͔
    E ೱ͍ϕʔδϡ → ΠϥετΛअຐ͍ͯ͠ͳ͍͔
    ؾʹͳΔ
    DͷഎܠΛനͷ··ʹͭͭ͠ௐ੔ͨ͠΋ͷ͕ྑ͍
    ͔΋ʁͱ͍͏࿩͠߹͍Λ͠·ͨ͠ɻ
    

    View Slide

25. ੍࡞ͷਐΊํ
    25
    ੍࡞νʔϜͷօ͞·ɺখֶ̍೥ੜ͸%Ͱͨ͠ɻ
    ࣮ࡍʹࢠͲ΋ʹબΜͰ΋Β͏
    ͜ͷޙ΋ϘλϯҐஔͷௐ੔ɺΠϥετͷϒϥογϡΞοϓͳͲଓ͖·͢
    

    View Slide

26. ੍࡞ͷਐΊํ
    26
    ༧ࢉ
    ɹສ
    ࠔ೉ͩͱײͨ͜͡ͱɺͦΕͷ৐Γӽ͑ํ
    ίϯςϯπܾΊͱ༧ࢉɺ৐Γӽ͑ํ
    ਤॻؗଆ
    

    View Slide

27. ςετظؒ
    27
    w ੍࡞νʔϜ͸OPUJPOͰ
    w ਤॻ੍ؗ࡞νʔϜؒ͸(PPHMFεϓϨουγʔτͰ
    ςετͰݟ͍͖͍ͯͨͩͨൣғΛ఻͑Δ
    ॏෳͷͳ͍Α͏ʹਤॻؗ͞ΜଆͰऔΓ·ͱΊ͍ͯͨͩ͘
    

    View Slide

28. ӡ༻ʹ͍ͭͯ
    28
    w ϚχϡΞϧ
    w ΞΫηγϏϦςΟ࣮ફํ๏ू
    w อक؅ཧൣғ
    w ৽͍͠ϝοηʔδάϧʔϓ
    

    View Slide

29. ·ͱΊ
    29
    ΫϥΠΞϯτ
    աఔɿཁ๬ΛͪΌΜͱฉ͍ͯ΋Β͍͑ͯΔ͔
    ݁Ռɿཁ݅ʹ͋ͬͨαΠτ͕Ͱ͖͔ͨ
    ੍࡞νʔϜ
    աఔɿ੍࡞ҙਤΛཧղͯ͠΋Β͍͑ͯΔ͔
    

    ɹɹɹใुʹݟ߹ͬͨՔಇ͔
    ݁Ռɿຬ଍ͷ͍͘αΠτ͕Ͱ͖͔ͨ
    ϓϩηεɾ΍Γ͕͍ɾใुɾ݁Ռͷͭʹ͓͍ͯຬ଍౓ΛߴΊΔ
    ໌ࣔԽɺυΩϡϝϯτΛ࢒͢
    

    View Slide

30. ৼΓฦΓ
    30
    ͦΕͧΕͷࢹ఺͔ΒͲ͏͔ͩͬͨগ͠ฉ͍ͯΈ·͠ΐ͏
    

    View Slide