Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ポスト・フラットデザイン 〜フラットデザイン2.0とCSSフレームワーク〜

2,625 views

Published on

香川大学工学部 メディア情報処理 特別講義

Published in: Technology
  • Be the first to comment

ポスト・フラットデザイン 〜フラットデザイン2.0とCSSフレームワーク〜

  1. 1. 堀内 晨彦 @hico_horiuchi ポスト・フラットデザイン フラットデザイン2.0と CSSフレームワーク ∼          ∼
  2. 2. 自己紹介 Akihiko Horiuchi 最所研究室 修士2年 bit.ly/hiconyan 研究室のインフラと掃除担当 Emacs / Ruby / Rails / Golang Hubot / Sensu / Ansible 15/12/02 2
  3. 3. フラットデザイン2.0 1 / 2 15/12/02 3
  4. 4. そもそもフラットデザインって? ● 立体的 で ● スキューモフィック で ● リアリスティック じゃないデザイン のこと 15/12/02 4
  5. 5. 立体的なデザイン ● 浮き出ているもの → 押せそう → ボタン、タブ ● くぼんでいるもの → 入力できそう → テキストボックス 15/12/02 5
  6. 6. どれが押せるでしょうか? 15/12/02 6 http://v4-alpha.getbootstrap.com/components/
  7. 7. どれが押せるでしょうか? 15/12/02 7 ○ Button × Label × Alert http://v4-alpha.getbootstrap.com/components/
  8. 8. フラットデザインのユーザビリティ ● どれがクリックできるのか分からない ● 情報密度が低い → 次ページ 流行に乗って、使い勝手が犠牲に 15/12/02 8
  9. 9. 15/12/02 9 Boost App Official Homepage http://b00st.io/
  10. 10. フラットデザイン2.0 ● セミフラット(semi flat) ● ほぼフラット(almost flat) 影、ハイライト、レイヤーで奥行きを 15/12/02 10
  11. 11. どれが押せるでしょうか? 15/12/02 11 http://bootswatch.com/lumen/
  12. 12. Material Design 15/12/02 12 Material design ‒ Youtube https://youtu.be/Q8TXgCzxEnw
  13. 13. Material Design(ペーパー) 15/12/02 13 厚さを持つバーチャルな紙 純白の矩形・円形のみ 自由に伸縮できる
  14. 14. Material Design(インク) 15/12/02 14 文字や模様や写真はペーパーに印刷されたインク ビデオはリアルタイムに更新されるインク
  15. 15. Material Design(厚み) 15/12/02 15 デバイスの中で複数のペーパーが重ねられている ペーパーを重ねると影が出る ペーパーは浮き上がることが出来る
  16. 16. CSSフレームワーク 2 / 2 15/12/02 16
  17. 17. みなさんに言いたいこと ● 情報環境実験 ● コンパイラ・データベース演習 Webページのデザイン酷すぎ… 15/12/02 17
  18. 18. CSSフレームワーク ● フレームワーク ○ 一般的な機能 、共通のコード をまとめたもの ○ Webアプリケーションフレームワークなど ● CSSフレームワーク ○  Webでよく使う部品のデザイン集 (ボタン、フォーム、ナビゲーションバー) ○  簡単に レスポンシブデザイン 対応 15/12/02 18
  19. 19. 15/12/02 19 Bootstrap(Twitter) http://getbootstrap.com/
  20. 20. 15/12/02 20 Primer(GitHub) http://primercss.io/
  21. 21. 15/12/02 21 Scooter(Dropbox) http://dropbox.github.io/scooter/
  22. 22. 15/12/02 22 Pure(Yahoo) http://purecss.io/
  23. 23. 15/12/02 23 Material Design Lite(Google) http://www.getmdl.io/
  24. 24. デモンストレーション 15/12/02 24 kakuzuke(Bootstrap) http://kakuzuke.hiconyan.com/ https://github.com/hico-horiuchi/kakuzuke
  25. 25. デモンストレーション 15/12/02 25 yosage(Materialize) http://yosage.hiconyan.com/ https://github.com/hico-horiuchi/yosage-web
  26. 26. デザインで気を付けていること ● 統一感、整理されたコンポーネント ○ フレームワーク の利用、テーマカラー ○ コンポーネントの整列、余白の統一 ● フレームワークの組み合わせ ○  役割に応じたCSSフレームワーク ○  コンポーネント + アイコン + アニメーション (Bootstrap + FontAwesome + Animate.css) 15/12/02 26
  27. 27. 参考文献 ●  フラットデザイン:起源、問題、フラットデザイン2.0のほうが ユーザーに望ましい理由 − U-Site http://u-site.jp/alertbox/flat-design ●  Windows 8 − 初心者にもパワーユーザーにも期待はずれのユーザ ビリティ − U-Site http://u-site.jp/alertbox/windows-8 ●  フラットデザインから見えること|Web|Seibundo-inc http://www.seibundo-inc.jp/フラットデザインから見えること-705/ ●  よく分かるマテリアルデザインのコンセプト|fladdict http://fladdict.net/blog/2015/05/material-design.html 15/12/02 27

×