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

37228dc025342eeadeb18bf1c2976a7a?s=47 Fixel Inc.
October 23, 2020

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

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

37228dc025342eeadeb18bf1c2976a7a?s=128

Fixel Inc.

October 23, 2020
Tweet

Transcript

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

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

    l レイアウト l ⾊ l コントラスト l ⽂字 l その他 l ⽂法
  3. ⾃⼰紹介

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

  5. デザインの注⽬度

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

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

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

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

  10. 10 l ビジュアルデザインの基礎 l 基本要素 l レイアウト l ⾊ l

    コントラスト l ⽂字 l その他 l ⽂法 今⽇のテーマ
  11. ビジュアルデザインの基本を学ぶ

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

    ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
  13. 13 l 要素を整理して、重要度を明確に l 重要度に応じて、エリアや要素のサイズを決める l 左上から右下へ流れをつくる l 個々の要素は、整列や近接で関係を分かりやすく l

    グリッドで画⾯全体の配置にまとまりをつける レイアウトおさらい
  14. 14 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性 多様性 階層 反復 基本要素

    ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
  15. 15 ⾊の基礎 • ⾊の三属性 • コンピュータ上の⾊ • ⾊の分類例 ①基本のキホン •

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

    ⾊数を控える • トーンを揃える • 反転を活⽤する • 避けた⽅がいい配⾊ ②配⾊のポイント
  17. 17 基本のキホン ⾊の三属性 ౦भਕരਙ उ൩ःप୶஭चङஆয়खञരਙ ౦ৼؼؼ౦௡भୀः ཪ২ؼؼँकृऊऔ ৥২ؼؼ৥ॊऔभ২়ः

  18. 18 基本のキホン コンピュータ上の⾊ ਌ऩढ़ছشঔشॻ +6% द౦॑৹ତघॊभऋؚ૎ಁ৓देः RGB ୾भਕਉ౦ ౦भਕਉ౦ٔహ ౦ৼ؞ཪ২؞৥২

    CMYK HSB ঔॽॱ઺એ਀ં ഀླྀ ঔॽॱ઺એ਀ં
  19. 19 基本のキホン ⾊の分類例 થཪ౦ध૮ཪ౦ ૮ཪ౦मؚन॒ऩ౦௡धुঐॵॳखृघः થཪ౦ ౦௡भँॊुभ ૮ཪ౦ ஜؚ࿏ؚహऩन౦௡॑૎गऩःुभ

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

    ২ ཪ২ অঅॵॻॺشথ ছॖॺॺشথ ॺشথभ୻
  21. 21 ⾊の基礎 • ⾊の三属性 • コンピュータ上の⾊ • ⾊の分類例 ①基本のキホン •

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

    پి৷୻ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ پ౦भଦীॖওش४ ٹ ٔ Ћɹଦ౦भଦীॖওش४॑અइथઞअधेः
  23. 23 配⾊のポイント ⾊数

  24. 24 配⾊のポイント ⾊数

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

  26. 26 配⾊のポイント ⾊のイメージ ౦ऊै૎गॊॖওش४धઊठলखञःഀ଴॑ँॎचॊ ে୵ؚౌؚఎؚ੓ؚੲ೸ؚ஠૫ऩन ആ཮ؚ඿ણ഻ؚਞؚౘૣऩन ୬഻ؚჼథؚসؚିਔؚ৥඿ऩन ঽேؚ਍৸ؚ௏೨ؚൌ஦ؚग़॥ট४شऩन ਷ؚഐಯؚੴਙؚ౞ਟؚ။ᨘऩन ௝ਜ਼ؚৈ௼ؚਫଝؚઋ෸ऩन

    ૮ؚઌ৶ؚ஬ၷؚෞხऩन রয়ؚਂၷؚྔᨘऩन பؚଈؚ૱ົؚළᄯؚથ౗ऩन ஧ ᧹ ້ ෤ ஒ ྏ ஜ ࿏ హ
  27. 27 配⾊のポイント 同じトーンの配⾊ َॺشথُ ध َ౦ৼُ दଦ౦॑અइॊधेः ৥ ২ ཪ২

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

    ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ ࡟আ Ωϟϯηϧ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ
  29. 29 避けた⽅がいい配⾊ ͓໰߹Θͤ ͓໰߹Θͤ ୻ ৥২ऋৈःৃ়पॳढ़ॳढ़घॊ پଓ౦؟౦ৼ୭दਫખৌपਜ਼઼घॊ౦ ਀ં౦धూବ౦भঢ়બڭ َଓ౦ُद౦ऋवणऊॊ

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

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

    ऒभेअऩ౦
  32. 32 カラーユニバーサルデザイン ঩ময੬ਙभ  যप  যؚ੓ਙभ  যप 

    যؚ ঩ম৸৬द  ਐযਰ঱भ౦ൠ঻ऋःऽघ y౦ൠ঻षଦൟखञଦ౦पघॊ؛ y౦टऐप౅ैऩः਀ં্১पघॊ؛ َ஧ध෤ُ َ້෤धُ້ َஒधྏُऩनऋ௙શखपऎः ௙શखपऎःَౄਗ਼রُधَౄਗ਼౥വُभ਀ં୻
  33. 33 配⾊のポイント ツール Adobe Color https://color.adobe.com/ ※アプリもあり Paletton com http://paletton.com/

  34. 34

  35. 35

  36. 36

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

  38. 38 ビジュアルデザインの基本 ❸ コントラスト 統⼀性 多様性 階層 反復 基本要素 ⽂法

    レイアウト ⾊ コントラスト ⽂字 など… など…
  39. 39 コントラストの例 ଩ः ৈः

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

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

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

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

    Ϝɾϒϥ΢ϯ ઍ༿හੜ༁ Π ϊϕʔγ ϣ ϯΛ ಋ͘ ৽͍͠ߟ͑ํ Design Thinkingɺ ͦΕ͸ ʮσβΠφʔͷ͝ͱ ͘ ߟ͑Δ ͜ ͱʯ ɻ దਖ਼ղΛಋ͖ͩ͢ຐ๏ͷΑ ͏ ͳྗͩ ʂ ݩ ɾ IDEO ౦ژࢧࣾ௕ ਂᖒ௚ਓࢯਪન ʂ ϋϠΧϫɾϊ ϯϑ Ο Ϋγ ϣ ϯจݿ
  44. 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
  45. 45 シェイプのコントラスト ஄ृછ৬॑૗इॊऩनद৹ତ ϝʔϧϘοΫεબ୒ ड৴τϨΠ ॏཁ ελʔ෇͖ ૹ৴ࡁΈϝʔϧ Լॻ͖ ໎࿭ϝʔϧ

    ϝʔϧϘοΫεબ୒ ड৴τϨΠ ॏཁ ελʔ෇͖ ૹ৴ࡁΈϝʔϧ Լॻ͖ ໎࿭ϝʔϧ
  46. 46 シェイプのコントラスト ΠϥετϨʔγϣϯ ΠϥετϨʔγϣϯ͸৘ใΛ఻ୡ͢ Δഔମͷ 1 ͭͰ͋Γɺ ໨తʹԊͬͯ ࡞੒͞ΕΔֆ΍ਤ૾Ͱ͋Γɺ ৘ใͷ

    ਤղͱ͍͏ੑ֨Λ࣋ͭɻ ϚεϝσΟ ΞΛ௨ͯࣾ͡ձͷதͰػೳ͢Δ͜ͱ Λେલఏͱ͓ͯ͠Γɺ άϥϑΟοΫσ βΠϯͷதͷ෼໺Ͱ΋͋Δɻ ͦͷͨ Ίɺ ࡞Ոࣗ਎ͷੈքΛҰ؏ͯ͠௥ٻ ͢Δܳज़ɾ ඒज़ͱ͸ੑ࣭͕ҟͳͬ ͍ͯΔɻ ΠϥετϨʔγϣϯ ΠϥετϨʔγϣϯ͸৘ใΛ఻ୡ͢ Δഔମͷ 1 ͭͰ͋Γɺ ໨తʹԊͬͯ ࡞੒͞ΕΔֆ΍ਤ૾Ͱ͋Γɺ ৘ใͷ ਤղͱ͍͏ੑ֨Λ࣋ͭɻ ϚεϝσΟ ΞΛ௨ͯࣾ͡ձͷதͰػೳ͢Δ͜ͱ Λେલఏͱ͓ͯ͠Γɺ άϥϑΟοΫσ βΠϯͷதͷ෼໺Ͱ΋͋Δɻ ͦͷͨ Ίɺ ࡞Ոࣗ਎ͷੈքΛҰ؏ͯ͠௥ ٻ͢Δܳज़ɾ ඒज़ͱ͸ੑ࣭͕ҟͳͬ ͍ͯΔɻ ஄ृછ৬॑૗इॊऩनद৹ତ
  47. 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. ༗ػతͳσβΠϯ ଦ઼॑ୀॎचथ৹ତ
  48. 48 १ॖ६ ౦ ३ख़ॖউ এ४३ঙথ ਏಞؚग़জؚ॔ધஊ१ॖ६ऩन ଦ઼॑ୀॎचॊ ஄॑ऊइॊؚછ৬॑ऊइॊऩन ਘ৹౦ؚ౦भખૡऩन コントラストを組み合わせて使う

    2つ, 3つ組み合わせて使うと効果的
  49. 49 コントラストを組み合わせて使う カラー+サイズ カラー+シェイプ

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

  51. 51 ビジュアルデザインの基本 ⽂字 統⼀性 多様性 階層 反復 基本要素 ⽂法 レイアウト

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

  53. 53 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ •

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

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

    ஫ଁછ৬قᦹછ৬ऩनك ͋Ӭ ॹ२ॖথછ৬ ͋Ӭ ୻ؙ঄ছॠঀ৥ફؚ06 ৥ફؚ᪣৥ફऩन ୻ؙ঄ছॠঀഓ०ؚ06 ०३ॵॡऩन
  56. 56 書体の使い⽅ 書体の特徴と使い分け ৥ફ৬ yൿदછऊोञધஊ॑ெखथःॊ y૯઺ऋ಍ऎؚອ઺ऋ୬ः yঁॿؚঁছॖऩनभ೪๐ऋँॊ মધऩनশःધฆदഭाृघः ഀླྀ੟਱ऌ ৄলखभ౎ؚ৵औऩ१ॖ६दुഭाृघः

    ঔॽॱऩनभ઺એ਀ં਱ऌ y਴ൿदછऊोञધஊऋुधपऩॊ yघसथभஊ઺ऋऺऻ৊ग୬औ yঔॲথद৥ॊःഀ଴ ٽ ٽ ͋Ӭ ०३ॵॡ৬ ͋Ӭ
  57. 57 書体の使い⽅ 書体の特徴と使い分け 明朝体

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

  59. 59 書体の使い⽅ 書体の種類(主な欧⽂書体) ACERSaedors ABCDEFGH abcdefgh 12345 টشঐথ৬ق७জইછ৬ك ACERSaedors ABCDEFGH

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

    ৄলखभ౎ؚ৵औऩ१ॖ६दुഭाृघः y َ७জইُऋऩःછ৬ yघसथभஊ઺ऋऺऻ৊ग୬औ yਮધછ৬भ०३ॵॡ৬ध๚ञ્ඉ ٽ ٽ १থ७জইછ৬ ACESaedo ABCDEFGH abcdefgh 12345 ACESaeds ABCDEFGH abcdefgh 12345 ७জই
  61. 61 書体の使い⽅ 書体の特徴と使い分け

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

  63. 63 書体の使い⽅ 書体のバリエーション ウェイトとファミリー ધஊभ෗તधग़ঞওথॺऋ৊ग॥থ७উॺदଁ঳औोथःॊ ͋ Ӭ ͋ Ӭ ͋

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

    ०३ॵॡه 㼕㻼㼔㼛㼚㼑 䜔 㼕㻼㼍㼐 䛾 㼃㼕㻙㻲㼕 ᶵ⬟䜢 ن063 ०३ॵॡه ஊ்भ৹ତऋऔोञউটএش३ঙॼঝইज़থॺ॑ઞअध ஊ৑ऋঃছঃছचङؚ५঒ش५ऩ૴ोदഭाृघऎऩॊ
  65. 65 書体の使い⽅ 和⽂書体と欧⽂書体 ਮધછ৬भஶਯஊमؚ૑ङखुਈిऩ਀ંप੿ैोथःऩः؛ 㼀㼥㼜㼛㼓㼞㼍㼜㼔㼥 䛸䛿ᩥᏐ䛾య⿢䜢ᩚ䛘䜛 ن063 ०३ॵॡه Typography 䛸䛿ᩥᏐ䛾య⿢䜢ᩚ䛘䜛

    ن06 ०३ॵॡ +HOYHWLFDه घसथਮધછ৬ ਮધછ৬ध௎ધછ৬भੌा়ॎच
  66. 66 書体の使い⽅ 和⽂書体と欧⽂書体 ׽ࣈͻΒ͕ͳ Alphabet 1234 ׽ࣈͻΒ͕ͳ Alphabet 1234 ௎ધછ৬धੌा়ॎचॊৎमؚ१ॖ६ऋ৊गऎैःभुभ॑৭व

    ધஊभৈऔृؚ෯২૎ऋँढथःऩः ધஊभৈऔृؚ෯২૎ऋजौथःॊ ن7ZFHQ07ه ن5RERWR0HGLXPه
  67. 67 書体の使い⽅ 和⽂書体と欧⽂書体 組み合わせ例 ৻਀৓ऩੌा়ॎच୻ Mac΍Windows౳ͷσβΠϯ ن঄ছॠঀഓ०ٔ+HOYHWLFD1HXHه MacृWindowsಉभॹ२ॖথ نওॖজड़ٔ6HJRH8,ه Mac䜔Windows➼䛾䝕䝄䜲䞁

    ن063 ०३ॵॡٔ$ULDOه
  68. 68 書体の使い⽅ 和⽂書体と欧⽂書体 組み合わせ例 ੌा়ॎच୻ؙپउघघी Mac΍Windows౳ͷσβΠ ϯ ن঄ছॠঀ৥ફٔ/XFLGD%ULJKWه Mac΍Windows౳ͷσβΠ ϯ

    ن᪣৥ફٔ*DUDPRQGه Mac↳Windowsሁ↝⇭⇜⇊∙ ن+*6 ৥ફ (ٔ*HRUJLDه
  69. 69 l 書体は表⽰する環境や内容で選択する l モニタ表⽰ではゴシック体が読みやすい l 印刷物や⻑⽂は明朝体が読みやすい l プロポーショナルフォントをつかう l

    和⽂書体と欧⽂書体を適切に組み合わせる 書体の使い⽅ まとめ
  70. 70 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ •

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

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

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

    1.5em จࣈͷࠎ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτͰ౷Ұ͞Εɺ ଠ͞Λஈ֊తʹม͑ͨॻମ 2.0em จࣈͷࠎ֨ͱΤϨϝϯτ͕ ಉ͡ίϯηϓτͰ౷Ұ͞Εɺ ଠ͞Λஈ֊తʹม͑ͨॻମ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτ Ͱ౷Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମ ͷҰ܈ΛϑΝϛϦʔͱ͍͏ɻ ¼ ൵ऽॉघऍथഭापऎः ٺ૘ख௞ोघऍथःॊ ٳి২ऩ৑࿒मेाृघः ٳ૘ख૬ःथःथुेः ધஊ१ॖ६पेढथ ع ॑৯਍प৹ତखऽखॆअ
  74. 74 ⽂字を組む1 読みやすい⾏間の設定 ऱध჋धखथৄइॊभदഭाृघऎऩॊ ΑΓྑ͍σβΠϯͷͨΊͷ σβΠϯͷجૅ஌ࣝ ষ৑1.5em ΑΓྑ͍σβΠϯͷͨΊͷ σβΠϯͷجૅ஌ࣝ ষ৑1.2em

    ॱॖॺঝृৄলखमؚ૘ख൵ऽढथःथुଐः
  75. 75 ⽂字を組む1 ⽂字の間隔 ஊ৑0em จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτͰ౷Ұ ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷҰ܈ΛϑΝ ϛϦʔͱ͍͏ɻ ஊ৑0.2em จ ࣈ

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

    ॱॖॺঝृৄলखमؚ૘ख൵ीॊध ऱधऊञऽॉपऩॉഭाृघऎऩॊ
  77. 77 l ⽂字サイズのパターンを決めて使いましょう l ⾏間は1.5を基準に、⽂字サイズや内容によって調整し ましょう l ⽂字間隔の調整で読みやすさも変わる ⽂字を組む1 まとめ

  78. 78 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ •

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

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

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

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

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

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

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

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

    ߇͑ΊͰ͋Δ͜ͱɻ 6* ʹ͸ͦͷ಺༰Λ ෼͔Γ΍͘͢දࣔ͠ɺ Ϣʔβͱ΍ΓऔΓ͢ Δ ಇ ͖͕ ͋Γ·͢ J04 ޲͚ͷઃܭ J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ ˔ ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ ෼͔Γ΍͘͢දࣔ͠ɺϢʔβͱ΍ΓऔΓ ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕ ໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ ˔ ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋ ಡΈ΍͘͢ɺΞΠίϯ͸త֬໌ྎͰɺ૷ ০͸߇͑ΊͰద౓ɺ͞ΒʹͦͷػೳΛ █ ి২ऩষশदؚ ഭाृघऎऩॊ ▋ ଳ଍୎৿ऋੜइؚ ഭापऎऎऩॊ ق৯਍म  ষ  ધஊਰৣك ষশऋಢघऍॊभु৊஘पऔऐॊ
  87. 87 l 内容にあわせて、サイズやウェイトを変える l 改⾏位置によって読みにくくならないようにする l 箇条書きなど、テキストの揃えに注意する l 1⾏の⻑さは、⻑すぎず短すぎないようにする ⽂字を組む2

    まとめ
  88. 88

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

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

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

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

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

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

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

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

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

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

    • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 + + https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
  100. 100 デザインシステムを導⼊すると、 よりよいデザインが導⼊でき フロント実装において 20〜50%コスト削減できます

  101. 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 その他、事例紹介など 今後の内容
  102. MAKE DESIGN EASY SIer/情シスのデザインパートナー

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

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