Pro Yearly is on sale from $80 to $50! »

ITにおけるデザイン活用の課題と対応策ーデザインシステムでできること

37228dc025342eeadeb18bf1c2976a7a?s=47 Fixel Inc.
April 17, 2020

 ITにおけるデザイン活用の課題と対応策ーデザインシステムでできること

デザインシステム活用方法のご説明

37228dc025342eeadeb18bf1c2976a7a?s=128

Fixel Inc.

April 17, 2020
Tweet

Transcript

  1. Roy Kim ITにおけるデザイン活⽤の課題と対応策 ­デザインシステムでできる事­ Session 01

  2. Fixel Inc. All rights reserved. プロフィール l FixelのUXデザイナー兼代表取締役 l デロイト、アビーム、BEA、オラクル、EMCなどでITコンサルタントとアーキ

    テクトを経験 l B2B、B2EシステムのUX/UIデザインを⾏う l 趣味でMac/iOSのアプリ開発 2 ۚ ੒఩ 3PZ,JN
  3. UXデザインの事例紹介

  4. Fixel Inc. All rights reserved. UXの改善で 新規契約数を増やす︕ ヒューマンテクノロジーズ Case 01

    4
  5. Fixel Inc. All rights reserved. アウトライン お客様 • ヒューマンテクノロジーズ 企業向けクラウド勤怠管理サービス「KING

    OF TIME」を提供。 国内トップシェアで歴史があるサービス。 依頼内容 • 競合サービスに勝てるUXに変え、新規利⽤企業を増やしたい。 背景 ① 競合サービスが増え、無償トライアル期間で⽐較されると採択さ れにくくなっている。 ② 多機能なため始めて使う際の分かりやすさ、操作性などUX⾯での 改善を必要と考えていた。 5
  6. Fixel Inc. All rights reserved. 実施内容 プロセス・期間 6 [フェーズ 0]

    パートナー選定 [フェーズ 1] UI改善プロジェクト [フェーズ 2] UX改善プロジェクト 約2カ⽉ 約9カ⽉ 約3カ⽉ 1stリリース 2ndリリース
  7. Fixel Inc. All rights reserved. 実施内容 プロセス・期間 7 [フェーズ 0]

    パートナー選定 [フェーズ 1] UI改善プロジェクト [フェーズ 2] UX改善プロジェクト 約2カ⽉ 約9カ⽉ 約3カ⽉ ① 提案コンペ(6社) UX改善のための計画と改善案の提案コンペ ② トライアル プロジェクト(3社) 既存サービスの改善を短期ワークショップ形式で⾏ い、プロトタイピングと簡易ユーザーテストまで実 施。その後の改善の⽅針と計画を提案しパートナー に選定された。 実施内容 1stリリース 2ndリリース
  8. Fixel Inc. All rights reserved. 実施内容 プロセス・期間 8 [フェーズ 0]

    パートナー選定 [フェーズ 1] UI改善プロジェクト [フェーズ 2] UX改善プロジェクト 約2カ⽉ 約9カ⽉ 約3カ⽉ ① 現状分析 画⾯遷移・レイアウトやUI要素の分析、競合⽐較 ② UI改善案検討 分析を踏まえUI部品/画⾯レイアウトなどを検討 ③ 評価検証 機能⾯、実装⾯などから検証と調整 ④ 実装時の技術サポート 新UIの実装⽅法に関する技術⽀援 ⑤ リリース後評価 リリース後の評価、次フェーズ計画 実施内容 1stリリース 2ndリリース
  9. Fixel Inc. All rights reserved. 実施内容 元の画⾯ 9

  10. Fixel Inc. All rights reserved. 実施内容 フェーズ1の成果物など • サービスのメタファー(イ 10

    UI改善後の画⾯・ビジュアルデザイン
  11. Fixel Inc. All rights reserved. 実施内容 プロセス・期間 11 [フェーズ 0]

    パートナー選定 [フェーズ 1] UI改善プロジェクト [フェーズ 2] UX改善プロジェクト 約2カ⽉ 約9カ⽉ 約3カ⽉ ① 既存ユーザーへの調査 インタビュー調査、課題の抽出 ② UX改善案検討 UX/UI改善⽅針、ワイヤーフレーム検討、 ビジュアルデザイン調整、プロトタイピング ③ 評価検証 ユーザーテストを⾏い評価と改善 ④ 実装時の技術サポート 新UIの実装⽅法に関する技術⽀援 実施内容 2ndリリース
  12. Fixel Inc. All rights reserved. 実施内容 12 ナビゲーションの改善 テーブル表⽰の改善 配⾊の改善

    その他・各画⾯の改善
  13. Fixel Inc. All rights reserved. UXデザインの効果 13 ビジネスの課題を意識したUXデザインは有効 ゴールが明確であれば、戦略も⽴てやすい しかし、既存ユーザーからは慣れていたUIが変わることに

    対する反対の声があった Step by Stepのアプローチが必要 Done Is Better Than Perfect! v 新規契約獲得数が70%アップ︕ ※前年⽐
  14. Fixel Inc. All rights reserved. デザインだけの改善で 海外案件獲得 ⽇本発グローバル企業の情シス Case 02

    14
  15. Fixel Inc. All rights reserved. アウトライン お客様 • 世界に散在する400社の系列社を持つ⽇本企業 •

    ⽇本をベースに多国・多⽂化圏に業務⽤システムを提供する情シス部 ⾨ 依頼内容 • 2週間の短期間で既存ワークフローシステムのデザイン改善 背景 ① 既存ワークフローシステムをアメリカの関連会社に提案したけど、 使い勝⼿の悪さや分かりにくさを理由に断られる ② 4週間後に再度提案のチャンスがあるので、そこまでできる改善を急 いで実施したい ⇒ デザインに使えるのは2週間︕ 15
  16. Fixel Inc. All rights reserved. 実施内容 プロセス・期間 実施内容 • 短期間で既存システムをUXデザイナーに説明し、習得させる

    • 営業、プロダクトオーナー、エンジニア、UXデザイナーがブレインス トーミングに参加。その結果を受けてUIデザイナーがビジュアルデザ イン作成 • PC版からスマホ版に順に対応 16 実装 1週⽬(PC版) 2週⽬(スマホ版) 既存システム理解 (3時間) UIデザイン作成 (3⽇) ブレインストーミング (4時間) 既存システム理解 (1時間) UIデザイン作成 (2⽇) ブレインストーミング (3時間)
  17. Fixel Inc. All rights reserved. 実施内容 元の画⾯ 17

  18. Fixel Inc. All rights reserved. 実施内容 ブレインストーミング資料 18

  19. Fixel Inc. All rights reserved. 実施内容 改善後の画⾯デザイン 19

  20. Fixel Inc. All rights reserved. 実施内容 Before / After 20

  21. Fixel Inc. All rights reserved. UXデザインの効果 21 デザインスプリントの⼿法を変更して適⽤し、 「短納期&サーバー側は変更不可」という制約の下でも ⼤幅なデザイン改善ができた

    結果的にアメリカの案件が取れた 社内で「なぜそれができたか︖」をレポートすることになり、 UXデザインへの興味が⾼まった デザインの評判がよく、製品全体に同デザインを適⽤するこ とになった
  22. なぜ今、デザインなのか︖

  23. Fixel Inc. All rights reserved. なぜ今UXデザイン︖ 23 新しい 他にない 多機能

    ⾼機能 ⾼級感/信頼性 ↕ 安い 付加価値 ⼯業商品のライフサイクル
  24. Fixel Inc. All rights reserved. なぜ今UXデザイン︖ 24 新しい 他にない 多機能

    ⾼機能 ⾼級感/信頼性 ↕ 安い 付加価値 ⼯業商品のライフサイクル • 多くの商品がこの段階まで進んでいる • 付加価値の提供のため、視点が商品から ⼈に移る AI/IoT Cloud Computing SNS, Game, その他のサービス ERP等パッケージ App
  25. Fixel Inc. All rights reserved. UXデザイン︓Why? l ⽕付け役 • アップルのiPhone

    • Mac 25 (私が考える) ⽕付け役の⼈と製品
  26. Fixel Inc. All rights reserved. 商品の価値基準が変わった 26 商品スペック 使⽤者経験 <

  27. Fixel Inc. All rights reserved. 新しい価値提供⼿段としてのUXデザイン 27 「UXデザインがビジネスの 成敗の (重要な)

    要因」
  28. Fixel Inc. All rights reserved. 「UXの要件」を意識しよう l 機能・⾮機能要件だけでは対 応できない課題がある l

    システムの要件定義の際から UXの要件を意識して定義する ようにする 28 UXの要件 機能要件 ⾮機能要件 システム・サービスの要件
  29. Fixel Inc. All rights reserved. UXデザインの業務システムへの期待効果 ü 作業員の負荷を下げる ü 業務ミスを防ぐ

    ü 作業効率を上げる ü セキュリティーのリスクを下げる ü 対顧客サービスの質が向上する ü 企業のコストを低減する ü システム実装・改修費⽤を下げる 29
  30. Fixel Inc. All rights reserved. 業務系のシステムこそ、最初の効果が出やすい︕ 30 品質 時間 初回UXデザインプロジェクト

    の効果が最も⼤きい フェーズ#1 フェーズ#2 User eXperience
  31. デザイン導⼊の課題と 今までの(Fixelの)対応策

  32. Fixel Inc. All rights reserved. ⼤⼿SIer、⼤企業のIT部⾨の現状 32 2011年 2018年 既存製品のデザイン

    を改善してほしい 新規サービスを ⼀緒に考えてほしい ⾃社にUXデザインの⼈材を育て たい・部署を作りたい UXデザインの部署もできたけど、ど うやって広げればいいか︖ 今ここ︕
  33. Fixel Inc. All rights reserved. ITにおけるデザイン導⼊の⽅法 l 外部のデザイナー・デザイン会社に作業を依頼する • 既存ITプロセスのどの段階でデザインを依頼するか︖

    • どのような成果物か期待できるか︖ • 該当プロジェクトにおいてデザインはどれくらいの価値があるか︖ ü どこまで投資すべきか︖ ü 価値をどうやって測るか︖ l ⾃社内にデザインチームを新設する • チームメンバーをどう構成するか︖どう育てるか︖ • デザインチームとITチームとのコラボレーションはどうするか︖ • どうやって組織にデザインを浸透させるか︖ • デザインチームの価値をどうやって⾒せるか︖ 33
  34. Fixel Inc. All rights reserved. デザイン導⼊に対して今までやって来たこと 1. デザインに求める価値とその測定⽅法を明確にする 2. デザインを意識した新しいITプロセスを定義して実践する

    3. デザインの成果物をITに合わせて再定義する 4. エンジニアにUXデザインの知識を教える 34
  35. Fixel Inc. All rights reserved. 1. デザインに求める価値とその測定⽅法の定義 l 各プロジェクトでUXデザインに求めるものを明確にする •

    考慮すべきUXの特徴 • 達成すべきUXのレベル l KGI/KLI明確に定義し、それのビジネス価値を計算してデザイ ンへの投資額を決める ⇒ ROIの算出 35 UX Honey Comb 対象システムの特徴 を考慮して定義する 多くの業務システム が求めるレベル
  36. Fixel Inc. All rights reserved. 例︓先ほどの事例を振り返ると、 l Case 1 •

    フェーズ1 ü KGIは新規契約数 ü R: 新規契約1件の平均予想利益 x 契約増加数 ü I︓UXデザインとフロント実装に投資した⾦額 • フェーズ2 ü KGIは既存顧客アンケートにおける満⾜度 ü R: 既存契約者の継続によって予想される利益 ü I︓UXデザインとフロント実装に投資した⾦額 l Case 2 • KGI: 案件獲得 • R: 新規案件獲得時の利益 • I︓UXデザインとフロント実装に投資した⾦額 36
  37. Fixel Inc. All rights reserved. 反復 2. デザインがマージされたプロセスの定義 37 コンテキスト分析

    ジャーニーマップ 作成 メンタルモデル 分析 プロトタイプ作成 ユーザーテスト 評価と改善 ゴールと範囲の 設定 分析フェーズ 実証フェーズ l プロジェクトのゴール・要件に応じて上記のプロセスを適切に調整 評価基準の検討 計画フェーズ ペルソナ定義 UXデザインの⼀般的プロセス
  38. Fixel Inc. All rights reserved. UXデザイン × ウォータフォールプロセス l ITプロセスの「要件定義」及び「基本設計」フェーズの⼀部を

    UXデザインのタスクでリプレースできる 38 要件定義 基本設計 詳細設計 実装 テスト コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 プロトタイプ作成 ユーザーテスト 評価と改善 ゴールと範囲の 設定 分析フェーズ 実証フェーズ 評価基準の検討 計画フェーズ ペルソナ定義
  39. Fixel Inc. All rights reserved. UXデザイン × アジャイルプロセス l タスクの⼀部としてデザインを受け⼊れ、常に次のイテレーション向けのデ

    ザインを⾏う l 各リリースにユーザーテストができるコードを追加し、常いユーザーテスト ができている状態にする l 各イテレーションから得られた情報に基づき、次回のデザイン作業に反映し つつ、既存機能の改善を⾏う 39 デザイン 実装 デザイン 基盤作成 実装 デザイン イテレーション イテレーション イテレーション リリース リリース テ ス ト テ ス ト デ ザ イ ン デ ザ イ ン コンテキスト 分析 ジャーニー マップ 作成 メンタルモデ ル 分析 プロトタイプ 作成 ユーザーテス ト 評価と改善 ゴールと範 囲の設定 分析フェーズ 実証フェーズ 評価基準の 検討 計画フェーズ ペルソナ定義 プラニングフェーズ 実装フェーズ
  40. Fixel Inc. All rights reserved. 3. デザインの成果物をITに合わせて再定義する l ITが必要とする資料とUXデザインの成果物の精度は異なる •

    ⽬的が異なるので、当たり前 l UXデザインの成果物から情報の損失なくITに必要なインプッ トとするのは難しい l プロジェクト単位(企業単位)でデザインとITの接点としての ⽂書の体系と内容の調整が必要 40 IT Project UXD ⽤語と成果物を合わせる
  41. Fixel Inc. All rights reserved. 3. デザインの成果物をITに合わせて再定義する l ITが必要とする資料とUXデザインの成果物の精度は異なる •

    ⽬的が異なるので、当たり前 l UXデザインの成果物から情報の損失なくITに必要なインプッ トとするのは難しい l プロジェクト単位(企業単位)でデザインとITの接点としての ⽂書の体系と内容の調整が必要 41 IT Project UXD ⽤語と成果物を合わせる それでも⽋落する情報があるので、 UXデザインのプロセスにエンジニ ア側のリーダーを参加させ、デザイ ンにおけるコンテキスト共有を⾏う
  42. Fixel Inc. All rights reserved. 4. エンジニアにUXデザインの知識を教える l UXデザインは論理的な思考と⼈に 対する理解があれば誰でもできる

    • 美的センスが必要な部分はごく⼀部で、それ は専⾨家(ビジュアルデザイナー)に任せれ ばいい • ユーザーに対する理解・配慮がもっと⼤事 l UIデザインの裏のロジックも 学習できる • 作る必要はない。評価できればいい • 参考︓http://www.slideshare.net/ksc1213/ui-45852142 l 最初はUXデザイナーと⼀緒に経験を 積み、⾃⽴して⾏くように誘導する 42 論理的思考が必要な部分 美的センスやツールのスキルが必要な部分
  43. Fixel Inc. All rights reserved. 先述した対応策に対する振り返り l 個別プロジェクトにおける効果は確認済み • 全社に広げるのは結構⼤変

    l プロセスを変えることには努⼒と費⽤が必要 • ベストプラクティスがまだ不⾜している l 専⾨家のサポートが必要 l デザインの学習には時間とコストがかかる 43
  44. Fixel Inc. All rights reserved. 先述した対応策に対する振り返り l 個別プロジェクトにおける効果は確認済み • 全社に広げるのは結構⼤変

    l プロセスを変えることには努⼒と費⽤が必要 • ベストプラクティスがまだ不⾜している l 専⾨家のサポートが必要 l デザインの学習には時間とコストがかかる 44 効果はあるものの、それなりに⼤変︕
  45. さらなる課題

  46. Fixel Inc. All rights reserved. 時間の経過に伴うデザイン品質の劣化 l 商品のライフサイクルとデザイン品質の変化 46 品質

    時間 初回リリース 2回⽬リリース 3回⽬リリース
  47. Fixel Inc. All rights reserved. 時間の経過に伴うデザイン品質の劣化 l 商品のライフサイクルとデザイン品質の変化 47 品質

    時間 初回リリース 2回⽬リリース 3回⽬リリース その場あたりの 改修・機能追加 初回デザインとは異なるデザイン ポリシーによってデザインされる もう最初のデザインの思想 なんて誰も知らない その場あたりの 改修・機能追加 カオス︕
  48. Fixel Inc. All rights reserved. 組織の壁によるデザイン品質の差 l システム単位でデザインの品質がバラバラ 48 品質

    システムA システムB システムC システムD
  49. Fixel Inc. All rights reserved. ブランド構築に失敗 l サービス単位に異なるテイストのデザイン 49 品質

    サービスA サービスB サービスC サービスD
  50. Fixel Inc. All rights reserved. ブランド構築に失敗 l サービス単位に異なるテイストのデザイン 50 品質

    サービスA サービスB サービスC サービスD UX品質の低下 ブランド構築失敗
  51. Fixel Inc. All rights reserved. デザイン導⼊後の課題 l 作ったデザインの品質をどうやって保つか︖ • ⼀つの製品の時間の経過によるデザインの⼀貫性を維持

    • 複数のシステム・サービス間のデザインの⼀貫性を維持 l 「デザインを作る」だけではなく、「共有する」、「管理す る」、「再利⽤する」ことへの考慮が必要 l デザインの深い知識がないエンジニアがデザインの品質を維持 しながら効率よく実装する⼿法が必要 51
  52. より根本的な質問

  53. Fixel Inc. All rights reserved. こうはなれないか︖ l 企業からの理想は、デザインも商品扱いできればベストではな いか︖ 53

    「今度作る新サービスに新しいデザインが必要ですね」 「あ、そう︖今あるものではダメなん︖」 「今のデザインの在庫ではちょっと、要件に合っているのがないです」 「じゃあ、1個買って」 「分かりました。今週中に買って適⽤します。」 「管理台帳にも記録して、他に必要な⼈達に共有してね」
  54. Fixel Inc. All rights reserved. こうはなれないか︖ l 企業からの理想は、デザインも商品扱いできればベストではな いか︖ 54

    「今度作る新サービスに新しいデザインが必要ですね」 「あ、そう︖今あるものではダメなん︖」 「今のデザインの在庫ではちょっと、要件に合っているのがないです」 「じゃあ、1個買って」 「分かりました。今週中に買って適⽤します。」 「管理台帳にも記録して、必要な⼈達に共有してね」 なぜこうならないか︖
  55. Fixel Inc. All rights reserved. なぜデザインは難しいか︖ l デザインはまだまだ抽象度が⾼い l 「創造性の世界」との認識が強く属⼈性が⾼い

    • プロセスや根底にある思いが明⽂化されることが少ない • 共有できない。つまり、引き継げない、再現できない l ITとのコラボ期間がまだ短い 55 アート> デザイン > コード > 商品
  56. Fixel Inc. All rights reserved. 歴史は繰り返す ITも⼀時期は芸術の領域に近かった • 「コードは芸術か否か︖」と旺盛に議論していた時代もあった ITは規模が⼤きくなりながら建築から多くのことを学んだ

    • ウォーターフォルプロセス • アーキテクチャー、モジュール、コンポーネントの再利⽤等、多くの概念・⽤ 語を建築から学んで理論武装できた • 個⼈のコードからみんなのコードへと、認識が変わって来た デザインは今ITから「猛烈に」学んでいる • シリコンバレーではITとデザインの⼤融合が発⽣中 ü デザインもコーディングもできる⼈の急増 • デザインがITに似て来ている • デザインがより具体的でかつ管理可能なものに変わりつつある 56
  57. Fixel Inc. All rights reserved. なぜデザインは難しいか︖ l デザインはまだまだ抽象度が⾼い ➡ 具体化する

    l 「創造性の世界」との認識が強く属⼈性が⾼い • プロセスや根底にある思いが明⽂化されることが少ない ➡ 明⽂ 化する • 共有できない。つまり、引き継げない、再現できない ➡ 仕組み を作る l ITとのコラボ期間がまだ短い ➡ 必要なツールを揃える 57 アート> デザイン > コード > 商品 [今起きていること] デザインの抽象度を 落とし⾒える化する︕
  58. Fixel Inc. All rights reserved. 例︓“Atomic Design” という⼿法の登場 UIデザインをページ単位ではなく 「コンポーネント単位」でとらえデザインする手法

    58 UI要素を「原⼦・分⼦・有機体…」と いった物理世界を構成する仕組みにな らって構造化・部品化している。 それらを階層的に組み合わせることで、 ⼤きなコンポーネントやページを作成 する考え⽅。 ※Brad Frost⽒が提唱している考え⽅
  59. Fixel Inc. All rights reserved. Atomic Designの詳細 l ①原⼦ ②分⼦

    ③有機体 ④テンプレート ⑤ページ の5段階で構成。 l 原⼦ ︓ 最も抽象度が高いUI部品。様々な画⾯で再利用される。 l [原⼦ ➡ 分⼦ ➡ 有機体] の順でより具体的なUIコンポーネントになる。 l テンプレート ︓ 複数画⾯へ展開するためのページレイアウトの枠組 み。 l ページ ︓ 具体的な内容(テキストや画像、アイコンなど)が⼊った個別画⾯。 59
  60. Fixel Inc. All rights reserved. Atomic Designを使ったデザイン ü Atomic Designの構造にならい、シンボルを⼊れ⼦構造で作る。

    ü デザインの構造に合わせて、コンポーネントも実装する。 60 Atomic Design Sketch の区分 対象要素 サンプル - Lv0 部品に紐づく属性など ※Sketchでの作業上定義する 原子 Atoms Lv1 これ以上分解できない 最⼩単位の部品 分子 Molecules Lv2 原⼦を組み合わせて作る 様々な画⾯やコンテキストで利⽤ できる汎⽤性のある部品 有機体 Organisms Lv3 複数の原⼦・分⼦で構成 ⽐較的複雑な部品  نةٝ         5JUMF
  61. Fixel Inc. All rights reserved. Atomic Designを⽤いるメリット ü Atomic Designの分割⽅法でUIコンポーネントを設計することで、デザイン

    上の構造と、コード上の構造を共通化できる。それにより効率的にデザイン システム化ができる。 ü 最⼩単位のコンポーネントが独⽴しているため、部分的な修正がどう全体に 影響するかわかりやすく、全体の品質を崩さずデザインの改変が可能になる。 61
  62. Fixel Inc. All rights reserved. 関連書籍の出版 62

  63. Fixel Inc. All rights reserved. ITとデザインのエコー環境⽐較 区分 IT デザイン 制作ツール

    IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど Adobe Cloud︖ プロセス • ウォーターフォール、ア ジャイル等。 • 実績・情報多数 • UXデザインとUIデザイン を網羅したプロセスの不在 • 情報不⾜ 関連情報 ⽂書体系、管理体制が整って いる。資産管理ツールがある 共有⽂化 OSS Dribble︖(作品の公開であり、知識 の共有ではない) 63 l デザインには組織として活⽤されるためのツールが揃えていない • 個⼈の作業を中⼼に捉えたツールが揃えてある状態
  64. Fixel Inc. All rights reserved. ITとデザインのエコー環境⽐較 区分 IT デザイン 制作ツール

    IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど Adobe Cloud︖ プロセス • ウォーターフォール、ア ジャイル等。 • 実績・情報多数 • UXデザインとUIデザイン を網羅したプロセスの不在 • 情報不⾜ 関連情報 ⽂書体系、管理体制が整って いる。資産管理ツールがある 共有⽂化 OSS Dribble︖(作品の公開であり、知識 の共有ではない) 64 l デザインには組織として活⽤されるためのツールが揃えていない • 個⼈の作業を中⼼に捉えたツールが揃えてある状態 これらのツールなしで、 ITのプロジェクトは管理で きますか︖ これらのツールなしで、 ITのプロジェクトは管理で きますか︖
  65. Fixel Inc. All rights reserved. ITとデザインのエコー環境⽐較 区分 IT デザイン 制作ツール

    IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど Adobe Cloud︖ プロセス • ウォーターフォール、ア ジャイル等。 • 実績・情報多数 • UXデザインとUIデザイン を網羅したプロセスの不在 • 情報不⾜ 関連情報 ⽂書体系、管理体制が整って いる。資産管理ツールがある 共有⽂化 OSS Dribble︖(作品の公開であり、知識 の共有ではない) 65 l デザインには組織として活⽤されるためのツールが揃えていない • 個⼈の作業を中⼼に捉えたツールが揃えてある状態 これらのツールなしで、 デザインのプロジェクトは 管理できますか︖ これらのツールなしで、 デザインのプロジェクトは 管理できますか︖
  66. Fixel Inc. All rights reserved. ITとデザインのエコー環境⽐較 区分 IT デザイン 制作ツール

    IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 ︖ 履歴管理ツール Github、Subversionなど ︖ 共有ツール Github、Subversionなど Adobe Cloud︖ プロセス • ウォーターフォール、ア ジャイル等。 • 実績・情報多数 • UXデザインとUIデザイン を網羅したプロセスの不在 • 情報不⾜ 関連情報 ⽂書体系、管理体制が整って いる。資産管理ツールがある ︖ 共有⽂化 OSS Dribble︖(作品の公開であり、知識 の共有ではない) 66 l デザインには組織として活⽤されるためのツールが揃えていない • 個⼈の作業を中⼼に捉えたツールが揃えてある状態 これらのツールがあると、少なくとも コードと同じくらいの抽象度でデザイ ンを管理することができる これらのツールがあると、少なくとも コードと同じくらいの抽象度で、 デザインを管理することができる
  67. デザイン システムの紹介

  68. Fixel Inc. All rights reserved. デザインシステムとは 68 デザインシステムの構成 デザインガイドライン +

    デザインポリシー + UIコンポーネント (パターンライブラリー) + 各種リソース デザインシステムの価値 • デザインの⽅針とその背景などの情報が共有で きるので、関係者全員がデザインに対して共通 の認識を持つことができる • デザインの実装に必要な情報が網羅されている • 複数のデザイナーが⼀貫性のあるデザインを効 率よく作成できる • エンジニアの開発⽣産性と実装の品質が上がる • デザイン資産を具体化して管理できるものにす る
  69. Fixel Inc. All rights reserved. Salesforceのデザインシステム l 3rd party サービスプロバイダー向

    けのデザインガイドラインを公開 していたが、あまり効果がなかっ たのでデザインシステムの提供に ⽅針転換 l Web、iOS、Android向けのデザイ ンシステムを提供 l 実装技術に依存しない、UIコン ポーネントを提供 l Localization、markupやスタイル ガイドラインまで提供 69 Salesforce Lightning Design System https://www.lightningdesignsystem.com
  70. Fixel Inc. All rights reserved. IBMのデザインシステム l SketchファイルによるUI Design KitとComponent

    Library Kitを提 供 l Vanila.jsとReact.js向けの実装を提供(Angula版は⾮公式) l テーマがあって、サービス別にカスタマイズして使⽤ • Bluemix、Watson向けのテーマとその他汎⽤的なテーマがある 70 IBM Carbon Design System http://carbondesignsystem.com
  71. Fixel Inc. All rights reserved. その他のデザインシステム Alibabaのインターナルデスクトップ⽤のデザインシステム 71 ANT Design

    System https://ant.design U.S. Web Design Standards https://standards.usa.gov アメリカの政府機関のデザインシステム
  72. Fixel Inc. All rights reserved. デザインシステムの例 l プラットフォームレベルでUXの⼀貫性を維持するためのもの 72 Google

    Material Design https://material.io/guidelines/material- design/introduction.html Microsoft Fluent Design System https://fluent.microsoft.com
  73. Fixel Inc. All rights reserved. ⽇本企業のデザインシステム 73 Mercari UK https://medium.com/mercari-uk/mercari-uks-new-look-design-system-2918964902d0

  74. Fixel Inc. All rights reserved. デザインシステムの⼀覧 Githubに公開されたデザインシステム⼀覧 74 Awesome Design

    Systems https://github.com/alexpate/awesome-design-systems Adele https://adele.uxpin.com/ UXPinで運⽤するデザインシステム⼀覧
  75. デザインシステム導⼊における課題

  76. Fixel Inc. All rights reserved. デザインシステム構築・運営における課題 l 初期コストがかかる • デザインガイドの作成

    • UI部品の作成 • デザインシステム公開のためのサイト構築 • デザイナーとエンジニアで構成されたチームが必要 l 継続的な運⽤が必要 • デザインシステムの専任チームが必要 l 結果的に現状は主に⼤⼿企業や有名サービスだけが デザインシステムを構築・運営している 76
  77. Fixel Inc. All rights reserved. デザインシステム構築・運営における課題 l 初期コストがかかる • デザインガイドの作成

    • UI部品の作成 • デザインシステム公開のためのサイト構築 • デザイナーとエンジニアで構成されたチームが必要 l 継続的な運⽤が必要 • デザインシステムの専任チームが必要 l 結果的に現状は主に⼤⼿企業や有名サービスだけがデザインシ ステムを構築・運営している 77 その対応策を2部で、 お話しさせていただきます︕
  78. None