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
220
フラットデザインの話
静大情報LT大会 -2020年9月-
Sora Arakawa
September 28, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
53
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
55
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
61
arkw vs. サーバ移転 -2024年1月版-
arkw
0
230
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
420
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.2k
5分でわかる!? 7セグメントLED制御
arkw
0
61
ヤフオクで原付買った話
arkw
0
170
パソコンの消費電力と省エネ化のおはなし
arkw
0
270
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
780k
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
590
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
180
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
510
太田博三(@usagisan2020)
otanet
0
210
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
600
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
470
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
4
720
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
670
プロダクトデザインの「守破離」の「破」について
hayashirine
0
290
Dive Deep into Communication
yomtsu
0
180
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Writing Fast Ruby
sferik
628
61k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
The Language of Interfaces
destraynor
155
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
340
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Bash Introduction
62gerente
609
210k
Music & Morning Musume
bryan
46
6.3k
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っぽくなる
まとめ • フラットデザインはいいぞ
おしまい ご清聴ありがとうございました