デザインの基礎：情報伝達で大切なグルーピングのコツ

by すぎそん

Slide 1

Slide 1 text

৘ใ఻ୡͰେ੾ͳ άϧʔϐϯά ͗ͦ͢Μ!TVVVO

Slide 2

Slide 2 text

άϧʔϐϯά σβΠφʔɺ ϑϩϯτΤϯυɺ ϓϩάϥϚʔ ؔ܎ͳ͘ɺ ৘ใ఻ୡʹඞཁͳ஌ࣝ ίʔσΟ ϯάޙʹάϧʔϐϯά่͕յͯ͠ ҙຯ͕มΘ͍ͬͯΔ͜ͱ͕͋Δ

Slide 3

Slide 3 text

σβΠϯ˔େݪଇ ۙ઀ Proximity ੔ྻ Alignment ڧऑ Contrast ൓෮ Repetition

Slide 4

Slide 4 text

ؔ܎͢Δ৘ใΛ͚ۙͮΔ ਓ͸Ґஔతʹ͍ۙ΋ͷΛ ʮؔ܎͕͋Δ΋ͷʯ ͱೝࣝ͢Δशੑ͕͋Δɻ ͭ·Γɺ Ґஔؔ܎Λ੔ཧ͢Δ͚ͩͰɺ ࢹ֮తʹཧղ͠΍͍͢ϨΠΞ΢τʹͳΔɻ άϧʔϐϯάͬͯԿʁ

Slide 5

Slide 5 text

ͱͬͯ΋ݟʹ͍͘ ʂ ؔ܎ੑΛཧղ͢Δॴ͔Β ࢝Ίͳ͍ͱ͍͚·ͤΜʜ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ྫ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ %POʟ UNBLFNFUIJOL ʂϢʔβʔʹߟ͑ͤ͞Δͳ ϢʔβϏϦςΟͷجຊ

Slide 6

Slide 6 text

λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ ཁૉ͕૿͑Δͱ

Slide 7

Slide 7 text

ཁૉ͕ଟ͍΋ͷΛάϧʔϓԽ͢Δͱ λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ

Slide 8

Slide 8 text

ίπ͕͋Γ·͢ ʂ ݱ࣮ੈքʹஔ͖׵͑ͯ૝૾͢Δͱ෼͔Γ΍͍͢ɻ ෦԰ͷՈ۩Ͱߟ͑ͯΈͨΓʜ άϧʔϐϯάΛݟۃΊΔ

Slide 9

Slide 9 text

Ωʔϯίʔϯ ɹΧʔϯίʔϯ ݱ࣮ੈքʹஔ͖׵͑Δ ɿମҭؗͷશߍूձͰߟ͑ͯΈΔ นͱάϧʔϓʹ ͳ͍ͬͯΔਓɻ σβΠϯͰ΋ى͖͍ͯΔɻ

Slide 10

Slide 10 text

น΍ΫϥεͱͷִؒΛ੔͑ͯάϧʔϓΛ໌֬ʹ͢Δ

Slide 11

Slide 11 text

λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ ஥ؒͷ༨ന ஥ؒҎ֎ͷ༨ന ͜ͷ̎ͭͷ༨നΛ ҰͭҰͭ੔ཧ͠ɺ άϧʔϓΛ෼͚͍ͯ͘ɻ άϧʔϐϯάͷϙΠϯτ͸ ʮ༨നʯ

Slide 12

Slide 12 text

෼͔ͬͯͯ΋ݟམͱͪ͠Ό͏ άϧʔϐϯά่յ ͋Δ͋Δ σβΠφʔ ɾ ϑϩϯτΤϯυΤϯδχΞඞݟʂ

Slide 13

Slide 13 text

άϧʔϐϯά่յ͋Δ͋Δ ͭʹ෼͔ΕΔ ͕ͭਖ਼ղ

Slide 14

Slide 14 text

άϧʔϐϯά่յ͋Δ͋Δ ͕౳͍͠ͷͰάϧʔϓ่յ͍ͯ͠Δ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧλ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧλ άϧʔϐϯά่յ͋Δ͋Δάϧʔϐ ϯά่յ͋Δ͋Δάϧʔϐϯά่յ ͋Δ͋Δάϧʔϐϯά่յ͋Δ͋Δ άϧʔϐϯά่յ͋Δ͋Δ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧ άϧʔϐϯά่յ͋Δ͋Δάϧʔϐ ϯά่յ͋Δ͋Δάϧʔϐϯά่յ ͋Δ͋Δάϧʔϐϯά่յ͋Δ͋Δ άϧʔϐϯά่յ͋Δ͋Δ ؔ܎͠ͳ͍΋ͷͷ༨ന ஥ؒͷ༨ന MJOFIFJHIUʹ஫ҙʂ ⁞ ⁞  

Slide 15

Slide 15 text

໊ࣾ ૑ۀ ࣾһ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετ ໊ࣾ ૑ۀ ࣾһ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετ ⁞ ⁞   άϧʔϐϯά่յ͋Δ͋Δ ؔ܎͠ͳ͍΋ͷͷ༨നɾ஥ؒͷ༨ന͕ ౳͍͠ͷͰάϧʔϓ่յ͍ͯ͠Δ MJOFIFJHIUͷ஫ҙ

Slide 16

Slide 16 text

άϧʔϐϯά่յ͋Δ͋Δ ۉ౳ͳ༨നʹΑΓ શͯͷύʔπ͕όϥόϥʹͳ͍ͬͯΔ ϋοΩϦͱ໌֬ʹ෼͚Α͏ ʂ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ

Slide 17

Slide 17 text

άϩʔόϧϝχϡʔ ϝχϡʔͱ$7Ϙλϯ͸ҧ͏άϧʔϓ άϧʔϓΛ෼͚·͠ΐ ͏ άϧʔϐϯά่յ͋Δ͋Δ ͨͬͨQYɺ ͞ΕͲQY ਆ͸ࡉ෦ʹ॓Δ ͓໰͍߹Θͤ اۀ৘ใ ళฮҊ಺ ʓʓʹ͍ͭͯ ޻৔঺հ άϧʔϓاۀ χϡʔε Α͋͘Δ࣭໰ ͓໰͍߹Θͤ اۀ৘ใ ళฮҊ಺ ʓʓʹ͍ͭͯ ޻৔঺հ άϧʔϓاۀ χϡʔε Α͋͘Δ࣭໰

Slide 18

Slide 18 text

ͨͬͨQYɺ ͞ΕͲQY ஥ؒͷ༨നɺ ؔ܎͠ͳ͍΋ͷͷ༨ന %POʟ UNBLFNFUIJOL ʂ ମҭؗ ਆ͸ࡉ෦ʹ॓Δ ·ͱΊ ɾ ॏཁͳΩʔϫʔυ ετϨεϑϦʔͳ৘ใ఻ୡΛߦ͏ͨΊʹࡉ෦ʹͩ͜ΘΔɻ άϧʔϐϯάʹ໎ͬͨ࣌͸ମҭؗΛࢥ͍ग़ͦ͏ ʂ