Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フラットデザインの話
Search
Sora Arakawa
September 28, 2020
Design
0
190
フラットデザインの話
静大情報LT大会 -2020年9月-
Sora Arakawa
September 28, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
arkw vs. サーバ移転 -2024年1月版-
arkw
0
26
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
180
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
660
5分でわかる!? 7セグメントLED制御
arkw
0
41
ヤフオクで原付買った話
arkw
0
160
パソコンの消費電力と省エネ化のおはなし
arkw
0
230
"成果物"を作ろう(提案)
arkw
0
200
Python(+α)でスマートプラグを制御してみた
arkw
0
1k
学情絶叫ウェブシステムGX
arkw
0
120
Other Decks in Design
See All in Design
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
120
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
0
110
231206_Book-launch-event_kato
hjmkth
2
1.1k
プロダクトデザインは子育て/Product design is parenting
medley
0
190
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
340
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2k
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
410
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
270
Designship 2023|想いを可視化するデザインの力
weddingpark
0
210
Jeremy's First Day
myates3
1
120
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
470
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
150
Featured
See All Featured
Navigating Team Friction
lara
177
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Making Projects Easy
brettharned
106
5.4k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Statistics for Hackers
jakevdp
789
220k
A designer walks into a library…
pauljervisheath
199
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Facilitating Awesome Meetings
lara
39
5.5k
Product Roadmaps are Hard
iamctodd
43
9.6k
Transcript
フラットデザインの話 静岡大学 情報学部 行動情報学科 1年 荒川 奏良 (Sora Arakawa) 2020/09/28
静大情報LT大会
自己紹介 • 静岡大学 情報学部 行動情報学科 1年 • 「静岡大学 バーチャル情報学部」 プログラム/グラフィック担当
• 後期から対面授業ウレシイ…ウレシイ… ※3Dモデリングはしてません
フラットデザインとは? • ミニマリズムを取り入れたデザイン • リッチデザインの対義語 • スキューモーフィズムを取り入れることもある(影など) デザイン手法としての始まりは1950年代 Microsoftは2002年から、Appleは2013年から フラットデザインを採用
Googleのマテリアルデザインもフラットデザインの一種
フラットデザインとは?
今回の内容 • 配色 • フォント • その他、デザインのコツ
配色 • デフォルトのカラーパレットから勝手に色を選ぶのはNG • フラットデザイン準拠のカラーパレットを使いましょう (無料のウェブサービスが多数あります) • 文献を読めば自分でも作れますが…面倒なのでw
配色 • デフォルトのカラーパレットから勝手に色を選ぶのはNG • フラットデザイン準拠のカラーパレットを使いましょう (無料のウェブサービスが多数あります) • 文献を読めば自分でも作れますが…面倒なのでw ↑ 7色に輝くゲーミング静大
※よい子はマネしないでね!
配色 • Flat UI Palette v1 フラットデザインのカラーパレット ワンタッチでRGBやHEXをコピペできる URL :
https://flatuicolors.com/palette/defo
配色 • マテリアルデザインカラー:使用例までチェックできる配色見本 Googleが提唱する「マテリアルデザイン」のカラーパレット 3色のHEX値を確認できる UIプレビュー機能搭載 URL : https://saruwakakun.com/html-css/material/colors
配色 • WebGradients フラットデザインに準拠したグラデーションのカラーパレット HEX値やCSSコードをコピーできる URL : https://webgradients.com/
フォントの選定 • 太字はNG (DemiBold、W7くらいが上限) • 角ゴシック体が基本 • 丸ゴシック体、明朝体ならセーフ? • デザイン書体はNG
フォントの選定 • 太字はNG (DemiBold、W7くらいが上限) • 角ゴシック体が基本 • 丸ゴシック体、明朝体ならセーフ? • デザイン書体はNG
デザインのコツ • 縁取りはNG (縁取りが必要無い構成にする) • 勝手にグラデーションを作らない • 色数を増やさない (2~3色がベスト) ↑
「縁取り+グラデーション」 よくある手法だがダメ
デザインのコツ • 透明度は100%、70%、30%の3種類に限る
デザインのコツ • 四角形だけでデザインするとMicrosoftっぽくなる • 角丸を取り入れるとAppleっぽくなる
まとめ • フラットデザインはいいぞ
おしまい ご清聴ありがとうございました