SIerに在籍経験のあるデザイナーが教える「エンジニアにも理解できる、デザインの裏のロジックを明かす②」

Slide 1

Slide 1 text

SIerに在籍経験のあるデザイナーが教える SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第3回 2020/10/23 エンジニアにも理解できる、デザインの裏のロジックを明かす

Slide 2

Slide 2 text

2 l ⾃⼰紹介 l デザインの注⽬度⽬次 l ビジュアルデザインの基礎 l 基本要素 l レイアウト l ⾊ l コントラスト l ⽂字 l その他 l ⽂法

Slide 3

Slide 3 text

⾃⼰紹介

Slide 4

Slide 4 text

4 Fixel株式会社池本哲也⾃⼰紹介 #建設, #ペット, #TV、#システム開発

Slide 5

Slide 5 text

デザインの注⽬度

Slide 6

Slide 6 text

6 「デザイン経営」宣⾔ ︓経済産業省と特許庁が2017年に共同で⽴ち上げた「産業競争⼒とデザインを考える研究会」による提⾔をまとめたもの。⽇本企業の経営に「デザインの視点や思考を取り⼊れ、新たなイノベーションを⽣み出す⼒・国際競争⼒を⾼めよう」デザインの注⽬度

Slide 7

Slide 7 text

デザインが注⽬されている

Slide 8

Slide 8 text

業務システムは使いにくいそんな中

Slide 9

Slide 9 text

そこで今⽇のテーマにつながる SIerに在籍経験のあるデザイナーが教えるエンジニアにも理解できる、デザインの裏のロジックを明かす

Slide 10

Slide 10 text

10 l ビジュアルデザインの基礎 l 基本要素 l レイアウト l ⾊ l コントラスト l ⽂字 l その他 l ⽂法今⽇のテーマ

Slide 11

Slide 11 text

ビジュアルデザインの基本を学ぶ

Slide 12

Slide 12 text

12 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性多様性階層反復基本要素⽂法レイアウト⾊コントラスト⽂字など… など…

Slide 13

Slide 13 text

13 l 要素を整理して、重要度を明確に l 重要度に応じて、エリアや要素のサイズを決める l 左上から右下へ流れをつくる l 個々の要素は、整列や近接で関係を分かりやすく l グリッドで画⾯全体の配置にまとまりをつけるレイアウトおさらい

Slide 14

Slide 14 text

14 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性多様性階層反復基本要素⽂法レイアウト⾊コントラスト⽂字など… など…

Slide 15

Slide 15 text

15 ⾊の基礎 • ⾊の三属性 • コンピュータ上の⾊ • ⾊の分類例 ①基本のキホン • ⾊数を控える • トーンを揃える • 反転を活⽤する • 避けた⽅がいい配⾊ ②配⾊のポイント

Slide 16

Slide 16 text

16 ⾊の基礎 • ⾊の三属性 • コンピュータ上の⾊ • ⾊の分類例 ①基本のキホン • ⾊数を控える • トーンを揃える • 反転を活⽤する • 避けた⽅がいい配⾊ ②配⾊のポイント

Slide 17

Slide 17 text

17 基本のキホン⾊の三属性 ౦भਕരਙ उ൩ःप୶஭चङஆয়खञരਙ ౦ৼؼؼ౦௡भୀः ཪ২ؼؼँकृऊऔ ৥২ؼؼ৥ॊऔभ২়ः

Slide 18

Slide 18 text

18 基本のキホンコンピュータ上の⾊ ਌ऩढ़ছشঔشॻ +6% द౦॑৹ତघॊभऋؚ૎ಁ৓देः RGB ୾भਕਉ౦ ౦भਕਉ౦ٔహ ౦ৼ؞ཪ২؞৥২ CMYK HSB ঔॽॱ઺એ਀ં ഀླྀ ঔॽॱ઺એ਀ં

Slide 19

Slide 19 text

19 基本のキホン⾊の分類例 થཪ౦ध૮ཪ౦ ૮ཪ౦मؚन॒ऩ౦௡धुঐॵॳखृघः થཪ౦ ౦௡भँॊुभ ૮ཪ౦ ஜؚ࿏ؚహऩन౦௡॑૎गऩःुभ

Slide 20

Slide 20 text

20 基本のキホン⾊の分類例 ॺشথق౦৹ك َ৥২ُ ध َཪ২ُ भ ੌा়ॎच ৥ ২ ཪ২ অঅॵॻॺشথ ছॖॺॺشথ ॺشথभ୻

Slide 21

Slide 21 text

21 ⾊の基礎 • ⾊の三属性 • コンピュータ上の⾊ • ⾊の分類例 ①基本のキホン • ⾊数を控える • トーンを揃える • 反転を活⽤する • 避けた⽅がいい配⾊ ②配⾊のポイント

Slide 22

Slide 22 text

22 配⾊のポイント⾊数 ওॖথ ూବ౦ ਘ৹౦ ॢঞشॺصথ ٔ ౦ਯमඓइीपघॊ قওॖথढ़ছشؚూବ౦ؚਘ৹౦ٔॢঞشॺشথங২पك پి৷୻ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ پ౦भଦীॖওش४ ٹ ٔ Ћɹଦ౦भଦীॖওش४॑અइथઞअधेः

Slide 23

Slide 23 text

23 配⾊のポイント⾊数

Slide 24

Slide 24 text

24 配⾊のポイント⾊数

Slide 25

Slide 25 text

25 配⾊のポイント⾊相環 َథ๚౦ُ ٙ๚ञेअऩ౦ َଓ౦ُ ٙਫખৌपਜ਼઼घॊ౦ৼ ৻਀৓ऩ౦ৼ॑௺ଁ৓प୭૾पధसञुभ؛

Slide 26

Slide 26 text

26 配⾊のポイント⾊のイメージ ౦ऊै૎गॊॖওش४धઊठলखञःഀ଴॑ँॎचॊ ে୵ؚౌؚఎؚ੓ؚੲ೸ؚ஠૫ऩन ആ཮ؚ඿ણ഻ؚਞؚౘૣऩन ୬഻ؚჼథؚসؚିਔؚ৥඿ऩन ঽேؚ਍৸ؚ௏೨ؚൌ஦ؚग़॥ট४شऩन ਷ؚഐಯؚੴਙؚ౞ਟؚ။ᨘऩन ௝ਜ਼ؚৈ௼ؚਫଝؚઋ෸ऩन ૮ؚઌ৶ؚ஬ၷؚෞხऩन রয়ؚਂၷؚྔᨘऩन பؚଈؚ૱ົؚළᄯؚથ౗ऩन ஧ ᧹ ້ ෤ ஒ ྏ ஜ ࿏ హ

Slide 27

Slide 27 text

27 配⾊のポイント同じトーンの配⾊ َॺشথُ ध َ౦ৼُ दଦ౦॑અइॊधेः ৥ ২ ཪ২ ౦ৼ ৊गॺشথभଦ౦मऽधऽढथৄइॊ অঅॵॻॺشথ ছॖॺॺشথ ॲشॡॺشথ

Slide 28

Slide 28 text

28 配⾊のポイント⾊の反転 ౦भખૡ قএ४طॿफ़ك ॑ણ৷घॊधওজঁজऋदॊ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ

Slide 29

Slide 29 text

29 避けた⽅がいい配⾊ ͓໰߹Θͤ ͓໰߹Θͤ ୻ ৥২ऋৈःৃ়पॳढ़ॳढ़घॊ پଓ౦؟౦ৼ୭दਫખৌपਜ਼઼घॊ౦ ਀ં౦धూବ౦भঢ়બڭ َଓ౦ُद౦ऋवणऊॊ

Slide 30

Slide 30 text

30 避けた⽅がいい配⾊ ͓໰߹Θͤ ͓໰߹Θͤ ୻ ୆ੀऋँःऽःपऩॊ ਀ં౦धూବ౦भঢ়બڮ َ৥২ُऋ੺ः౦ ৥২

Slide 31

Slide 31 text

31 避けた⽅がいい配⾊ ୻ ਀ં౦धూବ౦भঢ়બگ 5*% भৈཪ২भ౦ ཪ২ ͓໰߹Θͤ ͓໰߹Θͤ ෤ृ஧ؚྏऋ௉ृऊघऍ৹ਮखपऎः ऒभेअऩ౦

Slide 32

Slide 32 text

32 カラーユニバーサルデザイン ঩ময੬ਙभ যप যؚ੓ਙभ যप যؚ ঩ম৸৬द ਐযਰ঱भ౦ൠ঻ऋःऽघ y౦ൠ঻षଦൟखञଦ౦पघॊ؛ y౦टऐप౅ैऩः਀ં্১पघॊ؛ َ஧ध෤ُ َ້෤धُ້ َஒधྏُऩनऋ௙શखपऎः ௙શखपऎःَౄਗ਼রُधَౄਗ਼౥വُभ਀ં୻

Slide 33

Slide 33 text

33 配⾊のポイントツール Adobe Color https://color.adobe.com/ ※アプリもあり Paletton com http://paletton.com/

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

37 l ⾊⾃体がもつイメージと、出したい印象をあわせる l ⾊数は控えめに l 配⾊ツールも活⽤⾊まとめ

Slide 38

Slide 38 text

38 ビジュアルデザインの基本 ❸ コントラスト統⼀性多様性階層反復基本要素⽂法レイアウト⾊コントラスト⽂字など… など…

Slide 39

Slide 39 text

39 コントラストの例 ଩ः ৈः

Slide 40

Slide 40 text

40 コントラストの例 ଩ः ৈः

Slide 41

Slide 41 text

41 コントラストの役割 ॥থॺছ५ॺٙৌૻ ਏಞ৊૒ऋ౐पَథ๚ُखऩःेअؚ मढऌॉधଳಁ৓पୀॎचॊऒध ଁ঳ਙ॑௤ऩॎङपَඳਡُ॑৥નपघॊ

Slide 42

Slide 42 text

42 コントラストを付けるには १ॖ६ ౦ ३ख़ॖউ এ४३ঙথ ਏಞؚग़জؚ॔ધஊ१ॖ६ऩन ଦ઼॑ୀॎचॊ ஄॑ऊइॊؚછ৬॑ऊइॊऩन ਘ৹౦ؚ౦भખૡऩन

Slide 43

Slide 43 text

43 サイズのコントラスト ਏಞؚग़জؚ॔ધஊऩनभ१ॖ६॑৹ତ CHANGE BY DESIGN σβΠ ϯࢥߟ͕ ੈքΛม͑Δ ςΟ Ϝɾϒϥ΢ϯ ઍ༿හੜ༁ Π ϊϕʔγ ϣ ϯΛ ಋ͘ ৽͍͠ߟ͑ํ Design Thinkingɺ ͦΕ͸ ʮσβΠφʔͷ͝ͱ ͘ ߟ͑Δ ͜ ͱʯ ɻ దਖ਼ղΛಋ͖ͩ͢ຐ๏ͷΑ ͏ ͳྗͩ ʂ ݩ ɾ IDEO ౦ژࢧࣾ௕ ਂᖒ௚ਓࢯਪન ʂ ϋϠΧϫɾϊ ϯϑ Ο Ϋγ ϣ ϯจݿ

Slide 44

Slide 44 text

44 カラーのコントラスト ਘ৹౦ؚ౦भખૡऩन౦भୀःद৹ତ 0 . ʹ 1 2 3 ʴ 4 5 6 7 8 9 º ̘ ʴ ʗ ˋ × 1,000 0 . ʹ 1 2 3 ʴ 4 5 6 7 8 9 º ̘ ʴ ʗ ˋ × 1,000

Slide 45

Slide 45 text

45 シェイプのコントラスト ஄ृછ৬॑૗इॊऩनद৹ତ ϝʔϧϘοΫεબ୒ ड৴τϨΠ ॏཁ ελʔ෇͖ ૹ৴ࡁΈϝʔϧ Լॻ͖ ໎࿭ϝʔϧ ϝʔϧϘοΫεબ୒ ड৴τϨΠ ॏཁ ελʔ෇͖ ૹ৴ࡁΈϝʔϧ Լॻ͖ ໎࿭ϝʔϧ

Slide 46

Slide 46 text

46 シェイプのコントラスト ΠϥετϨʔγϣϯ ΠϥετϨʔγϣϯ͸৘ใΛ఻ୡ͢ Δഔମͷ 1 ͭͰ͋Γɺ ໨తʹԊͬͯ ࡞੒͞ΕΔֆ΍ਤ૾Ͱ͋Γɺ ৘ใͷ ਤղͱ͍͏ੑ֨Λ࣋ͭɻ ϚεϝσΟ ΞΛ௨ͯࣾ͡ձͷதͰػೳ͢Δ͜ͱ Λେલఏͱ͓ͯ͠Γɺ άϥϑΟοΫσ βΠϯͷதͷ෼໺Ͱ΋͋Δɻ ͦͷͨ Ίɺ ࡞Ոࣗ਎ͷੈքΛҰ؏ͯ͠௥ٻ ͢Δܳज़ɾ ඒज़ͱ͸ੑ࣭͕ҟͳͬ ͍ͯΔɻ ΠϥετϨʔγϣϯ ΠϥετϨʔγϣϯ͸৘ใΛ఻ୡ͢ Δഔମͷ 1 ͭͰ͋Γɺ ໨తʹԊͬͯ ࡞੒͞ΕΔֆ΍ਤ૾Ͱ͋Γɺ ৘ใͷ ਤղͱ͍͏ੑ֨Λ࣋ͭɻ ϚεϝσΟ ΞΛ௨ͯࣾ͡ձͷதͰػೳ͢Δ͜ͱ Λେલఏͱ͓ͯ͠Γɺ άϥϑΟοΫσ βΠϯͷதͷ෼໺Ͱ΋͋Δɻ ͦͷͨ Ίɺ ࡞Ոࣗ਎ͷੈքΛҰ؏ͯ͠௥ ٻ͢Δܳज़ɾ ඒज़ͱ͸ੑ࣭͕ҟͳͬ ͍ͯΔɻ ஄ृછ৬॑૗इॊऩनद৹ତ

Slide 47

Slide 47 text

47 ポジションのコントラスト ໨࣍ 1. άϦ ο υͷجຊ 1-1. άϦ ο υͷཁૉ 1-2. ৘ใͷ֊૚Խ 1-3. ϦζϜͱྲྀΕ 2. άϦ ο υͷجຊύλʔϯ 2-1. γϯάϧίϥϜ 2-2. ̎ίϥϜ 2-3. ϞδϡϥʔάϦ ο υ 3. ͦͷଞͷ࣮ྫ 3-1. εΠεࣜάϦ ο υ 3-2. ༗ػతͳσβΠϯ ໨࣍ 1. άϦ ο υͷجຊ 1-1. άϦ ο υͷཁૉ 1-2. ৘ใͷ֊૚Խ 1-3. ϦζϜͱྲྀΕ 2. άϦ ο υͷجຊύλʔϯ 2-1. γϯάϧίϥϜ 2-2. ̎ίϥϜ 2-3. ϞδϡϥʔάϦ ο υ 3. ͦͷଞͷ࣮ྫ 3-1. εΠεࣜάϦ ο υ 3-2. ༗ػతͳσβΠϯ ଦ઼॑ୀॎचथ৹ତ

Slide 48

Slide 48 text

48 १ॖ६ ౦ ३ख़ॖউ এ४३ঙথ ਏಞؚग़জؚ॔ધஊ१ॖ६ऩन ଦ઼॑ୀॎचॊ ஄॑ऊइॊؚછ৬॑ऊइॊऩन ਘ৹౦ؚ౦भખૡऩन コントラストを組み合わせて使う 2つ, 3つ組み合わせて使うと効果的

Slide 49

Slide 49 text

49 コントラストを組み合わせて使うカラー＋サイズカラー＋シェイプ

Slide 50

Slide 50 text

50 l コントラストを付けるとページ全体のメリハリがでる l コントラストの主な付け⽅は、サイズ、⾊、シェイプ、ポジション l いくつかを組み合わせると効果的コントラストまとめ

Slide 51

Slide 51 text

51 ビジュアルデザインの基本⽂字統⼀性多様性階層反復基本要素⽂法レイアウト⾊コントラスト⽂字など… など…

Slide 52

Slide 52 text

52 ビジュアルデザインの基本 ❹ ⽂字⽂字がない絵だけのビジュアルデザインはあまり無い⾔語情報をビジュアルとして扱う「タイポグラフィ」は重要レアほとんどの画⾯＜

Slide 53

Slide 53 text

53 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔⽂字を組む１⽂字を組む２

Slide 54

Slide 54 text

54 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔⽂字を組む１⽂字を組む２

Slide 55

Slide 55 text

55 書体の使い⽅書体の種類（和⽂書体） ৥ફ৬ ͋Ӭ ०३ॵॡ৬ ͋Ӭ जभ౎भછ৬ ீ०३ॵॡ৬ ͋Ӭ ஫ଁછ৬قᦹછ৬ऩनك ͋Ӭ ॹ२ॖথછ৬ ͋Ӭ ୻ؙ঄ছॠঀ৥ફؚ06 ৥ફؚ᪣৥ફऩन ୻ؙ঄ছॠঀഓ०ؚ06 ०३ॵॡऩन

Slide 56

Slide 56 text

56 書体の使い⽅書体の特徴と使い分け ৥ફ৬ yൿदછऊोञધஊ॑ெखथःॊ y૯઺ऋ಍ऎؚອ઺ऋ୬ः yঁॿؚঁছॖऩनभ೪๐ऋँॊ মધऩनশःધฆदഭाृघः ഀླྀ੟਱ऌ ৄলखभ౎ؚ৵औऩ१ॖ६दुഭाृघः ঔॽॱऩनभ઺એ਀ં਱ऌ y਴ൿदછऊोञધஊऋुधपऩॊ yघसथभஊ઺ऋऺऻ৊ग୬औ yঔॲথद৥ॊःഀ଴ ٽ ٽ ͋Ӭ ०३ॵॡ৬ ͋Ӭ

Slide 57

Slide 57 text

57 書体の使い⽅書体の特徴と使い分け明朝体

Slide 58

Slide 58 text

58 書体の使い⽅書体の特徴と使い分けゴシック体

Slide 59

Slide 59 text

59 書体の使い⽅書体の種類（主な欧⽂書体） ACERSaedors ABCDEFGH abcdefgh 12345 টشঐথ৬ق७জইછ৬ك ACERSaedors ABCDEFGH abcdefgh 12345 १থ७জইછ৬ ACERSaedors ABCDEFGH abcdefgh 12345 ५ॡজউॺછ৬ ୻ؙ*DUDPRQGؚ7LPHV1HZ5RPDQ ऩन ୻ؙ6QHOO6FULSW ऩन ୻ؙ$ULDOؚ+HOYHWLFD ऩन

Slide 60

Slide 60 text

60 書体の使い⽅書体の特徴と使い分け（欧⽂書体） টشঐথ৬ق७জইછ৬ك y੔ഈप଍૾भَ७জইُऋणऎ yஊ઺भ୬औप೪๐ऋँॊ yਮધછ৬भ৥ફ৬ध๚ञ્ඉ ৥ફ৬धৼਙऋःः মધऩनশःધฆदഭाृघः ०३ॵॡ৬धৼਙऋःः ৄলखभ౎ؚ৵औऩ१ॖ६दुഭाृघः y َ७জইُऋऩःછ৬ yघसथभஊ઺ऋऺऻ৊ग୬औ yਮધછ৬भ०३ॵॡ৬ध๚ञ્ඉ ٽ ٽ १থ७জইછ৬ ACESaedo ABCDEFGH abcdefgh 12345 ACESaeds ABCDEFGH abcdefgh 12345 ७জই

Slide 61

Slide 61 text

61 書体の使い⽅書体の特徴と使い分け

Slide 62

Slide 62 text

62 書体の使い⽅書体の特徴と使い分け

Slide 63

Slide 63 text

63 書体の使い⽅書体のバリエーションウェイトとファミリー ધஊभ෗તधग़ঞওথॺऋ৊ग॥থ७উॺदଁ঳औोथःॊ ͋ Ӭ ͋ Ӭ ͋ Ӭ ͋ Ӭ ই॓঑জش ٻ क़ख़ॖॺ ঞॠগছش ঑ॹॕ॔঒ ঎شঝॻ ছॖॺ क़ख़ॖॺऋളਯँॊછ৬॑ઞअधؚਘൠ॑णऐञ਀ંऋदऌॊ

Slide 64

Slide 64 text

64 書体の使い⽅プロポーショナルフォント L3KRQH ࡸ L3DG ࡢ :L)L ᶵ⬟ࢆ ن06 ०३ॵॡه 㼕㻼㼔㼛㼚㼑䜔㼕㻼㼍㼐䛾㼃㼕㻙㻲㼕 ᶵ⬟䜢 ن063 ०३ॵॡه ஊ்भ৹ତऋऔोञউটএش३ঙॼঝইज़থॺ॑ઞअध ஊ৑ऋঃছঃছचङؚ५঒ش५ऩ૴ोदഭाृघऎऩॊ

Slide 65

Slide 65 text

65 書体の使い⽅和⽂書体と欧⽂書体 ਮધછ৬भஶਯஊमؚ૑ङखुਈిऩ਀ંप੿ैोथःऩः؛ 㼀㼥㼜㼛㼓㼞㼍㼜㼔㼥䛸䛿ᩥᏐ䛾య⿢䜢ᩚ䛘䜛 ن063 ०३ॵॡه Typography 䛸䛿ᩥᏐ䛾య⿢䜢ᩚ䛘䜛 ن06 ०३ॵॡ +HOYHWLFDه घसथਮધછ৬ ਮધછ৬ध௎ધછ৬भੌा়ॎच

Slide 66

Slide 66 text

66 書体の使い⽅和⽂書体と欧⽂書体 ׽ࣈͻΒ͕ͳ Alphabet 1234 ׽ࣈͻΒ͕ͳ Alphabet 1234 ௎ધછ৬धੌा়ॎचॊৎमؚ१ॖ६ऋ৊गऎैःभुभ॑৭व ધஊभৈऔृؚ෯২૎ऋँढथःऩः ધஊभৈऔृؚ෯২૎ऋजौथःॊ ن7ZFHQ07ه ن5RERWR0HGLXPه

Slide 67

Slide 67 text

67 書体の使い⽅和⽂書体と欧⽂書体組み合わせ例 ৻਀৓ऩੌा়ॎच୻ Mac΍Windows౳ͷσβΠϯ ن঄ছॠঀഓ०ٔ+HOYHWLFD1HXHه MacृWindowsಉभॹ२ॖথ نওॖজड़ٔ6HJRH8,ه Mac䜔Windows➼䛾䝕䝄䜲䞁 ن063 ०३ॵॡٔ$ULDOه

Slide 68

Slide 68 text

68 書体の使い⽅和⽂書体と欧⽂書体組み合わせ例 ੌा়ॎच୻ؙپउघघी Mac΍Windows౳ͷσβΠ ϯ ن঄ছॠঀ৥ફٔ/XFLGD%ULJKWه Mac΍Windows౳ͷσβΠ ϯ ن᪣৥ફٔ*DUDPRQGه Mac↳Windowsሁ↝⇭⇜⇊∙ ن+*6 ৥ફ (ٔ*HRUJLDه

Slide 69

Slide 69 text

69 l 書体は表⽰する環境や内容で選択する l モニタ表⽰ではゴシック体が読みやすい l 印刷物や⻑⽂は明朝体が読みやすい l プロポーショナルフォントをつかう l 和⽂書体と欧⽂書体を適切に組み合わせる書体の使い⽅まとめ

Slide 70

Slide 70 text

70 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔⽂字を組む１⽂字を組む２

Slide 71

Slide 71 text

71 ⽂字を組む1 ⽂字サイズ ਀ંॹংॖ५ृঌش४঱दभ ഭाृघःَਈ৵ધஊ१ॖ६ُ॑ૠ৒खऽखॆअ ৔ઍपेढथؚઞअધஊ१ॖ६भঃॱشথ॑ৠीॊ ॱॖॺঝقSWك মધقSWك य़কউ३ঙথقSWك จࣈͷσβΠϯ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓ τͰ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻ ମͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ ϑΝϛϦʔॻମͷΞ΢τϥΠϯΛॏͶΔͱɺ౷Ұ͞Εͨίϯη ϓτͰσβΠϯ͞Ε͍ͯΔ͜ͱ͕Θ͔Δɻ

Slide 72

Slide 72 text

72 ⽂字を組む1 ⾏間と字間 ষ৑धஊ৑भ੐৒पणःथ ஊ৑ ஊଛॉ ষଛॉ ষ৑ ೔ຊޠͷ จষͱ͸ɺ ࣈ ધஊীभ ஊ்ऋَHPُ HP پ&66 दमؚడഡपमَষଛॉُधَஊ৑ُभக॑੐৒खथःॊ OLQHKHLJKW OHWWHUVSDFLQJ

Slide 73

Slide 73 text

73 ⽂字を組む1 読みやすい⾏間の設定 1.0em 15pt 10pt จࣈͷࠎ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτͰ౷Ұ͞Εɺ ଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ 1.5em จࣈͷࠎ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτͰ౷Ұ͞Εɺ ଠ͞Λஈ֊తʹม͑ͨॻମ 2.0em จࣈͷࠎ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτͰ౷Ұ͞Εɺ ଠ͞Λஈ֊తʹม͑ͨॻମ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ ¼ ൵ऽॉघऍथഭापऎः ٺ૘ख௞ोघऍथःॊ ٳి২ऩ৑࿒मेाृघः ٳ૘ख૬ःथःथुेः ધஊ१ॖ६पेढथ ع ॑৯਍प৹ତखऽखॆअ

Slide 74

Slide 74 text

74 ⽂字を組む1 読みやすい⾏間の設定 ऱध჋धखथৄइॊभदഭाृघऎऩॊ ΑΓྑ͍σβΠϯͷͨΊͷ σβΠϯͷجૅ஌ࣝ ষ৑1.5em ΑΓྑ͍σβΠϯͷͨΊͷ σβΠϯͷجૅ஌ࣝ ষ৑1.2em ॱॖॺঝृৄলखमؚ૘ख൵ऽढथःथुଐः

Slide 75

Slide 75 text

75 ⽂字を組む1 ⽂字の間隔 ஊ৑0em จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτͰ౷Ұ ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷҰ܈ΛϑΝ ϛϦʔͱ͍͏ɻ ஊ৑0.2em จ ࣈ ͷ ࠎ ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτ Ͱ ౷ Ұ͞Ε ɺ ଠ͞Λஈ ֊ త ʹม͑ͨ ॻ ମ ͷ Ұ ܈ ΛϑΝϛϦʔͱ͍͏ɻ ਫ਼ด ਫ਼ ด ૘खધஊ৑࿒॑ँऐथؚॅढञॉधഭऽचॊ؛ ঎ॱথऩनदुધஊऋৄृघऎऩॊ ୻ ୻ ॅढञॉੌि

Slide 76

Slide 76 text

76 ⽂字を組む1 ⽂字の間隔 ஊ৑0em ஊ৑em ΤϯδχΞͷͨΊͷ σβΠϯͷجૅ஌ࣝ ΤϯδχΞͷҝͷ σβΠ ϯͷجૅ஌ࣝ ॱॖॺঝृৄলखमؚ૘ख൵ीॊध ऱधऊञऽॉपऩॉഭाृघऎऩॊ

Slide 77

Slide 77 text

77 l ⽂字サイズのパターンを決めて使いましょう l ⾏間は1.5を基準に、⽂字サイズや内容によって調整しましょう l ⽂字間隔の調整で読みやすさも変わる⽂字を組む1 まとめ

Slide 78

Slide 78 text

78 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔⽂字を組む１⽂字を組む２

Slide 79

Slide 79 text

79 ⽂字を組む2 内容にあわせた⽂字のスタイル ॱॖॺঝ মધ ϑΥϯ τ ϑΝ ϛ Ϧʔͱ͸ʁ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓ τͰ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨ ॻମͷҰ܈ΛϑΝ ϛ Ϧʔͱ͍͏ɻ ϑΥϯτϑΝϛϦʔͱ͸ʁ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻ ମͷҰ܈ΛϑΝ ϛ Ϧʔͱ͍͏ɻ ϑ Υ ϯ τ ϑ Ν ϛ Ϧʔͱ͸ʁ จࣈͷࠎ֨ͱΤϨϝϯ τ͕ಉ͡ίϯηϓτͰ ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷ Ұ܈ΛϑΝ ϛ Ϧʔͱ͍͏ɻ ୻▢ છ৬َ॑०३ॵॡ৬भ঎شঝॻُप؛ १ॖ६َ॑૘खপऌऎُ ؛ ୻▣ ইज़থॺ१ॖ६َ॑ڮ೅ऎैःपপऌऎُ ؛ ౦॑णऐॊ؛ ৔ઍभସ؞ரథपेढथધஊभ५ॱॖঝ॑ઞःॎऐॊ

Slide 80

Slide 80 text

80 ⽂字を組む2 改⾏位置に気をつける ΤϯδχΞ ͷͨΊͷσ βΠϯͷج ૅ஌ࣝ ΤϯδχΞͷͨΊͷ σβΠϯͷجૅ஌ࣝ ▋ ਔ௡৓ऩયજॉद੝ষखथःऩः █ਔ௡৓पયજोॊᆽਚद੝ষघॊ ৄলखृॱॖॺঝಉभಢધमؚ੝ষਜ਼઼पਞ॑णऐॊ

Slide 81

Slide 81 text

81 ⽂字を組む2 改⾏位置に気をつける จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτͰ ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷ Ұ܈ΛϑΝϛϦʔͱ͍͏ɻ ಉҰϖʔδ্Ͱɺݟग़͠ɾϦʔυɾຊจɾ ΩϟϓγϣϯͳͲɺͦΕͧΕจষͷ໾ׂͱ จࣈͷαΠζʹɺԠͯ͡΢ΣΠτΛ͏·͘ ࢖͍෼͚Ε͹ɺϖʔδʹ౷ҰײΛ ࣋ͨͤͳ͕ΒɺಡΈ΍͢͞ͱಉ࣌ʹϦζϜײͷ ͋ΔσβΠϯʹ͢Δ͜ͱ΋Ͱ͖·͢ɻ মધऩनশધमؚຢੌ॑खञऺअऋؚऽधऽढथৄइॊ ▋ కഈऋफ़ॱफ़ॱखथ ଳ଍୎৿ऋ਍৒खऩः █ ऽधऽढथৄइؚ ഭिৎभଳ଍୎৿ऋ਍৒घॊ؛ जभञीؚഭाृघः จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτͰ౷ Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷҰ܈Λ ϑΝϛϦʔͱ͍͏ɻ ಉҰϖʔδ্Ͱɺݟग़͠ɾϦʔυɾຊจɾΩϟ ϓγϣϯͳͲɺͦΕͧΕจষͷ໾ׂͱจࣈͷα ΠζʹɺԠͯ͡΢ΣΠτΛ͏·͘࢖͍෼͚Ε͹ɺ ϖʔδʹ౷ҰײΛ࣋ͨͤͳ͕ΒɺಡΈ΍͢͞ͱ ಉ࣌ʹϦζϜײͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋Ͱ ͖·͢ɻ

Slide 82

Slide 82 text

82 ⽂字を組む2 改⾏位置に気をつける ಉҰϖʔδ্Ͱɺݟग़͠ɾϦʔυɾ ຊจɾΩϟϓγϣϯͳͲɺͦΕͧ Εจষͷ໾ׂͱจࣈͷαΠζʹɺ Ԡͯ͡΢ΣΠτΛ͏·͘࢖͍෼͚Ε ͹ɺϖʔδʹ౷ҰײΛ࣋ͨͤͳ͕ ΒɺಡΈ΍͢͞ͱಉ࣌ʹϦζϜײ ͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋Ͱ͖· ͢ɻ ಉҰϖʔδ্Ͱɺ ݟग़͠ ɾ Ϧʔυ ɾ ຊจɾ ΩϟϓγϣϯͳͲɺͦΕͧΕจষͷ໾ ׂͱจࣈͷαΠζʹɺԠͯ͡΢ΣΠτ Λ͏·͘࢖͍෼͚Ε͹ɺϖʔδʹ౷Ұ ײΛ࣋ͨͤͳ͕ΒɺಡΈ΍͢͞ͱಉ࣌ ʹϦζϜײͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋ Ͱ͖·͢ɻ ▋ ڭધஊٔ཭ਡऩनमؚ ষधखथৄैोऩः؛ █ ்॑૗इॊऊؚॸय़५ॺ॑৹ତघॊ؛ ق৿৓ऩॸय़५ॺदमँऌैीॊك ঳ધஊटऐभষऋदऌऩःेअपघॊ؛

Slide 83

Slide 83 text

83 ⽂字を組む2 箇条書きの表⽰ █ॸय़५ॺभ৫઩ਜ਼઼॑⑫इॊ █ඨ৯৑भষ৑॑ँऐॊ অগঞॵॺ ق৺੟ك भा୍॑पলखؚ ॸय़५ॺभ৫઩ਜ਼઼म⑫इऽखॆअ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢ දࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦ Εࣗ਎ͷํ͕໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺ ΞΠίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞Βʹ ͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ ˔ Ԟߦ͖Λ༩͑Δ͜ͱɻࢹ֮తͳॏͳΓ΍ຊ෺Β͍͠ ಈ͖͕͋Δͱɺָ͠͞΍෼͔Γ΍͕͢͞޲্͠·͢ɻ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢ දࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺ ͦΕࣗ਎ͷํ͕໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺ ΞΠίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞Β ʹͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ· ͤΜɻ ˔ Ԟߦ͖Λ༩͑Δ͜ͱɻࢹ֮తͳॏͳΓ΍ຊ෺Β͍͠ ಈ͖͕͋Δͱɺָ͠͞΍෼͔Γ΍͕͢͞޲্͠·͢ɻ ▋૚ඨ৯भँञऽऋীऊॉतैः

Slide 84

Slide 84 text

84 ⽂字を組む2 センタリング（中央揃え）は注意して使う J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢දࣔ ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷ ํ͕໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺΞ Πίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ ͞ΒʹͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢දࣔ͠ɺ Ϣʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕ ໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺΞΠ ίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞Βʹͦͷػ ೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ ▋ ଳ଍୎৿ऋਂ਍पऩॉഭापऎः █ ૑ேਙऋऩऐोयؚం⑫इऋഭाृघऎ૮୔ ७থॱজথॢदؚ ളਯभਏಞ॑⑫इॊभम ংছথ५ऋधॉतैऎ୔खः

Slide 85

Slide 85 text

85 ⽂字を組む2 1⾏の⻑さを「⻑くしすぎない」 J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢දࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕໨ཱͭΑ͏Ͱ͋ͬ ͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺΞΠίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞ΒʹͦͷػೳΛ໌֬ʹද͢Α͏ Ͱͳ͚Ε͹ͳΓ·ͤΜɻ ˔ Ԟߦ͖Λ༩͑Δ͜ͱɻࢹ֮తͳॏͳΓ΍ຊ෺Β͍͠ಈ͖͕͋Δͱɺָ͠͞΍෼͔Γ΍͕͢͞޲্͠·͢ɻ ষশऋশःधଳ଍୎৿ऋਂ਍৒पऩॉഭापऎऎऩॊ ▋ଳ଍ऋರॉतैः

Slide 86

Slide 86 text

86 ⽂字を組む2 1⾏の⻑さを「短くしすぎない」 J04 ޲͚ ͷઃܭ J04 ʹ͸࣍ͷํ਑ ͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ 6* ʹ͸ͦͷ಺༰Λ ෼͔Γ΍͘͢දࣔ͠ɺ Ϣʔβͱ΍ΓऔΓ͢ Δ ಇ ͖͕ ͋Γ·͢ J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ ෼͔Γ΍͘͢දࣔ͠ɺϢʔβͱ΍ΓऔΓ ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕ ໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ ಡΈ΍͘͢ɺΞΠίϯ͸త֬໌ྎͰɺ૷ ০͸߇͑ΊͰద౓ɺ͞ΒʹͦͷػೳΛ █ ి২ऩষশदؚ ഭाृघऎऩॊ ▋ ଳ଍୎৿ऋੜइؚ ഭापऎऎऩॊ ق৯਍म ষ ધஊਰৣك ষশऋಢघऍॊभु৊஘पऔऐॊ

Slide 87

Slide 87 text

87 l 内容にあわせて、サイズやウェイトを変える l 改⾏位置によって読みにくくならないようにする l 箇条書きなど、テキストの揃えに注意する l 1⾏の⻑さは、⻑すぎず短すぎないようにする⽂字を組む2 まとめ

Slide 88

Slide 88 text

Slide 89

Slide 89 text

89 ビジュアルデザインの基本よいデザインに共通する⽂法統⼀性多様性階層反復基本要素⽂法レイアウト⾊コントラスト⽂字など… など…

Slide 90

Slide 90 text

90 統⼀性・⼀貫性混沌なものを整理し、統合することはよいビジュアルデザインの第⼀歩ユーザを迷わせない

Slide 91

Slide 91 text

91 多様性・コントラスト単調になりすぎないように、適切な差異をつけ視覚的な⼿がかりをつくるユーザの関⼼を引く

Slide 92

Slide 92 text

92 階層情報の重要度にあわせた視覚的な階層構造をつくるユーザが理解できるようにする

Slide 93

Slide 93 text

93 反復・リズム・パターン視覚的な反復をつかい、同類の情報として認識させるユーザが学習したものを利⽤する

Slide 94

Slide 94 text

94 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性多様性階層反復調和基本要素⽂法レイアウト⾊コントラスト⽂字など… など…

Slide 95

Slide 95 text

95 l デザインと実装に必要な情報が⼀箇所に︕ l デザインの⽅針とその背景の考え⽅などの共有ができるので、関係者全員がデザインに対して共通の認識を持つことができる l デザインシステムのメリット︓ l デザイナー︓ 複数のデザイナーが⼀貫性のあるデザインを効率よく作成できる l エンジニア︓ コードの再利⽤によって開発⽣産性と実装の品質が上がる l ビジネスパーソン︓ デザインを具体化して管理できる資産にするデザインシステムデザインシステムデザインガイドライン UIコンポーネント（デザイン＆コード）各種リソース

Slide 96

Slide 96 text

Slide 97

Slide 97 text

97 l 3rd party サービスプロバイダー向けのデザインガイドラインを公開していたが、あまり効果がなかったのでデザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提供例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com

Slide 98

Slide 98 text

98 l Bluemix、Watson向けのデザインシステム作成後、全社向けのデザインシステムに発展 l SketchファイルによるUI Design KitとComponent Library Kitを提供 l Vanila.jsとReact.js、Vue.js、AngularJS向けの実装を提供例︓IBMのデザインシステム IBM Carbon Design System http://carbondesignsystem.com

Slide 99

Slide 99 text

99 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃っている • 複製&カスタマイズすることで新しいデザインシステムを瞬時作成可能 Fixel Design System 業務システム向け汎用的デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用低減・工期短縮プロフェッショナルサービスデザインシステム作成・運用支援＋＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo

Slide 100

Slide 100 text

100 デザインシステムを導⼊すると、よりよいデザインが導⼊できフロント実装において 20〜50％コスト削減できます

Slide 101

Slide 101 text

101 l ⾮デザイナーの為の l UXデザイン l ビジュアルデザイン l UIデザイン l サービスデザイン l プロトタイピング l 業務システムのデザイン l デザインとITをマージしたUX Driven Processes l デザインを囲むコミュニケーション l 適切なフィードバック⽅法 l デザインへのインプット l ITへのアウトプット l デザインのROI l UXHubとFixel Design Systemの詳細 l その他、事例紹介など今後の内容

Slide 102

Slide 102 text

MAKE DESIGN EASY SIer/情シスのデザインパートナー

Slide 103

Slide 103 text

MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A

Slide 104

Slide 104 text

MAKE DESIGN EASY SIer/情シスのデザインパートナーありがとうございました︕ アンケート記⼊のお願い