Block UIによるYappliの エディタとアプリの進化

Transcript

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