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

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

Fixel Inc.
September 28, 2020

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

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

Fixel Inc.

September 28, 2020
Tweet

More Decks by Fixel Inc.

Other Decks in Design

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. 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
    アートとデザインの違い
    Qドラム

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