堀内 晨彦 @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