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
240
フラットデザインの話
静大情報LT大会 -2020年9月-
Sora Arakawa
September 28, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
300
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
190
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
130
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
130
arkw vs. サーバ移転 -2024年1月版-
arkw
0
290
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
550
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.5k
5分でわかる!? 7セグメントLED制御
arkw
0
73
ヤフオクで原付買った話
arkw
0
230
Other Decks in Design
See All in Design
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.6k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
800
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
AI時代に淘汰されないデザインのしごと
akinen
1
160
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
320
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.1k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
140
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
450
ポートフォリオ_webデザイナー
nami_webdesigner
0
130
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Cult of Friendly URLs
andyhume
79
6.5k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1370
200k
Side Projects
sachag
455
43k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Git: the NoSQL Database
bkeepers
PRO
431
65k
RailsConf 2023
tenderlove
30
1.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っぽくなる
まとめ • フラットデザインはいいぞ
おしまい ご清聴ありがとうございました