OOUIとTBUIのバランスからみるkintoneのUI設計

kintone Café 東京 Vol.25 petitで登壇した際の資料です。
https://kintone-cafe-tokyo.connpass.com/event/373252/

Transcript

1. OOUIとTBUIのバランスから みるkintoneのUI設計 2025.12.10 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Abe Yui オブジェクト志向UI タスクベースUI
2. 自己紹介 3 • ITエンジニア @教育・子ども支援 NPO • Webアプリ開発・各種 SaaSの権限自動化・生成 AI導入/教育・kintoneアプリ 開発...etc • kintone歴 ◦ ユーザーとして： 4年 ◦ アプリ開発者として： 3ヶ月未満（初心者です ...！） ◦ kintoneのチーム応援プラン（ NPO割引）には大変大変お世話になってい ます
3. オブジェクト志向UIとタスクベースUI © Google Inc. 2 OOUI TBUI
4. オブジェクト志向 UI（OOUI） 9 • オブジェクト（ 名詞=モノ）を起点とした UI • 対象となるモノを選択・特定してから、操作を加える 料理に例えると... 目の前にある材料が起点 目の前の材料を基に、下ごしらえ する、包丁で切る、炒める、煮る ... など作業する。 必ずしも線形的/固定的に作業 する必要はなく、自由な順番で 作業できる。思い描いた最終形 が途中で変わってもよい
5. タスクベース UI（TBUI） 9 • タスク（動詞=やること）を起点とした UI • 特定の操作（作業）の流れに沿って動くことが前提 料理に例えると... レシピ（作業工程）が起点 レシピに忠実に作業することで、 着実に当初の最終成果に到達で きる。 決まった作業の流れから外れる ことは想定されていない 。または 流れから外れるのが仕組み的に / 心理的に難しい
6. OOUIとTBUI 9 オブジェクト志向 UI （OOUI） タスクベース UI （TBUI） 基本の設計 オブジェクト（名詞=モノ）を起点としたUI タスク（動詞=やること）を起点としたUI 操作の順序 名詞 → 動詞（オブジェクトを選択してからアクション を選択） 動詞 → 名詞（タスクを選択してから対象物やパラ メーターを指定） UIの構成 モードレス で、ユーザーが対象オブジェクトを自由に 操れることを基本とする モーダル な操作手順が多く、特定の入力操作を強要 し、ユーザーの仕事を中断する メンタルモデ ル 日常生活の作業（モノを選んでから行動）と同じ感覚 で、ユーザーのメンタルモデルと一致しやすい 日常の「商品を選んでからお金を払う」というような基 本の流れとは逆になる場合がある 操作性/拡張 性 高い。開発者/ユーザー双方にとって、線形的な手順 に縛られず、自由度が高い 低くなりやすい。固定的/線形的な作業フローを前提と したUIに縛られる
7. kintoneのUIは？ 基本的にはオブジェクト志向UI （「kintoneの『アプリ』は要するにデータベースだよ～」） 10 • ユーザーが最初に目 にするのはレコード一 覧（=名詞） • 特定のレコードを選 び、編集・削除・コメン ト付与・承認申請など の操作をおこなう • 開発者にとって最も重 要なのは、適切なデー タモデリングとフィール ド設計
8. タスク志向 UIによる調整 ユーザーのタスクや役割/特性に応じて、タスク志向寄りに使うこともできる（→バ ランスを取れる） 10 ポータルから新規レコード作成画面に直接リ ンク（ex.「日報を書く」） プラグイン （＝特定のふるまいを実現する道具） プロセス管理 （決まった流れでレコードを処理） 通知/リマインド （TODOを知らせる）
9. kintoneのUI設計をどう考える？ 1/2 • 人間の認知の順番はモノ→動作 ◦ よって、レコード一覧画面を中心としたOOUIは理にかなっている • 一方で、固定的なタスクに早期に慣れてもらいたい場合は、タスク志向が適 している場合もある • cf. 祖母にLINEの使い方を教えた思い出 ◦ 「まずホーム画面でこのボタンを押して」、「次にこの画面でメッセージ相 手を選んで」、「ここにメッセージを打ち込んで」、「この送信ボタンを押 す」みたいなタスク志向の説明 になる ◦ 「アプリ」「アカウント」「チャット」みたいなオブジェクトの理解は二の次 ◦ UIがちょっとでも変わったら一気に不安になる（ex.広告が出現） ◦ 自由度が低い。自律的/発展的な使い方に広がっていかない 10
10. kintoneのUI設計をどう考える？ 2/2 • kintoneの良さは、アプリユーザーと開発者の垣根が低く、誰もが設計視点を 持って仕組みを改善していけること ◦ cf. 「市民開発」 • みんなで仕組み改善していくためには、なるべく全員がアプリのデータモデ ルを把握する必要がある • kintoneのオブジェクト志向のUIは、アプリユーザーが自然と業務のデータモ デルを把握するのに適している ◦ cf. スプレッドシートやExcelは、表形式といえどもフリーフォーマットで何 でも書けてしまうので、メンタルモデルの形成につながりにくい 10 結論：kintoneはモノが中心だからこそ、「みんなで作ってみ んなで使う」チームワークにつながるのでは