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

Patterns of UI Design

Patterns of UI Design

Takuji Ikeda

May 16, 2013
Tweet

More Decks by Takuji Ikeda

Other Decks in Design

Transcript

  1. 6*ͷύλʔϯԽɺϧʔϧԽͱ͸ • ը໘શମΛίϯϙʔωϯτ୯Ґʹ෼ׂ ΞΫςΟϏςΟ χϡʔε ϗʔϜ ͓ؾʹೖΓ ͓஌Βͤ ઃఆ ͔͋͞Θ͞Μ͕ϑΥϩʔ͠·ͨ͠

    খྛ͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ΄ͩ͞Μ͕ϑΥϩʔ͠·ͨ͠ ઒ଜ͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ๺ඌ͞Μ͕ϑΥϩʔ͠·ͨ͠ ϝϞҰཡ Ωϟϯηϧ ެ։ઃఆ શһʹެ։ ͱ΋ͩͪʹެ։ ඇެ։ ֬ఆ λΠτϧ ௨஌͠ͳ͍ શһʹެ։ ൐͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ᖒా͞Μ͕ϑΥϩʔ͠·ͨ͠ Ϟʔμϧ ΢Οϯυ΢ ϥδΦϘλϯ ςΩετϑΟʔϧυ όοΫφϏήʔγϣϯ λϒܕφϏήʔγϣϯ Ϧετ ϔομʔ ηάϝϯςου ίϯτϩʔϧ ΞΠίϯ ϑολʔ
  2. 6*ͷύλʔϯԽɺϧʔϧԽͱ͸ ύλʔϯA ύλʔϯB ύλʔϯC ίϯϙʔωϯτ ը໘ભҠ ը໘ભҠ ը໘ ಋೖ τοϓ

    Ұཡ ৄࡉ ೖྗɾ؅ཧ ϓϥοτϑΥʔϜʢiPhone App, Android App, Smartphone Siteʣ
  3. 2VPSB iPhone App A B C Android App Smartphone Site

    ϓϥοτϑΥʔϜʹΑΔը໘ͷҧ͍
  4. ը໘ύλʔϯҰཡ ಋೖը໘ • εϓϥογϡ • ΢ΥʔΫεϧʔ • ίʔνϚʔΫ • ΤϯϓςΟϝοηʔδ

    τοϓը໘ • ϙʔλϧ • Ϣʔβʔ • ECɹ • ίʔϙϨΠτ Ұཡը໘ • ݕࡧ݁Ռ • λΠϜϥΠϯ • ΪϟϥϦʔ • ΞΫςΟϏςΟ ৄࡉը໘ • ࣸਅɾಈը • هࣄ • Ϛοϓ • ঎඼ ೖྗ ɾ ؅ཧը໘ • αΠϯΞοϓɾαΠϯΠϯ • ౤ߘ • ΧϝϥΩϟϓνϟ • ઃఆɾ؅ཧ छྨ 5 ֤ύλʔϯ
  5. ݕࡧαʔϏε ΫοΫύου ʢSMART PHONE SITEʣ τοϓ Ұཡ Ұཡ ৄࡉ Ұཡ

    Ұཡ Ұཡ Ұཡ Ұཡ Ұཡ ݕࡧ݁Ռ ݕࡧ݁Ռ ΧςΰϦ αϒΧςΰϦ ఼ಊೖΓϨγϐ ΧςΰϦ ϨγϐҰཡ .:ϝχϡʔ Ϩγϐ αʔνϑΥʔϜ ηάϝϯςουίϯτϩʔϥ υϦϧμ΢ϯ υϦϧμ΢ϯ λϒܕφϏήʔγϣϯ ਨ௚ܕϦετ μογϡϘʔυ
  6. 6*ίϯϙʔωϯτ • جຊίϯϙʔωϯτ • φϏήʔγϣϯ / ίϯτϩʔϧ • Ϧετ •

    ϑΥʔϜ • ϝοηʔδ • ৘ใͷϏδϡΞϧԽ • ΞΠίϯ • Ϟʔγϣϯ • ϏδϡΞϧελΠϧ
  7. 6 ࣮ ફ ࣄ ྫ  6*ͷύλʔϯԽɾϧʔϧԽͱ͸  ϓϥοτϑΥʔϜͷྲّྀ 

    ը໘ύλʔϯ  6*ίϯϙʔωϯτ  ࣮ફࣄྫ  ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ
  8. ࣮ફࣄྫ ΫοΫύου಺ͰͷύλʔϯԽɾϧʔϧԽͷ࣮ફ 1. COOKPAD UI Design Rules (Document) 2. COOKPAD

    UI Development Rules (Document) 3. COOKPAD CSS / Sass Coding Style (Document) 4. Sara Design Framework (Sass)
  9. αʔϏε։ൃͰͷՁ஋ ։ൃνʔϜ ։ൃνʔϜ ։ൃνʔϜ • σβΠφʔ͕গͳ͍৔߹ σβΠφʔ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ

    ύλʔϯͱϧʔϧʹͷͬͱͬͨ6*ߏஙʹΑΓϦιʔεΛܰݮͯ͠ɺ ͦΕҎ֎ͷ৬छͷਓͰҰఆҎ্ͷΫΦϦςΟ·Ͱಋ͘ σΟϨΫλʔ σΟϨΫλʔ σΟϨΫλʔ ύλʔϯͱϧʔϧ
  10. ։ൃνʔϜ ։ൃνʔϜ ։ൃνʔϜ • ։ൃຖʹσβΠφʔ͕ผΕΔ৔߹ ύλʔϯͱϧʔϧ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ ҟͳΔϓϩδΣΫτͰ͋ͬͯ΋ɺύλʔϯ΍ϧʔϧ͸มΘΒͳ͍Α͏ʹ

    ͢Δ͜ͱͰɺϦιʔεͷܰݮɺϢʔβʔମݧͷඪ४Խ͕Ͱ͖Δ σΟϨΫλʔ σΟϨΫλʔ σΟϨΫλʔ σβΠφʔ σβΠφʔ σβΠφʔ αʔϏε։ൃͰͷՁ஋
  11. Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ ஑ా୓࢘ɹ!UJLFEBUBLVKJJLFEB!DPPLQBEDPN ΫοΫύουͰ͸ σβΠφʔɾΤϯδχΞΛ ੵۃ࠾༻தͰ͢ʂ ͝ڵຯ͋Δํ͸ੋඇΞΫηε͠ ͍ͯͩ͘͞ɻ ຊ೔ͷ಺༰ͷଟ͘͸ ʮεϚʔτϑΥϯͷ

    ͨΊͷ6*σβΠϯ Ϣʔβʔମݧʹඞཁͳ ϧʔϧͱύλʔϯʯ ͔Βൈਮ͍ͯ͠·͢ɻ http://info.cookpad.com/jobs/?affcd=eetmm http://www.amazon.co.jp/dp/4797372303/