Soumettre la recherche
Mettre en ligne
ポスト・フラットデザイン 〜フラットデザイン2.0とCSSフレームワーク〜
•
3 j'aime
•
4,017 vues
Akihiko Horiuchi
Suivre
香川大学工学部 メディア情報処理 特別講義
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 27
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Evernote活用術 のコピー
Evernote活用術 のコピー
Yuuki Tazawa
InfluxDataのTICK Stack on DockerでNW監視
InfluxDataのTICK Stack on DockerでNW監視
Akihiko Horiuchi
Sensuでネットワーク監視やってみた
Sensuでネットワーク監視やってみた
Akihiko Horiuchi
OSS監視ツールSensuの紹介
OSS監視ツールSensuの紹介
Akihiko Horiuchi
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
Yuudai Tachibana
Swift勉強会2
Swift勉強会2
Hikari Yanagihara
チーム会資料 デザイン
チーム会資料 デザイン
Hikari Yanagihara
iOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザイン
Mari Takahashi
Recommandé
Evernote活用術 のコピー
Evernote活用術 のコピー
Yuuki Tazawa
InfluxDataのTICK Stack on DockerでNW監視
InfluxDataのTICK Stack on DockerでNW監視
Akihiko Horiuchi
Sensuでネットワーク監視やってみた
Sensuでネットワーク監視やってみた
Akihiko Horiuchi
OSS監視ツールSensuの紹介
OSS監視ツールSensuの紹介
Akihiko Horiuchi
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
Yuudai Tachibana
Swift勉強会2
Swift勉強会2
Hikari Yanagihara
チーム会資料 デザイン
チーム会資料 デザイン
Hikari Yanagihara
iOS7に学ぶフラットデザイン
iOS7に学ぶフラットデザイン
Mari Takahashi
9コマシナリオの使い方
9コマシナリオの使い方
Mayumi Okusa
My ambariexperience
My ambariexperience
wyukawa
Prometheus london
Prometheus london
wyukawa
いまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめ
Vitalify.Inc
Presto in my_use_case2
Presto in my_use_case2
wyukawa
Upgrading from-hdp-21-to-hdp-24
Upgrading from-hdp-21-to-hdp-24
wyukawa
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
Yu Uno
Ansibleで一発!! VPSにDokkuを構築してみた
Ansibleで一発!! VPSにDokkuを構築してみた
Akihiko Horiuchi
Presto in my_use_case
Presto in my_use_case
wyukawa
Promcon2016
Promcon2016
wyukawa
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
Kouji Ohno
Prometheus
Prometheus
wyukawa
"fireap" - fast task runner on consul
"fireap" - fast task runner on consul
IKEDA Kiyoshi
grifork - fast propagative task runner -
grifork - fast propagative task runner -
IKEDA Kiyoshi
DigdagはなぜYAMLなのか?
DigdagはなぜYAMLなのか?
Sadayuki Furuhashi
Introduction to poloxy - proxy for alerting
Introduction to poloxy - proxy for alerting
IKEDA Kiyoshi
Prometheus casual talk1
Prometheus casual talk1
wyukawa
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
Filter・Mutator・Aggregateの使いドコロ
Filter・Mutator・Aggregateの使いドコロ
Akihiko Horiuchi
クラウドでGolangのテスト&デプロイ!
クラウドでGolangのテスト&デプロイ!
Akihiko Horiuchi
オープンソースBotフレームワークではじめるChatOps
オープンソースBotフレームワークではじめるChatOps
Akihiko Horiuchi
Sensuで始めるクラウド時代のシステム監視
Sensuで始めるクラウド時代のシステム監視
Akihiko Horiuchi
Contenu connexe
En vedette
9コマシナリオの使い方
9コマシナリオの使い方
Mayumi Okusa
My ambariexperience
My ambariexperience
wyukawa
Prometheus london
Prometheus london
wyukawa
いまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめ
Vitalify.Inc
Presto in my_use_case2
Presto in my_use_case2
wyukawa
Upgrading from-hdp-21-to-hdp-24
Upgrading from-hdp-21-to-hdp-24
wyukawa
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
Yu Uno
Ansibleで一発!! VPSにDokkuを構築してみた
Ansibleで一発!! VPSにDokkuを構築してみた
Akihiko Horiuchi
Presto in my_use_case
Presto in my_use_case
wyukawa
Promcon2016
Promcon2016
wyukawa
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
Kouji Ohno
Prometheus
Prometheus
wyukawa
"fireap" - fast task runner on consul
"fireap" - fast task runner on consul
IKEDA Kiyoshi
grifork - fast propagative task runner -
grifork - fast propagative task runner -
IKEDA Kiyoshi
DigdagはなぜYAMLなのか?
DigdagはなぜYAMLなのか?
Sadayuki Furuhashi
Introduction to poloxy - proxy for alerting
Introduction to poloxy - proxy for alerting
IKEDA Kiyoshi
Prometheus casual talk1
Prometheus casual talk1
wyukawa
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
Filter・Mutator・Aggregateの使いドコロ
Filter・Mutator・Aggregateの使いドコロ
Akihiko Horiuchi
クラウドでGolangのテスト&デプロイ!
クラウドでGolangのテスト&デプロイ!
Akihiko Horiuchi
En vedette
(20)
9コマシナリオの使い方
9コマシナリオの使い方
My ambariexperience
My ambariexperience
Prometheus london
Prometheus london
いまさら聞けない?フラットデザインまとめ
いまさら聞けない?フラットデザインまとめ
Presto in my_use_case2
Presto in my_use_case2
Upgrading from-hdp-21-to-hdp-24
Upgrading from-hdp-21-to-hdp-24
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
Ansibleで一発!! VPSにDokkuを構築してみた
Ansibleで一発!! VPSにDokkuを構築してみた
Presto in my_use_case
Presto in my_use_case
Promcon2016
Promcon2016
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
Prometheus
Prometheus
"fireap" - fast task runner on consul
"fireap" - fast task runner on consul
grifork - fast propagative task runner -
grifork - fast propagative task runner -
DigdagはなぜYAMLなのか?
DigdagはなぜYAMLなのか?
Introduction to poloxy - proxy for alerting
Introduction to poloxy - proxy for alerting
Prometheus casual talk1
Prometheus casual talk1
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
Filter・Mutator・Aggregateの使いドコロ
Filter・Mutator・Aggregateの使いドコロ
クラウドでGolangのテスト&デプロイ!
クラウドでGolangのテスト&デプロイ!
Plus de Akihiko Horiuchi
オープンソースBotフレームワークではじめるChatOps
オープンソースBotフレームワークではじめるChatOps
Akihiko Horiuchi
Sensuで始めるクラウド時代のシステム監視
Sensuで始めるクラウド時代のシステム監視
Akihiko Horiuchi
Jenkins 2.0 Pipeline & Blue Ocean
Jenkins 2.0 Pipeline & Blue Ocean
Akihiko Horiuchi
BotKitで作るイベント駆動Bot
BotKitで作るイベント駆動Bot
Akihiko Horiuchi
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
Akihiko Horiuchi
Go言語でBot開発やってみた
Go言語でBot開発やってみた
Akihiko Horiuchi
勉強会への一歩を踏み出すために
勉強会への一歩を踏み出すために
Akihiko Horiuchi
学生がJANOGに行くべき3つの理由
学生がJANOGに行くべき3つの理由
Akihiko Horiuchi
HubotとChatOpsについて語るBoF
HubotとChatOpsについて語るBoF
Akihiko Horiuchi
Sensu Introduction
Sensu Introduction
Akihiko Horiuchi
Sensu with golang
Sensu with golang
Akihiko Horiuchi
サーバ監視ことはじめ
サーバ監視ことはじめ
Akihiko Horiuchi
ChatOps@研究室
ChatOps@研究室
Akihiko Horiuchi
SKK
SKK
Akihiko Horiuchi
Self Introduction
Self Introduction
Akihiko Horiuchi
エディタじゃない"Emacsの使い方
エディタじゃない"Emacsの使い方
Akihiko Horiuchi
LET'S PRESENTATION!
LET'S PRESENTATION!
Akihiko Horiuchi
自己紹介などなど
自己紹介などなど
Akihiko Horiuchi
Plus de Akihiko Horiuchi
(19)
オープンソースBotフレームワークではじめるChatOps
オープンソースBotフレームワークではじめるChatOps
Sensuで始めるクラウド時代のシステム監視
Sensuで始めるクラウド時代のシステム監視
Jenkins 2.0 Pipeline & Blue Ocean
Jenkins 2.0 Pipeline & Blue Ocean
BotKitで作るイベント駆動Bot
BotKitで作るイベント駆動Bot
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
Go言語でBot開発やってみた
Go言語でBot開発やってみた
勉強会への一歩を踏み出すために
勉強会への一歩を踏み出すために
学生がJANOGに行くべき3つの理由
学生がJANOGに行くべき3つの理由
HubotとChatOpsについて語るBoF
HubotとChatOpsについて語るBoF
Sensu Introduction
Sensu Introduction
Sensu with golang
Sensu with golang
サーバ監視ことはじめ
サーバ監視ことはじめ
ChatOps@研究室
ChatOps@研究室
SKK
SKK
Self Introduction
Self Introduction
エディタじゃない"Emacsの使い方
エディタじゃない"Emacsの使い方
LET'S PRESENTATION!
LET'S PRESENTATION!
自己紹介などなど
自己紹介などなど
Dernier
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Dernier
(10)
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
ポスト・フラットデザイン 〜フラットデザイン2.0とCSSフレームワーク〜
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
Télécharger maintenant