Upgrade to Pro — share decks privately, control downloads, hide ads and more …

read-a-non-designers-designbook

 read-a-non-designers-designbook

MIND HACKSとインタフェースデザインの心理学を引用しながら、デザインの基本4原則を解説していきます。

====================
あわせて読みたい
====================
少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック
https://speakerdeck.com/ken_c_lo/zurui-design

ノンデザイナーのための配色理論
http://www.slideshare.net/saucerjp/ss-14902681

初めての欧文書体
http://www.slideshare.net/shoheiitoh/ss-17245066

0.1ランク上のアイコンの作り方講座
https://speakerdeck.com/is8r/0-dot-1rankushang-falseaikonfalsezuo-rifang-jiang-zuo

Bootstrapのカスタマイズ例
https://speakerdeck.com/machida/railsenziniafalsetamefalsetwitter-bootstrapkasutamaizuli

---------------------------

上記4つとこのスライドは、P4D デザイナー向けプログラム部 http://prog4designer.github.com/ にて発表されたものです。

---------------------------

後日DevLOVEにお呼ばれした際、少し内容を増やしました。

Tech Guild - Non Designers Design - - DevLOVE
http://devlove.doorkeeper.jp/events/4059

Kazuhiko Maeda

March 16, 2013
Tweet

Other Decks in Design

Transcript

  1. ݸ·Ͱ͸ҰॠͰ೺ѲͰ͖Δɻ ͦΕҎ্͸਺͑ͯ͠·͏ɻ Ҏલ͸œͱݴΘΕ͍͕ͯͨɺࠓ͸ ͱ͍͏ݚڀ݁Ռ͕ग़͍ͯΔ  ɻ αϏλΠδϯά 8PSLJOH.FNPSZ #BEEFMFZ IPNFQBHFQTZVUFYBTFEVIPNFQBHFDMBTT1TZ%XPSLJOHNFNPSZQEG

    IUUQIPNFQBHFQTZVUFYBTFEVIPNFQBHFDMBTT1TZ% XPSLJOHNFNPSZQEG ೔ຊޠ൛ˠهԱྗͦͷ͘͠Έͱ͸ͨΒ͖Χϥʔਤ㘸੣৴ॻ๪  ਓ͕Ұ౓ʹॲཧͰ͖Δ৘ใྔʹ͸ԿΒ ͔ͷݶք͕͋ΔΜ͡Όͳ͍͔ͳɺ ͱࢥ͍·͢ɻ δϣʔδɾ"ɾϛϥʔ
  2. ݸ·Ͱ͸ҰॠͰ೺ѲͰ͖Δɻ ͦΕҎ্͸਺͑ͯ͠·͏ɻ Ҏલ͸œͱݴΘΕ͍͕ͯͨɺࠓ͸ ͱ͍͏ݚڀ݁Ռ͕ग़͍ͯΔ  ɻ αϏλΠδϯά 8PSLJOH.FNPSZ #BEEFMFZ IPNFQBHFQTZVUFYBTFEVIPNFQBHFDMBTT1TZ%XPSLJOHNFNPSZQEG

    IUUQIPNFQBHFQTZVUFYBTFEVIPNFQBHFDMBTT1TZ% XPSLJOHNFNPSZQEG ೔ຊޠ൛ˠهԱྗͦͷ͘͠Έͱ͸ͨΒ͖Χϥʔਤ㘸੣৴ॻ๪  ਓ͕Ұ౓ʹॲཧͰ͖Δ৘ใྔʹ͸ԿΒ ͔ͷݶք͕͋ΔΜ͡Όͳ͍͔ͳɺ ͱࢥ͍·͢ɻ δϣʔδɾ"ɾϛϥʔ ཪ෇͚͕ͳ͔ͬͨͷͰ ௐ΂ͨΒͰͨ͠ɻ ΞϥϯɾόουϦʔ
  3. ಛఆͷਤܗύλʔϯ͚ͩʹ൓Ԡ͢Δࡉ๔ ͕͋Δ ஏͷଟ͍ੜ֔Λૹͬͯདྷ ·ͨ͠ɻࣗ෼ʹ͸ɺਓؒ ͷੜ׆ͱ͍͏΋ͷ͕ɺݟ ౰͔ͭͳ͍ͷͰ͢ɻࣗ෼ ͸౦๺ͷాࣷʹੜΕ·͠ ͨͷͰɺؿंΛ͸͡Ίͯ ݟͨͷ͸ɺΑ΄Ͳେ͖͘ ͳ͔ͬͯΒͰͨ͠ɻࣗ෼

    ͸ఀं৔ͷϒϦοδΛɺ ্ͬͯɺ߱Γͯɺͦ͏͠ ͯͦΕ͕ઢ࿏Λ·ͨ͗ӽ ͑ΔͨΊʹ଄ΒΕͨ΋ͷ ͩͱ͍͏ࣄʹ͸શવؾͮ ͔ͣɺͨͩͦΕ͸ఀं৔ ͷߏ಺Λ֎ࠃͷ༡ٔ৔Έ ͍ͨʹɺෳࡶʹָ͘͠ɺ ϋΠΧϥʹ͢ΔͨΊʹͷ ΈɺઃඋͤΒΕͯ͋Δ΋ ͷͩͱ͹͔Γࢥ͍ͬͯ· ͨ͠ɻ͔͠΋ɺ͔ͳΓӬ ʔϰΟεͷҰͭͩͱࢥͬ ͍ͯͨͷͰ͕͢ɺͷͪʹ ͦΕ͸ཱྀͨͩ٬͕ઢ࿏Λ ·ͨ͗ӽ͑ΔͨΊͷੂΔ ࣮རతͳ֊ஈʹա͗ͳ͍ ͷΛൃݟͯ͠ɺʹΘ͔ʹ ڵ͕֮Ί·ͨ͠ɻ·ͨɺ ࣗ෼͸ࢠڙͷࠒɺֆຊͰ ஍Լమಓͱ͍͏΋ͷΛݟ ͯɺ͜Ε΋΍͸Γɺ࣮ར తͳඞཁ͔ΒҊग़ͤΒΕ ͨ΋ͷͰ͸ͳ͘ɺ஍্ͷ ंʹ৐ΔΑΓ͸ɺ஍Լͷ ंʹ৐ͬͨ΄͏͕෩͕Θ ΓͰ໘ന͍༡ͼ͔ͩΒɺ ͱ͹͔Γࢥ͍ͬͯ·͠ ͨɻࣗ෼͸ࢠڙͷࠒ͔Β පऑͰɺΑ͘৸ࠐΈ·͠ ͕ͨɺ৸ͳ͕Βɺෑ෍ɺ ປͷΧϰΝɺֻוஂͷΧ ·ͨɺࣗ෼͸ɺۭෲͱ͍ ͏ࣄΛ஌Γ·ͤΜͰ͠ ͨɻ͍΍ɺͦΕ͸ɺࣗ෼ ͕ҥ৯ॅʹࠔΒͳ͍Ոʹ ҭͬͨͱ͍͏ҙຯͰ͸ͳ ͘ɺͦΜͳഅࣛͳҙຯͰ ͸ͳ͘ɺࣗ෼ʹ͸ʮۭ ෲʯͱ͍͏ײ֮͸ͲΜͳ ΋ͷ͔ͩɺͬ͞ͺΓΘ͔ Βͳ͔ͬͨͷͰ͢ɻ΁Μ ͳݴ͍͔ͨͰ͕͢ɺ͓ͳ ͔͕ۭ͍͍ͯͯ΋ɺࣗ෼ ͰͦΕʹؾ͕͔ͭͳ͍ͷ Ͱ͢ɻখֶߍɺதֶߍɺ ࣗ෼ֶ͕ߍ͔Βؼͬͯདྷ Δͱɺपғͷਓ͕ͨͪɺ ͦΕɺ͓ͳ͔͕ۭ͍ͨΖ ͏ɺࣗ෼ͨͪʹ΋͕֮͑ ͋Δɺֶߍ͔Βؼͬͯདྷ ͨ࣌ͷۭෲ͸શ͘ͻͲ͍
  4. ಛఆͷਤܗύλʔϯ͚ͩʹ൓Ԡ͢Δࡉ๔ ͕͋Δ ஏͷଟ͍ੜ֔Λૹͬͯདྷ ·ͨ͠ɻࣗ෼ʹ͸ɺਓؒ ͷੜ׆ͱ͍͏΋ͷ͕ɺݟ ౰͔ͭͳ͍ͷͰ͢ɻࣗ෼ ͸౦๺ͷాࣷʹੜΕ·͠ ͨͷͰɺؿंΛ͸͡Ίͯ ݟͨͷ͸ɺΑ΄Ͳେ͖͘ ͳ͔ͬͯΒͰͨ͠ɻࣗ෼

    ͸ఀं৔ͷϒϦοδΛɺ ্ͬͯɺ߱Γͯɺͦ͏͠ ͯͦΕ͕ઢ࿏Λ·ͨ͗ӽ ͑ΔͨΊʹ଄ΒΕͨ΋ͷ ͩͱ͍͏ࣄʹ͸શવؾͮ ͔ͣɺͨͩͦΕ͸ఀं৔ ͷߏ಺Λ֎ࠃͷ༡ٔ৔Έ ͍ͨʹɺෳࡶʹָ͘͠ɺ ϋΠΧϥʹ͢ΔͨΊʹͷ ΈɺઃඋͤΒΕͯ͋Δ΋ ͷͩͱ͹͔Γࢥ͍ͬͯ· ͨ͠ɻ͔͠΋ɺ͔ͳΓӬ ʔϰΟεͷҰͭͩͱࢥͬ ͍ͯͨͷͰ͕͢ɺͷͪʹ ͦΕ͸ཱྀͨͩ٬͕ઢ࿏Λ ·ͨ͗ӽ͑ΔͨΊͷੂΔ ࣮རతͳ֊ஈʹա͗ͳ͍ ͷΛൃݟͯ͠ɺʹΘ͔ʹ ڵ͕֮Ί·ͨ͠ɻ·ͨɺ ࣗ෼͸ࢠڙͷࠒɺֆຊͰ ஍Լమಓͱ͍͏΋ͷΛݟ ͯɺ͜Ε΋΍͸Γɺ࣮ར తͳඞཁ͔ΒҊग़ͤΒΕ ͨ΋ͷͰ͸ͳ͘ɺ஍্ͷ ंʹ৐ΔΑΓ͸ɺ஍Լͷ ंʹ৐ͬͨ΄͏͕෩͕Θ ΓͰ໘ന͍༡ͼ͔ͩΒɺ ͱ͹͔Γࢥ͍ͬͯ·͠ ͨɻࣗ෼͸ࢠڙͷࠒ͔Β පऑͰɺΑ͘৸ࠐΈ·͠ ͕ͨɺ৸ͳ͕Βɺෑ෍ɺ ປͷΧϰΝɺֻוஂͷΧ ·ͨɺࣗ෼͸ɺۭෲͱ͍ ͏ࣄΛ஌Γ·ͤΜͰ͠ ͨɻ͍΍ɺͦΕ͸ɺࣗ෼ ͕ҥ৯ॅʹࠔΒͳ͍Ոʹ ҭͬͨͱ͍͏ҙຯͰ͸ͳ ͘ɺͦΜͳഅࣛͳҙຯͰ ͸ͳ͘ɺࣗ෼ʹ͸ʮۭ ෲʯͱ͍͏ײ֮͸ͲΜͳ ΋ͷ͔ͩɺͬ͞ͺΓΘ͔ Βͳ͔ͬͨͷͰ͢ɻ΁Μ ͳݴ͍͔ͨͰ͕͢ɺ͓ͳ ͔͕ۭ͍͍ͯͯ΋ɺࣗ෼ ͰͦΕʹؾ͕͔ͭͳ͍ͷ Ͱ͢ɻখֶߍɺதֶߍɺ ࣗ෼ֶ͕ߍ͔Βؼͬͯདྷ Δͱɺपғͷਓ͕ͨͪɺ ͦΕɺ͓ͳ͔͕ۭ͍ͨΖ ͏ɺࣗ෼ͨͪʹ΋͕֮͑ ͋Δɺֶߍ͔Βؼͬͯདྷ ͨ࣌ͷۭෲ͸શ͘ͻͲ͍ ԣઢ
  5. ಛఆͷਤܗύλʔϯ͚ͩʹ൓Ԡ͢Δࡉ๔ ͕͋Δ ஏͷଟ͍ੜ֔Λૹͬͯདྷ ·ͨ͠ɻࣗ෼ʹ͸ɺਓؒ ͷੜ׆ͱ͍͏΋ͷ͕ɺݟ ౰͔ͭͳ͍ͷͰ͢ɻࣗ෼ ͸౦๺ͷాࣷʹੜΕ·͠ ͨͷͰɺؿंΛ͸͡Ίͯ ݟͨͷ͸ɺΑ΄Ͳେ͖͘ ͳ͔ͬͯΒͰͨ͠ɻࣗ෼

    ͸ఀं৔ͷϒϦοδΛɺ ্ͬͯɺ߱Γͯɺͦ͏͠ ͯͦΕ͕ઢ࿏Λ·ͨ͗ӽ ͑ΔͨΊʹ଄ΒΕͨ΋ͷ ͩͱ͍͏ࣄʹ͸શવؾͮ ͔ͣɺͨͩͦΕ͸ఀं৔ ͷߏ಺Λ֎ࠃͷ༡ٔ৔Έ ͍ͨʹɺෳࡶʹָ͘͠ɺ ϋΠΧϥʹ͢ΔͨΊʹͷ ΈɺઃඋͤΒΕͯ͋Δ΋ ͷͩͱ͹͔Γࢥ͍ͬͯ· ͨ͠ɻ͔͠΋ɺ͔ͳΓӬ ʔϰΟεͷҰͭͩͱࢥͬ ͍ͯͨͷͰ͕͢ɺͷͪʹ ͦΕ͸ཱྀͨͩ٬͕ઢ࿏Λ ·ͨ͗ӽ͑ΔͨΊͷੂΔ ࣮རతͳ֊ஈʹա͗ͳ͍ ͷΛൃݟͯ͠ɺʹΘ͔ʹ ڵ͕֮Ί·ͨ͠ɻ·ͨɺ ࣗ෼͸ࢠڙͷࠒɺֆຊͰ ஍Լమಓͱ͍͏΋ͷΛݟ ͯɺ͜Ε΋΍͸Γɺ࣮ར తͳඞཁ͔ΒҊग़ͤΒΕ ͨ΋ͷͰ͸ͳ͘ɺ஍্ͷ ंʹ৐ΔΑΓ͸ɺ஍Լͷ ंʹ৐ͬͨ΄͏͕෩͕Θ ΓͰ໘ന͍༡ͼ͔ͩΒɺ ͱ͹͔Γࢥ͍ͬͯ·͠ ͨɻࣗ෼͸ࢠڙͷࠒ͔Β පऑͰɺΑ͘৸ࠐΈ·͠ ͕ͨɺ৸ͳ͕Βɺෑ෍ɺ ປͷΧϰΝɺֻוஂͷΧ ·ͨɺࣗ෼͸ɺۭෲͱ͍ ͏ࣄΛ஌Γ·ͤΜͰ͠ ͨɻ͍΍ɺͦΕ͸ɺࣗ෼ ͕ҥ৯ॅʹࠔΒͳ͍Ոʹ ҭͬͨͱ͍͏ҙຯͰ͸ͳ ͘ɺͦΜͳഅࣛͳҙຯͰ ͸ͳ͘ɺࣗ෼ʹ͸ʮۭ ෲʯͱ͍͏ײ֮͸ͲΜͳ ΋ͷ͔ͩɺͬ͞ͺΓΘ͔ Βͳ͔ͬͨͷͰ͢ɻ΁Μ ͳݴ͍͔ͨͰ͕͢ɺ͓ͳ ͔͕ۭ͍͍ͯͯ΋ɺࣗ෼ ͰͦΕʹؾ͕͔ͭͳ͍ͷ Ͱ͢ɻখֶߍɺதֶߍɺ ࣗ෼ֶ͕ߍ͔Βؼͬͯདྷ Δͱɺपғͷਓ͕ͨͪɺ ͦΕɺ͓ͳ͔͕ۭ͍ͨΖ ͏ɺࣗ෼ͨͪʹ΋͕֮͑ ͋Δɺֶߍ͔Βؼͬͯདྷ ͨ࣌ͷۭෲ͸શ͘ͻͲ͍ ԣઢ ॎ ઢ
  6. ಛఆͷਤܗύλʔϯ͚ͩʹ൓Ԡ͢Δࡉ๔ ͕͋Δ ஏͷଟ͍ੜ֔Λૹͬͯདྷ ·ͨ͠ɻࣗ෼ʹ͸ɺਓؒ ͷੜ׆ͱ͍͏΋ͷ͕ɺݟ ౰͔ͭͳ͍ͷͰ͢ɻࣗ෼ ͸౦๺ͷాࣷʹੜΕ·͠ ͨͷͰɺؿंΛ͸͡Ίͯ ݟͨͷ͸ɺΑ΄Ͳେ͖͘ ͳ͔ͬͯΒͰͨ͠ɻࣗ෼

    ͸ఀं৔ͷϒϦοδΛɺ ্ͬͯɺ߱Γͯɺͦ͏͠ ͯͦΕ͕ઢ࿏Λ·ͨ͗ӽ ͑ΔͨΊʹ଄ΒΕͨ΋ͷ ͩͱ͍͏ࣄʹ͸શવؾͮ ͔ͣɺͨͩͦΕ͸ఀं৔ ͷߏ಺Λ֎ࠃͷ༡ٔ৔Έ ͍ͨʹɺෳࡶʹָ͘͠ɺ ϋΠΧϥʹ͢ΔͨΊʹͷ ΈɺઃඋͤΒΕͯ͋Δ΋ ͷͩͱ͹͔Γࢥ͍ͬͯ· ͨ͠ɻ͔͠΋ɺ͔ͳΓӬ ʔϰΟεͷҰͭͩͱࢥͬ ͍ͯͨͷͰ͕͢ɺͷͪʹ ͦΕ͸ཱྀͨͩ٬͕ઢ࿏Λ ·ͨ͗ӽ͑ΔͨΊͷੂΔ ࣮རతͳ֊ஈʹա͗ͳ͍ ͷΛൃݟͯ͠ɺʹΘ͔ʹ ڵ͕֮Ί·ͨ͠ɻ·ͨɺ ࣗ෼͸ࢠڙͷࠒɺֆຊͰ ஍Լమಓͱ͍͏΋ͷΛݟ ͯɺ͜Ε΋΍͸Γɺ࣮ར తͳඞཁ͔ΒҊग़ͤΒΕ ͨ΋ͷͰ͸ͳ͘ɺ஍্ͷ ंʹ৐ΔΑΓ͸ɺ஍Լͷ ंʹ৐ͬͨ΄͏͕෩͕Θ ΓͰ໘ന͍༡ͼ͔ͩΒɺ ͱ͹͔Γࢥ͍ͬͯ·͠ ͨɻࣗ෼͸ࢠڙͷࠒ͔Β පऑͰɺΑ͘৸ࠐΈ·͠ ͕ͨɺ৸ͳ͕Βɺෑ෍ɺ ປͷΧϰΝɺֻוஂͷΧ ·ͨɺࣗ෼͸ɺۭෲͱ͍ ͏ࣄΛ஌Γ·ͤΜͰ͠ ͨɻ͍΍ɺͦΕ͸ɺࣗ෼ ͕ҥ৯ॅʹࠔΒͳ͍Ոʹ ҭͬͨͱ͍͏ҙຯͰ͸ͳ ͘ɺͦΜͳഅࣛͳҙຯͰ ͸ͳ͘ɺࣗ෼ʹ͸ʮۭ ෲʯͱ͍͏ײ֮͸ͲΜͳ ΋ͷ͔ͩɺͬ͞ͺΓΘ͔ Βͳ͔ͬͨͷͰ͢ɻ΁Μ ͳݴ͍͔ͨͰ͕͢ɺ͓ͳ ͔͕ۭ͍͍ͯͯ΋ɺࣗ෼ ͰͦΕʹؾ͕͔ͭͳ͍ͷ Ͱ͢ɻখֶߍɺதֶߍɺ ࣗ෼ֶ͕ߍ͔Βؼͬͯདྷ Δͱɺपғͷਓ͕ͨͪɺ ͦΕɺ͓ͳ͔͕ۭ͍ͨΖ ͏ɺࣗ෼ͨͪʹ΋͕֮͑ ͋Δɺֶߍ͔Βؼͬͯདྷ ͨ࣌ͷۭෲ͸શ͘ͻͲ͍ ԣઢ ॎ ઢ ୺ ୺
  7. ʮԿ͔Λ͍ͯ͠Δ࣌ʹ΋पลࢹ໺ͰϥΠ ΦϯΛଊ͑Δ͜ͱ͕ग़དྷͨݪ࢝ਓ͸ੜ͖ ࢒Δ͜ͱ͕ग़དྷɺݱ୅ਓʹ΋ड͚ܧ͕Ε ͨɻपลࢹ໺͕ྼ͍ͬͯͨݸମ͸ੜ͖࢒ Εͣফ͑ͯ͠·ͬͨɻʯ         ,;' '" ''

    ゛''" ゛' ';;,,       (rヽ,;''"""''゛゛゛'';, ノr)       ,;'゛ i _  、_ iヽ゛';,           ,;'" ''| ヽ・〉 〈・ノ |゙゛ `';,       ,;'' "|   ▼   |゙゛ `';,       ,;''  ヽ_人_ /  ,;'_      /シ、  ヽ⌒⌒ /   リ \     |   "r,, `"'''゙´  ,,ミ゛   |     |      リ、    ,リ    |     |   i   ゛r、ノ,,r" i   _| ਓؒͷ૆ઌ͕αόϯφͰੜ͖࢒Εͨͷ͸ पลࢹ໺ͷ͓ӄ 1-040/&6ODPOTDJPVTMZ1FSDFJWFE'FBSJO1FSJQIFSBM 7JTJPO"MFSUTUIF-JNCJD4ZTUFN".&(4UVEZ IUUQXXXQMPTPOFPSHBSUJDMFJOGPEPJ KPVSOBMQPOF
  8. ޙΖ͸ৼΓฦΒͳ͍ w௚લ·Ͱ஫ҙΛ޲͚͍ͯͨ෺ମ΍৔ॴ ʹ͸ʮ஫ҙΛ޲͚ʹ͍͘ʯ w৯΂෺୳͠ͷޮ཰ԽͰ͸ͳ͍͔ʁͱݴ ΘΕ͍ͯΔ w෮ؼ཈੍ͱ͍͍·͢         ,;' '"

    '' ゛''" ゛' ';;,,       (rヽ,;''"""''゛゛゛'';, ノr)       ,;'゛ i _  、_ iヽ゛';,           ,;'" ''| ヽ・〉 〈・ノ |゙゛ `';,       ,;'' "|   ▼   |゙゛ `';,       ,;''  ヽ_人_ /  ,;'_      /シ、  ヽ⌒⌒ /   リ \     |   "r,, `"'''゙´  ,,ミ゛   |     |      リ、    ,リ    |     |   i   ゛r、ノ,,r" i   _| ʘ סقͷαόϯφͰ Կ౓΋ಉ͡ໜΈݟͯΔ༨༟͋Δͷʁ ʗ