“使いやすい”が生産性を変える！ 業務を効率化するための UX/UI設計ポイント NCDC Online Seminar 2025 / 02 / 26 NCDC株式会社

講師紹介 2 スマートシティ住居者向けのサービスデザイン、コンシュー マー向けアプリのUX/UIデザイン、業務用アプリのUX/UIデ ザインなど幅広い実績を持つ。ブランディングやクリエイティ ブデザインの領域から、サービスデザイン、業務システムの UI設計などの領域までカバーするNCDCのデザインチーム を、豊富な知識と経験で牽引するマネージングデザイナー。 経歴 デザイン専門学校卒業後、ソフトウェアメーカーでプロジェクトマネー ジャーとして、マーケティング、セールスを経験する一方で、国内トッ プのユーザー数を誇る3DCGソフトウェアのUXデザインを担当。 2014年からデザイン制作会社にてUI、UXに止まらず、プロダクトデ ザインやコーポレートブランディングなど活動な幅を広げる。 2015年には、日本BtoB広告賞 経済産業大臣賞を受賞。 マネージングデザイナー 菅原 慎也

NCDCのご紹介

Business 新規事業立ち上げからの伴走 業務改革やIT改革の支援 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation Consultant デザイナーやエンジニアと協力して、 新規サービス立案の支援や新規性の高 いシステムの要件定義を行う。プロ ジェクト全体のマネジメント役も担う。 UX/UI designer UIデザインはもちろん、デザ イン思考やUXデザインのフ レームワークを用いて上流工 程（サービス全体のUX設計） を担う。 Engineer モバイルやWeb、クラウド、 IoTやAIなど、新しい領域の技 術に特化。つくるだけでなく 技術コンサルティングができ る知見を持つ者も多数在籍。 ⚫ AWS サービスパートナー ⚫ AWS Lambdaパートナー ⚫ 内製化支援推進AWSパートナー Tech×Design×Biz 一体でお客さまを支援 ⚫ 3領域でサービスを展開 ⚫ 各領域のスペシャリストを 社内に揃える体制 4

デジタルビジネス立ち上げを一元的にサポート ⚫ デジタルビジネスに必要な要素にフォーカスし、一元的に提供しています。 ⚫ スモールスタートでの検証から、本開発・継続的な改善までサポートします。 5 ワークショップを中心とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に行い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の高いプロジェクト ではMVP（Minimum Viable Product）を用いた検証を行 うなど、目的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを用意してユーザの 評価を確認します。 ユーザとのタッチポイントとなる各種デバ イスのフロントエンドデザインから、クラ ウドサービスを駆使したバックエンドの開 発まで。多様なテクノロジーをインテグ レーションします。 ⚫ AI / IoT ⚫ モバイル・ウェブ アプリ開発 ⚫ クラウドインテグレーション ⚫ システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を大切にした アイデア・企画 モックやプロトタイプ の開発・検証 システム・アプリ開発 継続的な改善

⚫ 長期的な視点を持ち、お客さまと一緒に考え、そのプロセスも財産としていただく伴走型の支援を得 意としています。 ⚫ システム開発においても、内製化の体制構築支援からエンジニア・デザイナーなど専門職のスキル トランスファーまで多数の実績があります。 お客さまが主役となるプロジェクト設計 6 お客さま デジタルビジネスを 強みにできる企業を目指す 必要なものを自らつくり、 改善し続けられる 体制の整備、技術の獲得 ユーザーのインサイトや テクノロジーを理解して 企画できる知識の獲得 外部依存せず、社会の変化や技術の進化に対応し、自走できるチカラの獲得 コンサルティングや研修、 ワークショップ スキルトランスファー お客さまの目的に応じた 伴走支援のご提案 豊富なDX支援経験により 蓄積されたノウハウ DX戦略策定、PoC、 新規デジタルサービス企画、 UX/UIデザイン、 アジャイル開発、DevOps、 システムのモダナイズ…

本日のウェビナーの流れ ⚫ UX/UIが業務効率に与える影響とは ⚫ ユーザーの負担を軽減する具体的な方法 ⚫ 誤操作を防ぐための工夫 ⚫ 理解のズレを防ぐ「やさしい日本語」の適用 ⚫ 適切なマニュアルの提供のしかた ⚫ 質疑応答・Q&A 7

UX/UIが業務効率に与える影響とは ⚫ 使いにくい・定着しない業務システムで発生しがちな問題 ⚫ 時間のロス：探す・迷う・間違えることで作業が遅れる ⚫ 誤操作の発生：ミスによる手戻りや修正作業が増える ⚫ 教育コストの増加：新人が覚えにくく、習熟まで時間がかかる ⚫ 現場の不満・離脱：結局使われず、代替手段（Excel・紙）が併用される ⚫ スマホアプリやSNSに慣れ親しんだ若者にとって、従来の業務システムはイ ンターフェースが古く、操作性が悪いと感じやすい。 ⚫ 業務効率に寄与できるシステムの「使いやすい」条件とは ⚫ 直感的に操作できること ⚫ 迷わず、すぐに目的の操作ができること ⚫ 誤操作を防ぎ、ストレスなく使えること 8

ユーザーの負担を軽減する具体的な方法

スクロールさせるか？一覧性が良い画面にするのか？ ⚫ 使用頻度やユーザーの習熟度で選ぶ 10 使用頻度が低く、習熟度が上がらないケース （マネーフォワード年末調整） 使用頻度が高く、習熟度が高いケース （受注システムの登録画面）

最適な入力補助はできているか？ ⚫ Gmailは使用頻度が高いので一覧性の高いレイアウトになっている 11

ペルソナ定義 12

カスタマージャーニーマップ 13

使いやすい帳票画面で抑えるべきポイント 14 簡易検索と詳細検 索を使い分ける フローティングアク ションボタンを使う カラムが多い場合 はカラム表示のカ スタマイズができ るようにしておく できるだけ縦スク ロールと横スク ロールは共存しな いようにする まとめて選択 できること ソートができる （使う想定がな いものには無 理してつけな い） 検索条件の保 存ができる （入力が多 かったり、使用 頻度が多い場 合） 行の数はでき るだけ多く、か つ詰めすぎな い 検索結果の数やページ数を しっかり明記する 最適な入力補助を選ぶ

最適な入力補助はできているか？ 15 ⚫ 時間を選択する入力補助だけでも様々

インタラクションコスト 16 • 複雑なナビゲーション • 情報過多 • 分かりにくい用語 • 非直感的な操作 など • 小さなボタン • 硬いボタン • 遠いリーチ • 長時間の操作 など 良いインターフェイス＝インタラクションコストが少ないもの

モードレスとモーダルの使い分け 17 ⚫ データの重要度や誤操作の回避で選ぶ モードレス （Googleフォーム） モーダル （閲覧と編集の画面）

誤操作を防ぐための工夫

インタラクションの設計ミスによる誤操作 19 ⚫ 入力と応答の繰り返しによって操作を進めることができる

インタラクションの設計ミスによる誤操作 20

インタラクションの設計ミスによる誤操作 21

共通概念 ⚫ 共通概念とは、多くのユーザーが共通して持っている、製品やサービスに対する一般的 な理解や認識のことです。 22

メンタルモデルについて ⚫ メンタルモデルとは、ユーザーが心の中に持っている、特定のシステムや製品に対する 理解のモデルのことです。 23

ラベルは必要？ ⚫ ラベルの有り無しで誤認識が起こりやすい例 24

ユニバーサルデザイン ⚫ 国や業界によって認識が違うものに注意 25

ユニバーサルデザイン ⚫ 国や業界によって認識が違うものに注意 26

業界特有のメンタルモデル 27 業界特有のUIレイアウト

ユーザビリティテスト 28 ⚫ サービス/システムのプロトタイプをユーザーに操作体験してもらう様子を観察して得ら れた様子や、発話の内容などの質的情報を分析して設計の問題点を見つけ出すリ サーチ手法です。 ユーザービリティテストのイメージ

ガイドラインのルールに従う ⚫ 多くのユーザーが使い慣れているデザインガイドを使うことで誤操作を防ぐ 29

ガイドラインのルールに従う ⚫ AppleのHuman Interface Guidelinesの一例 30

ガイドラインのルールに従う ⚫ GoogleのMaterial Designの一例 31

指で操作しやすいエリアをスマホのサイズごとに把握する ⚫ 指の位置や画面サイズを意識して画面設計する 32 6.7インチ iPhone 15 Plus
 6.1インチ iPhone 14,15 6.1インチ iPhone 14,15 4.7インチ iPhoneSE 親指が届かないエリア 指を伸ばすエリア ストレスなく触れるエリア

理解のズレを防ぐ「やさしい日本語」の適用

やさしい日本語とは ⚫ 外国人や高齢者、障害者など、日本語を母語としない人や、日本語の理解が難しい人に も情報が伝わりやすいように配慮した日本語のことです。具体的には、以下の点に注意 して作られます。 ⚫ 短い文: 一文を短くし、複雑な構文を避ける。 ⚫ 簡単な語彙: 日常的に使われる簡単な言葉を選ぶ。 ⚫ 漢字にルビ: 難しい漢字にはルビ（ふりがな）をふる。 ⚫ 明確な主語と述語: 文の主語と述語を明確にする。 ⚫ 具体例や図解: 必要に応じて、具体例や図解を用いる。 ⚫ やさしい日本語はインクルーシブデザインの一つ ⚫ インクルーシブデザインとは、高齢者、障がい者、外国人など、従来、デザインプロセスから除外 されてきた多様な人々を、デザインプロセスの上流から巻き込むデザイン手法です。 34

なぜ業務システムにやさしい日本語が必要？ ⚫ 日本の人口は50年後に、東京では約20年後に10人に一人が外国人になると言 われています。東京に住む外国人はこの10年間で39.4万人(2014)から64.7万人 になる。出身国、地域は約190に及び多国籍化が進んでいるため多言語には限 界がある。 35 「外国人＝英語」というイメージがあるかもしれません が、日本に住む外国人の約8割は日本語の会話がで きるといいます。 参考：東京都多文化共生ポータル https://tabunka.tokyo-tsunagari.or.jp/yasanichi/about.html

なぜ業務システムにやさしい日本語が必要？ ⚫ 東京都つながり創生財団の調査では日本人の約6割は知らないと答え た一方で、外国人の約7割は「知っている」と回答。 36 外国人の8割以上が、やさし い日本語での情報発信を希 望しました。 参考：東京都多文化共生ポータル https://tabunka.tokyo-tsunagari.or.jp/yasanichi/about.html

業務システムにおいてやさしい日本語が適応が急務な業種とシステム ⚫ 建設業: 建設現場では、外国人労働者の割合が増加しています。安全管理や作業指示 などの情報伝達は、正確に理解されることが重要です。そのため、作業手順書や安全マ ニュアル、日報作成システムなどを「やさしい日本語」で作成することが求められます。 ⚫ 製造業: 工場での作業指示や機械操作、品質管理などのシステムにおいても、「やさしい 日本語」の適用が重要です。特に、安全に関わる情報は、言葉の壁による誤解を招かな いよう、分かりやすく伝える必要があります。 ⚫ サービス業: 接客や販売、飲食などの現場では、外国人従業員と顧客とのコミュニケー ションを円滑にするために、「やさしい日本語」の活用が有効です。例えば、注文受付シ ステムや在庫管理システムなどを「やさしい日本語」に対応させることで、外国人従業員 の業務効率向上と顧客満足度向上に繋がります。 ⚫ 介護・医療: 介護施設や病院では、外国人労働者だけでなく、高齢者や障害者など、日 本語の理解に困難を抱える人々も利用します。そのため、介護記録システムや電子カル テなどを「やさしい日本語」で作成することで、より多くの人にとって使いやすいシステム になります。 37

業務システムのやさしい日本語例 ⚫ 優しい日本語の例 ⚫ 変更前: 始業・終業時刻を登録してください。 ⚫ 変更後: 出勤 をしたら 「出勤」 ボタンを押してください。 退勤 をしたら 「退勤」 ボタンを押してください。 ⚫ 変更前: 所定のフォーマットに必要事項を記入し、申請してください。 ⚫ 変更後: 休みを取りたい日は、カレンダーで選んでください。 休みの種類 （例：有給休暇、 sick leave）を選んでください。 理由を書いてください。（例：病気、旅行） 「申請」 ボタンを押してください。 38

適切なマニュアルの提供のしかた

静的ガイドとインタラクティブガイド ⚫ 静的ガイドよりもインタラクティブガイドの採用多くなっている ⚫ インタラクティブガイドのほうが使い勝手は良いが手間がかかる 40 • 紙媒体のマニュアル: • 印刷された冊子やパンフレット • PDFファイル： • デジタル化されたマニュアル。 • Webページ • オンラインで閲覧できるマニュアル • ヘルプページ: • システムに組み込まれたヘルプドキュメン ト 静的ガイド • チュートリアル: • システムの操作をステップごとに体験でき るガイド • オンボーディング • 新規ユーザーにシステムの基本的な使い 方を教えるガイド • ガイドツアー • システムの主要な機能を順番に紹介する ガイド • ツールチップ • 画面上の要素にカーソルを合わせると、 説明が表示されるガイド • チャットボット • ユーザーの質問に自動で回答するガイド インタラクティブガイド

オンボーディングUIの例 41 ウォークスルー型 (Bloom) ツールチップ型 (Vivid)

オンボーディングUIの例 42 コーチマーク型 （My BMW） モーダルダイアログ型 （Skyscanner） チェックリスト型 （My BMW） パーソナライズ型 （Spotify）

インタラクティブガイドの最新の流れ ⚫ インタラクティブガイドにおけるユーザーの行動データを収集し、分析し てガイドの改善と最適化に繋げるサービスやプロダクトが増えてきてい る ⚫ 多くのSaaSプロダクトが、自社プロダクトの利用状況を分析し、オンボーディ ングやガイドの改善に活用しています。 また、A/Bテストツールなどを活用し、複数のガイドパターンを比較検証する ことで、より効果的なガイドの作成が可能です。 ⚫ ユーザーの課題を特定 ⚫ ガイドの効果測定 ⚫ ガイドの改善と最適化 43

まとめ

業務システムの「使いやすさ」を向上させるために ⚫ すぐに実践できる改善ポイントを活用する ⚫ 本日紹介したデザインポイントは、ノンデザイナーでも取り組むことが可能 ⚫ 小さな改善でもユーザー体験を向上させ、業務効率化に繋げられます ⚫ 現状のシステムを評価する ⚫ 本日の視点をもとに自社の業務システムがどれだけ「使いやすい」か、ユー ザーが迷わず操作できるか、誤操作が起きにくいかをチェックしましょう ⚫ 抜本的な見直しが必要な場合も ⚫ 改善が難しい場合は、専門のUXデザイナーによる設計見直しも選択肢に入 れる必要があります ⚫ まずは、自社の業務システムが「使いやすい」設計になっているかを確 認しましょう！ 45

No content