ダサいデザインのつくりかた

奈良高専 TalkCafe in 高専祭 2019

Transcript

1. ダサいデザインの Ｔ ａ ｌｋ Ｃ Ａ Ｆ Ｅ i n 高 専 祭 20 1 ９ 年１ １ 月 ３ 日
2. 11/2と大体同じ内容です 若干 変更したところがあるので 間違い探し してください
3. しゅう 電子制御工学科 3年 Q. 好きな食べ物 A. コカ・コーラ 自己紹介
4. テーマ “高専らしさ” 高専生ならば デザインのセオリーを知るべき
5. 突然ですが タイトル画面 ダサくない？
6. 実際にやってみた
7. すごいかっこいい文字 初期テキスト
8. すごいかっこいい文字 めっちゃかわいいフォント
9. すごいかっこいい文字 めっちゃかっこいい色
10. すごいかっこいい文字 影と反射させた
11. ＿人人人人人人＿ ＞ 突然の虹 ＜ ￣Y^Y^Y^Y^Y^Y^￣
12. なぜダサいデザインが生まれるのか デザイン経験の 浅い人 フォントはカワイイやつで 立体的にしたいな グラデーションもつけてみたい せっかくだから影もつけよう
13. ダサいデザインは いろんな要素を 付け足しすぎている
14. リッチデザイン と フラットデザイン リッチデザイン （2000年代）
15. リッチデザイン と フラットデザイン フラットデザイン （2010年代） iOS 7 (2013) Modern UI(2010)
16. 例えば iOS 7 「ダサい」「視認性が悪い」 批判者はみんな死んだ リッチデザイン と フラットデザイン
17. リッチデザインばっかり使ってると どうしても古臭く見える 迷ったら フラットデザイン 使っとけ
18. それを踏まえて 配色から考えていく
19. 蛍光色を多用しすぎない 一歩間違えれば ダサい上に目に悪い 蛍光色は難易度高 配色
20. グラデーションは2色が安牌 配色
21. 配色を失敗すると 単純にダサいだけでなく 色覚特性の方が読めない可能性 危険 色覚特性の方が見えづらい配色 男性の約5％ 女性の約0.2％ 配色
22. 配色 配色を絞ってみる 色は2～5色が基本 例
23. 配色 Adobe Color https://color.adobe.com/ja/create
24. 最近のPowerPointには オシャレな配色を標準搭載 配色
25. 配色 カラーパレットを用いたデザインの例
26. 配色 カラーパレットを用いたデザインの例
27. フォントを絞ってみる 本文＋見出し 2フォントで余裕 フォント
28. 特徴的なフリーフォントは 使い所が限られる スタンダードなフォントの方が使いやすくてオシャレ フォント
29. フォント フォントの特性を知る ゴシック体・サンセリフ 横画が細く、縦画が太い 曲がり角や右端に三角形（セリフ） 毛筆で書いた文字に近い 本文によく用いられる 全ての点画が同じ大きさ セリフ（三角形）が無いから サン・セリフ 見出しに用いるのが普通だが 最近は本文でも読みやすいフォントも多い
30. ポラーノの広場 作 宮沢賢治 目的と雰囲気に合わせて フォントを選ぶ！ フォント
31. 個人的 ダサいフォント４選 どんな文字でも表示できる基本のフォント。 オシャレなデザインにしたかったら使うな。 Wordで一番最初に選択されるフォントだった（過去形） フォーマルの場では めっちゃ向いてると思う。 Office初心者が必ず使用していた ダサいフォント界不動の1位。 最近めっきり見なくなったので、逆にオシャレに見えてきた。 ウェブサイトで非常によく使われるフォント。 読みやすくて オシャレなんだけど、太字にしたときのダサさが異常。 フォント
32. 世界中でダサいと言われ 使用禁止運動が起こる（ガチ） 様々な人間に同じフォントを 使い古されることで ダサく見えてくる フォント
33. 文字に強弱をつけるのも良いよ 特に接続詞は小さめに 影は濃くしすぎない 白い文字＋黒いフラットな影 フォント
34. いままで”ダサい”と罵ってきましたが... ダサいデザインにも メリットが！！！
37. ダサいデザインは 目に留まりやすい
38. 意外とオシャレなデザインは簡単 しかし は 別問題 そのデザインが目立ちやすいか そのデザインが使いやすいか まとめ
39. まとめ ※作るものの全てをダサくしろと言っているわけではない