岐阜デザイン勉強会_センス不要_レイアウトの基本ルール.pdf

Transcript

1. DERA-design 01 ϯ σ β Π ษ ڧ ձ ذ ͗ ෞ ; Ҋ ਤ E FTJHO ʰηϯεෆཁʂϨΠΞ΢τͷجຊϧʔϧʱ スライド数 60ページ
2. DERA-design 02 σβΠϯͷ ϨΠΞ΢ τͰ ࠔ͍ͬͯ·͔͢ʁ
3. DERA-design 03 ݪଇ΍ϧʔϧͰ ηϯεʹཔΒͳͯ͘΋ σβΠϯ͕Ͱ͖Δ
4. DERA-design 04 w
   ৘ใΛ੔ཧ͠ҙਤΛ࣋ͬͯ఻͑Δ w
   ஫໨ ʢBUUFOUJPOʣ ΛूΊͯ஫ҙΛҾ͘ w
   ΠϝʔδΛ࡞Γҹ৅Λૢ࡞͢Δ w
   ৺ཧతͳޮՌΛ༩͑Δ ϨΠΞ΢τͷ໾ׂ
5. DERA-design 05 σβΠϯͷ ͭͷجຊݪଇ $"15&3
   
6. DERA-design 06 $"15&3
   
   σβΠϯͭͷجຊݪଇ ۙ઀ 1SPYJNJUZ ޓ͍ʹؔ࿈͢Δ߲໨͸ɺ ͚ۙͮ ͯάϧʔϓԽ͠·͢ɻ ۙ઀͸৘ใΛ੔ཧ͠ɺ ࠞཚΛݮ Β͠ɺ ཧղΛॿ͚Δߏ଄Λ࡞Δ ͜ͱ͕Ͱ͖·͢ɻ χϯδϯ ЌΧϩςϯ͕๛෋ χϯδϯ ЌΧϩςϯ͕๛෋
7. DERA-design 07 $"15&3
   
   σβΠϯͭͷجຊݪଇ ੔ྻ "MJHONFOU ˟
   ذෞݝӋౡࢢਖ਼໦ொۂར 5&-ɹ.BJMJOGP!EFSBEFTJHOKQ શͯͷཁૉ͕ඒ͘͠ ੔ྻ͞Ε͍ͯΔඞ ཁ͕͋Γ·͢ɻ ੔ྻ ͸ચ࿅͞Εͨҹ৅ ΛੜΈ·͢ɻ D E R A - d e s i g n 吉 川 圭 太 デ ザ イ ナ ー K E I T A Y O S H I K A W A
8. DERA-design 08 $"15&3
   
   σβΠϯͭͷجຊݪଇ ରൺ $POUSBTU ཁૉಉ͕࢜ྨࣅ͢Δ͜ͱ͸ආ͚ ·͢ɻ αΠζɺ ৭ɺ ϑΥϯτͳͲಉ ҰͰͳ͍΋ͷ͸ɺϋοΩϦͱࠩΛ ͚ͭΔɻ ίϯτϥετ͸஫໨Λू Ίɺ ໌֬ʹ৘ใΛ఻͑·͢ɻ େ খ
9. DERA-design 09 $"15&3
   
   σβΠϯͭͷجຊݪଇ ൓෮ 3FQFUJUJPO ޗഐ͸ೣͰ͋Δ ηϩ஄͖ͷΰʔγϡ ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻ Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻ ԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔ χϟʔٽ͍͍ͯͨࣄ͚ͩ͸هԱ͍ͯ͠ Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ ͷΛݟͨɻ͔͠΋͋ͱͰฉ͘ͱͦΕ͸ ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ ͋ͬͨͦ͏ͩɻ ͜ͷॻੜͱ͍͏ͷ͸࣌ʑզʑΛั͑ͯ ࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ ΰʔγϡ͸ொͷ׆ಈࣸਅؗͰηϩΛ஄ ͘܎ΓͰͨ͠ɻ͚ΕͲ΋͋Μ·Γ্ख Ͱͳ͍ͱ͍͏ධ൑Ͱͨ͠ɻ্खͰͳ͍ Ͳ͜ΖͰ͸ͳ࣮͘͸஥ؒͷָखͷͳ͔ Ͱ͸͍ͪ͹ΜԼखͰ͔ͨ͠Βɺ͍ͭͰ ΋ָ௕ʹ͍͡ΊΒΕΔͷͰͨ͠ɻ ͻΔ͗͢ΈΜͳ͸ָ԰ʹԁ͘ͳΒΜͰ ࠓ౓ͷொͷԻָձ΁ग़͢ୈ࿡ަڹۂͷ ࿅शΛ͍ͯ͠·ͨ͠ɻτϥϯϖοτ͸ Ұੜ͚Μ໋Վ͍ͬͯ·͢ɻ ૸Εϝϩε ஖ᥨͷࢳ ϝϩε͸ౖܹͨ͠ɻඞͣɺ͔ͷअஐ๫ ٮͷԦΛআ͔ͳ͚Ε͹ͳΒ͵ͱܾҙ͠ ͨɻϝϩεʹ͸੓࣏͕Θ͔Β͵ɻϝϩ ε͸ɺଜͷ຀ਓͰ͋ΔɻథΛਧ͖ɺ༽ ͱ༡ΜͰ฻ͯ͠དྷͨɻ͚ΕͲ΋अѱʹ ରͯ͠͸ɺਓҰഒʹහײͰ͋ͬͨɻ͖ΐ ͏ະ໌ϝϩε͸ଜΛग़ൃ͠ɺ໺Λӽ͑ ࢁӽ͑ɺेཬ͸ͳΕͨࠑ͜ͷγϥΫε ͷࢢʹ΍ͬͯདྷͨɻϝϩεʹ͸෕΋ɺ ฼΋ແ͍ɻঁ๪΋ແ͍ɻे࿡ͷɺ಺ؾ ͋Δ೔ͷࣄͰ͍͟͝·͢ɻޚऍՠ༷͸ ۃָͷ࿇஑ͷ;ͪΛɺಠΓͰͿΒͿΒ ޚา͖ʹͳ͍ͬͯΒͬ͠Ό͍·ͨ͠ɻ ஑ͷதʹ࡙͍͍ͯΔ࿇ͷՖ͸ɺΈΜͳ ۄͷΑ͏ʹ·ͬനͰɺͦͷ·Μதʹ͋ Δۚ৭ͷࣵ͸ɺԿͱ΋Ӡ͑ͳ͍޷೏͕ɺ ઈؒ͋ͨΓ΁ҲͯډΓ·͢ɻۃָ͸ஸ ౓ேͳͷͰ͍͟͝·͠ΐ͏ɻ ɹ΍͕ͯޚऍՠ༷͸ͦͷ஑ͷ;ͪʹޚ ဣʹͳͬͯɺਫͷ໘Λณ͍ͬͯΔ࿇ͷ ྨࣅͷཁૉΛ܁Γฦ͢ࣄ Ͱ͢ɻ ܗɺ৭ɺάϧʔϓͳ ͲΛ൓෮ͤ͞·͢ɻ ൓෮͸৘ใΛɺ άϧʔϓԽ Λଅਐ͠·͢ɻ
10. DERA-design 10 ϨΠ Ξ΢ τͷϧʔϧ $"15&3
    
11. DERA-design 11 ϖʔδ ͷ༨ന $"15&3
    
    ϧʔϧ
    ᶃ
12. DERA-design 12 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃ
    ϖʔδͷ༨ന
13. DERA-design 13 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃ
    ϖʔδͷ༨ന
    
    
    
    
    
    
    
    ɹ ࠷ɹখɹ
    
    
    ௨ɹৗɹ
    
    ϊɹυ
    
    "ɹɹ
    NN
    
    ɹ NN
    
    ɹNN
    
    "
    
    
    
    
    
    NN
    
    
    
    
    NN
    
    
    
    
    NN
    
    "
    
    
    
    
    
    
    NN
    
    
    
    
    NN
    
    
    
    
    NN
    ໊ࢗ
    
    
    
    
    
    NN
    
    
    
    
    
    
    
    NN
    
    
    
    
    
    Š
    
    
    ϋΨΩ
    
    
    
    
    
    NN
    
    
    
    
    
    
    
    NN
    
    
    
    
    
    Š
    
    
    
14. DERA-design 14 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃ
    ϖʔδͷ༨ന ʢ൛໘཰ʣ
15. DERA-design 15 χϯδϯ ͨ·Ͷ͗ ϒϩοίϦʔ ͡Ό͕͍΋ ϐʔϚϯ ͔΅ͪΌ ΄͏ΕΜ૲ φε Ωϟϕπ ЌΧϩςϯ͕๛෋ ݂ѹΛԼ͛ΔޮՌ͋Γ μΠΤοτʹ (00% ϙςταϥμ͕ਓؾ ࢠͲ΋͕ݏ͍ͳ৯΂෺ ͓՛ࢠʹͯ͠΋͏·͍ Χϧγ΢Ϝ͕ଟ͍ Ն໺ࡊͱ͍͑͹͜Ε ৯෺ણҡ๛෋ ؔ܎ͷͳ͍΋ͷಉ࢜ͷ༨ന ؔ܎͢Δ΋ͷ ಉ࢜ͷ༨ന $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃ
    ϖʔδͷ༨ന ͦͷଞͷ෺ͱͷ༨ന
16. DERA-design 16 য఺ΛܾΊΔ ϑ ΥʔΧϧ ɾ ϙΠϯτ $"15&3
    
    ϧʔϧ
    ᶄ
17. DERA-design 17 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄ
    য఺ΛܾΊΔ 'PDBM
    QPJOU
18. DERA-design 18 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄ
    য఺ʹ஫໨ͤ͞Δ ஫໨
19. DERA-design 19 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄ
    ஫໨ͤ͞Δํ๏ จࣈͷ৭Λม͑Δ ଞͷཁૉͱؔ܎Λߟ͑ͯɺಉܥ৭΍ิ৭ͳͲʹ͢Δɻ τʔϯ͸σβΠϯ શମʹ߹ΘͤΔΑ͏ʹ͠·͠ΐ͏ɻ จࣈͷαΠζΛม͑Δ ίπ͸େ୾ʹม͑Δ͜ͱɺδϟϯϓ཰͕େ͖͍΄Ͳ໨ཱͪ·͢ɻ ͔͠͠ σβΠϯશମͷόϥϯε͸่͞ͳ͍Α͏ʹؾΛ͚ͭΔɻ
20. DERA-design 20 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄ
    ஫໨ͤ͞Δํ๏ จࣈʹ૷০Λ͢Δ ԼઢΛ͚ͭΔɻ จࣈΛଠ͘͢Δɻ ϚʔΧʔΛҾ͘ɻ ໿෺Λ͚ͭΔͳͲͷํ ๏Ͱଞͱͷҧ͍Λ͚ͭΔɻ ༨നΛେ͖͘͢Δ ڧௐ͍ͨ͠΋ͷͷपΓͷ༨നΛେ͖͘͢Δͱɺ ͦͷ໘ੵ΋ͦͷཁૉʹؔ ΘΔ΋ͷͱೝࣝ͞ΕΔɻ
21. DERA-design 21 ݟ͑ͳ͍ϥΠϯ $"15&3
    
    ϧʔϧ
    ᶅ
22. DERA-design 22 χϯδϯ ͨ·Ͷ͗ ϒϩοίϦʔ ͡Ό͕͍΋ ϐʔϚϯ ͔΅ͪΌ ΄͏ΕΜ૲ φε Ωϟϕπ ЌΧϩςϯ͕๛෋ ݂ѹΛԼ͛ΔޮՌ͋Γ μΠΤοτʹ (00% ϙςταϥμ͕ਓؾ ࢠͲ΋͕ݏ͍ͳ৯΂෺ ͓՛ࢠʹͯ͠΋͏·͍ Χϧγ΢Ϝ͕ଟ͍ Ն໺ࡊͱ͍͑͹͜Ε ৯෺ણҡ๛෋ $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶅ
    ݟ͑ͳ͍ઢ
23. DERA-design 23 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶅ
    ݟ͑ͳ͍ઢ
24. DERA-design 24 ࢹઢͷྲྀΕ $"15&3
    
    ϧʔϧ
    ᶆ
25. DERA-design 25 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶆ
    ࢹઢͷྲྀΕ ˔˔˔˔ ˔˔˔˔˔˔˔ ࢹ ઢ ͷ ྲྀ Ε ஫໨͞Εʹ͍͘ ஫໨͞Εʹ͍͘
26. DERA-design 26 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶆ
    ࢹઢͷྲྀΕ ࢹ ઢ ͷ ྲྀ Ε ࢹ ઢ ͷ ྲྀ Ε ࢹઢͷྲྀΕ
27. DERA-design 27 γϯϝτϦʔͱ ΞγϯϝτϦʔ $"15&3
    
    ϧʔϧ
    ᶇ
28. DERA-design 28 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶇ
    γϯϝτϦʔ
29. DERA-design 29 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶇ
    ΞγϯϝτϦʔ
30. DERA-design 30 ͷ๏ଇ $"15&3
    
    ϧʔϧ
    ᶈ
31. DERA-design 31 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶈ
    ͷ๏ଇ
32. DERA-design 32 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶈ
    ͷ๏ଇ
33. DERA-design 33 ਤ൛཰ˋ $"15&3
    
    ϧʔϧ
    ᶉ
34. DERA-design 34 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶉ
    ਤ൛཰ˋ *NBHF
35. DERA-design 35 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶉ
    εΫϩʔϧ಺ʹը૾Ҏ্ TFDUJPO TFDUJPO *NBHF
36. DERA-design 36 จষ͚ͩʹ͠ͳ͍ $"15&3
    
    ϧʔϧ
    ᶊ
37. DERA-design 37 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶊ
    จষ͚ͩʹ͠ͳ͍ จষΛಡ·ͤͯ఻͍߲͑ͨ໨ Ͱ͋ͬͯ΋ɺ ͜ͷΑ͏ʹςΩετ ͚ͩʹͯ͠͠·͏ͱɺ ཧղΛ๦ ͛ͯ఻ΘΓʹ͘͘ͳͬͯ͠· ͏͜ͱ͕͋Γ·͢ɻ
38. DERA-design 38 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶊ
    จষ͚ͩʹ͠ͳ͍ ͦͷͨΊʹɺ ը૾΍Πϥε τͳͲ ΛҰॹʹ഑ஔ͢Δ͜ͱͰɺ ײ֮త ʹΠϝʔδ͠΍͘͢ͳΓ·͢ɻ ݁Ռͱͯ͠ཧղ͠΍͘͢ͳͬ ͯɺ ఻ΘΓ΍͘͢ͳΓ·͢ɻ
39. DERA-design 39 ը૾͸ࠨ ςΩετ͸ӈ $"15&3
    
    ϧʔϧ
    ᶋ
40. DERA-design 40 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶋ
    ը૾͸ࠨɺ ςΩετ͸ӈ ਓؒͷ೴͸ࠨଆʹ഑ஔ͞Εͨ ΋ͷΛײ֮తʹඒ͍͠ͱײ͡ ΍͘͢ɺ ӈଆʹ഑ஔ͞Εͨ΋ͷ Λཧ࿦తͳࢥߟͰଊ͑΍͘͢ ͳ͍ͬͯ·͢ɻ
41. DERA-design 41 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶋ
    ·ͨ͸ը૾͸্ɺ ςΩετ͸Լ ্Լʹ഑ஔ͞ΕΔ৔߹͸ɺ ্ͷཁૉ͸ ݟΔ͕࣌ؒ୹͘ɺ Լͷཁૉ͸௕͘ͳΔͨ Ίɺ ը૾্͕ͰςΩετ͕Լʹ͢Δɻ
42. DERA-design 42 ໎ͬͨΒਖ਼ํܗ ·ͨ͸ԫۚൺͷ௕ํܗ $"15&3
    
    ϧʔϧ
    ᶌ
43. 43 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶌ
    ໎ͬͨΒਖ਼ํܗ
44. DERA-design 44 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶌ
    ·ͨ͸ԫۚൺͷ௕ํܗ
45. DERA-design 45 ॏ৺ $"15&3
    
    ϧʔϧ
    ᶍ
46. DERA-design 46 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶍ
    ॏ৺ ʢ্Լʣ جຊతʹ͸্͸ܰ͘ɺ Լ͸ॏ͘ ͢Δͱ҆ఆͯ͠όϥϯε͕Α ͘ͳΔɻ ॏΈ͸༨ന΍ɺ ৭ɺ ςΩ ετͷྔͳͲͰมΘͬͯ͘Δɻ
47. DERA-design 47 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶍ
    ॏ৺ ʢର֯ઢʣ ্ԼʹՃ͑ͯࠨӈͷόϥϯε ΋ߟ͑·͢ɻ ࠨΛॏͨ͘͠ํ͕ όϥϯε͕ྑ͘ͳΓ·͕͢ɺ ্ ͕ॏ͘ͳΔͷͰɺ ଞͷཁૉͰό ϥϯεΛͱΔͱྑ͍ɻ
48. DERA-design 48 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶍ
    ॏ৺ ʢࡾ֯ܗʣ ্ʹ  ͭɺ Լʹ̎ͭཁૉΛ࣋ͬ ͯ͘Δͱ҆ఆ͠·͢ɻ ͦΕΛ࣮ࡍʹɺ ஔ͘ͱͨ͠Β౗ ΕΔ͔Ͳ͏͔Ͱߟ͑Δͱྑ͍ɻ
49. DERA-design 49 ৭ͷ਺͸ʙ৭ $"15&3
    
    ϧʔϧ
    ᶎ
50. DERA-design 50 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶎ
    ৭ͷ਺͸ʙ৭
51. DERA-design 51 ϕʔεΧϥʔ
    ʜʜʜʜ
    ˋ ϝΠϯΧϥʔ
    ʜʜʜʜ
    ˋ ΞΫηϯτΧϥʔ
    ʜʜ
    
    
    ˋ $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧᶎ
    ৭ͷ਺͸ʙ৭
52. DERA-design 52 ϧʔϧ͸ഁΔ ͨΊʹ͋Δ $"15&3
    
    ϧʔϧ&9
53. 53 DERA-design $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧ&9
    ϧʔϧ͸ഁΔͨΊʹ͋Δ ϧʔϧ௨Γ࡞Δͱɺ ·ͱ·ͬͨ σβΠϯʹ࢓্͕Γ·͢ɻ ͔͠͠ɺ ୭͕࡞ͬͯ΋ಉ͡Α͏ ͳσβΠϯʹͳͬͯ͠·͏͔ ΋͠Ε·ͤΜʜʜ
54. DERA-design 54 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧ&9
    ϧʔϧ͸ഁΔͨΊʹ͋Δ σβΠϯΛ·ͱΊΒΕΔΑ͏ ʹͳͬͨΒɺ͋͑ͯϧʔϧΛ ഁͬͯΈ·͠ΐ͏ɻ ࣗ෼ͷ͔Β΋ഁΕΔ͜ͱͰ ͠ΐ͏ɻ
55. DERA-design 55 $"15&3
    
    ϨΠΞ΢τͷϧʔϧ ϧʔϧ&9
    ϧʔϧΛ஌Βͳ͖ΌഁΕͳ͍ ϧʔϧΛ஌͍ͬͯΔ͔Βͦ͜ɺ ʮ͋͑ͯഁΔʯ ͕Ͱ͖·͢ɻ ҙਤ Λ࣋ͬͯഁΔ͜ͱ͕େ੾Ͱ͢ɻ ͳΜͱͳ͘Ͱ͸ɺ Ͱ͖͍ͯͳ͍ ͷͱಉ͡ʹͳ͍ͬͯ͠·͢ɻ
56. DERA-design 56 ·ͱΊ
57. DERA-design 57 ˔
    ϧʔϧΛ஌Δͱ൑அ͠΍͍͢ ˔
    ৺ཧతͳޮՌ͕ূ໌͞Ε͍ͯΔ΋ͷ΋͋Δ ˔
    ϧʔϧΛ஌Δͱमਖ਼఺Λݟ͚ͭ΍͍͢ ˔
    ϧʔϧΛ஌Βͳ͚Ε͹ഁΔ͜ͱ΋Ͱ͖ͳ͍ ·ͱΊ
58. DERA-design 58 ࢀߟ঺հ
59. DERA-design 59 ˔
    ͳͬͱ͘ϨΠΞ΢τ ˔
    ͩΕͰ΋ϨΠΞ΢τσβΠϯ͕Ͱ͖Δຊ ˔
    ϊϯσβΠφʔζσβΠϯϒοΫ ˔
    σβΠϯͷϧʔϧɺϨΠΞ΢τͷηΦϦʔ ࢀߟ঺հ
60. DERA-design 60 Ҏ্ɺ ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠