Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 l ⾃⼰紹介 l デザインの注⽬度 l アートとデザインの違い l デザインの実例 l デザイン失敗の実例 l ロジカルなデザイン ⽬次 l ビジュアルデザインの基礎 l 基本要素 l レイアウト l ⾊ l コントラスト l ⽂字 l その他 l ⽂法

Slide 3

Slide 3 text

⾃⼰紹介

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

デザインの注⽬度

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

業務システムは使いにくい

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

その前に デザインはセンスと考える エンジニアさんでが多い印象なので

Slide 11

Slide 11 text

アートとデザインの違い

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 アートとデザインの違い 簡単に安全に抜き差しできるようにプラグの形状がデザインされています

Slide 20

Slide 20 text

20 アートとデザインの違い 髪の⽑のつまりを⼀瞬で除去。お掃除が簡単なヘアブラシです

Slide 21

Slide 21 text

21 アートとデザインの違い 駐輪⽤設備

Slide 22

Slide 22 text

22 ▼広義のデザイン ⽬的を達成させる為の 設計をすること。 アートとデザインの違い ▼狭義のデザイン 具体的な「カタチ」を作ること。 こちらが広く認 識されている

Slide 23

Slide 23 text

23 ⽬的を理解せず デザインすると

Slide 24

Slide 24 text

24 ＜余談＞＃デザインの敗北 デザインとは

Slide 25

Slide 25 text

25 ＜余談＞＃デザインの敗北 デザインとは

Slide 26

Slide 26 text

26 ＜余談＞＃デザインの敗北 デザインとは

Slide 27

Slide 27 text

27 ＜余談＞＃デザインの敗北 デザインとは

Slide 28

Slide 28 text

28 ＜余談＞＃デザインの敗北 デザインとは

Slide 29

Slide 29 text

29 ＜余談＞＃デザインの敗北 デザインとは

Slide 30

Slide 30 text

30 ⽬的を達成させる為の 設計をすること。 ロジカルであるべきもの デザインは

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

40 レイアウトとは、

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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 ԁ

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

62

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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