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
210
フラットデザインの話
静大情報LT大会 -2020年9月-
Sora Arakawa
September 28, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
0
17
arkw vs. サーバ移転 -2024年1月版-
arkw
0
150
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
320
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1k
5分でわかる!? 7セグメントLED制御
arkw
0
53
ヤフオクで原付買った話
arkw
0
170
パソコンの消費電力と省エネ化のおはなし
arkw
0
260
"成果物"を作ろう(提案)
arkw
0
240
Python(+α)でスマートプラグを制御してみた
arkw
0
1.2k
Other Decks in Design
See All in Design
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
180
Breaking News on the Web
souvikdg
0
650
Dreamia
elsh
0
130
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
110
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
530
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
180
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
350
Tuzukuru解説ブック
atsumaru1377
0
300
Ubie Vitalsの取り組み紹介
8845musign
0
640
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
18
11k
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
4
3.6k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Typedesign – Prime Four
hannesfritz
39
2.3k
Navigating Team Friction
lara
183
13k
Embracing the Ebb and Flow
colly
83
4.4k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Practical Orchestrator
shlominoach
185
10k
Making Projects Easy
brettharned
113
5.8k
Raft: Consensus for Rubyists
vanstee
135
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2k
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っぽくなる
まとめ • フラットデザインはいいぞ
おしまい ご清聴ありがとうございました