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

情報を正確かつスムーズに伝えるために、読みやすく整えたり、図表をわかりやすく作ったり、デザイナー以外の方でも「基本的なルール」を押さえることで、全体的なバランスが格段に良くなります。
その基本ルールの中の「近接＝グルーピング」についてまとめました。
あるある事例を元に解説しております。

Transcript

1. ৘ใ఻ୡͰେ੾ͳ άϧʔϐϯά ͗ͦ͢Μ
   !TVVVO
2. άϧʔϐϯά σβΠφʔɺ ϑϩϯτΤϯυɺ ϓϩάϥϚʔ ؔ܎ͳ͘ɺ ৘ใ఻ୡʹඞཁͳ஌ࣝ ίʔσΟ ϯάޙʹάϧʔϐϯά่͕յͯ͠ ҙຯ͕มΘ͍ͬͯΔ͜ͱ͕͋Δ
3. σβΠϯ˔େݪଇ  ۙ઀ Proximity ੔ྻ Alignment ڧऑ Contrast ൓෮ Repetition
4. ؔ܎͢Δ৘ใΛ͚ۙͮΔ ਓ͸Ґஔతʹ͍ۙ΋ͷΛ ʮؔ܎͕͋Δ΋ͷʯ ͱೝࣝ͢Δशੑ͕͋Δɻ ͭ·Γɺ Ґஔؔ܎Λ੔ཧ͢Δ͚ͩͰɺ ࢹ֮తʹཧղ͠΍͍͢ϨΠΞ΢τʹͳΔɻ άϧʔϐϯάͬͯԿʁ
5. ͱͬͯ΋ݟʹ͍͘ ʂ ؔ܎ੑΛཧղ͢Δॴ͔Β ࢝Ίͳ͍ͱ͍͚·ͤΜʜ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ྫ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ˔λΠ τϧλΠ τϧ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ ɾ߲໨Ͱ͢ %POʟ U
   NBLF
   NF
   UIJOL ʂϢʔβʔʹߟ͑ͤ͞Δͳ ϢʔβϏϦςΟͷجຊ
6. λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ ཁૉ͕૿͑Δͱ
7. ཁૉ͕ଟ͍΋ͷΛάϧʔϓԽ͢Δͱ λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ
8. ίπ͕͋Γ·͢ ʂ ݱ࣮ੈքʹஔ͖׵͑ͯ૝૾͢Δͱ෼͔Γ΍͍͢ɻ ෦԰ͷՈ۩Ͱߟ͑ͯΈͨΓʜ άϧʔϐϯάΛݟۃΊΔ
9. Ωʔϯίʔϯ ɹΧʔϯίʔϯ ݱ࣮ੈքʹஔ͖׵͑Δ ɿମҭؗͷશߍूձͰߟ͑ͯΈΔ นͱάϧʔϓʹ ͳ͍ͬͯΔਓɻ σβΠϯͰ΋ى͖͍ͯΔɻ
10. น΍ΫϥεͱͷִؒΛ੔͑ͯάϧʔϓΛ໌֬ʹ͢Δ
11. λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧ ςΩετςΩετςΩ ετςΩετς λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ λΠ τϧλΠ τϧλ ςΩετςΩετςΩ ετςΩετςΩετςΩετ ஥ؒͷ༨ന ஥ؒҎ֎ͷ༨ന ͜ͷ̎ͭͷ༨നΛ ҰͭҰͭ੔ཧ͠ɺ άϧʔϓΛ෼͚͍ͯ͘ɻ άϧʔϐϯάͷϙΠϯτ͸ ʮ༨നʯ
12. ෼͔ͬͯͯ΋ݟམͱͪ͠Ό͏ άϧʔϐϯά่յ ͋Δ͋Δ σβΠφʔ ɾ ϑϩϯτΤϯυΤϯδχΞඞݟʂ
13. άϧʔϐϯά่յ͋Δ͋Δ ͭʹ෼͔ΕΔ ͕ͭਖ਼ղ
14. άϧʔϐϯά่յ͋Δ͋Δ ͕౳͍͠ͷͰάϧʔϓ่յ͍ͯ͠Δ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧλ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧλ άϧʔϐϯά่յ͋Δ͋Δάϧʔϐ ϯά่յ͋Δ͋Δάϧʔϐϯά่յ ͋Δ͋Δάϧʔϐϯά่յ͋Δ͋Δ άϧʔϐϯά่յ͋Δ͋Δ λΠ τϧλΠ τϧλΠ τϧ λΠ τϧλΠ τϧ άϧʔϐϯά่յ͋Δ͋Δάϧʔϐ ϯά่յ͋Δ͋Δάϧʔϐϯά่յ ͋Δ͋Δάϧʔϐϯά่յ͋Δ͋Δ άϧʔϐϯά่յ͋Δ͋Δ ؔ܎͠ͳ͍΋ͷͷ༨ന ஥ؒͷ༨ന MJOFIFJHIUʹ஫ҙʂ ⁞ ⁞  
15. ໊ࣾ ૑ۀ ࣾһ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετ ໊ࣾ ૑ۀ ࣾһ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετςΩετςΩετςΩετ ςΩετςΩετςΩετςΩετςΩετ ⁞ ⁞   άϧʔϐϯά่յ͋Δ͋Δ ؔ܎͠ͳ͍΋ͷͷ༨നɾ஥ؒͷ༨ന͕ ౳͍͠ͷͰάϧʔϓ่յ͍ͯ͠Δ MJOFIFJHIUͷ஫ҙ
16. άϧʔϐϯά่յ͋Δ͋Δ ۉ౳ͳ༨നʹΑΓ શͯͷύʔπ͕όϥόϥʹͳ͍ͬͯΔ ϋοΩϦͱ໌֬ʹ෼͚Α͏ ʂ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ λΠ τϧ͕ೖΓ·͢λΠ τϧ͕ೖ Γ·͢λΠ τϧ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ςΩετ͕ೖΓ·͢ςΩετ͕ೖΓ·͢ ݶఆ ΠνΦγ ͓஌Βͤ
17. άϩʔόϧϝχϡʔ ϝχϡʔͱ$7Ϙλϯ͸ҧ͏άϧʔϓ άϧʔϓΛ෼͚·͠ΐ ͏ άϧʔϐϯά่յ͋Δ͋Δ ͨͬͨQYɺ ͞ΕͲQY ਆ͸ࡉ෦ʹ॓Δ ͓໰͍߹Θͤ اۀ৘ใ ళฮҊ಺ ʓʓʹ͍ͭͯ ޻৔঺հ άϧʔϓاۀ χϡʔε Α͋͘Δ࣭໰ ͓໰͍߹Θͤ اۀ৘ใ ళฮҊ಺ ʓʓʹ͍ͭͯ ޻৔঺հ άϧʔϓاۀ χϡʔε Α͋͘Δ࣭໰
18. ͨͬͨQYɺ ͞ΕͲQY ஥ؒͷ༨നɺ ؔ܎͠ͳ͍΋ͷͷ༨ന %POʟ U
    NBLF
    NF
    UIJOL ʂ ମҭؗ ਆ͸ࡉ෦ʹ॓Δ ·ͱΊ ɾ ॏཁͳΩʔϫʔυ ετϨεϑϦʔͳ৘ใ఻ୡΛߦ͏ͨΊʹࡉ෦ʹͩ͜ΘΔɻ άϧʔϐϯάʹ໎ͬͨ࣌͸ମҭؗΛࢥ͍ग़ͦ͏ ʂ