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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Sora Arakawa
September 28, 2020
Design
0
250
フラットデザインの話
静大情報LT大会 -2020年9月-
Sora Arakawa
September 28, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
540
お前も同人作家にならないか? 技術系同人誌制作入門
arkw
2
52
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
1k
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
360
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
180
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
2
190
arkw vs. サーバ移転 -2024年1月版-
arkw
0
340
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
640
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.8k
Other Decks in Design
See All in Design
デザインを信じていますか
sekiguchiy
1
950
CREATIVE CLASS受講課題|無印良品を題材としたブランド再構築について
happy_ferret153
0
610
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
190
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
3.3k
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
300
Shaolin_Showdown
solmetts
0
290
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
1.2k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
480
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
140
kintone Style Book
kintone
6
10k
TUNAG BOOK 2024
stmn
PRO
0
1.4k
Ralph Penel Portfolio
ralphpenel
PRO
0
260
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Unsuck your backbone
ammeep
671
58k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
Visualization
eitanlees
150
17k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
The untapped power of vector embeddings
frankvandijk
1
1.6k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
910
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
Six Lessons from altMBA
skipperchong
29
4.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Technical Leadership for Architectural Decision Making
baasie
1
240
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っぽくなる
まとめ • フラットデザインはいいぞ
おしまい ご清聴ありがとうございました