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

9月28日(金)開催のウェビナー資料です。

Transcript

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

   View Slide

2. 2
   l ⾃⼰紹介
   l デザインの注⽬度
   l アートとデザインの違い
   l デザインの実例
   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. その前に
    デザインはセンスと考える
    エンジニアさんでが多い印象なので
    

    View Slide

11. アートとデザインの違い
    

    View Slide

12. View Slide

13. 13
    アートとデザインの違い
    アート
    メッセージ性はあるが
    問題解決はしていない
    

    View Slide

14. 14
    アートとデザインの違い
    2018年10⽉5⽇ 愛はごみ箱の中に(旧名:少⼥と⾵船) / バンクシー
    

    View Slide

15. 15
    アートとデザインの違い
    ゲルニカ （Guernica ） /パブロ・ピカソ
    

    View Slide

16. 16
    アートとデザインの違い
    デザイン
    問題解決できている
    

    View Slide

17. 17
    アートとデザインの違い
    Ｑドラム
    

    View Slide

18. 18
    アートとデザインの違い
    ⽕をつけやすい。やけどしない。キャンドルホルダー
    

    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
    ロジカルなデザイン
    スキューモーフィズム
    現実世界にあるものを模倣するアプローチ。アップルのリアルな質感、明るさ、派⼿なエフェクトを持つ
    古いインターフェース
    

    View Slide

32. 32
    ロジカルなデザイン
    フラットデザイン
    要素から⽴体感が取り除かれたデザイン⼿法。すべてのオブジェクトが⼀つの平⾯上に存在しているよう
    に感じさせるものでドロップシャドウ、テクスチャー、グラデーションといったスタイル要素を排除した
    もの。
    

    View Slide

33. 33
    ロジカルなデザイン
    マテリアルデザイン
    普段馴染みのある「物体の重なり」や「影のつき⽅」などを再現することで、ユーザーが「どのように操
    作すれば良いのか」が直感的に分かるようにしている。直感的に分かりやすいアニメーション（モーショ
    ン）で反応。
    

    View Slide

34. 34
    ロジックを学べば、
    誰でもデザインの及第点は
    取れる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. 39
    デザイン（紙、ウェブ等）、建築設計、インテリア、
    書籍・雑誌・新聞などにおいて、何をどこにどの
    ように配置（割り付け）するかということ。
    また、そのような配置（割り付け）をする⾏為も意
    味する。
    ―― Wikipediaより
    レイアウトとは、
    

    View Slide

40. 40
    レイアウトとは、
    

    View Slide

41. 41
    レイアウトの基礎
    ଦ઼भ૆૟ ଻શଦ઼भঝشঝ
    ਏ
    ಞ
    भ
    ତ
    ৶
    १ॖ६
    ତഔ
    ੺ம
    ౟ஜ
    ৸৬ଦ઼भঝشঝ
    ଳ଍भ૴ो
    ॢজॵॻ
    

    View Slide

42. 42
    ଦ઼भ૆૟ ଻શଦ઼भঝشঝ
    ਏ
    ಞ
    भ
    ତ
    ৶
    १ॖ६
    ତഔ
    ੺ம
    ౟ஜ
    ৸৬ଦ઼भঝشঝ
    ଳ଍भ૴ो
    ॢজॵॻ
    レイアウトの基礎
    これをおろそかにすると、
    レイアウトをいくら調整しても良くならない
    

    View Slide

43. 43
    要素の整理 何が重要か︖
    ਀ંऔचञःਏಞ
    ਀ંऔचञःਏಞ॑জ५ॺ॔ॵউ
    ʻ ΋ͲΔ
    ϑΝΠϧ
    ࣸਅ
    ͓ؾʹೖΓ
    ઃఆ
    ϑΥϧμҰཡ
    υΩϡϝϯτ
    ࣸਅ
    ಈը
    ϛϡʔδοΫ
    σεΫτο
    ϓ
    μ΢ϯϩʔυ
    ύϒϦοΫ
    

    View Slide

44. 44
    要素の整理 何が重要か︖
    ʻ ΋ͲΔ
    ϑΝΠϧ
    ࣸਅ
    ͓ؾʹೖΓ
    ઃఆ
    ϑΥϧμҰཡ
    υΩϡϝϯτ
    ࣸਅ
    ಈը
    ϛϡʔδοΫ
    σεΫτο
    ϓ
    μ΢ϯϩʔυ
    ύϒϦοΫ
    ॱॖॺঝ
    ॼঅ।ش३ঙথ
    ৔ઍ
    ওॽগش
    १ঈওॽগش
    ঢ়৴घॊुभ॑ॢঝشউ৲قਔ௡৓पীథك
    

    View Slide

45. 45
    要素の整理 何が重要か︖
    ʻ ΋ͲΔ
    ϑΝΠϧ
    ࣸਅ
    ͓ؾʹೖΓ
    ઃఆ
    ϑΥϧμҰཡ
    υΩϡϝϯτ
    ࣸਅ
    ಈը
    ϛϡʔδοΫ
    σεΫτο
    ϓ
    μ΢ϯϩʔυ
    ύϒϦοΫ
    ੎ਏ২भર੔ದਜ਼॑णऐॊ
    ▢ ▣
    ▤
    ▥
    ▦
    

    View Slide

46. 46
    要素の整理 何が重要か︖
    ʻ ΋ͲΔ
    ϑΝΠϧ
    ࣸਅ
    ͓ؾʹೖΓ
    ઃఆ
    ϑΥϧμҰཡ
    υΩϡϝϯτ
    ࣸਅ
    ಈը
    ϛϡʔδοΫ
    σεΫτο
    ϓ
    μ΢ϯϩʔυ
    ύϒϦοΫ
    ▢
    ▣
    ▤
    ▥
    ▦
    ਏಞऋତ৶दऌोयؚ
    ਜ਼઼ध१ॖ६ಉ॑ৠीؚঞॖ॔क़ॺदऌॊेअपऩॊ
    

    View Slide

47. 47
    要素の整理で明確にすること
    ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲
    ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ
    ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ
    ⋊ॢঝشউनअखभঢ়৴ਙ
    ϖʔδλΠτϧ
    αϒλΠτϧ
    Ϧʔυจ˓˓˓˓˓˓
    ˓˓˓˓˓˓
    ຊจ˓˓˓˓˓˓˓˓
    ˓˓˓˓
    Ωϟϓγϣϯ˓˓˓˓˓
    ϑολʔϑολʔ˓˓˓
    ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲
    ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ
    ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ
    ⋊ॢঝشউनअखभঢ়৴ਙ
    ϖʔδλΠτϧ
    αϒλΠτϧ
    Ϧʔυจ˓˓˓˓˓˓
    ˓˓˓˓˓˓
    ຊจ˓˓˓˓˓˓˓˓
    ˓˓˓˓
    Ωϟϓγϣϯ˓˓˓˓˓
    ϑολʔϑολʔ˓˓˓
    ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲
    ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ
    ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ
    ⋊ॢঝشউनअखभঢ়৴ਙ
    ϖʔδλΠτϧ
    αϒλΠτϧ
    Ϧʔυจ˓˓˓˓˓˓
    ˓˓˓˓˓˓
    ຊจ˓˓˓˓˓˓˓˓
    ˓˓˓˓
    Ωϟϓγϣϯ˓˓˓˓˓
    ϑολʔϑολʔ˓˓˓
    ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲
    ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ
    ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ
    ⋊ॢঝشউनअखभঢ়৴ਙ
    ϖʔδλΠτϧ
    αϒλΠτϧ
    Ϧʔυจ˓˓˓˓˓˓
    ˓˓˓˓˓˓
    ຊจ˓˓˓˓˓˓˓˓
    ˓˓˓˓
    Ωϟϓγϣϯ˓˓˓˓˓
    ϑολʔϑολʔ˓˓˓
    ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲
    ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ
    ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ
    ⋊ॢঝشউनअखभঢ়৴ਙ
    ϖʔδλΠτϧ
    αϒλΠτϧ
    Ϧʔυจ˓˓˓˓˓˓
    ˓˓˓˓˓˓
    ຊจ˓˓˓˓˓˓˓˓
    ˓˓˓˓
    Ωϟϓγϣϯ˓˓˓˓˓
    ϑολʔϑολʔ˓˓˓
    

    View Slide

48. 48
    レイアウトの基礎
    ଦ઼भ૆૟ ଻શଦ઼भঝشঝ
    ਏ
    ಞ
    भ
    ତ
    ৶
    १ॖ६
    ତഔ
    ੺ம
    ౟ஜ
    ৸৬ଦ઼भঝشঝ
    ଳ଍भ૴ो
    ॢজॵॻ
    

    View Slide

49. 49
    レイアウト個別配置のルール❶ 「サイズ」
    ੎ਏऩुभम੦মَপऌऎُ
    ؛जअदऩःुभमَेॉ৵औऎُ
    ؛
    ࠓ͙͢ߪೖ
    ˇ88,800ʢ੫ผʣ
    ͔Βɻ
    ୈ 4 ੈ୅ͷIntel Core ϓϩηοαͱ
    ࠷େ 12 ࣌ؒ࣋ଓ͢ΔόοςϦʔΛ౥ࡌ
    MacBook Air
    ࠓ͙͢ߪೖ
    MacBook Air
    ˇ88,800ʢ੫ผʣ
    ͔Βɻ
    ୈ 4 ੈ୅ͷIntel Core ϓϩηοαͱ
    ࠷େ 12 ࣌ؒ࣋ଓ͢Δ
    όοςϦʔΛ౥ࡌ
    

    View Slide

50. 50
    レイアウト 個別配置のルール❶ 「サイズ」
    大
    

    View Slide

51. 51
    レイアウト 個別配置のルール❷「近接」
    ˘ Mac ˘ Tablet
    ˘ Paint ˘ Magnet
    ˘ Note ˘ Book
    ˘ Remote ˘ Pin
    ˘ Photo ˘ Music
    ˘ iPhone ˘ iMac
    ঢ়৴घॊਏಞम੺तऐथଦ઼घॊ؛
    ࡟আ͢Δ߲໨Λબ୒
    ࡟আ͢Δ߲໨Λબ୒
    Mac
    ˘
    Tablet
    ˘
    Paint
    ˘
    Magnet
    ˘
    Remote
    ˘
    Pin
    ˘
    Photo
    ˘
    Music
    ˘
    削除 削除
    

    View Slide

52. 52
    レイアウト 個別配置のルール❷「近接」
    グループ化
    

    View Slide

53. 53
    レイアウト 個別配置のルール❸「整列」
    ଦ઼॑⑫इॊऒधदؚਏಞऋ঳৬৲औोঢ়৴खथःॊेअपाइॊ
    ૬৑৓प௞ोथःथुؚৄइऩः଍ऋणऩऋॉ॑੿ढथऎोॊ
    ࢓༷ͷൺֱ
    iMac 3.5GHz 131,800 ԁ
    MacBook Pro 2.9GHz 112,800 ԁ
    MacBook Air 1.7GHz 88,800 ԁ
    Mac Mini 2.6GHz 56,800 ԁ
    Mac Pro 3.7GHz 303,800 ԁ
    ࢓༷ͷൺֱ
    iMacɹ3.5GHzɹ131,800 ԁ
    MacBook Proɹ2.9GHzɹ112,800 ԁ
    MacBook Airɹ1.7GHzɹ88,800 ԁ
    Mac Miniɹ2.6GHzɹ56,800 ԁ
    Mac Proɹ3.7GHzɹ303,800 ԁ
    

    View Slide

54. 54
    レイアウト 個別配置のルール❸「整列」
    

    View Slide

55. 55
    レイアウト 個別配置のルール❹「余⽩」
    ౟ஜ॑धढथ჉༽૎॑੖ैखऽखॆअ؛
    ൵
    ऽ
    ॉ
    घ
    ऍ
    ߋ৽
    υΩϡϝϯτ
    ࣸਅ
    ϜʔϏʔ
    ϛϡʔδοΫ
    μ΢ϯϩʔυ
    ϑΝΠϧͷ࡟আ
    ࡟আ͢ΔϑΝΠϧΛબ୒͍ͯͩ͠͞
    ߋ৽
    υΩϡϝϯτ
    ࣸਅ
    ϜʔϏʔ
    ϛϡʔδοΫ
    μ΢ϯϩʔυ
    ϑΝΠϧͷ࡟আ
    ࡟আ͢ΔϑΝΠϧΛબ୒͍ͯͩ͠͞
    ਏಞनअखऋवणऊढथؚৄपऎऎऩैऩःेअपघॊ؛
    

    View Slide

56. 56
    レイアウトの基礎
    ଦ઼भ૆૟ ଻શଦ઼भঝشঝ
    ਏ
    ಞ
    भ
    ତ
    ৶
    १ॖ६
    ତഔ
    ੺ம
    ౟ஜ
    ৸৬ଦ઼भঝشঝ
    ଳ଍भ૴ो
    ॢজॵॻ
    

    View Slide

57. 57
    レイアウト 全体配置のルール❶「視線の流れ」
    

    View Slide

58. 58
    レイアウト 全体配置のルール❷「グリッド」
    ੏
    ੏ͷಡΈ
    ໊
    ໊ͷಡΈ
    ձࣾ
    ࣸਅΛ
    ௥Ճ
    Ωϟϯηϧ ׬ྃ
    ৽ن࿈བྷઌ
    ి࿩Λ௥Ճ
    ϝʔϧΛ௥Ճ
    ॢজॵॻ
    قત৕ك
    ॑ઞढथଦ઼घॊ
    A B
    ੏
    ੏ͷಡΈ
    ໊
    ໊ͷಡΈ
    ձࣾ
    ి࿩Λ௥Ճ
    ϝʔϧΛ௥Ճ
    ࣸਅΛ
    ௥Ճ
    Ωϟϯηϧ ׬ྃ
    ৽ن࿈བྷઌ
    

    View Slide

59. 59
    レイアウト 全体配置のルール❷「グリッド」
    ੏
    ੏ͷಡΈ
    ໊
    ໊ͷಡΈ
    ձࣾ
    ి࿩Λ௥Ճ
    ϝʔϧΛ௥Ճ
    ࣸਅΛ
    ௥Ճ
    Ωϟϯηϧ ׬ྃ
    ৽ن࿈བྷઌ
    ॢজॵॻ
    قત৕ك
    ॑ઞढथଦ઼घॊ
    ⑫इॊ੦૆଍प঳ฮਙऋँॉؚ
    ৸৬ऋऽधऽढथाइॊ
    ੏
    ੏ͷಡΈ
    ໊
    ໊ͷಡΈ
    ձࣾ
    ࣸਅΛ
    ௥Ճ
    Ωϟϯηϧ ׬ྃ
    ৽ن࿈བྷઌ
    ి࿩Λ௥Ճ
    ϝʔϧΛ௥Ճ
    ৖ী৓पम⑫ढथःॊऋ
    ऽधऽढथःऩः
    

    View Slide

60. 60
    レイアウト 全体配置のルール❷「グリッド」
    

    View Slide

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

    View Slide

62. View Slide

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

    View Slide

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

    View Slide

65. 65
    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

66. 66
    デザインシステムを媒体にしたコラボレーション
    デザイン
    システム
    ビジネス
    パーソン
    エンジニア
    デザイナー
    機能追加・改善の際に、
    判断の基準になる︕
    デザイン資産の
    価値を定量化できる
    再利⽤できる部品が
    揃っている︕
    企業活動におけるデザイン活⽤の基盤
    

    View Slide

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

    View Slide

68. 68
    導⼊すると、
    よりよいデザインが導⼊され
    フロント実装において
    20〜50％コスト削減効果がある
    

    View Slide

69. 69
    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

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

    View Slide