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

    View Slide

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

    View Slide

  3. ⾃⼰紹介

    View Slide

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

    View Slide

  5. デザインの注⽬度

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 20
    基本のキホン ⾊の分類例
    ॺشথق౦৹ك
    َ৥২ُ

    َཪ২ُ

    ੌा়ॎच


    ཪ২
    অঅॵॻॺشথ
    ছॖॺॺشথ
    ॺشথभ୻

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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









    View Slide

  27. 27
    配⾊のポイント 同じトーンの配⾊
    َॺشথُ

    َ౦ৼُ
    दଦ౦॑અइॊधेः


    ཪ২ ౦ৼ
    ৊गॺشথभଦ౦मऽधऽढथৄइॊ
    অঅॵॻॺشথ
    ছॖॺॺشথ ॲشॡॺشথ

    View Slide

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

    View Slide

  29. 29
    避けた⽅がいい配⾊
    ͓໰߹Θͤ
    ͓໰߹Θͤ

    ৥২ऋৈःৃ়पॳढ़ॳढ़घॊ
    پଓ౦؟౦ৼ୭दਫખৌपਜ਼઼घॊ౦
    ਀ં౦धూବ౦भঢ়બڭ
    َଓ౦ُद౦ऋवणऊॊ

    View Slide

  30. 30
    避けた⽅がいい配⾊
    ͓໰߹Θͤ
    ͓໰߹Θͤ

    ୆ੀऋँःऽःपऩॊ
    ਀ં౦धూବ౦भঢ়બڮ
    َ৥২ُऋ੺ः౦
    ৥২

    View Slide

  31. 31
    避けた⽅がいい配⾊

    ਀ં౦धూବ౦भঢ়બگ
    5*% भৈཪ২भ౦
    ཪ২
    ͓໰߹Θͤ
    ͓໰߹Θͤ
    ෤ृ஧ؚྏऋ௉ृऊघऍ৹ਮखपऎः ऒभेअऩ౦

    View Slide

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

    View Slide

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

    View Slide

  34. 34

    View Slide

  35. 35

    View Slide

  36. 36

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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. ༗ػతͳσβΠϯ
    ଦ઼॑ୀॎचथ৹ତ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. 72
    ⽂字を組む1 ⾏間と字間
    ষ৑धஊ৑भ੐৒पणःथ
    ஊ৑
    ஊଛॉ
    ষଛॉ ষ৑
    ೔ຊޠͷ
    จষͱ͸ɺ

    ધஊীभ
    ஊ்ऋَHPُ
    HP
    پ&66 दमؚడഡपमَষଛॉُधَஊ৑ُभக॑੐৒खथःॊ
    OLQHKHLJKW OHWWHUVSDFLQJ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    కഈऋफ़ॱफ़ॱखथ
    ଳ଍୎৿ऋ਍৒खऩः

    ऽधऽढथৄइؚ
    ഭिৎभଳ଍୎৿ऋ਍৒घॊ؛
    जभञीؚഭाृघः
    จࣈͷࠎ֨ͱΤϨϝϯτ͕ಉ͡ίϯηϓτͰ౷
    Ұ͞Εɺଠ͞Λஈ֊తʹม͑ͨॻମͷҰ܈Λ
    ϑΝϛϦʔͱ͍͏ɻ
    ಉҰϖʔδ্Ͱɺݟग़͠ɾϦʔυɾຊจɾΩϟ
    ϓγϣϯͳͲɺͦΕͧΕจষͷ໾ׂͱจࣈͷα
    ΠζʹɺԠͯ͡΢ΣΠτΛ͏·͘࢖͍෼͚Ε͹ɺ
    ϖʔδʹ౷ҰײΛ࣋ͨͤͳ͕ΒɺಡΈ΍͢͞ͱ
    ಉ࣌ʹϦζϜײͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋Ͱ
    ͖·͢ɻ

    View Slide

  82. 82
    ⽂字を組む2 改⾏位置に気をつける
    ಉҰϖʔδ্Ͱɺݟग़͠ɾϦʔυɾ
    ຊจɾΩϟϓγϣϯͳͲɺͦΕͧ
    Εจষͷ໾ׂͱจࣈͷαΠζʹɺ
    Ԡͯ͡΢ΣΠτΛ͏·͘࢖͍෼͚Ε
    ͹ɺϖʔδʹ౷ҰײΛ࣋ͨͤͳ͕
    ΒɺಡΈ΍͢͞ͱಉ࣌ʹϦζϜײ
    ͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋Ͱ͖·
    ͢ɻ
    ಉҰϖʔδ্Ͱɺ
    ݟग़͠
    ɾ
    Ϧʔυ
    ɾ
    ຊจɾ
    ΩϟϓγϣϯͳͲɺͦΕͧΕจষͷ໾
    ׂͱจࣈͷαΠζʹɺԠͯ͡΢ΣΠτ
    Λ͏·͘࢖͍෼͚Ε͹ɺϖʔδʹ౷Ұ
    ײΛ࣋ͨͤͳ͕ΒɺಡΈ΍͢͞ͱಉ࣌
    ʹϦζϜײͷ͋ΔσβΠϯʹ͢Δ͜ͱ΋
    Ͱ͖·͢ɻ

    ڭધஊٔ཭ਡऩनमؚ
    ষधखथৄैोऩः؛

    ்॑૗इॊऊؚॸय़५ॺ॑৹ତघॊ؛
    ق৿৓ऩॸय़५ॺदमँऌैीॊك
    ঳ધஊटऐभষऋदऌऩःेअपघॊ؛

    View Slide

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

    View Slide

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

    ଳ଍୎৿ऋਂ਍पऩॉഭापऎः

    ૑ேਙऋऩऐोयؚం⑫इऋഭाृघऎ૮୔
    ७থॱজথॢदؚ
    ളਯभਏಞ॑⑫इॊभम
    ংছথ५ऋधॉतैऎ୔खः

    View Slide

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

    View Slide

  86. 86
    ⽂字を組む2 1⾏の⻑さを「短くしすぎない」
    J04 ޲͚
    ͷઃܭ
    J04 ʹ͸࣍ͷํ਑
    ͕ମݱ͞Ε͍ͯ·͢ɻ
    ˔
    ߇͑ΊͰ͋Δ͜ͱɻ
    6* ʹ͸ͦͷ಺༰Λ
    ෼͔Γ΍͘͢දࣔ͠ɺ
    Ϣʔβͱ΍ΓऔΓ͢
    Δ ಇ ͖͕ ͋Γ·͢
    J04 ޲͚ͷઃܭ
    J04 ʹ͸࣍ͷํ਑͕ମݱ͞Ε͍ͯ·͢ɻ
    ˔
    ߇͑ΊͰ͋Δ͜ͱɻ6* ʹ͸ͦͷ಺༰Λ
    ෼͔Γ΍͘͢දࣔ͠ɺϢʔβͱ΍ΓऔΓ
    ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕
    ໨ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ
    ˔
    ໌ྎͰ͋Δ͜ͱɻจࣈ͸Ͳͷେ͖͞Ͱ΋
    ಡΈ΍͘͢ɺΞΠίϯ͸త֬໌ྎͰɺ૷
    ০͸߇͑ΊͰద౓ɺ͞ΒʹͦͷػೳΛ

    ి২ऩষশदؚ
    ഭाृघऎऩॊ

    ଳ଍୎৿ऋੜइؚ
    ഭापऎऎऩॊ
    ق৯਍म ষ ધஊਰৣك
    ষশऋಢघऍॊभु৊஘पऔऐॊ

    View Slide

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

    View Slide

  88. 88

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. 96

    View Slide

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

    例︓Salesforceのデザインシステム
    Salesforce
    Lightning Design System
    https://www.lightningdesignsystem.com

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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
    その他、事例紹介など
    今後の内容

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide