業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは？

UX（ユーザーエクスペリエンス）というキーワード・概念が一般化してきた今、UX/UIデザインを軽視してつくられたシステムは、ユーザーの満足度が低く淘汰される危機に直面しています。

BtoCの領域だけでなく、従来は機能要件だけを満たせば良しとされていたBtoBの領域においても、その傾向は同様です。
ジャンルを問わずユーザーがストレスを感じないUI設計を行うことはとても重要であり、そのはじめの一歩は、UI設計の原則や基礎的な考え方を理解することだといえます。

今回のセミナーでは、UX/UI改善の豊富な実績を有するデザイナーが、ノンデザイナーの方でもわかりやすいUI設計の基礎を中心に、具体的な注意点や改善ポイントまでご紹介いたします。

また、デザイナー不在のプロジェクトや、デザインを外注していて十分なリソースが確保できていないプロジェクトでも、社内のメンバーによる「デザインの内製化」に取り組まれたシステム開発チームの事例や、そのプロセスなどもご紹介します。

新規システム開発に取り組む方にも、既存システムのUI改善に取り組みたい方にもお勧めの内容です。

Transcript

1. 業務システムのUX/UI設計ノウハウを 解説。デザイナー不在で失敗しないた めに身につけるべき基本とは？ 2024 / 03 / 13 NCDC株式会社
2. 講師紹介 2 デザイン専門学校卒業後、国内トップのユーザー数である3DCGソフトウェアのUX/UIデザインを担当。UI画面 の大幅な改善をAgile開発によって行い、ユーザーの信頼を獲得。それまで低迷していた売上に大きく貢献する。 その後、デザイン制作会社にてコンシューマー向けアプリやコーポレートサイト、BtoB向けの業務管理システ ムのUX/UIデザインを担当。加えて、企業や製品のブランディングをアートディレクター兼デザイナーとして担 当したり、ドッグハウスやカプセルベッド、医療機器、食品加工機、展示会什器など多岐にわたる工業製品の デザインを手掛ける。 2015年、デザイナーとして担当した機械部品メーカーのアニバーサリーブックで日本BtoB広告賞 経済産業大臣 賞を受賞。 NCDCにはチーフUXデザイナーとして参画。 スマートシティの住居者向けサービスデザインからコンシューマー向けアプリのUX/UIデザイン、企業の従業員 が使用するアプリのUX/UIデザインなどを担当。また、幅広い経験を生かしてUXデザインセミナーの講師とし て社内外のセミナーに登壇。 ブランディングからサービスデザイン、UIデザイン、クリエイティブデザインま ですべての対象物をデザインするマネージングデザイナー。 UX /UIデザイナー 菅原慎也 マネージングデザイナー
3. NCDCのご紹介
4. Business 事業領域の推進 Design ユーザー視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション 4 NCDCのサービス体系
5. 私たちにできること① l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています。 l スモールスタートでの検証から、本開発・継続的な改善までサポートします。 5 ワークショップを中⼼とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に⾏い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の⾼いプロジェクト ではMVP（Minimum Viable Product）を⽤いた検証を⾏ うなど、⽬的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを⽤意してユーザー の評価を確認します。 ユーザーとのタッチポイントとなる各種デ バイスのフロントエンドデザインから、ク ラウドサービスを駆使したバックエンドの 開発まで。多様なテクノロジーをインテグ レーションします。 l AI / IoT / AR l モバイル・ウェブ アプリ開発 l クラウドインテグレーション l システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザー視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善
6. UXデザインの５段階モデル 6 本日はこのあた りを中心に話を していきます
7. 良い画面を作成するためのポイント 7
8. 色から受ける意味 8
9. 補色 9
10. 色の識別 10
11. 色を使いすぎた例 11
12. 基本的な配色パターン 12
13. ブランドカラーの訴求 13
14. テキストと背景のカラーコンストラスト比 14 WCAG 2.0 の AA レベルでは、テキストと背景のカラーコントラスト比は 4.5:1 以上であることが推奨されています。
15. 画面の動きによる認知 15
16. 画面の動きによる認知 16
17. マイクロインタラクション 17
18. ボタンの優先度を決める 18
19. ボタンの誤った使い方をしたケース 19 l トグルスイッチ、ラジオボタン、チェックボックスは正しく使う チェックボックス ݖݶ͋Γ 0/0''ͷ੾ସ͑ ݖݶͳ͠ 0/0''Ҏ֎ͷ੾ସ͑ ૹ৴ ड৴ トグルスイッチ ラジオボタン
20. ユーザーを惑わせない正しいコンポーネントの選び方 20
21. 直感的 22 シンプルで一貫性があり、共通概念 に従った一目瞭然な状態を直感的 ジェスチャー操作は経験していないと直感に結びつかない
22. 共通認識 23
23. インタラクションコスト 25
24. 認知負荷 26
25. 身体的負荷 27
26. 階層はシンプルに 28
27. シンプルさ 29
28. 一貫性 30
29. システム都合を押し付けない 31
30. デザインツール 32
31. ワイヤーフレーム作成ツール 33
32. UI Kit 34
33. Material 3 35
34. 共同編集 36
35. デザインした画面をURLで共有 37
36. デザインスペックの表示 38
37. プロトタイプ作成 39
38. ユーザーテスト 40
39. ユーザーテスト 41 l サービス/システムのプロトタイプをユーザーに操作体験してもらう様子を観察 して得られた様子や、発話の内容などの質的情報を分析して設計の問題点を 見つけ出すリサーチ手法です。 l 大きなメリットとしては以下が挙げられます。 l サービス/システムの操作性に問題がある場合リリース前に発見できる。 l サービス/システムがユーザーのニーズを満たしているかどうかについてフィード バックが得られる。 l デメリットとしては、単純に人的・時間的コストがかかる点と、計画実施に あたり、適切なスキルを持った人間が追加で必要になる点があります。 ユーザーテストのイメージ
40. 誤った情報でご操作を誘導してしまった例② 42
41. 誤った情報でご操作を誘導してしまった例① 43
42. デザインガイドライン 44
43. デザインガイドライン 45
44. ペルソナ定義 46
45. ペルソナ定義 47
46. カスタマージャーニーマップ 48
47. カスタマージャーニーマップ 49
48. 事例紹介 50
49. Figma使い方レクチャー Figma使い方レクチャー 事例紹介 51 A社のケース B社のケース Figma使い方レクチャー Figma使い方レクチャー 画面デザイン（お客様と分担） 画面デザイン（NCDC） お客様の方で作成した画面のレビュー お客様の方で作成した画面のレビュー UIデザインレクチャー（情報設計からUI デザインのポイントを解説） デザインガイドラインのまとめ方 フロント実装 デザインの解説 デザインの解説
50. プロジェクトにおけるデザイナーの役割 l デザイナーの立ち位置によってプロジェクトの品質やスキルトランスファーが変 わる。 52 PM・PL デザイナー PO エンジニア PM・PL デザイナー PO エンジニア PM、デザイナー、エンジニアがフラットな立場でプロジェクトを推進する ことで、デザイナーはユーザー目線での意見を出しやすくなります。 一般的なプロジェクト体制 理想的なプロジェクト体制 指 示 画面だけを作るデザイナーではなく、調査・分析のところから提供・運用のところまで デザイナーが関わることで品質の高いプロダクトを提供できる。まずは左のような体制 を整えていき、将来的には右のような体制づくりを目指すことが良いと考えます