富山デザイン勉強会_文字_タイポグラフィを使ってデザインする方法.pdf

Slide 1

Slide 1 text

ϯ σ β Π ษ ڧ ձ ෋ ͱ ࢁ ΍ · Ҋ ਤ EFTJHO スピーカーɿ吉川圭太（DERA-DESIGN）「文字・タイポグラフィを使ってデザインする方法」 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 2

Slide 2 text

文字でデザインできてますか？ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 3

Slide 3 text

● デザインの基礎が安定する ● 制作のスピードが早くなる ● 写真やイラストなど素材がいらない ● 多くの情報を整理して載せられる文字のデザインができると D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 4

Slide 4 text

フォント（書体） CAPTER 01 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 5

Slide 5 text

オールドスタンダード・モダン ͋ ͋ ໌ɹ ே ɹମ デザイン書体 ͋ ͋ あ ͋ ͋ ゴシック体 CAPTER 01 フォント（書体）フォントの種類 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 6

Slide 6 text

文字は『見出し』と『本文』 2 種類に分けて考えられます。フォントを選ぶときには、それぞれの役割を考えて選択します。 CAPTER 01 フォント（書体）フォント選び D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 7

Slide 7 text

明朝体 /オールド系明朝体 /スタンダード・モダン系 ذෞσβΠ ϯษڧձ ذෞσβΠϯษڧձ CAPTER 01 フォント（書体）明朝体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 8

Slide 8 text

本　文 ʜ 読みやすくクセがないもの　　　　スタンダードタイプɾモダンタイプ　　　　 Ϧϡ΢ϛϯɾMS明朝ɾখ௩໌ே 見出し ʜ 個性的で目を引くもの　　　　オールドタイプɾデザインフォント系　　　　 ஜࢵ໌ேɾ͏ͭ͘͠໌ே CAPTER 01 フォント（書体）明朝体の使い方 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 9

Slide 9 text

ゴシック体 /オールド系ゴシック体 /スタンダード・モダン系 ذෞσβΠ ϯษڧձ ذෞσβΠϯษڧձ CAPTER 01 フォント（書体）ゴシック体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 10

Slide 10 text

本　文 ʜ 元々クセが少ないので好みで　　　　細かい文字は視認性が良いものを選ぶ　　　　 ৽ΰɾϩμϯɾώϥΪϊ 見出し ʜ インパクトがあり洗練されたもの　　　　モダンタイプɾデザインフォント　　　　 ϩμϯ/5-(ɾݟग़ΰ .# CAPTER 01 フォント（書体）ゴシック体の使い方 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 11

Slide 11 text

デザインフォント筆文字フォント ذෞσβΠϯษڧձ 岐阜デザイン勉強会 CAPTER 01 フォント（書体）デザイン書体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 12

Slide 12 text

本　文 ʜ クセが強く、視認性も低いので本文には　　　　向かないものが多い見出し ʜ 個性が強いものが多いので、デザイン　　　　全体の、イメージを崩さないように CAPTER 01 フォント（書体）デザイン書体の使い方 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 13

Slide 13 text

オススメのフォント CAPTER 02 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 14

Slide 14 text

໌ேମ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 15

Slide 15 text

Ϧϡ΢ϛϯ 金属活字に由来する彫刻刀の冴えを活かしながら、先端やウロコにはやわらかさがあり、親しみやすい雰囲気。特に、均整のとれた美しさには定評がある。 CAPTER 02 オススメのフォント明朝体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 16

Slide 16 text

遊明朝 Windows8以降に標準でバンドルされているフォント。丸みのあるウロコや柔らかな曲線が特徴。読みやすいのでどんな場面にも使いやすい。 CAPTER 02 オススメのフォント明朝体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 17

Slide 17 text

" ໌ே ゆったりとした曲線が特徴のオールドスタイルの明朝体。写植の墨だまりを再現している。映画『君の名は。』で使われていることでも有名です。 CAPTER 02 オススメのフォント明朝体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 18

Slide 18 text

ゴシック体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 19

Slide 19 text

ώϥΪϊ֯ΰ mac OS Xのシステムフォントとして採用されている。読みやすいため道路標識にも使われている。ウェイトが豊富なのもありがたいところ。 CAPTER 02 オススメのフォント　ゴシック体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 20

Slide 20 text

ᕟΰγοΫ Windows 10のシステムフォントとして採用されている。ややフトコロがせまい漢字と、すこし小さい仮名が特徴。細かい文字でも読みやすく設計されている。 CAPTER 02 オススメのフォント　ゴシック体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 21

Slide 21 text

"9*4 Appleの日本語サイトで以前採用されていたフォント。バランスがよくスッキリとしたゴシック体。ウエイトもたくさんあるが、揃えるには値段が高いʜʜ CAPTER 02 オススメのフォント　ゴシック体 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 22

Slide 22 text

欧文フォント D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 23

Slide 23 text

Helvetica フォントといえば『ヘルベチカ』というぐらい有名な書体。シンプルで力強く読みやすいので、用途を問わず広く使用されている書体です。 CAPTER 02 オススメのフォント　欧文フォント D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 24

Slide 24 text

DIN ユニクロや東京オリンピックで使われているのが有名。視認性が高く、海外では公共の場で広く用いられている書体。元々は工業製品の型番に使われていた CAPTER 02 オススメのフォント　欧文フォント。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 25

Slide 25 text

Futura ルイ ɾ ヴィトンやカルバン ɾクラインなど多くの有名企業で採用されている。幾何学的な造形が特徴的である。ラテン語で『未来』という意味。 CAPTER 02 オススメのフォント　欧文フォント D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 26

Slide 26 text

見出しのデザイン CAPTER 03 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 27

Slide 27 text

見出しのデザインのポイント CAPTER 03 見出しのデザイン • インパクト、アテンションが大事 • 気になる、興味を持たせるのが目的 • 必ずしも読めなくてもてもよい • タイポグラフィ自体がイラストなどのように図版　として機能する事も D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 28

Slide 28 text

トラッキングをする JAPAN JAPAN CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 29

Slide 29 text

トラッキングなし岐阜デザイン勉強会トラッキングあり岐阜デザイン勉強会トラッキングをする CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 30

Slide 30 text

‒ 和文と欧文の混在 ඒ͍͠'POU ඒ͍͠'POU ɾ未調整 ɾ英語部分の文字大 ɾ文字の太さ調整 ɾベースライン調整文字サイズを揃える CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 31

Slide 31 text

簡単に「デザイン」が上手にできる簡単に『デザイン』が上手にできる簡単に“デザイン”が上手にできる簡単に、デザインが上手にできる。装飾する（役物） CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 32

Slide 32 text

「美しい」文字「美しい」文字 l美しいz文字 “美しい”文字装飾する（細部のしあげ） CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 33

Slide 33 text

平体長体岐阜デザイン勉強会岐阜デザイン勉強会やってはいけないこと① 歪めない CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 34

Slide 34 text

ඒ͍͠จࣈ 袋文字やってはいけないこと② 袋もじ CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 35

Slide 35 text

やってはいけないこと③ 半角/全角の混在半角 ɾ 全角 ̍̎̏̐ CAPTER 03 見出しのデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 36

Slide 36 text

見出しのアイデア12 CAPTER 04 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 37

Slide 37 text

フォントに大小をつける CAPTER 04 見出しのアイデア12 Ӎ χ Ϟ Ϛ έ ζ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 38

Slide 38 text

動きをつける CAPTER 04 見出しのアイデア12 ஫จͷ ଟ͍ ྉཧళ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 39

Slide 39 text

スキマを詰める CAPTER 04 見出しのアイデア12 RUN MEROS D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 40

Slide 40 text

フォントを変える CAPTER 04 見出しのアイデア12 ஫จͷଟ͍ྉཧళ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 41

Slide 41 text

モチーフをあしらう CAPTER 04 見出しのアイデア12 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 42

Slide 42 text

はみ出す CAPTER 04 見出しのアイデア12 ۜՏ ಓͷ໷ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 43

Slide 43 text

色を変える CAPTER 04 見出しのアイデア12 ໷ ޗഐ͸ೣͰ͋Δ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 44

Slide 44 text

輪郭線だけにする CAPTER 04 見出しのアイデア12 ૸Εϝϩε D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 45

Slide 45 text

座布団を敷く CAPTER 04 見出しのアイデア12 ӍχϞϚέζ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 46

Slide 46 text

ストロークにスキマを作る CAPTER 04 見出しのアイデア12 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 47

Slide 47 text

ストロークをつなげる CAPTER 04 見出しのアイデア12 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 48

Slide 48 text

英語をつける CAPTER 04 見出しのアイデア12 ۜՏమಓͷ໷ (BMBYZSBJMXBZOJHIU D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 49

Slide 49 text

本文のデザイン CAPTER 05 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 50

Slide 50 text

• まずは読みやすさが重要 • 視認性はゴシック体、可読性は明朝体 • デザインフォントは使用しない • 読まれない事を前提にする場合もある • とにかく読みやすさが重要本文のデザインのポイント CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 51

Slide 51 text

ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ΍ ͘͢ͳΔͷͰɺ΍ͬͨํ͕͍͍ͷ͕ͩશͯͷ෦ ෼ʹ΍Δͷ͸ख͕͔͔ؒΔɺগͳ͘ͱ΋໨ཱͭ ෦෼ʹ͸΍Γ·͠ΐ͏ɻ ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ΍͢ ͘ͳΔͷͰɺ ΍ͬͨํ͕͍͍ͷ͕ͩશͯͷ෦෼ʹ ΍Δͷ͸ख͕͔͔ؒΔɺ গͳ͘ͱ΋໨ཱͭ෦෼ʹ ͸΍Γ·͠ΐ͏ɻ ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ ΍͘͢ͳΔͷͰɺ ΍ͬͨํ͕͍͍ͷ͕ͩશͯͷ෦ ෼ʹ΍Δͷ͸ख͕͔͔ؒΔɺ গͳ͘ͱ΋໨ཱͭ ෦෼ʹ͸΍Γ·͠ΐ͏ɻ ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ΍͢ ͘ͳΔͷͰɺ ΍ͬͨํ͕͍͍ͷ͕ͩશͯͷ෦෼ʹ ΍Δͷ͸ख͕͔͔ؒΔɺ গͳ͘ͱ΋໨ཱͭ෦෼ʹ͸ ΍Γ·͠ ΐ ͏ɻ 未調整均等配置（ジャスティファイ）約物半角調整済み文字組み CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 52

Slide 52 text

ɾ行　揃　え　＝　均等配置（ジャスティファイ） ɾ禁　則　処　理　＝　強い禁則 ɾ文　字　組　み　＝　約物半角 ɾぶら下がり　＝　強制（場合により） ɾ文　字　送　り　＝　手動で調整文字組み CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 53

Slide 53 text

ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ΍͘͢ͳΔͷͰɺ શͯͷ ෦෼ʹ΍ͬͨํ͕ ͍͍Ͱ͕͢ख͕͔͔ؒΔͷͰɺ গͳ͘ͱ΋໨ཱͭ෦෼͸΍ͬͨํ͕͍͍Ͱ͠ΐ͏ɻ ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ΍͘͢ͳΔͷͰɺ શͯͷ ෦෼ʹ΍ͬͨํ͕ ͍͍Ͱ͕͢ख͕͔͔ؒΔͷͰɺ গͳ͘ͱ΋໨ཱͭ෦෼͸΍ͬͨํ͕͍͍Ͱ͠ΐ͏ɻ 『本文』のデザイン・ジャンプ率『本文』のデザイン・ジャンプ率ジャンプ率 CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 54

Slide 54 text

広告の場合、文字（本文）の面積が 50％を越えると、心理的に障害となってきます。 50％が目安図版率 CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 55

Slide 55 text

行間は文字サイズの15倍から2倍が目安です。文字間はベタ組みよりも少し空け気味の方が読みやすい。漢字は広げて、カナは詰めるとよい。 ϕλ૊ΑΓ΋ खಈͰจࣈؒ Λௐ ੔ͨ͠ํ ͕ݟ΍͘͢ͳ Γ·͢ɻ ʙ 行間と文字間 CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 56

Slide 56 text

横書きの場合、一行25〜35文字前後。縦書きの場合は40 文字前後が最適な文字数です。 Webサイトの場合横幅が 650〜800px程度が読みやすい。 25〜35 文字 ϕλ૊ΑΓ΋खಈͰจࣈؒΛௐ੔ͨ͠ํ͕ݟ΍͘͢ͳΔͷͰɺ গͳ͘ͱ΋ ໨ཱͭ෦෼͸΍ͬͨํ͕͍͍Ͱ͠ΐ͏ɻ 1 行の文字数（行長） CAPTER 05 本文のデザイン D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 57

Slide 57 text

文字デザイン事例 CAPTER 05 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 58

Slide 58 text

市川崑 CAPTER 05 本文のデザイン映画のタイトルロゴはデザイナーに任せるのが普通であるが、市川監督の場合は全て自分でやっていたそうである。並々ならぬ文字へのこだわりがうかがえる。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 59

Slide 59 text

トップをねらえ！ CAPTER 05 本文のデザイン庵野秀明監督は文字のデザインに細かい監督です。後に制作した「新世紀エヴァンゲリオン」では市川崑監督へのオマージュあった。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 60

Slide 60 text

そうさす CAPTER 05 本文のデザイン文字のデザインが得意なデザイン会社。ロゴデザイン、 WEBデザインから印刷物まで総合的なブランディングをしている。 https//sosuscojp/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 61

Slide 61 text

関西編集保安委員会 CAPTER 05 本文のデザイン校正の赤文字が入りながら、文字がうち変わったりして完成していくデザイン。印刷物の要素のデザインとして活かしている。 https//khhkinfo/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 62

Slide 62 text

競輪CM 「一瞬でライバルに」編 CAPTER 05 本文のデザイン映像とタイポグラフィが絡み合う演出がかっこいい。前後の盛り上がりのさを文字でも表現している。 https//wwwyoutubecom/w atch?v=rLGjrHnwaMw D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 63

Slide 63 text

フリーフォントサイト CAPTER 06 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 64

Slide 64 text

フォントフリー CAPTER 06 フリーフォントサイト https//fontfreeme/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 65

Slide 65 text

モジザイ CAPTER 06 フリーフォントサイト https//wwwmojizaicom/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 66

Slide 66 text

dafontcom CAPTER 06 フリーフォントサイト https//wwwdafontcom/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 67

Slide 67 text

まとめ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 68

Slide 68 text

● 明朝体とゴシック体とデザイン書体　それぞれの特徴を知って使う ● 見出しと本文でポイントがある ● デザインに対して解像度が上がる ● フリーのフォントを活用しよう D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p