Slide 1

Slide 1 text

ダサいデザインの T a lk C A F E i n 高 専 祭 20 1 9 年1 1 月 3 日

Slide 2

Slide 2 text

11/2と大体同じ内容です 若干 変更したところがあるので 間違い探し してください

Slide 3

Slide 3 text

しゅう 電子制御工学科 3年 Q. 好きな食べ物 A. コカ・コーラ 自己紹介

Slide 4

Slide 4 text

テーマ “高専らしさ” 高専生ならば デザインのセオリーを知るべき

Slide 5

Slide 5 text

突然ですが タイトル画面 ダサくない?

Slide 6

Slide 6 text

実際にやってみた

Slide 7

Slide 7 text

すごいかっこいい文字 初期テキスト

Slide 8

Slide 8 text

すごいかっこいい文字 めっちゃかわいいフォント

Slide 9

Slide 9 text

すごいかっこいい文字 めっちゃかっこいい色

Slide 10

Slide 10 text

すごいかっこいい文字 影と反射させた

Slide 11

Slide 11 text

_人人人人人人_ > 突然の虹 <  ̄Y^Y^Y^Y^Y^Y^ ̄

Slide 12

Slide 12 text

なぜダサいデザインが生まれるのか デザイン経験の 浅い人 フォントはカワイイやつで 立体的にしたいな グラデーションもつけてみたい せっかくだから影もつけよう

Slide 13

Slide 13 text

ダサいデザインは いろんな要素を 付け足しすぎている

Slide 14

Slide 14 text

リッチデザイン と フラットデザイン リッチデザイン (2000年代)

Slide 15

Slide 15 text

リッチデザイン と フラットデザイン フラットデザイン (2010年代) iOS 7 (2013) Modern UI(2010)

Slide 16

Slide 16 text

例えば iOS 7 「ダサい」「視認性が悪い」 批判者はみんな死んだ リッチデザイン と フラットデザイン

Slide 17

Slide 17 text

リッチデザインばっかり使ってると どうしても古臭く見える 迷ったら フラットデザイン 使っとけ

Slide 18

Slide 18 text

それを踏まえて 配色から考えていく

Slide 19

Slide 19 text

蛍光色を多用しすぎない 一歩間違えれば ダサい上に目に悪い 蛍光色は難易度高 配色

Slide 20

Slide 20 text

グラデーションは2色が安牌 配色

Slide 21

Slide 21 text

配色を失敗すると 単純にダサいだけでなく 色覚特性の方が読めない可能性 危険 色覚特性の方が見えづらい配色 男性の約5% 女性の約0.2% 配色

Slide 22

Slide 22 text

配色 配色を絞ってみる 色は2~5色が基本 例

Slide 23

Slide 23 text

配色 Adobe Color https://color.adobe.com/ja/create

Slide 24

Slide 24 text

最近のPowerPointには オシャレな配色を標準搭載 配色

Slide 25

Slide 25 text

配色 カラーパレットを用いたデザインの例

Slide 26

Slide 26 text

配色 カラーパレットを用いたデザインの例

Slide 27

Slide 27 text

フォントを絞ってみる 本文+見出し 2フォントで余裕 フォント

Slide 28

Slide 28 text

特徴的なフリーフォントは 使い所が限られる スタンダードなフォントの方が使いやすくてオシャレ フォント

Slide 29

Slide 29 text

フォント フォントの特性を知る ゴシック体・サンセリフ 横画が細く、縦画が太い 曲がり角や右端に三角形(セリフ) 毛筆で書いた文字に近い 本文によく用いられる 全ての点画が同じ大きさ セリフ(三角形)が無いから サン・セリフ 見出しに用いるのが普通だが 最近は本文でも読みやすいフォントも多い

Slide 30

Slide 30 text

ポラーノの広場 作 宮沢賢治 目的と雰囲気に合わせて フォントを選ぶ! フォント

Slide 31

Slide 31 text

個人的 ダサいフォント4選 どんな文字でも表示できる基本のフォント。 オシャレなデザインにしたかったら使うな。 Wordで一番最初に選択されるフォントだった(過去形) フォーマルの場では めっちゃ向いてると思う。 Office初心者が必ず使用していた ダサいフォント界不動の1位。 最近めっきり見なくなったので、逆にオシャレに見えてきた。 ウェブサイトで非常によく使われるフォント。 読みやすくて オシャレなんだけど、太字にしたときのダサさが異常。 フォント

Slide 32

Slide 32 text

世界中でダサいと言われ 使用禁止運動が起こる(ガチ) 様々な人間に同じフォントを 使い古されることで ダサく見えてくる フォント

Slide 33

Slide 33 text

文字に強弱をつけるのも良いよ 特に接続詞は小さめに 影は濃くしすぎない 白い文字+黒いフラットな影 フォント

Slide 34

Slide 34 text

いままで”ダサい”と罵ってきましたが... ダサいデザインにも メリットが!!!

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ダサいデザインは 目に留まりやすい

Slide 38

Slide 38 text

意外とオシャレなデザインは簡単 しかし は 別問題 そのデザインが目立ちやすいか そのデザインが使いやすいか まとめ

Slide 39

Slide 39 text

まとめ ※作るものの全てをダサくしろと言っているわけではない

Slide 40

Slide 40 text

No content