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

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