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
430
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
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
「UXとUIの違い」v2
shirasu3
0
250
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
400
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
590
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
190
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
640
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.1k
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Building an army of robots
kneath
306
46k
The Pragmatic Product Professional
lauravandoore
36
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Experiences People Love
moore
142
24k
Building Applications with DynamoDB
mza
96
6.7k
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アプリに実装していく!(ネイティブに負けないように)