ノーコードLT大会_Block_UIによるエディタとアプリの進化

Transcript

1. Block UIによるYappliの エディタとアプリの進化 @ノーコードLT大会 2023/2/22(水)
2. 自己紹介 名前 小野田奈生 所属 プロダクト開発本部 開発企画部 職種 プロダクトマネージャー（開発ディレクター） 経歴 2018年4月　 → 2021年9月 担当 Enhance領域=CS寄りの開発 （⇆Growth領域=営業寄りの開発） 　 　・新基盤「Block UI」・アプリのUIアップデートプロジェクト 　・顧客要望シューティングプロジェクト「ideabox」
3. Block UI Yappliの既存の課題を解決し アプリらしいUXを目指した 基盤刷新プロジェクト
4. Agenda • Block UI登場以前のYappliの特徴と課題 • Block UIでどのように解決したのか ◦ 管理画面デモ
5. Block UI登場以前の Yappliの特徴と課題
6. Block UI登場以前のYappliの特徴 コンテンツを見せることに特化した機能 デザインに特化した機能 １ ２
7. コンテンツを見せることに特化した機能 １ • ビデオ機能・電子書籍機能・通知履歴機能 等
8. デザインに特化した機能 2 • フリーレイアウト機能・ニュース機能
9. Block UI登場以前のYappliの特徴 コンテンツを見せることに特化した機能 デザインに特化した機能 １ ２ →Good👍 Motto💪 な点を紹介
10. コンテンツ特化機能 １ • 👍ビギナーでも使いやすい • 💪UIが固定 管理画面 アプリでの表示
11. ２ • 画面の要素を６層に分け定義 新しいレイヤーの概念
12. デザイン特化機能 2 • 👍自由度の高いレイアウト • 💪学習コストが高い • 💪データの二重管理 • 💪アプリらしいUXが実現しにくい • 💪（開発面）拡張性・保守性が低い
13. • 💪学習コストが高い ◦ 設定項目が多数、HTMLのCSS ◦ 全て１から設定する 2 デザイン特化機能 管理画面の例① プレビューと基本設定
14. • 💪学習コストが高い ◦ 設定項目が多数、HTMLのCSS ◦ 全て１から設定する 2 デザイン特化機能 管理画面の例② 詳細設定
15. • 💪データの二重管理 ◦ 「ホーム画面にコンテンツのサムネだけ用意する」 といった使われ方が非常に多かった ◦ 両方のページを手動更新していく必要があり、 運用負荷が高かった 2 デザイン特化機能 ホーム画面 コンテンツ一覧画面
16. • 💪アプリらしいUXが実現しにくい ◦ HTMLでいう<div>で画面の全てを構成する状態 ◦ 非セマンティックな要素のため、タップに対するアニメーションが付けにくい・アクセシビリティへの対 応などに課題あり • 💪（開発面）拡張性・保守性が低い ◦ セルの仕様変更・拡張に対する影響範囲が多い 2 デザイン特化機能
17. 自由度の高いレイアウト まとめ：Block UI登場以前のYappliの特徴と課題 デザイン特化機能 コンテンツ特化機能 Good👍 用途に特化したUI・設定項目 Motto💪 学習コストが高い データの二重管理 アプリらしいUX 拡張性・保守性が低い UIが固定
18. Block UIで どのように解決したのか
19. 学習コストが高い UI Editorとデータ管理の明確化 管理画面の刷新と プリセットデザインの準備 新しいレイヤーの概念 １ ２ ３ UIが固定・データの二重管理 アプリらしいUX・保守性が低い Motto💪 Yappliの課題をBlock UIでどのように解決したか
20. UI Editorとデータ管理の明確化 １ • 「Block UI Editor」を実装 • 表示するデータとして入稿済みの機能を呼び出せる仕組みを実装 ◦ 次ページにスクショあり
21. Block UI Editor
22. ブロック操作 アプリプレビュー 詳細設定
23. 他機能で入稿したデータを呼び出せる仕組みを実装
24. １ • → デザイン特化機能で行われていた「二重管理」を解消 • → コンテンツ特化機能の「UI固定」を解消 UI Editorとデータ管理の明確化
25. １ ビデオ 通知履歴 電子書籍 ビデオ 通知履歴 電子書籍 × • →開発工数の削減 UI Editorとデータ管理の明確化
26. 新しいレイヤーの概念 ２ Element Item Block Group Space Page ←ユーザが追加できる最小の単位 • 画面の要素を６層に分け定義
27. ２ • 用途ごとに「ブロック」を用意 新しいレイヤーの概念
28. ２ • →アプリらしいUXを実現 • →（開発面）改修の影響が基本は「ブロック」に閉じるため影響範囲が少 ない 新しいレイヤーの概念
29. • テンプレートや、既に「いい感じ」の設定がされたプリセットのデザインを用 意 • →学習コストが低く、Yappliビギナーでも活用が可能 • 次ページにスクショあり 管理画面の刷新とプリセットデザインの準備 ３
30. テンプレートを選択できる仕組みを実装 同じブロックでも、調整済みの初 期設定をいくつか用意
31. 学習コストが高い 再掲：Yappliの課題をBlock UIでどのように解決したか UI Editorとデータ管理の明確化 管理画面の刷新と プリセットデザインの準備 新しいレイヤーの概念 １ ２ ３ UIが固定・データの二重管理 アプリらしいUX・保守性が低い Motto💪
32. Yappli tech blog 「ノーコード開発プラットフォーム の課題と アプリ基盤改善プロジェクト」 もっと詳しく知りたい方向けの記事 #times-yappli（オープン社内報） 「Block UIの世界 #いしむの知らない世界！」