Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluid interfaces for Monaca

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Daisuke Kishino Daisuke Kishino
December 13, 2018
Design
250
0

Fluid interfaces for Monaca

Avatar for Daisuke Kishino

Daisuke Kishino

December 13, 2018

More Decks by Daisuke Kishino

See All by Daisuke Kishino
Flutterコンテストを開催した話
Avatar for Daisuke Kishino kishino
1
460
Monaca、WKWebViewに移行しようぜ！
Avatar for Daisuke Kishino kishino
0
950
Ionicあらまし@okayama-js
Avatar for Daisuke Kishino kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
Avatar for Daisuke Kishino kishino
0
970
Sign In with Appleを実装してみた
Avatar for Daisuke Kishino kishino
0
440
Vue.jsの特徴
Avatar for Daisuke Kishino kishino
0
610
Monacaでアプリ名の多言語化
Avatar for Daisuke Kishino kishino
0
780

Other Decks in Design

See All in Design
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
780
I.A. como meio, não como fim. Dados + IA e até onde vai a promessa?
Avatar for Viviane Delvequio videlvequio
0
290
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
270
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
110
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
1.1k
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
1
2.6k
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
180
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
610
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
220
20251217リビングラボ・トークin尼崎（尼崎おせっかい会議＆オトナテラコヤ）
Avatar for Kimura Atsunobu a2k
0
110
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
540
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.4k

Featured

See All Featured
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
540
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
540
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
150
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
190
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
170
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
220
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
280
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.9k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
400

Transcript

  1. Fluid interfaces for Monaca Monaca UG OKAYAMA#3 Daisuke Kishino

  2. None

  3. A tool that feels like an extension of your mind

    思考の延長のように感じるツール (＝体の一部のように感じるインターフェース)

  4. •Redirectable •Seamless Motion •Monacaで実装

  5. Redirectable

  6. iPhone 8 iPhone X

  7. 考えてから動かす 考える 決定する 動かす 離す

  8. 考えながら動かす 考える 決定する 動かす 離す

  9. Swipe Back

  10. Modal (YouTube)

  11. Seamless Motion

  12. None

  13. Spring Animation (ばね)

  14. •減衰比(damping ratio) •周波数応答(frequency) http://dynamicsjs.com/

  15. Apple Music

  16. Monacaで実装

  17. YouTubeライクなUI

  18. 減衰比100% 減衰比80%

  19. タッチ開始時点の 座標 タッチ開始時点のモーダル 位置 スワイプ分モーダル 位置を変更 表示範囲内なら、実際に を更新 タッチ終了時に画面半分下ならモーダルを最小化する ‘

    ’ 減衰比80%でアニメーション実行 画面半分以上ならモーダルを最大化する ‘ ’ 減衰比100%でアニメーション実行
  20. None

  21. ハマった点

  22. • スクロールとの兼ね合い • モーダルを閉じている間は、スクロールできないよう にする(Event.preventDefault) • タッチイベントは画像のみに設定する

  23. https://github.com/kishino/fluid-interfaces-sample

  24. まとめ

  25. • Fluid interfacesはこれまでもあったし、これからより普及する • HTML/JS/CSSでも実現は可能(実装コストはかかる) • 少しずつでもMonacaアプリに実装していく！(ネイティブに負けないように)