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

by keita

Slide 1

Slide 1 text

DERA-design 01 ϯ σ β Π ษ ڧ ձ ذ ͗ ෞ ; Ҋ ਤ E FTJHO ʰηϯεෆཁʂϨΠΞ΢τͷجຊϧʔϧʱ スライド数 60ページ

Slide 2

Slide 2 text

DERA-design 02 σβΠϯͷ ϨΠΞ΢ τͰ ࠔ͍ͬͯ·͔͢ʁ

Slide 3

Slide 3 text

DERA-design 03 ݪଇ΍ϧʔϧͰ ηϯεʹཔΒͳͯ͘΋ σβΠϯ͕Ͱ͖Δ

Slide 4

Slide 4 text

DERA-design 04 w৘ใΛ੔ཧ͠ҙਤΛ࣋ͬͯ఻͑Δ w஫໨ ʢBUUFOUJPOʣ ΛूΊͯ஫ҙΛҾ͘ wΠϝʔδΛ࡞Γҹ৅Λૢ࡞͢Δ w৺ཧతͳޮՌΛ༩͑Δ ϨΠΞ΢τͷ໾ׂ

Slide 5

Slide 5 text

DERA-design 05 σβΠϯͷ ͭͷجຊݪଇ $"15&3

Slide 6

Slide 6 text

DERA-design 06 $"15&3σβΠϯͭͷجຊݪଇ ۙ઀ 1SPYJNJUZ ޓ͍ʹؔ࿈͢Δ߲໨͸ɺ ͚ۙͮ ͯάϧʔϓԽ͠·͢ɻ ۙ઀͸৘ใΛ੔ཧ͠ɺ ࠞཚΛݮ Β͠ɺ ཧղΛॿ͚Δߏ଄Λ࡞Δ ͜ͱ͕Ͱ͖·͢ɻ χϯδϯ ЌΧϩςϯ͕๛෋ χϯδϯ ЌΧϩςϯ͕๛෋

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

DERA-design 08 $"15&3σβΠϯͭͷجຊݪଇ ରൺ $POUSBTU ཁૉಉ͕࢜ྨࣅ͢Δ͜ͱ͸ආ͚ ·͢ɻ αΠζɺ ৭ɺ ϑΥϯτͳͲಉ ҰͰͳ͍΋ͷ͸ɺϋοΩϦͱࠩΛ ͚ͭΔɻ ίϯτϥετ͸஫໨Λू Ίɺ ໌֬ʹ৘ใΛ఻͑·͢ɻ େ খ

Slide 9

Slide 9 text

DERA-design 09 $"15&3σβΠϯͭͷجຊݪଇ ൓෮ 3FQFUJUJPO ޗഐ͸ೣͰ͋Δ ηϩ஄͖ͷΰʔγϡ ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻ Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻ ԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴͰχϟʔ χϟʔٽ͍͍ͯͨࣄ͚ͩ͸هԱ͍ͯ͠ Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍͏΋ ͷΛݟͨɻ͔͠΋͋ͱͰฉ͘ͱͦΕ͸ ॻੜͱ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ ͋ͬͨͦ͏ͩɻ ͜ͷॻੜͱ͍͏ͷ͸࣌ʑզʑΛั͑ͯ ࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ ΰʔγϡ͸ொͷ׆ಈࣸਅؗͰηϩΛ஄ ͘܎ΓͰͨ͠ɻ͚ΕͲ΋͋Μ·Γ্ख Ͱͳ͍ͱ͍͏ධ൑Ͱͨ͠ɻ্खͰͳ͍ Ͳ͜ΖͰ͸ͳ࣮͘͸஥ؒͷָखͷͳ͔ Ͱ͸͍ͪ͹ΜԼखͰ͔ͨ͠Βɺ͍ͭͰ ΋ָ௕ʹ͍͡ΊΒΕΔͷͰͨ͠ɻ ͻΔ͗͢ΈΜͳ͸ָ԰ʹԁ͘ͳΒΜͰ ࠓ౓ͷொͷԻָձ΁ग़͢ୈ࿡ަڹۂͷ ࿅शΛ͍ͯ͠·ͨ͠ɻτϥϯϖοτ͸ Ұੜ͚Μ໋Վ͍ͬͯ·͢ɻ ૸Εϝϩε ஖ᥨͷࢳ ϝϩε͸ౖܹͨ͠ɻඞͣɺ͔ͷअஐ๫ ٮͷԦΛআ͔ͳ͚Ε͹ͳΒ͵ͱܾҙ͠ ͨɻϝϩεʹ͸੓࣏͕Θ͔Β͵ɻϝϩ ε͸ɺଜͷ຀ਓͰ͋ΔɻథΛਧ͖ɺ༽ ͱ༡ΜͰ฻ͯ͠དྷͨɻ͚ΕͲ΋अѱʹ ରͯ͠͸ɺਓҰഒʹහײͰ͋ͬͨɻ͖ΐ ͏ະ໌ϝϩε͸ଜΛग़ൃ͠ɺ໺Λӽ͑ ࢁӽ͑ɺेཬ͸ͳΕͨࠑ͜ͷγϥΫε ͷࢢʹ΍ͬͯདྷͨɻϝϩεʹ͸෕΋ɺ ฼΋ແ͍ɻঁ๪΋ແ͍ɻे࿡ͷɺ಺ؾ ͋Δ೔ͷࣄͰ͍͟͝·͢ɻޚऍՠ༷͸ ۃָͷ࿇஑ͷ;ͪΛɺಠΓͰͿΒͿΒ ޚา͖ʹͳ͍ͬͯΒͬ͠Ό͍·ͨ͠ɻ ஑ͷதʹ࡙͍͍ͯΔ࿇ͷՖ͸ɺΈΜͳ ۄͷΑ͏ʹ·ͬനͰɺͦͷ·Μதʹ͋ Δۚ৭ͷࣵ͸ɺԿͱ΋Ӡ͑ͳ͍޷೏͕ɺ ઈؒ͋ͨΓ΁ҲͯډΓ·͢ɻۃָ͸ஸ ౓ேͳͷͰ͍͟͝·͠ΐ͏ɻ ɹ΍͕ͯޚऍՠ༷͸ͦͷ஑ͷ;ͪʹޚ ဣʹͳͬͯɺਫͷ໘Λณ͍ͬͯΔ࿇ͷ ྨࣅͷཁૉΛ܁Γฦ͢ࣄ Ͱ͢ɻ ܗɺ৭ɺάϧʔϓͳ ͲΛ൓෮ͤ͞·͢ɻ ൓෮͸৘ใΛɺ άϧʔϓԽ Λଅਐ͠·͢ɻ

Slide 10

Slide 10 text

DERA-design 10 ϨΠ Ξ΢ τͷϧʔϧ $"15&3

Slide 11

Slide 11 text

DERA-design 11 ϖʔδ ͷ༨ന $"15&3ϧʔϧᶃ

Slide 12

Slide 12 text

DERA-design 12 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃϖʔδͷ༨ന

Slide 13

Slide 13 text

DERA-design 13 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃϖʔδͷ༨ന ɹ ࠷ɹখɹ௨ɹৗɹ ϊɹυ "ɹɹNN ɹ NN ɹNN " NN NN NN " NN NN NN ໊ࢗ NN NN ϋΨΩNN NN

Slide 14

Slide 14 text

DERA-design 14 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃϖʔδͷ༨ന ʢ൛໘཰ʣ

Slide 15

Slide 15 text

DERA-design 15 χϯδϯ ͨ·Ͷ͗ ϒϩοίϦʔ ͡Ό͕͍΋ ϐʔϚϯ ͔΅ͪΌ ΄͏ΕΜ૲ φε Ωϟϕπ ЌΧϩςϯ͕๛෋ ݂ѹΛԼ͛ΔޮՌ͋Γ μΠΤοτʹ (00% ϙςταϥμ͕ਓؾ ࢠͲ΋͕ݏ͍ͳ৯΂෺ ͓՛ࢠʹͯ͠΋͏·͍ Χϧγ΢Ϝ͕ଟ͍ Ն໺ࡊͱ͍͑͹͜Ε ৯෺ણҡ๛෋ ؔ܎ͷͳ͍΋ͷಉ࢜ͷ༨ന ؔ܎͢Δ΋ͷ ಉ࢜ͷ༨ന $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶃϖʔδͷ༨ന ͦͷଞͷ෺ͱͷ༨ന

Slide 16

Slide 16 text

DERA-design 16 য఺ΛܾΊΔ ϑ ΥʔΧϧ ɾ ϙΠϯτ $"15&3ϧʔϧᶄ

Slide 17

Slide 17 text

DERA-design 17 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄয఺ΛܾΊΔ 'PDBMQPJOU

Slide 18

Slide 18 text

DERA-design 18 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄয఺ʹ஫໨ͤ͞Δ ஫໨

Slide 19

Slide 19 text

DERA-design 19 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄ஫໨ͤ͞Δํ๏ จࣈͷ৭Λม͑Δ ଞͷཁૉͱؔ܎Λߟ͑ͯɺಉܥ৭΍ิ৭ͳͲʹ͢Δɻ τʔϯ͸σβΠϯ શମʹ߹ΘͤΔΑ͏ʹ͠·͠ΐ͏ɻ จࣈͷαΠζΛม͑Δ ίπ͸େ୾ʹม͑Δ͜ͱɺδϟϯϓ཰͕େ͖͍΄Ͳ໨ཱͪ·͢ɻ ͔͠͠ σβΠϯશମͷόϥϯε͸่͞ͳ͍Α͏ʹؾΛ͚ͭΔɻ

Slide 20

Slide 20 text

DERA-design 20 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶄ஫໨ͤ͞Δํ๏ จࣈʹ૷০Λ͢Δ ԼઢΛ͚ͭΔɻ จࣈΛଠ͘͢Δɻ ϚʔΧʔΛҾ͘ɻ ໿෺Λ͚ͭΔͳͲͷํ ๏Ͱଞͱͷҧ͍Λ͚ͭΔɻ ༨നΛେ͖͘͢Δ ڧௐ͍ͨ͠΋ͷͷपΓͷ༨നΛେ͖͘͢Δͱɺ ͦͷ໘ੵ΋ͦͷཁૉʹؔ ΘΔ΋ͷͱೝࣝ͞ΕΔɻ

Slide 21

Slide 21 text

DERA-design 21 ݟ͑ͳ͍ϥΠϯ $"15&3ϧʔϧᶅ

Slide 22

Slide 22 text

DERA-design 22 χϯδϯ ͨ·Ͷ͗ ϒϩοίϦʔ ͡Ό͕͍΋ ϐʔϚϯ ͔΅ͪΌ ΄͏ΕΜ૲ φε Ωϟϕπ ЌΧϩςϯ͕๛෋ ݂ѹΛԼ͛ΔޮՌ͋Γ μΠΤοτʹ (00% ϙςταϥμ͕ਓؾ ࢠͲ΋͕ݏ͍ͳ৯΂෺ ͓՛ࢠʹͯ͠΋͏·͍ Χϧγ΢Ϝ͕ଟ͍ Ն໺ࡊͱ͍͑͹͜Ε ৯෺ણҡ๛෋ $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶅݟ͑ͳ͍ઢ

Slide 23

Slide 23 text

DERA-design 23 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶅݟ͑ͳ͍ઢ

Slide 24

Slide 24 text

DERA-design 24 ࢹઢͷྲྀΕ $"15&3ϧʔϧᶆ

Slide 25

Slide 25 text

DERA-design 25 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶆࢹઢͷྲྀΕ ˔˔˔˔ ˔˔˔˔˔˔˔ ࢹ ઢ ͷ ྲྀ Ε ஫໨͞Εʹ͍͘ ஫໨͞Εʹ͍͘

Slide 26

Slide 26 text

DERA-design 26 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶆࢹઢͷྲྀΕ ࢹ ઢ ͷ ྲྀ Ε ࢹ ઢ ͷ ྲྀ Ε ࢹઢͷྲྀΕ

Slide 27

Slide 27 text

DERA-design 27 γϯϝτϦʔͱ ΞγϯϝτϦʔ $"15&3ϧʔϧᶇ

Slide 28

Slide 28 text

DERA-design 28 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶇγϯϝτϦʔ

Slide 29

Slide 29 text

DERA-design 29 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶇΞγϯϝτϦʔ

Slide 30

Slide 30 text

DERA-design 30 ͷ๏ଇ $"15&3ϧʔϧᶈ

Slide 31

Slide 31 text

DERA-design 31 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶈͷ๏ଇ

Slide 32

Slide 32 text

DERA-design 32 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶈͷ๏ଇ

Slide 33

Slide 33 text

DERA-design 33 ਤ൛཰ˋ $"15&3ϧʔϧᶉ

Slide 34

Slide 34 text

DERA-design 34 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶉਤ൛཰ˋ *NBHF

Slide 35

Slide 35 text

DERA-design 35 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶉεΫϩʔϧ಺ʹը૾Ҏ্ TFDUJPO TFDUJPO *NBHF

Slide 36

Slide 36 text

DERA-design 36 จষ͚ͩʹ͠ͳ͍ $"15&3ϧʔϧᶊ

Slide 37

Slide 37 text

DERA-design 37 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶊจষ͚ͩʹ͠ͳ͍ จষΛಡ·ͤͯ఻͍߲͑ͨ໨ Ͱ͋ͬͯ΋ɺ ͜ͷΑ͏ʹςΩετ ͚ͩʹͯ͠͠·͏ͱɺ ཧղΛ๦ ͛ͯ఻ΘΓʹ͘͘ͳͬͯ͠· ͏͜ͱ͕͋Γ·͢ɻ

Slide 38

Slide 38 text

DERA-design 38 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶊจষ͚ͩʹ͠ͳ͍ ͦͷͨΊʹɺ ը૾΍Πϥε τͳͲ ΛҰॹʹ഑ஔ͢Δ͜ͱͰɺ ײ֮త ʹΠϝʔδ͠΍͘͢ͳΓ·͢ɻ ݁Ռͱͯ͠ཧղ͠΍͘͢ͳͬ ͯɺ ఻ΘΓ΍͘͢ͳΓ·͢ɻ

Slide 39

Slide 39 text

DERA-design 39 ը૾͸ࠨ ςΩετ͸ӈ $"15&3ϧʔϧᶋ

Slide 40

Slide 40 text

DERA-design 40 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶋը૾͸ࠨɺ ςΩετ͸ӈ ਓؒͷ೴͸ࠨଆʹ഑ஔ͞Εͨ ΋ͷΛײ֮తʹඒ͍͠ͱײ͡ ΍͘͢ɺ ӈଆʹ഑ஔ͞Εͨ΋ͷ Λཧ࿦తͳࢥߟͰଊ͑΍͘͢ ͳ͍ͬͯ·͢ɻ

Slide 41

Slide 41 text

DERA-design 41 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶋ·ͨ͸ը૾͸্ɺ ςΩετ͸Լ ্Լʹ഑ஔ͞ΕΔ৔߹͸ɺ ্ͷཁૉ͸ ݟΔ͕࣌ؒ୹͘ɺ Լͷཁૉ͸௕͘ͳΔͨ Ίɺ ը૾্͕ͰςΩετ͕Լʹ͢Δɻ

Slide 42

Slide 42 text

DERA-design 42 ໎ͬͨΒਖ਼ํܗ ·ͨ͸ԫۚൺͷ௕ํܗ $"15&3ϧʔϧᶌ

Slide 43

Slide 43 text

43 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶌ໎ͬͨΒਖ਼ํܗ

Slide 44

Slide 44 text

DERA-design 44 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶌ·ͨ͸ԫۚൺͷ௕ํܗ

Slide 45

Slide 45 text

DERA-design 45 ॏ৺ $"15&3ϧʔϧᶍ

Slide 46

Slide 46 text

DERA-design 46 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶍॏ৺ ʢ্Լʣ جຊతʹ͸্͸ܰ͘ɺ Լ͸ॏ͘ ͢Δͱ҆ఆͯ͠όϥϯε͕Α ͘ͳΔɻ ॏΈ͸༨ന΍ɺ ৭ɺ ςΩ ετͷྔͳͲͰมΘͬͯ͘Δɻ

Slide 47

Slide 47 text

DERA-design 47 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶍॏ৺ ʢର֯ઢʣ ্ԼʹՃ͑ͯࠨӈͷόϥϯε ΋ߟ͑·͢ɻ ࠨΛॏͨ͘͠ํ͕ όϥϯε͕ྑ͘ͳΓ·͕͢ɺ ্ ͕ॏ͘ͳΔͷͰɺ ଞͷཁૉͰό ϥϯεΛͱΔͱྑ͍ɻ

Slide 48

Slide 48 text

DERA-design 48 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶍॏ৺ ʢࡾ֯ܗʣ ্ʹ ͭɺ Լʹ̎ͭཁૉΛ࣋ͬ ͯ͘Δͱ҆ఆ͠·͢ɻ ͦΕΛ࣮ࡍʹɺ ஔ͘ͱͨ͠Β౗ ΕΔ͔Ͳ͏͔Ͱߟ͑Δͱྑ͍ɻ

Slide 49

Slide 49 text

DERA-design 49 ৭ͷ਺͸ʙ৭ $"15&3ϧʔϧᶎ

Slide 50

Slide 50 text

DERA-design 50 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶎ৭ͷ਺͸ʙ৭

Slide 51

Slide 51 text

DERA-design 51 ϕʔεΧϥʔʜʜʜʜˋ ϝΠϯΧϥʔʜʜʜʜˋ ΞΫηϯτΧϥʔʜʜˋ $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧᶎ৭ͷ਺͸ʙ৭

Slide 52

Slide 52 text

DERA-design 52 ϧʔϧ͸ഁΔ ͨΊʹ͋Δ $"15&3ϧʔϧ&9

Slide 53

Slide 53 text

53 DERA-design $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧ&9ϧʔϧ͸ഁΔͨΊʹ͋Δ ϧʔϧ௨Γ࡞Δͱɺ ·ͱ·ͬͨ σβΠϯʹ࢓্͕Γ·͢ɻ ͔͠͠ɺ ୭͕࡞ͬͯ΋ಉ͡Α͏ ͳσβΠϯʹͳͬͯ͠·͏͔ ΋͠Ε·ͤΜʜʜ

Slide 54

Slide 54 text

DERA-design 54 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧ&9ϧʔϧ͸ഁΔͨΊʹ͋Δ σβΠϯΛ·ͱΊΒΕΔΑ͏ ʹͳͬͨΒɺ͋͑ͯϧʔϧΛ ഁͬͯΈ·͠ΐ͏ɻ ࣗ෼ͷ͔Β΋ഁΕΔ͜ͱͰ ͠ΐ͏ɻ

Slide 55

Slide 55 text

DERA-design 55 $"15&3ϨΠΞ΢τͷϧʔϧ ϧʔϧ&9ϧʔϧΛ஌Βͳ͖ΌഁΕͳ͍ ϧʔϧΛ஌͍ͬͯΔ͔Βͦ͜ɺ ʮ͋͑ͯഁΔʯ ͕Ͱ͖·͢ɻ ҙਤ Λ࣋ͬͯഁΔ͜ͱ͕େ੾Ͱ͢ɻ ͳΜͱͳ͘Ͱ͸ɺ Ͱ͖͍ͯͳ͍ ͷͱಉ͡ʹͳ͍ͬͯ͠·͢ɻ

Slide 56

Slide 56 text

DERA-design 56 ·ͱΊ

Slide 57

Slide 57 text

DERA-design 57 ˔ϧʔϧΛ஌Δͱ൑அ͠΍͍͢ ˔৺ཧతͳޮՌ͕ূ໌͞Ε͍ͯΔ΋ͷ΋͋Δ ˔ϧʔϧΛ஌Δͱमਖ਼఺Λݟ͚ͭ΍͍͢ ˔ϧʔϧΛ஌Βͳ͚Ε͹ഁΔ͜ͱ΋Ͱ͖ͳ͍ ·ͱΊ

Slide 58

Slide 58 text

DERA-design 58 ࢀߟ঺հ

Slide 59

Slide 59 text

DERA-design 59 ˔ͳͬͱ͘ϨΠΞ΢τ ˔ͩΕͰ΋ϨΠΞ΢τσβΠϯ͕Ͱ͖Δຊ ˔ϊϯσβΠφʔζσβΠϯϒοΫ ˔σβΠϯͷϧʔϧɺϨΠΞ΢τͷηΦϦʔ ࢀߟ঺հ

Slide 60

Slide 60 text

DERA-design 60 Ҏ্ɺ ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠