デザインフェーズにおけるワイヤーフレームとの付き合い方@WCAN201802

Transcript

1. 匟歊湫埠 ϫΠϠʔϑϨʔϜͱͷ ෇͖߹͍ํ σβΠϯϑΣʔζʹ͓͚Δ
2. CCO, Web Designer দా௚थ
3. ઃܭͱσβΠϯŊ
 ϫʔΫϑϩʔͷɹؒɹʹ͍ͭͯߟ͑Δ
4. ҰൠతͰීวతͳϫʔΫϑϩʔ 鏣鎘 رؠ؎ٝ 㹋鄲 ⰕꟚ
5. ٙ؎َ٦
 ؿٖ٦ي فٗز
 ة؎ف 鏣鎘 رؠ؎ٝ 㹋鄲 ⰕꟚ 秛ㅷ رؠ؎ٝ
 ؕٝف ʮؒʯʹհࡏ͢Δ΋ͷ
6. 鏣鎘 رؠ؎ٝ 㹋鄲 ⰕꟚ ٙ؎َ٦
 ؿٖ٦ي فٗز
 ة؎ف 秛ㅷ رؠ؎ٝ
 ؕٝف ʮؒʯʹհࡏ͢Δ΋ͷ
7. ؒ Wireframe UI Design
8. ϫʔΫϑϩʔͷؒʹ தؒ੒Ռ෺͋Γ
9. ⚥꟦䧭卓暟 鏣鎘 رؠ؎ٝ 㹋鄲 ⰕꟚ ٙ؎َ٦
 ؿٖ٦ي فٗز
 ة؎ف 秛ㅷ رؠ؎ٝ
 ؕٝف
10. ͳΜͷͨΊʹ͋Δͷ͔ʁ ⚥꟦䧭卓暟 فٗزة؎ف ٙ؎َ٦
 ؿٖ٦ي رؠ؎ٝ
 ؕٝف ϖϧιφ CJM
11. ؝ٝإٝ؟أ׾䖤׷さ䠐䕎䧭ך
 ׋׭ך䩛媮  ⚥꟦䧭卓暟 فٗزة؎ف ٙ؎َ٦
 ؿٖ٦ي رؠ؎ٝ
 ؕٝف ϖϧιφ CJM
12. 暴䗙ך殯ז׷醱侧ךչ䩛媮պչ鼅䫛肇պ ϫΠϠʔϑϨʔϜ ϏδϡΞϧΧϯϓ ϓϩτλΠϓ ϞοΫΞοϓ
13. չ䩛媮պ׀החծ؝ٝإٝ؟أך㼎韋ָ殯ז׷ ϫΠϠʔϑϨʔϜ ϏδϡΞϧΧϯϓ ϓϩτλΠϓ ϞοΫΞοϓ ৘ใߏ଄ Πϝʔδ Ϗδϣϯ ࣭ײɾSPEC
14. ʮखஈʯʹ༏ྼ͸ͳ͍
15. దͨ͠΋ͷΛ࠾୒͢Δ ϫΠϠʔϑϨʔϜ ϏδϡΞϧΧϯϓ ϓϩτλΠϓ ϞοΫΞοϓ ⡦ךさ䠐׾䖤׷ךַծ׾僇然ח ίϯηϯαε͕औΕͳ͍΋ͷ͸࡞Βͳ͍΄͏͕Ϛγ
16. ϫΠϠʔϑϨʔϜ͕ ߹ҙܗ੒खஈͱͯ͠ෆ޲͖࣮ͩͬͨྫ
17. ؙٓ؎،ٝز
    䬐䔲罏 䞔㜠圓鸡 ϫΠϠʔϑϨʔϜ΋ʮίϯηϯαεʯͷͨΊ 銲⟝㹀纏 ٙ؎َ٦
 ؿٖ٦ي
18. رؠ؎ش٦
 ؒٝآص، ؎ً٦آ ϫΠϠʔϑϨʔϜ΋ʮίϯηϯαεʯͷͨΊ ٖ؎،ؐز ٙ؎َ٦
 ؿٖ٦ي
20. CCಓ৔ Ustream ෳ਺ͷΦ΢ϯυϝσΟΞΛ౷߹ σβΠϯϚΨδϯ ͍Θ΋ͱϒϩά Pinch In ADC PLUS ADC OnAir Focus In Photoshop Magazine
21. PHOTO DTP WEB VIDEO CC ֬ೝ͢Δਓ ࣮ࡍͷӡ༻୲౰ ʹ – 5 ਓ
22. ؙٓ؎،ٝز
    䬐䔲罏 رؠ؎ش٦
 ؒٝآص، 䞔㜠圓鸡 ؎ً٦آ 銲⟝㹀纏 ٖ؎،ؐز ٙ؎َ٦
 ؿٖ٦ي
23. ؙٓ؎،ٝز
    䬐䔲罏 رؠ؎ش٦
 ؒٝآص، 䞔㜠圓鸡 ؎ً٦آ 銲⟝㹀纏 ? ٙ؎َ٦
 ؿٖ٦ي ٖ؎،ؐز
24. ؙٓ؎،ٝز
    䬐䔲罏 䞔㜠圓鸡 ؎ً٦آ 銲⟝㹀纏 ٖ؎،ؐز 㹋ꥷח⹛ֻ
 ٌحؙ،حف
25. ϞοΫΞοϓͰ࣮ࡍͷӡ༻Πϝʔδͱͯ͠ͷ
 ίϯηϯαεΛͱͬͨ
26. ʮ౷߹νʔϜʯͱͯ͠ͷΨόφϯεͱͯ͠΋ػೳ
28. UIσβΠϯ͸
 ϫΠϠʔϑϨʔϜΛ௒͍͚͑ͯ
29. http://tomoyukiarasuna.com/as-it-is-wireframe/ https://in.spicagraph.com/other/design-wire/
30. http://tomoyukiarasuna.com/as-it-is-wireframe/ https://in.spicagraph.com/other/design-wire/ ϫΠϠʔϑϨʔϜ௨Γʹ
 σβΠϯ͢Δʁ ͠ͳ͍ʁ
31. UIσβΠϯ΁ͷམͱ͠ࠐΈϙΠϯτ ϢʔεέʔεΛσβΠϯϑΣʔζͰߟ͑Δ
32. CASE Մࢹൣғ͝ͱͷʮओ໾ʯΛ໌֬ʹ͢Δ ઃఆ ച্ਪҠ ௚ۙ1೥ؒ ച্ਪҠ ௚ۙ1೥ؒ 01 04 07 10 12 100 75 50 25 0 WIREFRAME DESIGN
33. CASE ʮओ໾ʯ͸ͻͱ͔ͨ·Γʹ͢Δ ϕϏʔεχʔΧʔ 12.0cm ¥3,974 (੫ࠐ) ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖͋Γɻ ࠫཏ૒थͷՖͷ৭ɺ੝ऀඞਰͷཧΛ͋Β ͸͢ɻ͓͝ΕΔਓ΋ٱ͔͠Βͣɻͨͩय़ ͷ໷ͷເͷ͝ͱ͠ɻ͚͖ͨऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ෩ͷલͷਖ ΧʔτʹೖΕΔ ϕϏʔεχʔΧʔ 12.0cm ¥3,974 (੫ࠐ) ͸͔ͤ΍͢͞ʹͩ͜ΘͬͨɺϚδοΫςʔ ϓλΠϓͷϕϏʔεχʔΧʔɻࢠڙΒ͠ ͘΋མͪண͍ͨ഑৭΋ਓؾͰ͢ɻ ΧʔτʹೖΕΔ WIREFRAME DESIGN
34. CASE ʮओ໾ʯ͸࿬໾ΑΓ΋໨ཱͨͤΔ ͓໰͍߹Θͤ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖͋Γɻࠫ ཏ૒थͷՖͷ৭ɺ੝ऀඞਰͷཧΛ͋Β͸͢ɻ ి࿩Ͱͷ͓໰͍߹Θͤ 0120-123-4444 ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖͋Γɻࠫ ཏ૒थͷՖͷ৭ɺ੝ऀඞਰͷཧΛ͋Β͸͢ɻ web͔Βͷ͓໰͍߹Θͤ ϝʔϧͷ৔߹͸ͪ͜Β ฏ೔ʢ݄ʙۚʣͷӦۀ࣌ؒɹ10:00 ʙ 19:00
 ౔೔ॕ ٳۀ ి࿩Ͱ 0120-123-4444 web͔Β ͓໰͍߹Θͤ web͔Βͷ͓໰͍߹Θͤʹ͸ɺ
 2Ӧۀ೔Ҏ಺ʹ͓ฦࣄ͍ͨ͠·͢ɻ ঎඼ʹ͍ͭͯͷ͓໰͍߹Θͤઌ WIREFRAME DESIGN
35. CASE ίϯςΩετΛ൓өͤ͞Δ CSS NITE CAFE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ίʔώʔ εΠʔπ ΞΫηε WIREFRAME DESIGN Css Nite Cafe Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ౦ژ౎๛ౡ۠ೆ஑ା2ஸ໨32−12
36. CASE ϥϕϧ͸ߦಈΛ໌ࣔ͢Δ ࢀՃਃ͠ࠐΈ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀඞਰͷཧ Λ͋Β͸͢ɻ͓͝ΕΔਓ΋ٱ͔͠Βͣɻ ͨͩय़ͷ໷ͷເͷ͝ͱ͠ɻ͚͖ͨऀ΋ ਱ʹ͸΄Ζͼ͵ɺͻͱ΁ʹ෩ͷલͷਖ ʹಉ͡ɻԕ͘ͷҟேΛͱͿΒ͑͹ɺී ͷ᪅ߴɺ׽ͷԦ᣸ɺྊͷपҏɺ౜ͷ࿣ Ωϟϯηϧ OK ࢀՃ͓ਃ͠ࠐΈ ౰Πϕϯτ͸ఆһ੍ͷɺߴߍੜ͓Αͼ डݧੜઐ༻ͷެ։ΠϕϯτͱͳΓ·͢ɻ ͓ਃ͠ࠐΈ͸ɺ֤࣌ؒଳ͝ͱʹ͓Ұਓ ༷ͣͭɺߴߍੜɺطଔੜʢେֶडݧΛ ༧ఆ͍ͯ͠ΔํʣʹݶΓ·͢ɻ ࢀՃ͠ͳ͍ ࢀՃ͢Δ WIREFRAME DESIGN
37. CASE Ϣʔβʔͷૢ࡞ΛݮΒ͢ ෼ྲྀΛબ୒ ͢΂ͯͷ෼ྨ ύʔιφϦςΟ ֶ໰ બ୒ࢶ
 બ୒ࢶ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀඞਰͷཧ Λ͋Β͸͢ɻ͓͝ΕΔਓ΋ٱ͔͠Βͣɻ WIREFRAME DESIGN
38. CASE ͳʹ΋ͳ͍ঢ়ଶʹΞυόΠεΛ ͓ؾʹೖΓʢ15ʣ ঎඼໊ͷςΩετ঎඼໊ ͷςΩετ঎඼໊ ঎඼໊ͷςΩετ঎඼໊ ͷςΩετ঎඼໊ ঎඼໊ͷςΩετ঎඼໊ ͷςΩετ঎඼໊ ͓ؾʹೖΓʢ0ʣ ؾʹͳͬͨ঎඼Λొ࿥ͯ͠ΈΑ͏ɻ
 ޙ͔Βങ͑͹͍͍ʂ ΈΜͳͷ͓ؾʹೖΓ͸͜Μͳ঎඼ ϕϏʔεχʔΧʔ ϛχᄡೕළ εϥΠϜ
 ϩϯύʔε ϕϏʔχοτ๧ ¥1,234 ¥1,234 ¥1,234 ¥1,234 WIREFRAME DESIGN
39. CASE ϞʔμϧͱϞʔυϨε ༻ޠઆ໌ AAA BBB CCC DDD Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit ✕ WIREFRAME DESIGN ༻ޠઆ໌ CCC BBB AAA ౷཰ ஌ྗ ෢ྗ ੓࣏ Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Ϩʔμʔνϟʔτ
40. CASE ෆ҆Λղফ͢ΔΠϯλϥΫγϣϯ WIREFRAME DESIGN ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖͋Γɻ ࠫཏ૒थͷՖͷ৭ɺ੝ऀඞਰͷཧΛ͋Β ͸͢ɻ͓͝ΕΔਓ΋ٱ͔͠Βͣɻͨͩय़ ͷ໷ͷເͷ͝ͱ͠ɻ͚͖ͨऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ෩ͷલͷਖ อଘ͢Δ ౤ߘऀͷ໊લ
41. UI flowsͱ͍͏ը໘ઃܭख๏ ͳʹΛݟΔ͔ Ͳ͏ߦಈ͢Δ͔ ͳʹΛݟΔ͔ Ͳ͏ߦಈ͢Δ͔ ͳʹΛݟΔ͔ Ͳ͏ߦಈ͢Δ͔ ͳʹΛݟΔ͔ Ͳ͏ߦಈ͢Δ͔ Ͳ͏ߦಈ͢Δ͔ ࢀߟʣhttps://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
42. ͦ΋ͦ΋
43. ? ؙٓ؎،ٝز
    䬐䔲罏 رؠ؎ش٦
 ؒٝآص، 䞔㜠鏣鎘 ؎ً٦آ 銲⟝㹀纏 ٖ؎،ؐز ٙ؎َ٦
 ؿٖ٦ي ΫϥΠΞϯτ޲͚ɺ੍࡞޲͚ɺཱ྆͠Α͏ͱ
 த్൒୺ͳࢿྉʹͳͬͯ·ͤΜ͔ʁ ?
44. ؙٓ؎،ٝز
    䬐䔲罏 رؠ؎ش٦
 ؒٝآص، 䞔㜠鏣鎘 ؎ً٦آ 銲⟝㹀纏 ٖ؎،ؐز ٙ؎َ٦
 ؿٖ٦ي ΫϥΠΞϯτଆʹର͢Δίϯηϯαεʹ
 ৼΓ੾ͬͯ͠·͏ʢࡉ͔͍σβΠϯཁૉ͸ೖΕͳ͍ʣ
48. ⚥꟦䧭卓暟כ ָ僇然׌הװ׶װְׅ ܾ·ͬͨ͜ͱ σβΠϯͷྖ෼ ͱ
49. தؒ੒Ռ෺Ͱ
 ίϛϡχέʔγϣϯ͢Δ
50. ؙٓ؎،ٝز
    䬐䔲罏 رؠ؎ش٦
 ؒٝآص، ٙ؎َ٦ؿٖ٦ي 䞔㜠圓鸡 ؎ً٦آ 銲⟝㹀纏 ٖ؎،ؐز ؽآّٝ 41&$ ΫϥΠΞϯτଆɾ੍࡞ଆͷ૒ํ߹ҙΛࢦ޲ͨ͠
 ϫΠϠʔϑϨʔϜͳΒϕετͰ͕͢…
51. ؙٓ؎،ٝز
    䬐䔲罏 رؠ؎ش٦
 ؒٝآص، 䞔㜠鏣鎘 ؎ً٦آ 銲⟝㹀纏 ٖ؎،ؐز ٙ؎َ٦
 ؿٖ٦ي ΫϥΠΞϯτͷํ͚ͩʹ޲͍ͨ
 ϫΠϠʔϑϨʔϜΛಡΈղ͘ͷ΋πϥΠ
52. ͳͷͰ
53. ؙٓ؎،ٝز
    䬐䔲罏 䞔㜠鏣鎘 銲⟝㹀纏 ٙ؎َ٦
 ؿٖ٦ي ٙ؎َ٦
 ؿٖ٦ي ؎ً٦آ ٖ؎،ؐز σβΠφʔɾΤϯδχΞ΋
 ϫΠϠʔϑϨʔϜʹޱग़͢͠Δ ⡲ 䧭 儗 ﺻ 俑 腞 ﻟ 濼 ﺰ ﺳ ﺗ ﺜ
54. ؙٓ؎،ٝز
    䬐䔲罏 䞔㜠鏣鎘 銲⟝㹀纏 ٙ؎َ٦
 ؿٖ٦ي ٙ؎َ٦
 ؿٖ٦ي ؎ً٦آ ٖ؎،ؐز σβΠφʔɾΤϯδχΞ΋
 ϫΠϠʔϑϨʔϜ࡞੒͔࣌Βޱग़͢͠Δ 然 钠 ﺵ ＠ ﻮ ｆ ４ ； ． ﻺ Ͳ͏΍ͬͯʁ
58. ؙٓ؎،ٝزהךװ׶《׶ ⵖ⡲ⰻך׫ד䪮遭涸זךװ׶《׶ 然㹀׃׋41&$װ➬圫٥䮙⹛׾鍑铡 歗꬗鼂獳חאְגך鍑铡 ͷίϝϯτػೳɺ༻్Ͱ෼ྨͰ͖ͯศར
59. ίϛϡχέʔγϣϯ͠ͳ͕Β
 தؒ੒Ռ෺ͷਫ਼౓ΛҰॹʹߴΊ͍ͯ͘ 䞔㜠鏣鎘 銲⟝㹀纏 ٙ؎َ٦
 ؿٖ٦ي ؎ً٦آ ٖ؎،ؐز
60. ~14:35
61. Workshop
62. தؒ੒Ռ෺ ➡ σβΠϯ ߹ҙܗ੒͢ΔϑϩʔΛٙࣅମݧ
63. 1. ֤άϧʔϓɺΫϥΠΞϯτ໾ͱͯ͠
 ϫΠϠʔʹ஫ऍΛೖΕΔ 2. ϫΠϠʔΛྡͷάϧʔϓͱަ׵ 3. ੍࡞໾ͱͯ͠σβΠϯʹ൓ө 4. ࢓্͕ͬͨσβΠϯΛ֬ೝ͠߹͏
64. 5෼ ϦʔμʔΛܾΊΔ
 ֤ࣗɺϫΠϠʔͱཁ݅Λ֬ೝ͢Δ
65. http://bit.ly/wcan-wfdl ϫΠϠʔͷXDϑΝΠϧΛμ΢ϯϩʔυ
66. 35෼ ΫϥΠΞϯτ໾ͱͯ͠
 ϫΠϠʔʹ஫ऍΛ෇͚Δ
68. ձ໊ࣾͷԣʹ ʮ౦ূҰ෦্ ৔ʯͱ௥ه ώʔϩʔࣸਅ ͸ɺঁੑࣾһ ͷࣸਅΛ࢖͏ ΤϯτϦʔϘλϯ ͷۙ͘ʹɺʮͳʹ Λ΍͍ͬͯΔձ ࣾʁʯͷϦϯΫΛ ઃஔ
69. ஫ऍΛॻ͍ͨ༻ࢴΛ
 ͱͳΓͷάϧʔϓͱަ׵
70. ~15:25
71. 40෼ ੍࡞໾ͱͯ͠
 ϫΠϠʔͷ஫ऍΛ֬ೝ͠ͳ͕Β σβΠϯΛى͜͢
73. XDϑΝΠϧɹorɹखॻ͖ࣸਅ
 Λ༻ҙ
74. http://bit.ly/wcan-wfup ϑΝΠϧ໊ͷઌ಄ʹάϧʔϓ൪߸Λ෇͚ͯ
 ԼهʹΞοϓϩʔυ 3->4.xd 1->2.jpeg
75. ~16:15
76. 40෼ Ͱ͖͕͋ͬͨσβΠϯΛ֬ೝ͠߹͏
 άϧʔϓσΟεΧογϣϯ
77. ·ͣ͸
 ֤άϧʔϓ಺Ͱ ࣍ʹ
 ަ׵ͨ͠άϧʔϓؒͰ
78. http://bit.ly/wcan-wfck ಉ͡ϫΠϠʔϑϨʔϜ͔Βੜ·Εͨ
 άϧʔϓ͝ͱͷʮҧ͍ʯʹؾ෇͖ΛಘͯΈ·͠ΐ͏
79. ͍͔͕Ͱ͔ͨ͠ʁ
80. ͜ͷΑ͏ͳաఔʢؒʣΛ
 ౿ΜͩσβΠϯʹ͸
 ඞͣʮͦ͏ͨ͠ཧ༝ʯ͕ੜ·Ε·͢
81. ·ͱΊ
82. ٙ؎َ٦
 ؿٖ٦ي தؒ੒Ռ෺͸
 ࣍ͷ޻ఔͷʮݩʯͱͳͬͯՁ஋Λ࣋ͭ
83. தؒ੒Ռ෺͸ίϯηϯαεΛಘΔखஈ ϫʔΫϑϩʔʹదͨ͠΋ͷΛબͿ Կʹ͍ͭͯͷ߹ҙΛಘΔ΋ͷ͔Λ໌֬ʹ UIσβΠϯ͸ϫΠϠʔϑϨʔϜΛ௒͑Α͏ தؒ੒Ռ෺ͷաఔ΋ίϛϡχέʔγϣϯ͢Δ
84. দా௚थ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ϫΠϠʔϑϨʔϜͱͷ ෇͖߹͍ํ σβΠϯϑΣʔζʹ͓͚Δ