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
Fluid interfaces for Monaca
Search
Daisuke Kishino
December 13, 2018
Design
0
250
Fluid interfaces for Monaca
Daisuke Kishino
December 13, 2018
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
420
Monaca、WKWebViewに移行しようぜ!
kishino
0
910
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
900
Sign In with Appleを実装してみた
kishino
0
430
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
750
Other Decks in Design
See All in Design
佐藤千晶|ポートフォリオ
chimi_chia
0
170
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
170
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
The Spectacular Lies of Maps
axbom
PRO
1
310
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
500
CursorでAI活用のナレッジベースを構築する
kanzaki
0
750
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
230
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Building Adaptive Systems
keathley
43
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
A Tale of Four Properties
chriscoyier
160
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Documentation Writing (for coders)
carmenintech
75
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Context Engineering - Making Every Token Count
addyosmani
5
220
Transcript
Fluid interfaces for Monaca Monaca UG OKAYAMA#3 Daisuke Kishino
None
A tool that feels like an extension of your mind
思考の延長のように感じるツール (=体の一部のように感じるインターフェース)
•Redirectable •Seamless Motion •Monacaで実装
Redirectable
iPhone 8 iPhone X
考えてから動かす 考える 決定する 動かす 離す
考えながら動かす 考える 決定する 動かす 離す
Swipe Back
Modal (YouTube)
Seamless Motion
None
Spring Animation (ばね)
•減衰比(damping ratio) •周波数応答(frequency) http://dynamicsjs.com/
Apple Music
Monacaで実装
YouTubeライクなUI
減衰比100% 減衰比80%
タッチ開始時点の 座標 タッチ開始時点のモーダル 位置 スワイプ分モーダル 位置を変更 表示範囲内なら、実際に を更新 タッチ終了時に画面半分下ならモーダルを最小化する ‘
’ 減衰比80%でアニメーション実行 画面半分以上ならモーダルを最大化する ‘ ’ 減衰比100%でアニメーション実行
None
ハマった点
• スクロールとの兼ね合い • モーダルを閉じている間は、スクロールできないよう にする(Event.preventDefault) • タッチイベントは画像のみに設定する
https://github.com/kishino/fluid-interfaces-sample
まとめ
• Fluid interfacesはこれまでもあったし、これからより普及する • HTML/JS/CSSでも実現は可能(実装コストはかかる) • 少しずつでもMonacaアプリに実装していく!(ネイティブに負けないように)