Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fixel Inc.
October 23, 2020

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

SIerに在籍経験のあるデザイナーが教える「エンジニアにも理解できる、デザインの裏のロジックを明かす②」
10月23日(金)開催のウェビナー資料です。

Fixel Inc.

October 23, 2020
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

  1. 2 l ⾃⼰紹介 l デザインの注⽬度 ⽬次 l ビジュアルデザインの基礎 l 基本要素

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

    コントラスト l ⽂字 l その他 l ⽂法 今⽇のテーマ
  3. 15 ⾊の基礎 • ⾊の三属性 • コンピュータ上の⾊ • ⾊の分類例 ①基本のキホン •

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

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

    ⾊数を控える • トーンを揃える • 反転を活⽤する • 避けた⽅がいい配⾊ ②配⾊のポイント
  6. 22 配⾊のポイント ⾊数 ওॖথ ూବ౦ ਘ৹౦ ॢঞشॺصথ ٔ ౦ਯमඓइीपघॊ قওॖথढ़ছشؚూବ౦ؚਘ৹౦ٔॢঞشॺشথங২पك

    پి৷୻ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ پ౦भଦীॖওش४ ٹ ٔ Ћɹଦ౦भଦীॖওش४॑અइथઞअधेः
  7. 27 配⾊のポイント 同じトーンの配⾊ َॺشথُ ध َ౦ৼُ दଦ౦॑અइॊधेः ৥ ২ ཪ২

    ౦ৼ ৊गॺشথभଦ౦मऽधऽढथৄइॊ অঅॵॻॺشথ ছॖॺॺشথ ॲشॡॺشথ
  8. 28 配⾊のポイント ⾊の反転 ౦भખૡ قএ४طॿफ़ك ॑ણ৷घॊधওজঁজऋदॊ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ

    ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ
  9. 32 カラーユニバーサルデザイン ঩ময੬ਙभ  যप  যؚ੓ਙभ  যप 

    যؚ ঩ম৸৬द  ਐযਰ঱भ౦ൠ঻ऋःऽघ y౦ൠ঻षଦൟखञଦ౦पघॊ؛ y౦टऐप౅ैऩः਀ં্১पघॊ؛ َ஧ध෤ُ َ້෤धُ້ َஒधྏُऩनऋ௙શखपऎः ௙શखपऎःَౄਗ਼রُधَౄਗ਼౥വُभ਀ં୻
  10. 34

  11. 35

  12. 36

  13. 43 サイズのコントラスト ਏಞؚग़জؚ॔ધஊऩनभ१ॖ६॑৹ତ CHANGE BY DESIGN σβΠ ϯࢥߟ͕ ੈքΛม͑Δ ςΟ

    Ϝɾϒϥ΢ϯ ઍ༿හੜ༁ Π ϊϕʔγ ϣ ϯΛ ಋ͘ ৽͍͠ߟ͑ํ Design Thinkingɺ ͦΕ͸ ʮσβΠφʔͷ͝ͱ ͘ ߟ͑Δ ͜ ͱʯ ɻ దਖ਼ղΛಋ͖ͩ͢ຐ๏ͷΑ ͏ ͳྗͩ ʂ ݩ ɾ IDEO ౦ژࢧࣾ௕ ਂᖒ௚ਓࢯਪન ʂ ϋϠΧϫɾϊ ϯϑ Ο Ϋγ ϣ ϯจݿ
  14. 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
  15. 46 シェイプのコントラスト ΠϥετϨʔγϣϯ ΠϥετϨʔγϣϯ͸৘ใΛ఻ୡ͢ Δഔମͷ 1 ͭͰ͋Γɺ ໨తʹԊͬͯ ࡞੒͞ΕΔֆ΍ਤ૾Ͱ͋Γɺ ৘ใͷ

    ਤղͱ͍͏ੑ֨Λ࣋ͭɻ ϚεϝσΟ ΞΛ௨ͯࣾ͡ձͷதͰػೳ͢Δ͜ͱ Λେલఏͱ͓ͯ͠Γɺ άϥϑΟοΫσ βΠϯͷதͷ෼໺Ͱ΋͋Δɻ ͦͷͨ Ίɺ ࡞Ոࣗ਎ͷੈքΛҰ؏ͯ͠௥ٻ ͢Δܳज़ɾ ඒज़ͱ͸ੑ࣭͕ҟͳͬ ͍ͯΔɻ ΠϥετϨʔγϣϯ ΠϥετϨʔγϣϯ͸৘ใΛ఻ୡ͢ Δഔମͷ 1 ͭͰ͋Γɺ ໨తʹԊͬͯ ࡞੒͞ΕΔֆ΍ਤ૾Ͱ͋Γɺ ৘ใͷ ਤղͱ͍͏ੑ֨Λ࣋ͭɻ ϚεϝσΟ ΞΛ௨ͯࣾ͡ձͷதͰػೳ͢Δ͜ͱ Λେલఏͱ͓ͯ͠Γɺ άϥϑΟοΫσ βΠϯͷதͷ෼໺Ͱ΋͋Δɻ ͦͷͨ Ίɺ ࡞Ոࣗ਎ͷੈքΛҰ؏ͯ͠௥ ٻ͢Δܳज़ɾ ඒज़ͱ͸ੑ࣭͕ҟͳͬ ͍ͯΔɻ ஄ृછ৬॑૗इॊऩनद৹ତ
  16. 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. ༗ػతͳσβΠϯ ଦ઼॑ୀॎचथ৹ତ
  17. 53 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ •

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

    内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む1 ⽂字を組む2
  19. 55 書体の使い⽅ 書体の種類(和⽂書体) ৥ફ৬ ͋Ӭ ०३ॵॡ৬ ͋Ӭ जभ౎भછ৬ ீ०३ॵॡ৬ ͋Ӭ

    ஫ଁછ৬قᦹછ৬ऩनك ͋Ӭ ॹ२ॖথછ৬ ͋Ӭ ୻ؙ঄ছॠঀ৥ફؚ06 ৥ફؚ᪣৥ફऩन ୻ؙ঄ছॠঀഓ०ؚ06 ०३ॵॡऩन
  20. 59 書体の使い⽅ 書体の種類(主な欧⽂書体) ACERSaedors ABCDEFGH abcdefgh 12345 টشঐথ৬ق७জইછ৬ك ACERSaedors ABCDEFGH

    abcdefgh 12345 १থ७জইછ৬ ACERSaedors ABCDEFGH abcdefgh 12345 ५ॡজউॺછ৬ ୻ؙ*DUDPRQGؚ7LPHV1HZ5RPDQ ऩन ୻ؙ6QHOO6FULSW ऩन ୻ؙ$ULDOؚ+HOYHWLFD ऩन
  21. 60 書体の使い⽅ 書体の特徴と使い分け(欧⽂書体) টشঐথ৬ق७জইછ৬ك y੔ഈप଍૾भَ७জইُऋणऎ yஊ઺भ୬औप೪๐ऋँॊ yਮધછ৬भ৥ફ৬ध๚ञ્ඉ ৥ફ৬धৼਙऋःः মધऩनশःધฆदഭाृघः ०३ॵॡ৬धৼਙऋःः

    ৄলखभ౎ؚ৵औऩ१ॖ६दुഭाृघः y َ७জইُऋऩःછ৬ yघसथभஊ઺ऋऺऻ৊ग୬औ yਮધછ৬भ०३ॵॡ৬ध๚ञ્ඉ ٽ ٽ १থ७জইછ৬ ACESaedo ABCDEFGH abcdefgh 12345 ACESaeds ABCDEFGH abcdefgh 12345 ७জই
  22. 63 書体の使い⽅ 書体のバリエーション ウェイトとファミリー ધஊभ෗તधग़ঞওথॺऋ৊ग॥থ७উॺदଁ঳औोथःॊ ͋ Ӭ ͋ Ӭ ͋

    Ӭ ͋ Ӭ ই॓঑জش ٻ क़ख़ॖॺ ঞॠগছش ঑ॹॕ॔঒ ঎شঝॻ ছॖॺ क़ख़ॖॺऋളਯँॊછ৬॑ઞअधؚਘൠ॑णऐञ਀ંऋदऌॊ
  23. 64 書体の使い⽅ プロポーショナルフォント L3KRQH ࡸ L3DG ࡢ :L)L ᶵ⬟ࢆ ن06

    ०३ॵॡه 㼕㻼㼔㼛㼚㼑 䜔 㼕㻼㼍㼐 䛾 㼃㼕㻙㻲㼕 ᶵ⬟䜢 ن063 ०३ॵॡه ஊ்भ৹ତऋऔोञউটএش३ঙॼঝইज़থॺ॑ઞअध ஊ৑ऋঃছঃছचङؚ५঒ش५ऩ૴ोदഭाृघऎऩॊ
  24. 66 書体の使い⽅ 和⽂書体と欧⽂書体 ׽ࣈͻΒ͕ͳ Alphabet 1234 ׽ࣈͻΒ͕ͳ Alphabet 1234 ௎ધછ৬धੌा়ॎचॊৎमؚ१ॖ६ऋ৊गऎैःभुभ॑৭व

    ધஊभৈऔृؚ෯২૎ऋँढथःऩः ધஊभৈऔृؚ෯২૎ऋजौथःॊ ن7ZFHQ07ه ن5RERWR0HGLXPه
  25. 70 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ •

    内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む1 ⽂字を組む2
  26. 71 ⽂字を組む1 ⽂字サイズ ਀ંॹংॖ५ृঌش४঱दभ ഭाृघःَਈ৵ધஊ१ॖ६ُ॑ૠ৒खऽखॆअ ৔ઍपेढथؚઞअધஊ१ॖ६भঃॱشথ॑ৠीॊ ॱॖॺঝقSWك মધقSWك य़কউ३ঙথقSWك จࣈͷσβΠϯ

    จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓ τͰ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻ ମͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ ϑΝϛϦʔॻମͷΞ΢τϥΠϯΛॏͶΔͱɺ౷Ұ͞Εͨίϯη ϓτͰσβΠϯ͞Ε͍ͯΔ͜ͱ͕Θ͔Δɻ
  27. 72 ⽂字を組む1 ⾏間と字間 ষ৑धஊ৑भ੐৒पणःथ ஊ৑ ஊଛॉ ষଛॉ ষ৑ ೔ຊޠͷ จষͱ͸ɺ

    ࣈ  ધஊীभ ஊ்ऋَHPُ HP پ&66 दमؚడഡपमَষଛॉُधَஊ৑ُभக॑੐৒खथःॊ OLQHKHLJKW OHWWHUVSDFLQJ
  28. 73 ⽂字を組む1 読みやすい⾏間の設定 1.0em 15pt 10pt จࣈͷࠎ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτͰ౷Ұ͞Εɺ ଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ

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

    ͷ ࠎ ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτ Ͱ ౷ Ұ͞Ε ɺ ଠ͞Λஈ ֊ త ʹม͑ͨ ॻ ମ ͷ Ұ ܈ ΛϑΝϛϦʔͱ͍͏ɻ ਫ਼ด ਫ਼ ด ૘खધஊ৑࿒॑ँऐथؚॅढञॉधഭऽचॊ؛ ঎ॱথऩनदुધஊऋৄृघऎऩॊ ୻  ୻  ॅढञॉੌि
  30. 76 ⽂字を組む1 ⽂字の間隔 ஊ৑0em ஊ৑™em ΤϯδχΞͷͨΊͷ σβΠϯͷجૅ஌ࣝ ΤϯδχΞͷҝͷ σβΠ ϯͷجૅ஌ࣝ

    ॱॖॺঝृৄলखमؚ૘ख൵ीॊध ऱधऊञऽॉपऩॉഭाृघऎऩॊ
  31. 78 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ •

    内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む1 ⽂字を組む2
  32. 79 ⽂字を組む2 内容にあわせた⽂字のスタイル ॱॖॺঝ মધ ϑΥϯ τ ϑΝ ϛ Ϧʔͱ͸ʁ

    จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓ τͰ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨ ॻମͷҰ܈ΛϑΝ ϛ Ϧʔͱ͍͏ɻ ϑΥϯτϑΝϛϦʔͱ͸ʁ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻ ମͷҰ܈ΛϑΝ ϛ Ϧʔͱ͍͏ɻ ϑ Υ ϯ τ ϑ Ν ϛ Ϧʔͱ͸ʁ จࣈͷࠎ֨ͱΤϨϝϯ τ͕ಉ͡ίϯηϓτͰ ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷ Ұ܈ΛϑΝ ϛ Ϧʔͱ͍͏ɻ ୻▢ છ৬َ॑०३ॵॡ৬भ঎شঝॻُप؛ १ॖ६َ॑૘खপऌऎُ ؛ ୻▣ ইज़থॺ१ॖ६َ॑ڮ೅ऎैःपপऌऎُ ؛ ౦॑णऐॊ؛ ৔ઍभସ؞ரథपेढथધஊभ५ॱॖঝ॑ઞःॎऐॊ
  33. 80 ⽂字を組む2 改⾏位置に気をつける ΤϯδχΞ ͷͨΊͷσ βΠϯͷج ૅ஌ࣝ ΤϯδχΞͷͨΊͷ σβΠϯͷجૅ஌ࣝ ▋

    ਔ௡৓ऩયજॉद੝ষखथःऩः █ਔ௡৓पયજोॊᆽਚद੝ষघॊ ৄলखृॱॖॺঝಉभಢધमؚ੝ষਜ਼઼पਞ॑णऐॊ
  34. 81 ⽂字を組む2 改⾏位置に気をつける จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτͰ ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷ Ұ܈ΛϑΝϛϦʔͱ͍͏ɻ ಉҰϖʔδ্Ͱɺݟग़͠ɾϦʔυɾຊจɾ ΩϟϓγϣϯͳͲɺͦΕͧΕจষͷ໾ׂͱ จࣈͷαΠζʹɺԠͯ͡΢ΣΠτΛ͏·͘ ࢖͍෼͚Ε͹ɺϖʔδʹ౷ҰײΛ

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

    ͢ɻ ಉҰϖʔδ্Ͱɺ ݟग़͠ ɾ Ϧʔυ ɾ ຊจɾ ΩϟϓγϣϯͳͲɺͦΕͧΕจষͷ໾ ׂͱจࣈͷαΠζʹɺԠͯ͡΢ΣΠτ Λ͏·͘࢖͍෼͚Ε͹ɺϖʔδʹ౷Ұ ײΛ࣋ͨͤͳ͕ΒɺಡΈ΍͢͞ͱಉ࣌ ʹϦζϜײͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋ Ͱ͖·͢ɻ ▋ ڭધஊٔ཭ਡऩनमؚ ষधखथৄैोऩः؛ █ ்॑૗इॊऊؚॸय़५ॺ॑৹ତघॊ؛ ق৿৓ऩॸय़५ॺदमँऌैीॊك ঳ધஊटऐभষऋदऌऩःेअपघॊ؛
  36. 83 ⽂字を組む2 箇条書きの表⽰ █ॸय़५ॺभ৫઩ਜ਼઼॑⑫इॊ █ඨ৯৑भষ৑॑ँऐॊ অগঞॵॺ ق৺੟ك भा୍॑पলखؚ ॸय़५ॺभ৫઩ਜ਼઼म⑫इऽखॆअ J04

    ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢ දࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦ Εࣗ਎ͷํ͕໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺ ΞΠίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞Βʹ ͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ ˔ Ԟߦ͖Λ༩͑Δ͜ͱɻࢹ֮తͳॏͳΓ΍ຊ෺Β͍͠ ಈ͖͕͋Δͱɺָ͠͞΍෼͔Γ΍͕͢͞޲্͠·͢ɻ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢ දࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺ ͦΕࣗ਎ͷํ͕໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺ ΞΠίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞Β ʹͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ· ͤΜɻ ˔ Ԟߦ͖Λ༩͑Δ͜ͱɻࢹ֮తͳॏͳΓ΍ຊ෺Β͍͠ ಈ͖͕͋Δͱɺָ͠͞΍෼͔Γ΍͕͢͞޲্͠·͢ɻ ▋૚ඨ৯भँञऽऋীऊॉतैः
  37. 84 ⽂字を組む2 センタリング(中央揃え)は注意して使う J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢දࣔ

    ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷ ํ͕໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺΞ Πίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ ͞ΒʹͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢දࣔ͠ɺ Ϣʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕ ໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺΞΠ ίϯ͸త֬໌ྎͰɺ૷০͸߇͑ΊͰద౓ɺ͞Βʹͦͷػ ೳΛ໌֬ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ ▋ ଳ଍୎৿ऋਂ਍पऩॉഭापऎः █ ૑ேਙऋऩऐोयؚం⑫इऋഭाृघऎ૮୔ ७থॱজথॢदؚ ളਯभਏಞ॑⑫इॊभम ংছথ५ऋधॉतैऎ୔खः
  38. 85 ⽂字を組む2 1⾏の⻑さを「⻑くしすぎない」 J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢දࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕໨ཱͭΑ͏Ͱ͋ͬ

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

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

  41. 94 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性 多様性 階層 反復 調和

    基本要素 ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
  42. 95 l デザインと実装に必要な情報が⼀箇所に︕ l デザインの⽅針とその背景の考え⽅などの共有が できるので、関係者全員がデザインに対して共通 の認識を持つことができる l デザインシステムのメリット︓ l

    デザイナー︓ 複数のデザイナーが⼀貫性のあるデザインを効率よく作成できる l エンジニア︓ コードの再利⽤によって開発⽣産性と実装の品質が上がる l ビジネスパーソン︓ デザインを具体化して管理できる資産にする デザインシステム デザインシステム デザインガイドライン UIコンポーネント (デザイン&コード) 各種リソース
  43. 96

  44. 97 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l

    実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
  45. 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
  46. 99 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理

    • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 + + https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
  47. 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 その他、事例紹介など 今後の内容