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
しゅう
November 03, 2019
Design
0
910
ダサいデザインのつくりかた
奈良高専 TalkCafe in 高専祭 2019
しゅう
November 03, 2019
Tweet
Share
More Decks by しゅう
See All by しゅう
なんか衝動的に初心者がUnityで音ゲーをつくった話
shulmj_
0
1.2k
Other Decks in Design
See All in Design
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
38k
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
300
What Was UX Design All About?
ykazu
3
670
AIイラスト生成・編集テクニック紹介
piyo7
2
210
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
400
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.3k
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
660
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.2k
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
1.3k
Baby Bear Genius
yvonnehsuanho
PRO
0
620
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
Featured
See All Featured
Scaling GitHub
holman
458
140k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Clear Off the Table
cherdarchuk
91
320k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Become a Pro
speakerdeck
PRO
22
4.9k
Six Lessons from altMBA
skipperchong
26
3.3k
What's new in Ruby 2.0
geeforr
340
31k
Happy Clients
brianwarren
96
6.6k
The Invisible Customer
myddelton
119
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Transcript
ダサいデザインの T a lk C A F E i n
高 専 祭 20 1 9 年1 1 月 3 日
11/2と大体同じ内容です 若干 変更したところがあるので 間違い探し してください
しゅう 電子制御工学科 3年 Q. 好きな食べ物 A. コカ・コーラ 自己紹介
テーマ “高専らしさ” 高専生ならば デザインのセオリーを知るべき
突然ですが タイトル画面 ダサくない?
実際にやってみた
すごいかっこいい文字 初期テキスト
すごいかっこいい文字 めっちゃかわいいフォント
すごいかっこいい文字 めっちゃかっこいい色
すごいかっこいい文字 影と反射させた
_人人人人人人_ > 突然の虹 <  ̄Y^Y^Y^Y^Y^Y^ ̄
なぜダサいデザインが生まれるのか デザイン経験の 浅い人 フォントはカワイイやつで 立体的にしたいな グラデーションもつけてみたい せっかくだから影もつけよう
ダサいデザインは いろんな要素を 付け足しすぎている
リッチデザイン と フラットデザイン リッチデザイン (2000年代)
リッチデザイン と フラットデザイン フラットデザイン (2010年代) iOS 7 (2013) Modern UI(2010)
例えば iOS 7 「ダサい」「視認性が悪い」 批判者はみんな死んだ リッチデザイン と フラットデザイン
リッチデザインばっかり使ってると どうしても古臭く見える 迷ったら フラットデザイン 使っとけ
それを踏まえて 配色から考えていく
蛍光色を多用しすぎない 一歩間違えれば ダサい上に目に悪い 蛍光色は難易度高 配色
グラデーションは2色が安牌 配色
配色を失敗すると 単純にダサいだけでなく 色覚特性の方が読めない可能性 危険 色覚特性の方が見えづらい配色 男性の約5% 女性の約0.2% 配色
配色 配色を絞ってみる 色は2~5色が基本 例
配色 Adobe Color https://color.adobe.com/ja/create
最近のPowerPointには オシャレな配色を標準搭載 配色
配色 カラーパレットを用いたデザインの例
配色 カラーパレットを用いたデザインの例
フォントを絞ってみる 本文+見出し 2フォントで余裕 フォント
特徴的なフリーフォントは 使い所が限られる スタンダードなフォントの方が使いやすくてオシャレ フォント
フォント フォントの特性を知る ゴシック体・サンセリフ 横画が細く、縦画が太い 曲がり角や右端に三角形(セリフ) 毛筆で書いた文字に近い 本文によく用いられる 全ての点画が同じ大きさ セリフ(三角形)が無いから サン・セリフ
見出しに用いるのが普通だが 最近は本文でも読みやすいフォントも多い
ポラーノの広場 作 宮沢賢治 目的と雰囲気に合わせて フォントを選ぶ! フォント
個人的 ダサいフォント4選 どんな文字でも表示できる基本のフォント。 オシャレなデザインにしたかったら使うな。 Wordで一番最初に選択されるフォントだった(過去形) フォーマルの場では めっちゃ向いてると思う。 Office初心者が必ず使用していた ダサいフォント界不動の1位。 最近めっきり見なくなったので、逆にオシャレに見えてきた。
ウェブサイトで非常によく使われるフォント。 読みやすくて オシャレなんだけど、太字にしたときのダサさが異常。 フォント
世界中でダサいと言われ 使用禁止運動が起こる(ガチ) 様々な人間に同じフォントを 使い古されることで ダサく見えてくる フォント
文字に強弱をつけるのも良いよ 特に接続詞は小さめに 影は濃くしすぎない 白い文字+黒いフラットな影 フォント
いままで”ダサい”と罵ってきましたが... ダサいデザインにも メリットが!!!
None
None
ダサいデザインは 目に留まりやすい
意外とオシャレなデザインは簡単 しかし は 別問題 そのデザインが目立ちやすいか そのデザインが使いやすいか まとめ
まとめ ※作るものの全てをダサくしろと言っているわけではない
None