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

1. 堀内 晨彦
@hico_horiuchi
ポスト・フラットデザイン
フラットデザイン2.0と
CSSフレームワーク
∼ ∼

2. 自己紹介
Akihiko Horiuchi
最所研究室 修士2年
bit.ly/hiconyan
研究室のインフラと掃除担当
Emacs / Ruby / Rails / Golang
Hubot / Sensu / Ansible
15/12/02 2

3. フラットデザイン2.0
1 / 2
15/12/02 3

4. そもそもフラットデザインって？
● 立体的 で
● スキューモフィック で
● リアリスティック
じゃないデザイン のこと
15/12/02 4

5. 立体的なデザイン
● 浮き出ているもの
→ 押せそう → ボタン、タブ
● くぼんでいるもの
→ 入力できそう → テキストボックス
15/12/02 5

6. どれが押せるでしょうか？
15/12/02 6
http://v4-alpha.getbootstrap.com/components/

7. どれが押せるでしょうか？
15/12/02 7
○ Button × Label
× Alert
http://v4-alpha.getbootstrap.com/components/

8. フラットデザインのユーザビリティ
● どれがクリックできるのか分からない
● 情報密度が低い → 次ページ
流行に乗って、使い勝手が犠牲に
15/12/02 8

9. 15/12/02 9
Boost App Official Homepage
http://b00st.io/

10. フラットデザイン2.0
● セミフラット（semi flat）
● ほぼフラット（almost flat）
影、ハイライト、レイヤーで奥行きを
15/12/02 10

11. どれが押せるでしょうか？
15/12/02 11
http://bootswatch.com/lumen/

12. Material Design
15/12/02 12
Material design ‒ Youtube
https://youtu.be/Q8TXgCzxEnw

13. Material Design（ペーパー）
15/12/02 13
厚さを持つバーチャルな紙
純白の矩形・円形のみ
自由に伸縮できる

14. Material Design（インク）
15/12/02 14
文字や模様や写真はペーパーに印刷されたインク
ビデオはリアルタイムに更新されるインク

15. Material Design（厚み）
15/12/02 15
デバイスの中で複数のペーパーが重ねられている
ペーパーを重ねると影が出る
ペーパーは浮き上がることが出来る

16. CSSフレームワーク
2 / 2
15/12/02 16

17. みなさんに言いたいこと
● 情報環境実験
● コンパイラ・データベース演習
Webページのデザイン酷すぎ…
15/12/02 17

18. CSSフレームワーク
● フレームワーク
○ 一般的な機能 、共通のコード をまとめたもの
○ Webアプリケーションフレームワークなど
● CSSフレームワーク
○ Webでよく使う部品のデザイン集
（ボタン、フォーム、ナビゲーションバー）
○ 簡単に レスポンシブデザイン 対応
15/12/02 18

19. 15/12/02 19
Bootstrap（Twitter）
http://getbootstrap.com/

20. 15/12/02 20
Primer（GitHub）
http://primercss.io/

21. 15/12/02 21
Scooter（Dropbox）
http://dropbox.github.io/scooter/

22. 15/12/02 22
Pure（Yahoo）
http://purecss.io/

23. 15/12/02 23
Material Design Lite（Google）
http://www.getmdl.io/

24. デモンストレーション
15/12/02 24
kakuzuke（Bootstrap）
http://kakuzuke.hiconyan.com/
https://github.com/hico-horiuchi/kakuzuke

25. デモンストレーション
15/12/02 25
yosage（Materialize）
http://yosage.hiconyan.com/
https://github.com/hico-horiuchi/yosage-web

26. デザインで気を付けていること
● 統一感、整理されたコンポーネント
○ フレームワーク の利用、テーマカラー
○ コンポーネントの整列、余白の統一
● フレームワークの組み合わせ
○ 役割に応じたCSSフレームワーク
○ コンポーネント ＋ アイコン ＋ アニメーション
（Bootstrap ＋ FontAwesome ＋ Animate.css）
15/12/02 26

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