ブログ
-
Magnetic Button UI（カーソルに引き寄せられるインタラクション）
1.Magnetic Button UIとは カーソルが近づくと、ボタンが「吸い付く」ように動くインタラクションです。 単なるホバー演出ではなく、「操作している感触」を作るUIです。 このような動きは…
-
スクロールで出現するフローティングボタンの作り方【Floating Action Button UI】
画面右下にふわっと現れる丸いボタン。モバイルUIではよく見かけるパターンです。 この記事では、 をまとめて実装します。 1.実装コード HTML CSS JavaScript 2.ポイント解説 ① ス…
-
UIモーション設計の考え方｜バラバラ実装を卒業する
UIアニメーションを作っていると、こんな状態になりませんか？ 👉 全部バラバラ これだと、後から追加・修正がどんどんつらくなります。 この記事では、UIモーションを“設計として整理する考え方…
-
Momentum Drag UIの作り方（慣性スクロールをJavaScriptで再現）
ドラッグを離したあと、スーッと動き続けるUIを見たことはありませんか？ iOSのスクロールやカードUIなどでよく使われている「慣性（Momentum）」です。 この記事では、JavaScriptでこの…
-
Swipe Gesture UI（カードをスワイプして操作するUI）
スマホアプリでは当たり前になっている「スワイプ操作」。 カードを左右に動かして「YES / NO」や「削除 / 保存」などを直感的に選択できるUIです。 今回はこのスワイプUIを、JavaScript…
-
Drag Interaction UI（ドラッグ操作UIの作り方）
1.Drag Interaction UIとは ドラッグ操作は、単なるイベント処理ではなく「入力設計」と「状態管理」が重要になります。先に理解しておくと、実装がかなりスムーズになります。 ドラッグ操作…