UIデザインをはじめよう

A8d382bd1bb2bc7abbb4999f32e16f4c?s=47 megumi tree
April 23, 2019

 UIデザインをはじめよう

2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。

UIデザインをはじめるために必要な知識を解説しました。
(予告から内容はかなり変わりました)

第一回「これだけ守れば見やすくなるデザインの基礎」はこちら
https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu

第三回「今日からできるUXデザイン」はこちら
https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain

クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。

※訪問講座のご案内※
あなたの会社に話しに行きます。料金表はこちら
https://xemono.life/#/workwith/consulting

ご質問はTwitter@kinakoboosterまでお気軽にどうぞ。
https://twitter.com/kinakobooster

株式会社Xemonoの詳細はこちら
https://xemono.life

実践編・アイコンを実際に作る過程はこちら
https://note.mu/xemono/n/nd7b696b78702

とりいめぐみはこんなことを考えている人です
http://noubrain.hateblo.jp/entry/2019/04/05/171255

A8d382bd1bb2bc7abbb4999f32e16f4c?s=128

megumi tree

April 23, 2019
Tweet

Transcript

  1. 6*σβΠ ϯΛ͸͡ΊΑ ͏ גࣜձࣾ9FNPOP QFSGPSNFECZͱ Γ͍Ί͙Έ!LJOBLPCPPTUFS  9FNPOPσβΠ ϯߨ࠲ ʢʣ

  2. ͩΕ ʁ ͱ Γ͍Ί͙Έ גࣜձࣾ9FNPOP୅ද ೥ੜɻ ϓϩάϥ ϛ ϯά͕ Ͱ͖

    ΔσβΠφʔɻ ୹ՎΛͭ ͘ Δਓɻ ࿩͠૬ख͕ཉ͠ ͘ ͯCPUΛࣗ ࡞ͨ͜͠ ͱ͕͋Δɻ ౦ژେֶཧՊҰྨೖֶɺ จ ֶ෦फڭֶफڭֶ࢙ଔۀɻ
  3. ࠓճͷ࿩    σβΠ ϯͷجૅ 6*σβΠ ϯΛ͸͡ΊΑ ͏ 69ͷߟ͑ํ

  4. ͓͠ͳ͕͖      6*ͬͯԿ ʁ ͭͷ6* ݟ͑ͳ͍6*

    ݟ͑Δ6* ϖʔύʔϓϩ τλΠ ϐϯά
  5. ର৅ ࡞ͬͨΞϓϦ Λ Ͳ ͏࢖͍΍͢ ͘ ͢Ε͹ ͍͍͔ࠔͬͯΔਓ

  6. 6*σβΠ ϯΛ ݕ౼Ͱ͖ Δ Α ͏ʹͳΔ ໨త ࠓճ͸ΘΓ ͱ۩ମతͳ࿩Ͱ͢

  7. 6*69ͷ୲౰ྖҬ 6* ΞϓϦ Λ஌Δˠ ࢖͏ ˠ೔ৗʹؼΔ 69

  8. ୈҰճͷ͋Β͢ ͡

  9. σβΠ ϯ͸ઃܭ σβΠ ϯ͸༏ઌॱҐ σβΠ ϯʹ͸఻͍͑ͨ͜ ͱ͕͋Δ ୈҰճͷ͋Β͢ ͡

  10. ೝ஌ෛՙ Լ͍͛ͨ ୈҰճͷ͋Β͢ ͡

  11.  6*ͬͯԿ ʁ

  12. 6*ݟͨ͜ ͱ͋Δਓ͍·͔͢

  13. ઈର͋Δ

  14. 6* 6TFS*OUFSGBDF ʢϢʔβʔΠ ϯλʔϑ Σ ʔεʣ

  15. 6TFS ࢖͏ਓ *OUFSGBDF ք໘ ˢ Θ͔Β ͳ͍

  16. ӳޠ͔Βߦ͘ JOUFSGBDF ʙͷؒ ද໘

  17. *OUFSGBDF ผʑͷ΋ͷ͕ ަྲྀ͢Δ ͱ ͖ ؒʹ͋Δ΋ͷ

  18. 1$σΟ εϓϨΠ ͲΜͳΠ ϯλʔϑ Σ ʔε ʁ

  19. 1$σΟ εϓϨΠ )%.* ͱ͔

  20. ਓؒ14 ͲΜͳΠ ϯλʔϑ Σ ʔε ʁ

  21. ਓؒ14 ίϯ τϩʔϥʔ

  22. ਓؒεϚϗ ͲΜͳΠ ϯλʔϑ Σ ʔε ʁ

  23. ਓؒεϚϗ λ ονύωϧ ΩʔϘʔ υ

  24. 6* Ϣʔβʔ ͱ੡඼ͷؒʹ͋Δ΋ͷ ࠓճ࡞Δ΋ͷ

  25. ը໘࡞ΔΑ ʂ ۩ମతʹ͸

  26. ͋ͳͨ͸6*σβΠφʔͰ͢ ը໘࡞੒Λ໋͡ ΒΕ· ͨ͠ ࠷ॳʹ͢Δ ͜ ͱ͸ ʁ σβΠφʔΫΠζ

  27. બ୒ࢶ    ΞΠ ίϯ Λඳ͘ Ϙλϯ Λඳ͘ ը໘࿮

    Λඳ͘
  28. ਖ਼ղ  ʮ͑ ʁ ͳΜͰ ʁ ʯ ͱݴ͏

  29. લճͷ෮श σβΠ ϯʹ͸ ໨త͕େࣄ

  30. ཧ༝ ໨తͳ ͠Ͱ͸ධՁͰ͖ ͳ͍

  31. Կ͕ചΓͷΞϓϦ ʁ ࢖͏ਓ͸ͲΜͳਓ ʁ ΞϓϦ Λग़͢ͱ୭͕خ͍͠ͷ ʁ 6*Λ࡞Δલʹ໰͏ ͜ ͱ

  32. ը໘࡞ͬͯ ऴΘΓ Ͱ͸ͳ͍ 6*ͷ໋॓ ࢖͍΍͍͢ը໘͕ݸ͋ͬͯ΋શମ͕࢖͍΍͍͢ͱ͸ݶΒ ͳ͍

  33. ʮྲྀΕʯ ͕େࣄ

  34. ྫ ɿ ෼༻λΠϚʔ

  35. ෳࡶͳ΋ͷΛ খ෼͚ʹͯ͠ ࢖͍΍͢ ͘ ݟͤΔ ࿹ͷݟͤॴ

  36.  ͭͷ6*

  37. 6*ʹ͸ͭ͋Δ ݟ͑Δ6* ݟ͑ͳ͍6* ը໘ ը໘ભҠ ࢀߟ ɿ ʰ͸͡Ίͯͷ6*σβΠ ϯʱ 1&",4ग़൛Α

    Γ
  38. ߟ͑Δॱ൪ ݟ͑ͳ͍6*͔Β ߟ͑Δ

  39.  ݟ͑ͳ͍6*

  40. ΞϓϦͷ ʮ஍ਤʯ ը໘ભҠͷઃܭ

  41. εϥΠ υγ ϣ ʔͷը໘ભҠ

  42. εϥΠ υγ ϣ ʔͷը໘ભҠ Ұ௚ઢ ɾ ෼ذ͠ͳ͍

  43. ΢Σ ϒαΠ τͷը໘ભҠ

  44. ΢Σ ϒαΠ τͷը໘ભҠ ໢ঢ় ɾ Ͳ ͔͜ΒͰ΋ྲྀೖ

  45. None
  46. ϖʔδ το ϓ 5XJUUFS ϒϩά ݕࡧ ཉ͍͠΋ͷϦε τ ଞͷ঎඼ ߪೖϖʔδ

    ྲྀೖͱྲྀग़
  47. ΞϓϦͷը໘ભҠ

  48. πϦ ʔঢ় ɾ ೖΓޱݻఆ ΞϓϦͷը໘ભҠ

  49.  ݟ͑Δ6*

  50. ҰͭҰͭͷ ը໘Λ ઃܭ͢Δ

  51. σόΠε͝ͱͷ ಛੑ

  52. εϚϗ ࢦͰૢ࡞͢Δ  ˠಧ͖ͮΒ͍ྖҬ͕͋Δ γϯάϧλεΫ ௕Ίͷ௕ํܗ

  53. None
  54. λϒϨο τ ࢧ͑ͯ৮Δ  ˠ্ͷํʹϘλϯஔ͚Δ λεΫ͸ʙ  ɿ ͙ Β͍

  55. None
  56. 1$ ϙΠ ϯλΛಈ͔͢ ɹˠࡉ͔͍͜ ͱͰ͖ ͪ Ό ͏ ϚϧνλεΫ Մม΢Ο

    ϯ υ΢ ΢Ο ϯ υ΢ͷ୺ͱ  ը໘ͷ୺͕ҧ͏
  57. None
  58. ύʔπͷ͜ ͱ Λίϯϙʔωϯ τͱݴ͍·͢ ఆ൪ίϯϙʔωϯ τ બ

  59. ଟ͘ Ͷ ʁ ϨΠΞ΢ τ ೖྗܥ ൓Ԡܥ ܁Γฦ͢ܥ ϑ Υ

    ʔϜܥ إͳ ͡Έͷ໊લΛ֮͑ ͱ ͜ ͏
  60. ίϯϙʔωϯ τਤؑ "QQMF IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFT

  61. ίϯϙʔωϯ τਤؑ (PPHMF IUUQTNBUFSJBMJPEFTJHO

  62. ϨΠΞ΢ τ ϔο μʔ   JφϏόʔ ϑ ο λʔ

      Jλϒόʔ  υϩϫʔ
  63. ϨΠΞ΢ τ ϔο μʔ   JφϏόʔ ϑ ο λʔ

      Jλϒόʔ  υϩϫʔ
  64. ϨΠΞ΢ τ ϔο μʔ   JφϏόʔ ϑ ο λʔ

      Jλϒόʔ  υϩϫʔ ϨΠΞ΢ τ ϔο μʔ   JφϏόʔ ϑ ο λʔ   Jλϒόʔ  υϩϫʔ
  65. ϨΠΞ΢ τ ϔο μʔ   JφϏόʔ ϑ ο λʔ

      Jλϒόʔ  υϩϫʔ ϨΠΞ΢ τ ϔο μʔ   JφϏόʔ ϑ ο λʔ   Jλϒόʔ  υϩϫʔ
  66. ೖྗܥ αʔνόʔ πʔϧόʔ Ϙλϯ

  67. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  68. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  69. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  70. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  71. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  72. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  73. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  74. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  75. ൓Ԡܥ Π ϯδέʔλʔ εϐφʔ μΠΞϩά Ξϥʔ τ ΞΫγ ϣ ϯγʔ

    τ  τʔε τ πʔϧνο ϓ ϙο ϓΦʔόʔ
  76. ܁Γฦ͢ܥ Ϧε τ ςʔϒϧ Χʔ υ ϖʔδ ϟ ʔ

  77. ܁Γฦ͢ܥ Ϧε τ ςʔϒϧ Χʔ υ ϖʔδ ϟ ʔ

  78. ܁Γฦ͢ܥ Ϧε τ ςʔϒϧ Χʔ υ ϖʔδ ϟ ʔ

  79. ܁Γฦ͢ܥ Ϧε τ ςʔϒϧ Χʔ υ ϖʔδ ϟ ʔ

  80. ϑ Υ ʔϜܥ ςΩε τ νΣ ο ΫϘο Ϋε εΠ

    ον ϥδΦϘλϯ εϥΠ μʔ εςούʔ
  81. ϑ Υ ʔϜܥ ςΩε τ νΣ ο ΫϘο Ϋε εΠ

    ον ϥδΦϘλϯ εϥΠ μʔ εςούʔ
  82. ϑ Υ ʔϜܥ ςΩε τ νΣ ο ΫϘο Ϋε εΠ

    ον ϥδΦϘλϯ εϥΠ μʔ εςούʔ
  83. ΍Γ͕ͪ ΞϓϦ͸πϦ ʔঢ়ͷߏ଄͕ଟ͍

  84. ΍Γ͕ͪ ࠓͲ ͜ʹ͍Δ͔஌Γ͍ͨΑͶ

  85. ΢ϫʔ UBC ৄࡉ ͨͿ λϒ ৄࡉ ৄࡉ ৄࡉ ৄࡉ

  86. ໰୊఺ ࢦ͔Βԕ͍ͱ ͜ ΖʹφϏ͕ Ұཡੑ͕ߴ͍Α ͏ Ͱ௿͍ Ϙλϯີ౓͕ߴ͗͢Δ

  87. ͢Δ ͜ ͏ ৄࡉ ৄࡉ ͨͿ ৄࡉ ৄࡉ ৄࡉ େΧςΰϦ

    ͨͿ λϒ ͨͿ UBC
  88. ݟ׳Εͨίϯϙʔωϯ τΛ ࢖͍ͬͯ͜ ͏

  89. ৽6*ͷֶश͸ Ϣʔβʔʹෛ୲ ಛʹ೥഑ͷํ͸ڋ൱൓Ԡ͕ग़΍͍͢

  90. ΈΜͳ஌ͬͯΔ Ωϟ ϥ ʢύʔπʣ Ͱ ೋ࣍૑࡞͠Α ͏

  91. ੈքͷશ͔ͯΒ ύΫ ϦݩΛݟ͚ͭΖ ΋ ͬ ͱ্Λ໨ࢦ͢ਓ΁

  92. ͦΕͰ΋ΦϦ δφϧ͕΍Γ͍ͨʜʜ

  93. ήʔϜσβΠ ϯͷ஌ݟ͕ࢀߟʹͳΔ Ϣʔβʔʹ ઓུతʹ ڭ͑ࠐ΋ ͏

  94. ࣮ફฤ

  95. ·࢛͔ͣ֯Β ඳ͍ͯΈΑ ͏

  96. ͳʹʹඳ͘ ͷ ʁ

  97.  ϖʔύʔ ϓϩ τλΠ ϐϯά

  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. λϒϨο τʹର͢Δࢴͷ༏Ґੑ ͸΍͍ ͪ ͗ΕΔ ޿͛ΒΕΔ ω ο τʹܨ͕ͬͯͳ͍

  109. ࢴͰ࡞Δཧ༝ ్தͬΆ͘ ݟ͑Δ ˣ ݕ౼͠΍͍͢

  110. ࢴࣳډͰ ը໘ભҠΛ ݕূ͠Α ͏

  111. ਓʹ৮Βͤͯ Ͳ ͜Ͱࠞཚ͢Δ͔Λ Α ͘ ݟΔ ࢴͰ࡞Δཧ༝

  112. εΫϥ ο ϓ  εΫϥ ο ϓ ͦ ͯ͠

  113. ଓ͖͸ߨٛޙͷ ϫʔΫγ ϣ ο ϓͰ ʂ

  114. ࠓճͷ · ͱΊ

  115. Α ͘ ݟΔύʔπΛ ૊Έ߹ΘͤΑ ͏ 6*Λ͸͡ΊΔʹ͸

  116. 6*͸ ࢴͰ࣮ݧͰ͖ Δ

  117. ͭ͘ ͬͯΈΑ ͏ ʂ

  118. ࣍ճ༧ࠂ

  119. ΋ ͬ ͱ ΋൵͍͠ ΞϓϦ ͱ͸Կ͔ ʁ ࣍ճ༧ࠂ

  120. ʮ࢖ͬͯ΋ Β ͑ͳ͍ʯ Λճආ͢Δ ࣍ճ༧ࠂ

  121. Ϣʔβʔͷཉ๬Λ ໌Β͔ʹ ࣍ճ༧ࠂ

  122. 69΍Δͧ ࣍ճ༧ࠂ

  123. ͱ Γ͍Ͱ ͨ͠ !LJOBLPCPPTUFS

  124. Π ϯλʔϑ Σ ʔεσβΠ ϯͷ৺ཧֶ ʢΦʔϜࣾʣ ଓ ɾ Π ϯλʔϑ

    Σ ʔεσβΠ ϯͷ৺ཧֶ ʢΦʔϜࣾʣ ΦϥΠ Ϧ ʔઌੜ͍ͭ΋͋Γ͕ͱ ͏ ଟগॏ͍͚Ͳ͢΂ͯͷ໾ʹཱͭΑ )VNBO*OUFSGBDF(VJEFMJOF IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFT .BUFSJBM%FTJHO(VJEF IUUQTNBUFSJBMJPEFTJHO  ࣍ʹಡΉ΋ͷ
  125. એ఻ ࢓ࣄͱڠྗऀ ืूத גࣜձࣾ9FNPOPͰݕࡧ ʂ

  126. ΞϓϦσβΠ ϯ ΢Σ ϒ੍࡞ σβΠ ϯߨ࠲ Ͱ͖ ΔΑ

  127. גࣜձࣾ9FNPOP෭ࣾ௕ɹ͔Θͷ ೥ੜɻ Վਓ ΋ͷ͜͝ Ζ͍ͭͨͱ ͖͔ΒখઆΛॻ͖࢝Ίͨɻ จষΛಡΉ͜ ͱ ͱॻ͘ ͜

    ͱҎ֎Կ΋ ͨ͜͠ ͱ͕ͳ͍ɻ ౦ژେֶେֶӃ ʢത࢜՝ఔʣ Ͱϑ Ν ϯλδʔͷݚڀͳ Ͳ Λ ͍ͯ͠Δɻ ۝೥΄Ͳલ͔Β୹ՎΛ࡞Γ࢝Ίͨɻ ೥ɺ ୹Վͷ৽ਓ৆Ͱ͋ΔՎ ஃ৆Λड৆ɻ ࡶࢽ ʰݱ୅୹Վʱ ʹͯ ʮՎஃ࣌ධʯ ࿈ࡌதɻ ΄͔ɺ ୹Վ ɺ ॻධɺ ΤοηΠ ͳ Ͳ Λ୹Վࡶࢽ΍৽ฉͳ Ͳʹॻ͍͍ͯΔɻ ͜ͷձࣾͰͷ໾ׂ͸൑அྗ୲౰ɻ ෭ࣾ௕΋ΑΖ ͠ ͘
  128. ධ࿦ ໋໊ ୹Վ Ͱ͖ ΔΑ

  129. &/%