【SBTechFestival2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】

モデルベースユーザインタフェースデザイン

ソフトバンク株式会社 テクノロジーユニット コンシューマIT本部 業務支援システム統括部 業務支援システム部 SCM推進課

中井 崚日

ユーザインタフェース（UI）の世界では自己の感性に則った論理的な根拠の乏しい設計が散見される。感性に則った設計は属人的な側面があり、引継ぎが困難である上に、クライアントへの説得力が乏しい。
この問題を解決する手法として、Goodpatch社およびソシオメディア社が提唱している「モデルベースUIデザイン」がある。モデルベースUIデザインとはドメイン（解決領域）を概念モデル図に落とし込み、概念モデルに対してUIを設計する手法である。本手法はUI界のDDD（エリック・エヴァンスのドメイン駆動設計）と言える。
DDDの知見や認知心理学における意味ネットワークモデルを活用したSoftbank流モデルベースUIデザインの実践プロセスを語る。本手法の実践により、仕様変更に強く非属人的なUIの実現が可能である。

【スライド】
フルバージョン
https://www.slideshare.net/ssuser7ad47f/sb-tech-festival2022scmui/

ティザーバージョン
https://www.slideshare.net/ssuser7ad47f/sb-tech-festival2022ui/ssuser7ad47f/sb-tech-festival2022ui

【動画】
改善前の物流管理システムのUI
https://youtu.be/CSGVquqC4xg

改善後の物流管理システムのUI
https://youtu.be/BILaXrb1QVE

【イベント情報】
https://www.softbank.jp/biz/events/techfestival-deeptech-2022/
https://sbtechnight.connpass.com/event/230085/

-----

Model-Based User Interface Design

Business Support System Division, Business Support System Management Department, Consumer IT Division, Technology Unit, Softbank Corp.

Ryoka NAKAI

In the world of user interface (UI), there are many designs that are based on one's own sensibility and have little logical basis. In the world of user interface (UI), there are many designs which are based on our sensibility and have little logical basis. The designs based on our sensibility are not only difficult to transfer but also hard to convince clients.
Goodpatch and Sociomedia have proposed "Model-Based UI Design" as a solution to this problem. Model-Based UI Design is a method of designing UI based on a conceptual model of a domain (solution domain). This method can be called the DDD (Eric Evans' Domain Driven Design) of the UI world.
I will talk about the practical process of Softbank's model-based UI design using the knowledge of DDD and the semantic network model in cognitive psychology. By practicing this method, it is possible to realize a non-personal UI that is resistant to specification changes.

Transcript

1. 出荷 発注 発注 出荷 図の出典：ISOMETRIC.ONLINE [フリー素材] 物流管理システム店舗在庫管理領域 ユーザインタフェース改善 2022年01月13日 SB Tech Festival 配布資料 ソフトバンク 物流管理システム UI設計者 中井崚日（@Leader_General） 1
3. 本資料はSB Tech Festival 2022 (connpass) の配布資料です 3
4. 注意 ・ToBeに記載の提案のUIモックは検討段階のプロ トタイプであり開発中のものではありません ・UIモック内やスクリーンショットに実店舗名が記 載されておりますが、商品の在庫状況等はダミーデ ータであり商用稼働中のものではありません ・図および””囲いの文は著作法32条に則り引用して おります 4
5. もくじ 物流管理システムSCMOne 店舗在庫領域のUI改善 改善提案 1. シングルページアプリ化 a. レイアウト変更 b. 無限スクロール 2. オブジェクトとタスクを分別 a. 「使いづらい」瞬間 b. 人間の記憶構造に近似 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. レコードの一括操作 8. 社内フレームワーク脱却 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. 機能タブの表示・非表示切替 5. ソートキーのプルダウン化 6. 棚卸はデフォルトで全選択 評価 1. 提案と本資料 付録 1. AsIsのスクリーンショット集 2. 構造分析の過程で生まれた成果物 3. ToBeのUIモック集 5
6. 現行UI Overview 6
7. AsIs SCMOne スクリーンショット 7 YouTube動画リンク
8. 改善後UI Overview 8
9. ToBe SCMOne スクリーンショット 9 YouTube動画リンク
10. SCMOne店舗在庫領域のUI改善点 1. シングルページアプリ化 2. オブジェクトとタスクを分別 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. 社内フレームワーク脱却 10
11. 改善点１ シングルページアプリ化 11
12. シングルページアプリ（SPA）とは マルチページアプリ 表示データを更新するたびに0からページを読み直す シングルページアプリ 変更した部分のみを都度ロードして表示 検索 ページ遷移 or 再読み込み 検索結果 検索結果 検索結果一覧 検索 キーワード 検索 検索結果 検索結果 検索 キーワード 検索 検索 キーワード 検索 キーワード 必要な部分のみ更新 12
13. AsIs SCMOneはマルチページアプリ 画面遷移 13
14. ToBe マルチページアプリ対応可能な構造に再設計 テーブルのみ 再読込 14 左側は初期起動時に 予め読込
15. AsIs ページによるテーブルレコードの表示範囲切替 メリット ・ページ数から読み込んだ数を把握しやすい ・ページスキップが可能 デメリット ・マルチページアプリ向けUI ・クリックの手間 ・ページからは内容が予測できない 15
16. ToBe ページ切替からインフィニティスクロールへ 30件ごとに 自動読込 16
17. 改善点２ オブジェクトとタスクを分別 17
18. 「人間が使いづらい」と思うプロセス 18
19. 人間は経験や論理をもとにUIから全体構造を想像する 入荷検索 店舗在庫 SCMOne 販促品管理 入荷登録 メンタルモデル 19
20. 人間は見えていない項目の構造を予測する 入荷検索 店舗在庫 SCMOne 販促品管理 入荷登録 メンタルモデル 販促品検索 販促品登録 販促品削除 20
21. 予測と現実の構造に乖離があった場合に使いづらさを感じる メンタルモデル 販促品検索 販促品登録 販促品削除 販促品管理 SCMOne 発注管理 発注照会 入荷予定 販促品管理 SCMOne 実際の構造 21 ギャップ
22. UIを人間の記憶構造に近いモデルに近似させるのが重要 カナリア 鳥 動物 ダチョウ 飛べない 長い脚 黄色 さえずる 飛ぶ 翼がある 皮膚がある 呼吸する 食べる 意味ネットワークモデル 出典 ・人間の記憶構造の仮説モデルの一種 ※記憶構造仮説としては活性化拡散モデルが最有力である。 ・木構造でありノード間に親子関係が存在 ・各ノードの特徴がリンクで紐づく 例 カナリアは黄色い鳥である。 鳥は動物である。 22
23. 意味ネットに基づいたUI設計フレームワーク オブジェクト指向UI（OOUI） 出典：オブジェクト指向UIとタスク指向UI 23 オブジェクト ユーザ タスク UI 図の出典：ICOOON MONO [フリー素材]
24. オブジェクト指向UI（OOUI）とは “オブジェクト”を中心としたUI ・最初から対象物が見えている ・名詞 → 動詞 ・決まった操作手順がない 出典：オブジェクト指向UIデザイン（上野学） 24
25. オブジェクト指向UIの例：Twitter 25
26. オブジェクト指向UIの例：Twitter オブジェクト（名詞） タスク（動詞） 26
27. オブジェクト指向UIとは “オブジェクト”を中心としたUI ・ テキスト を 投稿 ・ 写真 を 閲覧 ・ 色 を 削除 オブジェクト タスク → 27
28. オブジェクト指向UIの例：Twitter ツイート いいね を する 28
29. オブジェクト指向UIの例：Twitter リツイート いいね 29
30. オブジェクト指向UIの利点 ・機能が増えても画面構成や操作方法やシンプル ・モードレス：操作対象の選び直しが楽 ・仕様変更や機能追加の工数は小規模で済む ・条件分岐が少なくバグも少ない 30
31. 意味ネットモデルやOOUIの思想はDDDに通ずる DDD（ドメイン・ドリブン・デザイン） ・変更に強いシステム構築のための設計論 ・ドメイン（解決対象領域）の概念モデルを 軸としてソフトウェア設計を行う 31 ヒアリング モデルをUIに投影 ドメインモデリング 意味ネット ユースケース図 ロバストネス図 UIもドメインモデリングで変更に強くなる ドメインモデルと常に同期
32. ユーザ 本社 SB 直営店 代理店 ロジ 担当者 販促物 担当者 YM 併売店 取次店 店舗 量販 外販 SY システム 管理者 店長 店員 YS 一次 運営店 法人 広域 責任者 閲覧者 管理者 責任者 閲覧者 責任者 閲覧者 責任者 閲覧者 ドメインモデル図の例 ユーザ分類 ユーザドメイン
33. ユーザ SB 直営店 取次店 店舗 店長 ドメインモデル図の例 取次店長による発注 倉庫 商品 枠残数確認 注文ヘッダ 伝票番号 注文詳細 注文数量 納期 配送予定日 取扱品 アイテムコード アイテム名 販促品 アイテム在庫 有効在庫数量 商品 販促品 発注 保管場所 倉庫名 住所 ユーザ ドメイン 受注 ドメイン 在庫 ドメイン 取扱品 ドメイン 1 * 1…* 1 1 1 1 1 1 0…* 0…* 0…* 0…* 0…* 1 1 1…*
34. AsIs メインメニュー 34
35. AsIs メインメニュー 入荷～在庫照会 35
36. 店舗在庫 入荷 在庫照会 入荷検索/登録 店舗間移動 入荷登録（登録） 入荷検索（独自商品） 出庫登録 出庫検索 出庫検索/登録 在庫状況 在庫数一覧 在庫数状況（過去日） 在庫数状況（過去日） シリアル情報照会 在庫受払検索 条件 CSV 照会 商品 伝票 登録 修正 削除 AsIs UI構造図解 オブジェクトとタスクが混在 36
37. 店舗在庫 入荷 在庫照会 入荷検索/登録 店舗間移動 入荷登録（登録） 入荷検索（独自商品） 出庫登録 出庫検索 出庫検索/登録 在庫状況 在庫数一覧 在庫数状況（過去日） 在庫数状況（過去日） シリアル情報照会 在庫受払検索 条件 CSV 照会 商品 伝票 登録 修正 削除 AsIs UI構造図解 オブジェクトとタスクが混在 オブジェクト 指向ではない 37
38. AsIs メインメニュー 在庫修正～返品 38
39. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 オブジェクトとタスクが混在 条件 CSV 照会 商品 伝票 登録 修正 削除 39
40. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 オブジェクトとタスクが混在 条件 CSV 照会 商品 伝票 登録 修正 削除 オブジェクト 指向ではない 40
41. 41 オブジェクト［商品リスト］ 予約済商品 パターン１： オブジェクト
42. パターン２： タスク オブジェクト［商品リスト］ 42 棚卸 返品
43. 43 オブジェクト［商品リスト］ 履歴検索 在庫修正 パターン３： オブジェクトタスク
44. 44 オブジェクト［商品リスト］ 返品一覧 パターン４： タスクオブジェクト
45. 45 非MECE 漏れや重複がある状態 在庫状況 在庫数一覧 在庫数状況 （過去日） 3つの違いが分からない
46. 構造的問題点 非MECEな下記パターンが同階層に混在 1. オブジェクト 2. タスク 3. タスクオブジェクト 4. オブジェクトタスク 46
47. アンチパターン：タスク指向UI “タスク”（動詞）を中心としたUI 47 タスク ユーザ オブジェクト UI 図の出典：ICOOON MONO [フリー素材]
48. 動作/品物の管理 作業 詳細作業 <collection> 動作/品物の管理 動作/品物の管理 <collection> 作業 対象+作業名 OR 作業名 <collection> 詳細作業 詳細作業名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 開く 開く 開く CUD CSV出力 AsIs UI構造図解 汎化 <single> 照会 照会条件 照会条件 照会 端末や付属品 48
49. 動作/品物の管理 作業 詳細作業 <collection> 動作/品物の管理 動作/品物の管理 <collection> 作業 対象+作業名 OR 作業名 <collection> 詳細作業 詳細作業名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 開く 開く 開く CUD CSV出力 AsIs UI構造図解 汎化 オブジェクトとタスクが混在 <single> 照会 照会条件 照会条件 照会 端末や付属品 メニュー項目 標準化が必要 49
50. オブジェクト指向に基づき構造化 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション 50
51. AsIs SCMOneにおけるオブジェクト 検索項目 51
52. AsIs SCMOneにおけるオブジェクト 検索項目 商品 伝票 52
53. AsIs SCMOneにおけるオブジェクト 表項目 53
54. AsIs SCMOneにおけるオブジェクト 表項目 商品 伝票 54
55. オブジェクト指向に基づき構造化 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション オブジェクト ベース 55
56. 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション ToBe オブジェクト指向に基づき構造化 オブジェクト OR タスクオブジェクト 56
57. 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション ToBe オブジェクト指向に基づき構造化 明確に区分け 57
58. ToBe オブジェクト指向に基づき構造化 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション 58
59. 商品/伝票 作業領域 端末や付属品 <collection> 商品/伝票 アイテム名 CRUD <collection> 作業領域 作業領域名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 <collection> CRUD CRUD 選択状態 開く 選択状態 開く 選択状態 CRUD 出力 選択状態 開く <single> CRUD CRUD条件 CRUD条件 CRUD ToBe UIモデル図解 汎化 59
60. 改善点３ 出力の階層標準化 60
61. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 条件 CSV 照会 商品 伝票 登録 修正 削除 61
62. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs 出力の階層非標準 RFIDタグ 条件 CSV 照会 商品 伝票 登録 修正 削除 62
63. AsIs 出力の階層非標準 RFIDタグ メイン メニューに 出力が存在 63
64. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 出力の階層非標準 CSV出力 条件 CSV 照会 商品 伝票 登録 修正 削除 64
65. AsIs 出力の階層非標準 CSV 検索欄に出力が存在 65
66. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs 出力の階層非標準 条件 CSV 照会 商品 伝票 登録 修正 削除 出力の階層 不揃い 66
67. ToBe 出力をタスクバーに凝縮 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション 67 階層 統一
68. ToBe 出力をタスクバーに凝縮 階層統一 ・プルダウンで階層化 ・レコードの選択状況に 合わせてボタンを有効化 68
69. 改善点４ 共通化による冗長性排除 69
70. AsIs 照会条件が重複している画面が複数存在 70
71. AsIs 画面遷移時に入力欄ステートが棄却 棄却 再入力の手間発生 71
72. ToBe 共通化により冗長性排除・条件ステート保持 共通条件 72
73. 改善策５ 横スクロール排除 73
74. AsIs 横スクロール 横スクロールの欠点 ・一覧性低 ・操作ステップ多 ・スマホ対応困難 74
75. ToDo 横スクロール廃止してレコードを縦長化 情報を1カラムに凝縮 ・操作ステップ減 ・スマホ対応容易 ・慣性スクロールに特化 75
76. 改善点６ モーダルウィンドウ排除 76
77. AsIs モーダルウィンドウ（ダイアログ）の欠点 ユーザビリティ低下要因 ・操作を制限 ・操作順序を固定 出典：モーダル[ソシオメディア] 77
78. AsIs モーダルウィンドウはヒューリスティック原則違反 ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則 1. システム状態の視認性を高める 2. 実環境に合ったシステムを構築する 3. ユーザーにコントロールの主導権と自由度を与える 4. 一貫性と標準化を保持する 5. エラーの発生を事前に防止する 6. 記憶しなくても、見ればわかるようなデザインを行う 7. 柔軟性と効率性を持たせる 8. 最小限で美しいデザインを施す 9. ユーザーによるエラー認識、診断、回復をサポートする 10. ヘルプとマニュアルを用意する 出典：10 Usability Heuristics for User Interface Design 78
79. AsIs モーダルウィンドウはヒューリスティック原則違反 ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則 1. システム状態の視認性を高める 2. 実環境に合ったシステムを構築する 3. ユーザーにコントロールの主導権と自由度を与える 4. 一貫性と標準化を保持する 5. エラーの発生を事前に防止する 6. 記憶しなくても、見ればわかるようなデザインを行う 7. 柔軟性と効率性を持たせる 8. 最小限で美しいデザインを施す 9. ユーザーによるエラー認識、診断、回復をサポートする 10. ヘルプとマニュアルを用意する 出典：10 Usability Heuristics for User Interface Design 79
80. 安全設計手法 フェイルセーフ適用 出典 80 製品安全 危害の程度を下げる 危害の発生頻度を下げる 故障防止 故障・操作ミスしても安全確保 誤用しても安全確保 フールプルーフ フェイルセーフ セーフライフ
81. ToBe バナー通知によりモードレス＆フェイルセーフ化 ユーザビリティ向上 ・操作を非制限 ・操作ミスを許容 出典： モードレスインタラクション[ソシオメディア] 81 SnackBarで「実行しますか？」ではなく「実行しておきました。取り消しますか？」方式に変更
82. ToBe バナー通知によりモードレス＆フェイルセーフ化 色彩による成否明示 ・成功：青 ・失敗：赤 82 ユーザ操作に紐づくインタラクティブなバナー通知はSnackBarと呼ばれる
83. 改善点７ レコードの一括操作 83
84. AsIs 選択中の1レコードに対してのみ更新可能 84 操作ステップ多 操作ステップ数 = アイテム数 × 修正項目数 例：Apple USM Power Adaptorの在庫修正画面
85. Tobe 複数アイテムの一括更新 操作ステップ削減 85 更新対象選択
86. Tobe 複数アイテムの一括更新 操作ステップ削減 86 更新対象選択 タスクがアクティベート
87. 改善点８ 社内フレームワーク脱却 87
88. AsIs 社内フレームワーク ARKDesigner 88
89. ToBe 案１ オープンフレームワーク × Ant Designに移行 89
90. ToBe Ant Designにより実装工数抑制・開発人材調達易化 90 Ant Design ・Alibabaのデザインシステム ・Vue/Reactで簡単に実装可能 ・AntDesign of Vue ・AntDesign of React ・開発人材調達易化 ・豊富なコンポーネント Vue.jsにおけるDatePicker使用時の記述文 import { DatePicker } from 'ant-design-vue'; Vue.use(DatePicker); DatePicker <template> <div> <a-date-picker @change="onChange" /> <br /> <a-month-picker placeholder="Select month" @change="onChange" /> <br /> <a-range-picker @change="onChange" /> <br /> <a-week-picker placeholder="Select week" @change="onChange" /> </div> </template> <script> export default { methods: { onChange(date, dateString) { console.log(date, dateString); }, }, }; </script> DatePicker
91. ToBe 案２ オープンフレームワーク × MaterialDesign 91 MaterialDesign ・Googleのデザインシステム ・AndroidOSなどに搭載 ・Reactで簡単に実装可能 ・Material-UI ・開発人材調達易化 ・豊富なコンポーネント
92. 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. 機能タブの表示・非表示切替 5. ソートキーのプルダウン化 6. 棚卸はデフォルトで全選択 92
93. 特徴1 左右のフレキシブルペイン 93
94. フレキシブルペインとは 94 ペイン 出典 画面内で特定のタスクやオブジェ クトを表す不可分な矩形領域 フレキシブルペイン 出典 伸縮可能なペイン 例：Slack 伸縮 ペインA ペインB
95. ToBe ペインのフレキシブル対応 95 左ペイン 右ペイン 伸縮 少ない画面リソースを 活用しやすい仕様
96. ToBe 右ペイン内テーブルのフレキシブル対応 96 ・フレキシブルテーブルによ って各レコードの値のレイア ウトが横並びに統一 ・1画面に表示可能なレコー ド数アップ →レコード間の値比較が楽
97. 特徴２ ペインの RRR-M+M-E ハイブリッド展開 97
98. 98 MV展開 出典 “2ペインを用いて、一覧操作（Manipulator）と閲覧（Viewer）を同一画面 上に提示する。一覧用ペインでオブジェクトを選択すると、その内容が閲 覧用のペインに表示されるようにする型。” 効能 ・”対象オブジェクトの集合と、選択したひとつのオブジェクトの内容表示 を同一画面上で行うことで、両者の関係を常に認識可能” ・”一覧上で、自由な順序でオブジェクトを選択しながら、その内容を閲覧 可能” ・”閲覧用の画面を別に開く必要がないため、閉じるという操作なしに次の オブジェクトを閲覧可能” 解説、図の引用元：ソシオメディア ペイン MV展開 一覧用ペインでオブジェクトを選択すると内容が閲覧用ペインに表示
99. 99 R-R-M展開 出典 “数の異なる検索（Retriever）を連続して提示しながら 対象を限定していき、一覧操作（Manipulator）画面に 辿り着かせる。” 効能 必要な回数だけ条件分岐させることが可能 → 操作ステップ短縮に繋がる 解説・図の引用元：ソシオメディア ペイン R-R-M展開 複数の検索画面を経た後で一覧操作画面に辿り着く
100. ToBe 展開パターンの応用 左ペイン RRR-M展開 100 左ペイン（RRR, E） 右ペイン(M) 【左ペイン】RRR-M展開 RRR： ３つの検索（Retriever） の連結展開 E： 更新タブなら一覧操作 （Manipulator）画面の情 報を編集(Edit)可能 左ペイン上（R） 左ペイン中（R） 左ペイン下（R,E）
101. ToBe 展開パターンの応用 右ペイン M-E展開 101 【右ペイン】 M： 一覧操作（Manipulator） 画面。 M-E展開： 各レコードを選択すると左 ペインの編集画面(Editer) 展開。 左ペイン（RRR, E） 右ペイン(M)
102. ToBe 展開パターンの応用 RRR-M + M-Eのハイブリッド展開 102 RRR-M + M-E R-R-MとMVの2つの長所を 受け継いだハイブリッド構造 ・”両ペインの関係を常に認識可能” ・”一覧上で、自由な順序でオブジェクトを選択しなが ら、その内容を閲覧・編集” ・”閲覧用の画面を別に開く必要がないため、閉じる操 作なしに次のオブジェクトを閲覧・編集” ・”必要な回数だけ条件分岐させることが可能” 解説の引用元：ソシオメディア → ユーザビリティ向上
103. 特徴３ CRUDボタンのアクティベート 103
104. 機能ごとのCRUD権限有無 104 CRUDとは 1. CREATE 登録 2. READ 読込 3. UPDATE 更新 4. DELETE 削除 C R U D 商品 在庫 ◯ ◯ 出庫 ◯ ◯ ◯ 受払 ◯ ◯ 予約 ◯ ◯ 棚卸 ◯ ◯ ◯ ◯ 返品 ◯ 伝票 入荷 ◯ 出庫 ◯ 入庫 ◯ 棚卸 ◯ 返品 ◯ 在庫 締め ◯ ◯ ◯ ◯
105. Tobe 各画面のCRUD権限に合わせてアクティベート 105 アクティベート C R U D 商品 在庫 ◯ ◯ 出庫 ◯ ◯ ◯ 受払 ◯ ◯ 予約 ◯ ◯ 棚卸 ◯ ◯ ◯ ◯ 返品 ◯ 伝票 入荷 ◯ 出庫 ◯ 入庫 ◯ 棚卸 ◯ 返品 ◯ 在庫締め ◯ ◯ ◯ ◯
106. 特徴４ 機能タブの表示・非表示切替 106
107. ユーザ 本社 SB 直営店 代理店 ロジ 担当者 販促物 担当者 YM 併売店 取次店 店舗 量販 外販 SY システム 管理者 店長 店員 YS 一次 運営店 法人 広域 責任者 閲覧者 管理者 責任者 閲覧者 責任者 閲覧者 責任者 閲覧者 各ユーザによって使う機能が異なる ユーザドメイン
108. ユーザ権限に合わせて機能を非表示して利用制限 108 利用制限 本社 ロジ 担当者 販促物 担当者 システム 管理者 本社の社員は棚卸や返品の必要がないため非表示 ユーザブル＆セキュアブル ・ユーザが使う機能へのリーチが容易 ・無関係なユーザが操作するリスクが 無くセキュア
109. 特徴５ ソートキーのプルダウン化 109
110. ToBe ソートキー選択はプルダウンメニュー 110 少ない画面リソースを 活用しやすい仕様
111. 特徴６ 棚卸はデフォルトで全選択 111
112. ToBe 棚卸はデフォルトで全選択 112 SCM開発チームの意見を反映 棚卸対象を毎度一つずつ 選択していくと膨大な時 間がかかる。 棚卸対象は全選択をデフ ォルトにするべき SCM
113. UI改善の意義 113
114. ユーザビリティ（使いやすさ）を司る２大要因 114 UIの品質 ユーザの慣れ
115. UI刷新時の想定懸念 ヘビーユーザからのクレーム 115 ユーザは使いにくいシステムも慣れれば使いやすく感じる 改修前のシステムの方が使いやすかったのに！ ヘビー ユーザ TwitterのUI刷新時などでよく観測されるユーザの声
116. UIを刷新する意義 新規ユーザの学習・研修コスト削減 116 UI品質を高めれば新規ユーザにとって使いやすくなる 操作マニュアルが無くても使える！ 新規 ユーザ
117. 提案の評価 117
118. 提案の評価 費用対効果の懸念 我々では良し悪しの判断が難しい。 案件化するには費用対効果を算出して 月何円削減できるかを明示する必要がある。 UI改修でそこをどう主張していくかが最大の課題。 業務側 118
119. 提案の評価 開発コスト大 改修後の開発効率向上に期待大 改修コストがかなり高いと思われる。フレームワークを 利用しない場合は下手をすれば数年がかかり。ARKが使 えると楽そう。 しかし、もし実装できればその後の機能追加は今よりは るかに楽になるであろう。 ソースコードの削減にも繋がりそう。 開発担当 ベンダー 119
120. 本資料の評価 120
121. 全社展開 本資料 121
122. 本資料の評価 全社アンケート 総合評価 122 2021/12/14 [n=37] 総合評価 4.3 人数/評価
123. 本資料の評価 全社アンケート 業務に活かせる 123 2021/12/14 [n=37] 業務に活かせる 4.2 人数/評価
124. 本資料の評価 全社アンケート 次回作があれば読みたい 124 2021/12/14 [n=37] 次回作があれば読みたい 4.7 人数/評価
125. 本資料の評価 全社アンケート 特に改善点２は全社員が読むべきと思いました。 SB社員 125 階層構造の整理とOOUIの話が、例もあって、と ても分かりやすかった よく勉強されているなと思いました。私もUXデザ イナとしてお仕事しているのでお話できたら楽し そうだなと思いました。
126. まとめ SCMOne店舗在庫領域のUI改善 改善提案 1. シングルページアプリ化 a. レイアウト変更 b. 無限スクロール 2. オブジェクトとタスクを分別 a. 「使いづらい」瞬間 b. 人間の記憶構造に近似 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. レコードの一括操作 8. 社内フレームワーク脱却 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. 機能タブの表示・非表示切替 5. ソートキーのプルダウン化 6. 棚卸はデフォルトで全選択 126
128. 付録 128
129. 引用に関する 著作法への配慮 129
130. 引用の著作権 著作法 第32条に則り掲載 130 “[1]公正な慣行に合致すること，引用の目的上，正当な範囲内で行わ れることを条件とし，自分の著作物に他人の著作物を引用して利用す ることができる。同様の目的であれば，翻訳もできる。（注5）[2]国 等が行政のPRのために発行した資料等は，説明の材料として新聞， 雑誌等に転載することができる。ただし，転載を禁ずる旨の表示がさ れている場合はこの例外規定は適用されない。”
131. 引用の著作権 著作法 第32条に対する文化庁の見解 131 “（注5）引用における注意事項 他人の著作物を自分の著作物の中に取り込む場合，すなわち引用を行う場合，一般的には，以下の事項に注意しなければなりません。 （1）他人の著作物を引用する必然性があること。 （2）かぎ括弧をつけるなど，自分の著作物と引用部分とが区別されていること。 （3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）。 （4）出所の明示がなされていること。（第48条） （参照：最判昭和55年3月28日 ｢パロディー事件｣）” 参考：https://www.bunka.go.jp/seisaku/chosakuken/seidokaisetsu/gaiyo/chosakubutsu_jiyu.html
132. 既存UI 132
133. メインメニュー 入荷 133
134. メインメニュー 店舗間移動 134
135. メインメニュー 在庫照会 135
136. メインメニュー 在庫修正 136
137. メインメニュー 商品予約 137
138. メインメニュー 棚卸 138
139. メインメニュー RFIDタグ印刷 139
140. メインメニュー 返品 140
141. 入荷 入荷検索 141
142. 入荷 入荷検索（独自商品） 142
143. 入荷 入荷登録（独自商品） 143
144. 店舗間移動 入庫検索 144
145. 店舗間移動 出庫検索 145
146. 店舗間移動 出庫登録 146
147. 店舗間移動 出庫検品 147
148. 店舗間移動 出庫検品 キーボード入力 148
149. 店舗間移動 出庫登録 149
150. 店舗間移動 取次店検索 150
151. 在庫照会 在庫状況 151
152. 在庫照会 在庫状況（過去日） 152
153. 在庫照会 在庫受払検索 153
154. 在庫照会 在庫数一覧 154
155. 在庫照会 シリアル情報照会 155
156. 在庫修正 商品選択 156
157. 在庫修正 在庫修正 157
158. 商品予約 商品予約登録 商品コード入力 158
159. 商品予約 商品予約登録 159
160. 商品予約 予約済商品一覧（予約解除） 160
161. 棚卸 棚卸対象選択 161
162. 棚卸 棚卸中のデータがある 162
163. 棚卸 カテゴリ別棚卸-移動機 163
164. 棚卸 棚卸再開／取消 164
165. 棚卸 棚卸履歴検索 165
166. RFIDタグ印刷 166
167. 返品 返品登録 商品種別選択 167
168. 返品 返品登録 168
169. 返品 返品一覧／返品取消 169
170. 既存UIの構造図解 170
171. 既存UIの構造図解 171
172. 既存UIの構造図解 172
173. 既存UIの構造図解 173
174. 既存UIの構造図解 174
175. 既存UIの構造図解 175
176. 既存UIの構造図解 176
177. 既存UIの構造図解 177
178. 既存UIの構造図解 178
179. 既存UIの構造図解 179
180. 既存UIの構造図解 180
181. 既存UIの構造図解 181
182. 既存UIの構造図解 182
183. 既存UIの構造図解 183
184. 既存UIの構造図解 184
185. 既存UIの構造図解 185
186. 既存UIの構造図解 186
187. 既存UIの構造図解 187
188. 既存UIの構造図解 188
189. 既存UIの構造図解 189
190. 既存UIの構造図解 190
191. 既存UIの構造図解 191
192. Ver1 低精度プロトタイプ 193
193. Ver1 提案UI 194
194. Ver1 商品ページUI 195
195. Ver1 商品ページUI 商品検索条件 196
196. Ver1 商品ページUI 商品 197
197. Ver1 商品ページUI アクションボタン 198
198. Ver1 商品ページUI プルダウン 199
199. Ver1 伝票ページUI 200
200. Ver1 伝票ページUI 201
201. 評価 ver1 コンセプトは理解したけど、 データがないとイメージが湧かない。 店舗スタッフもそれは同じだと思う。 次回はダミーレコードを入れてきて。 業務側 202
202. Ver2 中精度プロトタイプ 203
203. Ver2 商品 在庫 照会 204
204. Ver2 商品 在庫 更新 対象未選択 205
205. Ver2 商品 在庫 更新 対象選択中１ 206
206. Ver2 商品 在庫 更新 対象選択中２ 207
207. Ver2 商品 出庫 登録 208
208. Ver2 商品 受払 照会 209
209. Ver2 商品 予約 照会 210
210. Ver2 商品 予約 照会 211
211. Ver2 商品 棚卸 更新 個体管理品 対象未選択 212
212. Ver2 商品 棚卸 更新 個体管理品 対象選択中 213
213. Ver2 商品 棚卸 更新 数量管理品 対象未選択 214
214. Ver2 商品 棚卸 更新 数量管理品 対象選択中 215
215. Ver2 商品 棚卸 更新 個体管理差分 対象未選択 216
216. Ver2 商品 棚卸 更新 個体管理差分 217
217. Ver2 商品 棚卸 更新 数量管理差分 対象未選択 218
218. Ver2 商品 棚卸 更新 数量管理差分 219
219. Ver2 商品 棚卸 個体管理品 照会 220
220. Ver2 商品 棚卸 数量管理品 照会 221
221. Ver2 商品 棚卸 個体管理品差分 照会 222
222. Ver2 商品 棚卸 数量管理品差分 照会 223
223. Ver2 商品 返品 登録（CS商材） 224
224. Ver2 商品 返品 登録（SB商材） 225
225. Ver2 商品 入荷 照会 226
226. Ver2 伝票 出庫 照会 227
227. Ver2 伝票 入庫 照会 228
228. Ver2 伝票 棚卸 照会 229
229. Ver2 伝票 返品 照会 230
230. 評価 ver2 概ね良さそう。 しかし、棚卸は再検討の余地あり。 チェックボックスを入力しないと棚卸が 実施できないのは不便だし分かりづらい。 SCM メンバ 231
231. 評価 ver2 改修漏れが怖いので課題表を 作成して順次課題消化していきましょう。 工数見積はその後です。 開発担当 ベンダ 232
232. Ver3 高精度プロトタイプ 233
233. Ver3 商品 在庫数照会 234
234. Ver3 商品 在庫 照会 シリアルナンバー 235
235. Ver3 商品 在庫数 照会 運営店 236
236. Ver3 商品 在庫 更新 対象未選択 237
237. Ver3 商品 在庫 更新 選択中 238
238. Ver3 伝票 出庫 登録 239
239. Ver3 商品 受払 更新 240
240. Ver3 商品 受払 照会 241
241. Ver3 商品 予約 照会 242
242. Ver3 商品 予約 登録 243
243. Ver3 伝票 棚卸 更新 244
244. Ver3 伝票 棚卸 照会 245
245. Ver3 伝票 棚卸 登録 246
246. Ver3 商品 登録（返品登録CS商材） 247
247. Ver3 商品 登録（返品登録SB商材） 248
248. Ver3 伝票 入荷 照会 249
249. Ver3 伝票 出庫 照会 250
250. Ver3 伝票 入庫 照会 251
251. Ver3 伝票 棚卸 照会 252
252. Ver3 伝票 返品 照会 253
253. Ver3 伝票 在庫締め 照会 254
254. Ver3 伝票 在庫締め 登録 255
255. Ver3 伝票 在庫締め 更新 256