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

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

Transcript

1. SIerに在籍経験のあるデザイナーが教える SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第2回 2020/09/25 エンジニアにも理解できる、 デザインの裏のロジックを明かす
2. 2 l ⾃⼰紹介 l デザインの注⽬度 l アートとデザインの違い l デザインの実例 l デザイン失敗の実例 l ロジカルなデザイン ⽬次 l ビジュアルデザインの基礎 l 基本要素 l レイアウト l ⾊ l コントラスト l ⽂字 l その他 l ⽂法
3. ⾃⼰紹介
4. 4 Fixel株式会社 池本哲也 ⾃⼰紹介 #建設, #ペット, #TV、#システム開発
5. デザインの注⽬度
6. 6 「デザイン経営」宣⾔ ︓経済産業省と特許庁が2017年に共同で⽴ち上げた「産業競争⼒とデザイン を考える研究会」による提⾔をまとめたもの。⽇本企業の経営に「デザインの視点や思考を取り⼊ れ、新たなイノベーションを⽣み出す⼒・国際競争⼒を⾼めよう」 デザインの注⽬度
7. デザインが注⽬されている
8. 業務システムは使いにくい
9. そこで今⽇のテーマにつながる SIerに在籍経験のあるデザイナーが教える エンジニアにも理解できる、 デザインの裏のロジックを明かす
10. その前に デザインはセンスと考える エンジニアさんでが多い印象なので
11. アートとデザインの違い
13. 13 アートとデザインの違い アート メッセージ性はあるが 問題解決はしていない
14. 14 アートとデザインの違い 2018年10⽉5⽇ 愛はごみ箱の中に(旧名:少⼥と⾵船) / バンクシー
15. 15 アートとデザインの違い ゲルニカ （Guernica ） /パブロ・ピカソ
16. 16 アートとデザインの違い デザイン 問題解決できている
17. 17 アートとデザインの違い Ｑドラム
18. 18 アートとデザインの違い ⽕をつけやすい。やけどしない。キャンドルホルダー
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 ロジカルなデザイン スキューモーフィズム 現実世界にあるものを模倣するアプローチ。アップルのリアルな質感、明るさ、派⼿なエフェクトを持つ 古いインターフェース
32. 32 ロジカルなデザイン フラットデザイン 要素から⽴体感が取り除かれたデザイン⼿法。すべてのオブジェクトが⼀つの平⾯上に存在しているよう に感じさせるものでドロップシャドウ、テクスチャー、グラデーションといったスタイル要素を排除した もの。
33. 33 ロジカルなデザイン マテリアルデザイン 普段馴染みのある「物体の重なり」や「影のつき⽅」などを再現することで、ユーザーが「どのように操 作すれば良いのか」が直感的に分かるようにしている。直感的に分かりやすいアニメーション（モーショ ン）で反応。
34. 34 ロジックを学べば、 誰でもデザインの及第点は 取れる
35. 35 l ビジュアルデザインの基礎 l 基本要素 l レイアウト l ⾊ l コントラスト l ⽂字 l その他 l ⽂法 今⽇のテーマ
36. ビジュアルデザインの基本を学ぶ
37. 37 ビジュアルデザインの “基本要素” と “⽂法” 統⼀性 多様性 階層 反復 調和 基本要素 ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
38. 38 ビジュアルデザインの基本 ❶ レイアウト 統⼀性 多様性 階層 反復 調和 基本要素 ⽂法 レイアウト ⾊ コントラスト ⽂字 など… など…
39. 39 デザイン（紙、ウェブ等）、建築設計、インテリア、 書籍・雑誌・新聞などにおいて、何をどこにどの ように配置（割り付け）するかということ。 また、そのような配置（割り付け）をする⾏為も意 味する。 ―― Wikipediaより レイアウトとは、
40. 40 レイアウトとは、
41. 41 レイアウトの基礎 ଦ઼भ૆૟ ଻શଦ઼भঝشঝ ਏ ಞ भ ତ ৶ १ॖ६ ତഔ ੺ம ౟ஜ ৸৬ଦ઼भঝشঝ ଳ଍भ૴ो ॢজॵॻ
42. 42 ଦ઼भ૆૟ ଻શଦ઼भঝشঝ ਏ ಞ भ ତ ৶ १ॖ६ ତഔ ੺ம ౟ஜ ৸৬ଦ઼भঝشঝ ଳ଍भ૴ो ॢজॵॻ レイアウトの基礎 これをおろそかにすると、 レイアウトをいくら調整しても良くならない
43. 43 要素の整理 何が重要か︖ ਀ંऔचञःਏಞ ਀ંऔचञःਏಞ॑জ५ॺ॔ॵউ ʻ ΋ͲΔ ϑΝΠϧ ࣸਅ ͓ؾʹೖΓ ઃఆ ϑΥϧμҰཡ υΩϡϝϯτ ࣸਅ ಈը ϛϡʔδοΫ σεΫτο ϓ μ΢ϯϩʔυ ύϒϦοΫ
44. 44 要素の整理 何が重要か︖ ʻ ΋ͲΔ ϑΝΠϧ ࣸਅ ͓ؾʹೖΓ ઃఆ ϑΥϧμҰཡ υΩϡϝϯτ ࣸਅ ಈը ϛϡʔδοΫ σεΫτο ϓ μ΢ϯϩʔυ ύϒϦοΫ ॱॖॺঝ ॼঅ।ش३ঙথ ৔ઍ ওॽগش १ঈওॽগش  ঢ়৴घॊुभ॑ॢঝشউ৲قਔ௡৓पীథك
45. 45 要素の整理 何が重要か︖ ʻ ΋ͲΔ ϑΝΠϧ ࣸਅ ͓ؾʹೖΓ ઃఆ ϑΥϧμҰཡ υΩϡϝϯτ ࣸਅ ಈը ϛϡʔδοΫ σεΫτο ϓ μ΢ϯϩʔυ ύϒϦοΫ ੎ਏ২भર੔ದਜ਼॑णऐॊ ▢ ▣ ▤ ▥ ▦
46. 46 要素の整理 何が重要か︖ ʻ ΋ͲΔ ϑΝΠϧ ࣸਅ ͓ؾʹೖΓ ઃఆ ϑΥϧμҰཡ υΩϡϝϯτ ࣸਅ ಈը ϛϡʔδοΫ σεΫτο ϓ μ΢ϯϩʔυ ύϒϦοΫ ▢ ▣ ▤ ▥ ▦ ਏಞऋତ৶दऌोयؚ ਜ਼઼ध१ॖ६ಉ॑ৠीؚঞॖ॔क़ॺदऌॊेअपऩॊ
47. 47 要素の整理で明確にすること ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲ ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ ⋊ॢঝشউनअखभঢ়৴ਙ ϖʔδλΠτϧ αϒλΠτϧ Ϧʔυจ˓˓˓˓˓˓ ˓˓˓˓˓˓ ຊจ˓˓˓˓˓˓˓˓ ˓˓˓˓ Ωϟϓγϣϯ˓˓˓˓˓ ϑολʔϑολʔ˓˓˓ ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲ ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ ⋊ॢঝشউनअखभঢ়৴ਙ ϖʔδλΠτϧ αϒλΠτϧ Ϧʔυจ˓˓˓˓˓˓ ˓˓˓˓˓˓ ຊจ˓˓˓˓˓˓˓˓ ˓˓˓˓ Ωϟϓγϣϯ˓˓˓˓˓ ϑολʔϑολʔ˓˓˓ ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲ ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ ⋊ॢঝشউनअखभঢ়৴ਙ ϖʔδλΠτϧ αϒλΠτϧ Ϧʔυจ˓˓˓˓˓˓ ˓˓˓˓˓˓ ຊจ˓˓˓˓˓˓˓˓ ˓˓˓˓ Ωϟϓγϣϯ˓˓˓˓˓ ϑολʔϑολʔ˓˓˓ ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲ ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ ⋊ॢঝشউनअखभঢ়৴ਙ ϖʔδλΠτϧ αϒλΠτϧ Ϧʔυจ˓˓˓˓˓˓ ˓˓˓˓˓˓ ຊจ˓˓˓˓˓˓˓˓ ˓˓˓˓ Ωϟϓγϣϯ˓˓˓˓˓ ϑολʔϑολʔ˓˓˓ ⋇ঢ়৴ਙपेॊਏಞभॢঝشউ৲ ⋈૚ॢঝشউभ੎ਏ২पेॊર੔ದਜ਼तऐ ⋉ॢঝشউ৔भਏಞभર੔ದਜ਼तऐ ⋊ॢঝشউनअखभঢ়৴ਙ ϖʔδλΠτϧ αϒλΠτϧ Ϧʔυจ˓˓˓˓˓˓ ˓˓˓˓˓˓ ຊจ˓˓˓˓˓˓˓˓ ˓˓˓˓ Ωϟϓγϣϯ˓˓˓˓˓ ϑολʔϑολʔ˓˓˓
48. 48 レイアウトの基礎 ଦ઼भ૆૟ ଻શଦ઼भঝشঝ ਏ ಞ भ ତ ৶ १ॖ६ ତഔ ੺ம ౟ஜ ৸৬ଦ઼भঝشঝ ଳ଍भ૴ो ॢজॵॻ
49. 49 レイアウト個別配置のルール❶ 「サイズ」 ੎ਏऩुभम੦মَপऌऎُ ؛जअदऩःुभमَेॉ৵औऎُ ؛ ࠓ͙͢ߪೖ ˇ88,800ʢ੫ผʣ ͔Βɻ ୈ 4 ੈ୅ͷIntel Core ϓϩηοαͱ ࠷େ 12 ࣌ؒ࣋ଓ͢ΔόοςϦʔΛ౥ࡌ MacBook Air ࠓ͙͢ߪೖ MacBook Air ˇ88,800ʢ੫ผʣ ͔Βɻ ୈ 4 ੈ୅ͷIntel Core ϓϩηοαͱ ࠷େ 12 ࣌ؒ࣋ଓ͢Δ όοςϦʔΛ౥ࡌ
50. 50 レイアウト 個別配置のルール❶ 「サイズ」 大
51. 51 レイアウト 個別配置のルール❷「近接」 ˘ Mac ˘ Tablet ˘ Paint ˘ Magnet ˘ Note ˘ Book ˘ Remote ˘ Pin ˘ Photo ˘ Music ˘ iPhone ˘ iMac ঢ়৴घॊਏಞम੺तऐथଦ઼घॊ؛ ࡟আ͢Δ߲໨Λબ୒ ࡟আ͢Δ߲໨Λબ୒ Mac ˘ Tablet ˘ Paint ˘ Magnet ˘ Remote ˘ Pin ˘ Photo ˘ Music ˘ 削除 削除
52. 52 レイアウト 個別配置のルール❷「近接」 グループ化
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 ԁ
54. 54 レイアウト 個別配置のルール❸「整列」
55. 55 レイアウト 個別配置のルール❹「余⽩」 ౟ஜ॑धढथ჉༽૎॑੖ैखऽखॆअ؛ ൵ ऽ ॉ घ ऍ ߋ৽ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ ࡟আ͢ΔϑΝΠϧΛબ୒͍ͯͩ͠͞ ߋ৽ υΩϡϝϯτ ࣸਅ ϜʔϏʔ ϛϡʔδοΫ μ΢ϯϩʔυ ϑΝΠϧͷ࡟আ ࡟আ͢ΔϑΝΠϧΛબ୒͍ͯͩ͠͞ ਏಞनअखऋवणऊढथؚৄपऎऎऩैऩःेअपघॊ؛
56. 56 レイアウトの基礎 ଦ઼भ૆૟ ଻શଦ઼भঝشঝ ਏ ಞ भ ତ ৶ १ॖ६ ତഔ ੺ம ౟ஜ ৸৬ଦ઼भঝشঝ ଳ଍भ૴ो ॢজॵॻ
57. 57 レイアウト 全体配置のルール❶「視線の流れ」
58. 58 レイアウト 全体配置のルール❷「グリッド」 ੏ ੏ͷಡΈ ໊ ໊ͷಡΈ ձࣾ ࣸਅΛ ௥Ճ Ωϟϯηϧ ׬ྃ ৽ن࿈བྷઌ ి࿩Λ௥Ճ ϝʔϧΛ௥Ճ ॢজॵॻ قત৕ك ॑ઞढथଦ઼घॊ A B ੏ ੏ͷಡΈ ໊ ໊ͷಡΈ ձࣾ ి࿩Λ௥Ճ ϝʔϧΛ௥Ճ ࣸਅΛ ௥Ճ Ωϟϯηϧ ׬ྃ ৽ن࿈བྷઌ
59. 59 レイアウト 全体配置のルール❷「グリッド」 ੏ ੏ͷಡΈ ໊ ໊ͷಡΈ ձࣾ ి࿩Λ௥Ճ ϝʔϧΛ௥Ճ ࣸਅΛ ௥Ճ Ωϟϯηϧ ׬ྃ ৽ن࿈བྷઌ ॢজॵॻ قત৕ك ॑ઞढथଦ઼घॊ ⑫इॊ੦૆଍प঳ฮਙऋँॉؚ ৸৬ऋऽधऽढथाइॊ ੏ ੏ͷಡΈ ໊ ໊ͷಡΈ ձࣾ ࣸਅΛ ௥Ճ Ωϟϯηϧ ׬ྃ ৽ن࿈བྷઌ ి࿩Λ௥Ճ ϝʔϧΛ௥Ճ ৖ী৓पम⑫ढथःॊऋ ऽधऽढथःऩः
60. 60 レイアウト 全体配置のルール❷「グリッド」
61. 61 l 要素を整理して、重要度を明確に l 重要度に応じて、エリアや要素のサイズを決める l 左上から右下へ流れをつくる l 個々の要素は、整列や近接で関係を分かりやすく l グリッドで画⾯全体の配置にまとまりをつける レイアウトまとめ
63. 63 l デザインと実装に必要な情報が⼀箇所に︕ l デザインの⽅針とその背景の考え⽅などの共有が できるので、関係者全員がデザインに対して共通 の認識を持つことができる l デザインシステムのメリット︓ l デザイナー︓複数のデザイナーが⼀貫性のあるデザインを効 率よく作成できる l エンジニア︓コードの再利⽤によって開発⽣産性と実装の品 質が上がる l ビジネスパーソン︓デザインを具体化して管理できる資産に する デザインシステム デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース
64. 64 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
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
66. 66 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕ デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤
67. 67 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
68. 68 導⼊すると、 よりよいデザインが導⼊され フロント実装において 20〜50％コスト削減効果がある
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 その他、事例紹介など 今後の内容
70. MAKE DESIGN EASY SIer/情シスのデザインパートナー