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

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

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

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

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 22, 2014
Tweet

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
  7. None
  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. ͓·͚ – ίʔυ΋ݪଇʹԊͬͯ·͢Ͷ