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