ノンデザイナーズ・デザインブック - デザイン4原則

ノンデザイナーズ・デザインブック - デザイン4原則
2013/09/25 (水) @ Livesense TechLunch
発表者：渡邉 惇

Transcript

1. γεςϜ։ൃ෦ɹϝσΟΞ։ൃୈ2άϧʔϓ Copyright © LIVESENSE Inc. ౉ᬒɹಯ ϊϯσβΠφʔζɾσβΠϯϒοΫ σβΠϯ4ݪଇ
2. ಥવͰ͕͢
3. 8݄·Ͱͷ౉ᬒ Q.サイトってサクッと作れるものな の？   A.DB使わないなら、BootStrap使え ば結構”さくっと”それっぽいサイト 出来るよ（※作ったこと無い）   でもBootStrap使うとBootStrap臭す るんだよねー（※言いたいだけ）   ちょっとCSSいじればカスタマイズ 出来るよ（※作ったことはない）  
4. TaskForceͰ࡞ͬͯΈΔ͜ͱʹ 惨 敗
5. ഊҼ ✔レイアウトのイメージの稚拙さ   •  UIの引き出しの少なさ   •  細かいディテールに落ちない     ✔BootStrapから外れたこと出来ない   •  CSS力の欠如   •  デザインの超基本の欠如    
6. ࠓճͷςʔϚ ✔デザインの超基本を押さえる   教材：ノンデザイナーズ・デザインブック   ※色彩やフォントについては今回はやらない     ✔元ネタ   ノン・デザイナーズ・デザインブックを読み解く   https://speakerdeck.com/monoooki/read-a- non-designers-designbook
8. Design Principles   デザイン4原則   ✔近接   ✔整列   ✔反復   ✔コントラスト  
9. ۙ઀
10. ۙ઀ͷ໨త   ✔関連する項目をまとめてグループ化すること     ✔知覚的にも視覚的にも組織化すること      
11. ۙ઀ – ήγϡλϧτݪཧ   ✔脳は、周辺の物事を「ひとまとめ」にする  
12. ۙ઀ – αϏλΠδϯά   ✔脳は4つまでなら瞬時に把握できる   40~80msec  /  1star 250~350msec  /  1star 塊にすると数えやすい
13. ੔ྻ ほげほげ        ぴよぴよ     ふがふが              ふがふが      ほげほげ     ぴよぴよ   ほげほげ   ほげほげ     ふがふが   ふがふが     ぴよぴよ   ぴよぴよ  
14. ੔ྻͷ໨త   ✔ページの一体化と組織化     ✔要素同士に視覚的な繋がりを持たせること     cf.  文字揃えは基本1つ（中央揃えは避ける）  
15. ੔ྻ – पลࢹ໺   ✔対象の「あらまし」をつかむのは周辺視野     ✔サイトをパッと見て枠をつかめるかどうか   　＝　理解しやすいサイトになっているかどうか        ＝　パーツが整列されていることが最低限      
16. ൓෮ DeNA   不格好経営いい本だっ た。     CCyybbeerrAAggeenntt ちゃらすぎて頭おかし くなっちゃってるけど、 すげえ。   Yahoo 爆速の意味がいまいち わからん。 DeNA   不格好経営いい本だっ た。     CyberAgent   ちゃらすぎて頭おかしく なっちゃってるけど、すげ え。     Yahoo   爆速の意味がいまいち わからん。  
17. ൓෮ͷ໨త   ✔反復によって一貫性が生まれる     ✔各要素の一体化と視覚的な面白さを加える  
18. ίϯτϥετ     与沢翼 村上太一 孫正義 秒速一億 円 最年少上 場社長 スーパーサ イヤ人 FreeAgentS tyle Livesense SoHBank 与沢翼 村上太一 孫正義 秒速一億 円 最年少上 場社長 スーパーサ イヤ人 FreeAgentS tyle Livesense SoHBank
19. ίϯτϥετͷ໨త   ✔はっきりとした違いによって情報の組織化を              支援すること（ex.  見出し 本文）     ✔ページにおもしろみを作り出すこと          (異ならせるところは徹底的に  /  色、サイズ等)  
20. ίϯτϥετ – ࡾ࣍ݩೝࣝ 遠いもの  :  背景、重要でないもの   近いもの  :  主要コンテンツ、重要なもの           ↑重要でない ↑重要
21. ΍ͬͯΈΔ ໊ࢗฤ 株式会社リブセンス      hPp://www.livesense.co.jp/   渡邉惇   システム開発部　メディア開発第2G     〒141-­‐0021  東京都品川区上大崎2-­‐25-­‐2  真目黒東急ビル  5F          Atsushi.Watanabe   Atsushi.watanabe@livesense.co.jp   Tel.  03-­‐6275-­‐3330  
22. ΍ͬͯΈΔ ໊ࢗฤ – ۙ઀ システム開発部　メディア開発第2G     渡邉 惇   Atsushi.Watanabe    atsushi.watanabe@livesense.co.jp     株式会社リブセンス   〒141-­‐0021  東京都品川区上大崎2-­‐25-­‐2  真目黒東急ビル  5F   hPp://www.livesense.co.jp/        Tel.  03-­‐6275-­‐3330  
23. ΍ͬͯΈΔ ໊ࢗฤ – ੔ྻ システム開発部　メディア開発第2G     渡邉 惇   Atsushi.Watanabe   atsushi.watanabe@livesense.co.jp     株式会社リブセンス   〒141-­‐0021  東京都品川区上大崎2-­‐25-­‐2  真目黒東急ビル  5F   hPp://www.livesense.co.jp/   Tel.  03-­‐6275-­‐3330  
24. ΍ͬͯΈΔ ໊ࢗฤ – ൓෮ システム開発部　メディア開発第2G     渡邉 惇   Atsushi.Watanabe   atsushi.watanabe@livesense.co.jp     株式会社リブセンス   〒141-­‐0021  東京都品川区上大崎2-­‐25-­‐2  真目黒東急ビル  5F   Tel.  03-­‐6275-­‐3330   hPp://www.livesense.co.jp/    
25. ΍ͬͯΈΔ ໊ࢗฤ – ίϯτϥετ システム開発部　メディア開発第2G     渡邉 惇   Atsushi  Watanabe   atsushi.watanabe@livesense.co.jp     株式会社リブセンス   〒141-­‐0021  東京都品川区上大崎2-­‐25-­‐2  真目黒東急ビル  5F   Tel.  03-­‐6275-­‐3330   hPp://www.livesense.co.jp/    
26. ΍ͬͯΈΔ – ΢Σϒฤ   ✔近接   ✔整列   ✔反復   ✔コントラスト  
27. ·ͱΊ   ✔近接、整列、反復、コントラスト原則素敵     ✔原則はサイトデザイン以外にもあてはまる            プレゼン資料、ドキュメント    etc…       ✔とはいえ「誰に」「何を」伝えたいかが重要    
28. ͓·͚ – ίʔυ΋ݪଇʹԊͬͯ·͢Ͷ