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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=47 keita
September 29, 2019

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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=128

keita

September 29, 2019
Tweet

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ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄয఺ΛܾΊΔ 'PDBMQPJOU

  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 Ҏ্ɺ ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠