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

Webサイトの設計を「1」から考えてみるワークショップ

1shiharaT
September 06, 2016

 Webサイトの設計を「1」から考えてみるワークショップ

WordFes 2016 ワークショップ

1shiharaT

September 06, 2016
Tweet

More Decks by 1shiharaT

Other Decks in Technology

Transcript

  1. ίϯςϯπͷཻ౓ ྫ IUUQXPSEGFTPSHͷ৔߹ ɾϔομʔ ɾϝΠϯϏδϡΞϧ ɾηογϣϯεϥΠμʔ ɾάϩʔόϧφϏήʔγϣϯ ɾαΠτ঺հ ɾεέδϡʔϧ ɾϐοΫΞοϓόφʔ

    ɾ͓஌ΒͤҰཡ ɾϒϩάҰཡ ɾ5XJUUFS΢ΟδΣοτ ɾεϙϯαʔ঺հ ɾϑολʔ ɾλΠϜςʔϒϧ ɾηογϣϯৄࡉ৘ใ ɾεϐʔΧʔ৘ใ ɾηογϣϯλʔήοτ ɾαΠυόʔ ɾαϙʔλʔืू ɾαϙʔλʔืूཁ߲ ɾαϙʔλʔϒʔεग़లΦϓγϣϯ ɾαϙʔλʔશһ഑෍Φϓγϣϯ ɾࢀՃਃ͠ࠐΈ֓ཁ ɾࢀՃਃ͠ࠐΈϑΥʔϜ ɾࢀՃऀҰཡ TFDUJPO8FCαΠτΛίϯςϯπͰߟ͑Δ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ
  2. ίϯςϯπͷྫ TFDUJPO8FCαΠτΛίϯςϯπͰߟ͑Δ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ -&440/ ϔομʔ ϑολʔ ϑολʔφϏήʔγϣϯ Α͘ݟΒΕΕ͍ͯΔ෺݅ ୅ද͍͋ͭ͞ ΞΫηεϚοϓ

    ΞΫηεํ๏ ձࣾ৘ใ ͓໰͍߹Θͤόφʔ ϖʔδτοϓ ͓໰͍߹ΘͤϑΥʔϜ ͓໰͍߹Θͤ಺༰֬ೝ ͓໰͍߹Θͤ׬ྃ ݕࡧ݁Ռઆ໌ ϖʔδφϏήʔγϣϯ ෺݅୳ࡧ౾஌ࣝهࣄҰཡ ͓஌ΒͤҰཡ ͓஌Βͤهࣄৄࡉ ෺݅୳ࡧ౾஌ࣝهࣄৄࡉ ෺݅୳ࡧ౾஌݄ࣝผφϏήʔγϣϯ ձࣾԊֵ ؔ࿈͢Δ෺݅ ෺݅৘ใҰཡ ෺݅৘ใৄࡉ ͓ؾʹೖΓ෺݅Ϧετ ஍ҬߜࠐݕࡧϑΥʔϜ ઃඋߜࠐݕࡧϑΥʔϜ ςΩετݕࡧϑΥʔϜ Ձ֨ଳݕࡧϑΥʔϜ ಛ௃ݕࡧϑΥʔϜ ϫʔυϓϨεෆಈ࢈ͷಛ௃ ϫʔυϓϨεෆಈ࢈ͷίϯηϓτ ϫʔυϓϨεෆಈ࢈ͷ໨ඪ ϝΠϯϏδϡΞϧ εϥΠμʔ άϩʔόϧφϏήʔγϣϯ αΠτϚοϓ ϓϥΠόγʔϙϦγʔ ෺݅৘ใҰཡ
  3. શϖʔδڞ௨Ͱଘࡏ͢Δύʔ π ྫ ϔομʔɺϑολʔɺα Πυόʔɺ ϖʔδϔομʔɺͳͲʜ ڞ௨ύʔπ ϖʔδͱͯ͠੾Γ෼͚ͯɺϢ ʔβʔʹ఻͍͑ͨίϯςϯπ ྫ

    ϫʔυϓϨεෆಈ࢈ʹͭ ͍ͯɺ෺݅Ұཡϖʔδɺ෺݅ ৄࡉϖʔδɺͳͲɾɾɾ ϖʔδ ہॴతʹ࢖͍ճ͕͠ൃੜ͢Δ ύʔπ ྫ ϖʔδωʔγϣϯɺ౤ߘ φϏήʔγϣϯɺ͓໰͍߹Θ ͤ$5" ύʔπ TFDUJPOίϯςϯπͷΧςΰϥΠζ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ ϦετΞοϓͨ͠ίϯςϯπ͸ ͲΜͳΧςΰϦʹ෼͚ΒΕΔ͔
  4. ɾϔομʔ ɾϩΰ ɾి࿩൪߸ ɾαϒϝχϡʔ ɾϑολʔ ɾϩΰ ɾϑολʔϝχϡʔ ɾίϐʔϥΠτ ɾάϩʔόϧφϏήʔγϣϯ ɾαΠυόʔ

    ɾύϯͣ͘ ɾϖʔδϔομʔ ɾϖʔδτοϓ΁໭ΔϘλϯ ڞ௨ύʔπ ɾΘͨͨͪ͠ʹ͍ͭͯ ɾࣗݾ঺հ ɾཧ೦ ɾ໨ࢦ͢΋ͷ ɾձࣾҊ಺ ɾ୅ද͍͋ͭ͞ ɾձࣾ৘ใ ɾΞΫηεϚοϓ ϖʔδ ɾϖʔδωʔγϣϯ ɾ౤ߘφϏήʔγϣϯ ɾݕࡧϑΥʔϜ ɾόφʔ ɾ͓໰͍߹Θͤ$5"όφʔ ύʔπ TFDUJPOίϯςϯπͷΧςΰϥΠζ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ ΧςΰϦ͝ͱͷྫ
  5. ͜Μͳײ͡Ͱ΍Γ·͢ -&440/ TFDUJPOίϯςϯπͷΧςΰϥΠζ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ ڞ௨ύʔπ ϔομʔ ϑολʔ ϩΰ ϩΰ ి࿩൪߸

    ϑολʔ ϝχϡʔ ϖʔδ ʓʓʹ͍ͭͯ ෺݅঺հ ʓʓͷಛ௕ தݹҰݢՈൢച ʓʓͷ໨ඪ ৽ஙҰݢՈൢച ύʔπ ౤ߘφϏ ෺݅όφʔ ϖʔδφϏ ϖʔδτοϓ ෺݅ϥϯΩϯά
  6. ςΩετ΍ݟग़͠ɺܩઢ΍ɺ ςʔϒϧɺϑΥʔϜͳͲ جຊ ϔομʔɺϑολʔɺαΠυ όʔͳͲ ϨΠΞ΢τ ݕࡧϑΥʔϜɺهࣄҰཡɺه ࣄৄࡉɺ໰͍߹ΘͤϑΥʔϜ ͳͲ ίϯϙʔωϯτ෦඼

    ίϯϙʔωϯτ σβΠϯύʔπͷఆٛ σβΠϯύʔπ΋ΧςΰϥΠζͯ͠Έ·͠ΐ͏ɻ #PPUTUSBQ΍'PVOEBSUJPOͱ͍ͬͨ$44ϑϨʔϜϫʔΫܥ͕ࢀߟʹͳΔ ͔΋͠Ε·ͤΜɻ TFDUJPOσβΠϯύʔπΛߟ͑ͯΈΔ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ
  7. ෯ɺߴ͞ɺେ͖͞ͳͲ େ͖͞ ϓϥΠϚϦɺηΧϯμϦɺλ ʔγϟϦΧϥʔͳͲ ৭ എܠʹ͢Δը૾͕ҧ͏৔߹ ΍ɺ࿮ઢͷछྨ౳ ͦͷଞ σβΠϯύʔπʹ෇ਵ͢Δʮঢ়ଶʯΛߟ͑ͯΈΔ ͢΂ͯͷύʔπʹ͸ɺʮঢ়ଶʯ͕ଘࡏ͠·͢ɻ

    ྫ͑͹ɺʮݟग़͠ʯͱ͍͏σβΠϯύʔπʹ͸ɺʮI I I I I Iʯͱ͍͏ঢ়ଶ ͕͋Γ·͢ɻ ʮϘλϯʯͱ͍͏σβΠϯύʔπͰ΋ɺʮ௨ৗʯʮ໰͍߹ΘͤʯʮΞΫγϣϯʯͱ͍ͬ ͨΑ͏ʹɺجຊͷܗ͸ಉ͡Ͱ΋ɺҧ͏ঢ়ଶΛ΋ͭ͜ͱ͕͋Γ·͢ɻ TFDUJPOσβΠϯύʔπΛߟ͑ͯΈΔ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ
  8. ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β Ϙλϯͷঢ়ଶʮ৭ʯ ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β Ϙλϯͷঢ়ଶʮେ͖͞ʯ Ϙλϯͷঢ়ଶʮؙ֯ʯ

    σβΠϯύʔπʹ෇ਵ͢Δʮঢ়ଶʯΛߟ͑ͯΈΔ ϘλϯͷσϑΥϧτͷঢ়ଶ TFDUJPOσβΠϯύʔπΛߟ͑ͯΈΔ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β ଓ͖͸ͪ͜Β͔Β
  9. جຊ ݟग़͠ ॱং෇Ϧετ ϦϯΫ Ҿ༻ ௨ৗςΩετ ௨ৗςΩετ Ϧετ ϨΠΞ΢τ ϔομʔ

    ϑολʔ ϝΠϯΧϥϜ αΠυόʔ άϩʔόϧφϏ ήʔγϣϯ ίϯϙʔωϯτ ը૾ΪϟϥϦʔ ෺݅Χʔυ ϝΠϯϏδ ϡΞϧ ϖʔδτοϓ ෺݅ςʔϒϧ TFDUJPOσβΠϯύʔπΛߟ͑ͯΈΔ 8FCαΠτͷઃܭΛʮʯ͔Βߟ͑ͯΈΔϫʔΫγϣοϓ ͜Μͳײ͡Ͱ΍Γ·͢ -&440/