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

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

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/
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 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む１ ⽂字を組む２
54. 54 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む１ ⽂字を組む２
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 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む１ ⽂字を組む２
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 ⽂字の基礎 • 書体の種類 • ウェイトとファミリー • 特徴と使い⽅ 書体の使い⽅ • 内容にあわせたスタイル • 改⾏位置、⾏の⻑さ • テキストの揃え • ⽂字のサイズ • ⾏間 • ⽂字の間隔 ⽂字を組む１ ⽂字を組む２
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 まとめ
89. 89 ビジュアルデザインの基本 よいデザインに共通する⽂法 統⼀性 多様性 階層 反復 基本要素 ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
90. 90 統⼀性・⼀貫性 混沌なものを整理し、統合することは よいビジュアルデザインの第⼀歩 ユーザを迷わせない
91. 91 多様性・コントラスト 単調になりすぎないように、 適切な差異をつけ視覚的な⼿がかりをつくる ユーザの関⼼を引く
92. 92 階層 情報の重要度にあわせた 視覚的な階層構造をつくる ユーザが 理解できるようにする
93. 93 反復・リズム・パターン 視覚的な反復をつかい、 同類の情報として認識させる ユーザが学習したもの を利⽤する
94. 94 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性 多様性 階層 反復 調和 基本要素 ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
95. 95 l デザインと実装に必要な情報が⼀箇所に︕ l デザインの⽅針とその背景の考え⽅などの共有が できるので、関係者全員がデザインに対して共通 の認識を持つことができる l デザインシステムのメリット︓ l デザイナー︓ 複数のデザイナーが⼀貫性のあるデザインを効率よく作成できる l エンジニア︓ コードの再利⽤によって開発⽣産性と実装の品質が上がる l ビジネスパーソン︓ デザインを具体化して管理できる資産にする デザインシステム デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース
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/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い