Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ノーコードLT大会_Block_UIによるエディタとアプリの進化
Search
ノーコード総研編集部
March 15, 2023
0
460
ノーコードLT大会_Block_UIによるエディタとアプリの進化
ノーコード総研編集部
March 15, 2023
Tweet
Share
More Decks by ノーコード総研編集部
See All by ノーコード総研編集部
Yappli x ChatGPTの検証まとめ
nocodesoken
0
300
Bubble で Pinecone を使って Custom ChatGPT を作る方法
nocodesoken
0
350
ノーコード普及のためのボトムアップ戦略
nocodesoken
0
510
ノーコードツールを使った初期プロダクト開発の進め方
nocodesoken
0
27
Block UIによるYappliの エディタとアプリの進化
nocodesoken
0
150
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Mobile First: as difficult as doing things right
swwweet
223
9.7k
4 Signs Your Business is Dying
shpigford
184
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Balancing Empowerment & Direction
lara
1
510
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Designing for Performance
lara
610
69k
The Invisible Side of Design
smashingmag
301
51k
Transcript
Block UIによるYappliの エディタとアプリの進化 @ノーコードLT大会 2023/2/22(水)
自己紹介 名前 小野田奈生 所属 プロダクト開発本部 開発企画部 職種 プロダクトマネージャー(開発ディレクター) 経歴 2018年4月
→ 2021年9月 担当 Enhance領域=CS寄りの開発 (⇆Growth領域=営業寄りの開発) ・新基盤「Block UI」・アプリのUIアップデートプロジェクト ・顧客要望シューティングプロジェクト「ideabox」
Block UI Yappliの既存の課題を解決し アプリらしいUXを目指した 基盤刷新プロジェクト
Agenda • Block UI登場以前のYappliの特徴と課題 • Block UIでどのように解決したのか ◦ 管理画面デモ
Block UI登場以前の Yappliの特徴と課題
Block UI登場以前のYappliの特徴 コンテンツを見せることに特化した機能 デザインに特化した機能 1 2
コンテンツを見せることに特化した機能 1 • ビデオ機能・電子書籍機能・通知履歴機能 等
デザインに特化した機能 2 • フリーレイアウト機能・ニュース機能
Block UI登場以前のYappliの特徴 コンテンツを見せることに特化した機能 デザインに特化した機能 1 2 →Good👍 Motto💪 な点を紹介
コンテンツ特化機能 1 • 👍ビギナーでも使いやすい • 💪UIが固定 管理画面 アプリでの表示
2 • 画面の要素を6層に分け定義 新しいレイヤーの概念
デザイン特化機能 2 • 👍自由度の高いレイアウト • 💪学習コストが高い • 💪データの二重管理 • 💪アプリらしいUXが実現しにくい
• 💪(開発面)拡張性・保守性が低い
• 💪学習コストが高い ◦ 設定項目が多数、HTMLのCSS ◦ 全て1から設定する 2 デザイン特化機能 管理画面の例① プレビューと基本設定
• 💪学習コストが高い ◦ 設定項目が多数、HTMLのCSS ◦ 全て1から設定する 2 デザイン特化機能 管理画面の例② 詳細設定
• 💪データの二重管理 ◦ 「ホーム画面にコンテンツのサムネだけ用意する」 といった使われ方が非常に多かった ◦ 両方のページを手動更新していく必要があり、 運用負荷が高かった 2 デザイン特化機能
ホーム画面 コンテンツ一覧画面
• 💪アプリらしいUXが実現しにくい ◦ HTMLでいう<div>で画面の全てを構成する状態 ◦ 非セマンティックな要素のため、タップに対するアニメーションが付けにくい・アクセシビリティへの対 応などに課題あり • 💪(開発面)拡張性・保守性が低い ◦
セルの仕様変更・拡張に対する影響範囲が多い 2 デザイン特化機能
自由度の高いレイアウト まとめ:Block UI登場以前のYappliの特徴と課題 デザイン特化機能 コンテンツ特化機能 Good👍 用途に特化したUI・設定項目 Motto💪 学習コストが高い データの二重管理
アプリらしいUX 拡張性・保守性が低い UIが固定
Block UIで どのように解決したのか
学習コストが高い UI Editorとデータ管理の明確化 管理画面の刷新と プリセットデザインの準備 新しいレイヤーの概念 1 2 3 UIが固定・データの二重管理
アプリらしいUX・保守性が低い Motto💪 Yappliの課題をBlock UIでどのように解決したか
UI Editorとデータ管理の明確化 1 • 「Block UI Editor」を実装 • 表示するデータとして入稿済みの機能を呼び出せる仕組みを実装 ◦
次ページにスクショあり
Block UI Editor
ブロック操作 アプリプレビュー 詳細設定
他機能で入稿したデータを呼び出せる仕組みを実装
1 • → デザイン特化機能で行われていた「二重管理」を解消 • → コンテンツ特化機能の「UI固定」を解消 UI Editorとデータ管理の明確化
1 ビデオ 通知履歴 電子書籍 ビデオ 通知履歴 電子書籍 × • →開発工数の削減
UI Editorとデータ管理の明確化
新しいレイヤーの概念 2 Element Item Block Group Space Page ←ユーザが追加できる最小の単位 •
画面の要素を6層に分け定義
2 • 用途ごとに「ブロック」を用意 新しいレイヤーの概念
2 • →アプリらしいUXを実現 • →(開発面)改修の影響が基本は「ブロック」に閉じるため影響範囲が少 ない 新しいレイヤーの概念
• テンプレートや、既に「いい感じ」の設定がされたプリセットのデザインを用 意 • →学習コストが低く、Yappliビギナーでも活用が可能 • 次ページにスクショあり 管理画面の刷新とプリセットデザインの準備 3
テンプレートを選択できる仕組みを実装 同じブロックでも、調整済みの初 期設定をいくつか用意
学習コストが高い 再掲:Yappliの課題をBlock UIでどのように解決したか UI Editorとデータ管理の明確化 管理画面の刷新と プリセットデザインの準備 新しいレイヤーの概念 1 2
3 UIが固定・データの二重管理 アプリらしいUX・保守性が低い Motto💪
Yappli tech blog 「ノーコード開発プラットフォーム の課題と アプリ基盤改善プロジェクト」 もっと詳しく知りたい方向けの記事 #times-yappli(オープン社内報) 「Block UIの世界
#いしむの知らない世界!」