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
1.1k
ダサいデザインのつくりかた
奈良高専 TalkCafe in 高専祭 2019
しゅう
November 03, 2019
Tweet
Share
More Decks by しゅう
See All by しゅう
なんか衝動的に初心者がUnityで音ゲーをつくった話
shulmj_
0
1.3k
Other Decks in Design
See All in Design
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
Rayout Pattern 01
one0
0
1.5k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Visualization
eitanlees
146
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
How to Think Like a Performance Engineer
csswizardry
22
1.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A Philosophy of Restraint
colly
203
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Pragmatic Product Professional
lauravandoore
32
6.4k
GitHub's CSS Performance
jonrohan
1030
460k
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