$30 off During Our Annual Pro Sale. View Details »

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

nukaga
June 25, 2022

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

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

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

nukaga

June 25, 2022
Tweet

More Decks by nukaga

Other Decks in Business

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