Idle Interface とは
Idle Interface は、インタラクティブUIの“動き”を、雰囲気ではなく設計として理解するためのラボです。
見た目のアニメーションだけで終わらせず、
- 時間制御（deltaTime / Fixed Time Step）
- 状態管理（State / Scene）
- 入力設計（Input）
- イベント設計（Event）
- 描画統合（Canvas / Render）
- パフォーマンス（fps / frame time）
までを、**「なぜそう作るのか」**から解きほぐし、再現できる形に落とし込みます。
このサイトでやっていること
1) 設計の“型”を、順番に積み上げる
Idle Interface は、requestAnimationFrame から始まり、deltaTime → easing → ループ設計 → Fixed Time Step → 状態管理 → Interpolation → Canvas → Input → Scene → Event → 統合構築へ進む、体系型のカリキュラムです。
あなたが今どこにいても、次に学ぶべき内容へ自然につながるように設計しています。
2) 文章だけでなく、実験で“見える化”する
動きの設計は、読んだだけだと誤解が残りやすい分野です。
そこで記事内では、**小さな実験UI（CodePen等）**を使い、差分が目で分かる形で検証します。
こんな人に向いています
- UIの動きが「なんとなく」で終わっていて、再現性がほしい
- requestAnimationFrame は使えるけど、設計の正解が分からない
- fps/カクつき/入力遅延など、原因と対策を構造で理解したい
- ゲームっぽい実装に寄せたいわけではないが、UI設計としてのループ設計は学びたい
- Canvas や状態管理を入れた途端に、コードが崩れる／増殖する
設計ポリシー
- 最小のコードで、最大の理解
まず“核”だけを出し、必要に応じて拡張します。 - ベストプラクティスの丸暗記ではなく、判断基準を作る
どの方式を選ぶべきか／なぜそれが効くのか、を優先します。 - 作って終わりではなく、統合して壊れない形へ
Input・Scene・Event まで含めて「増えても破綻しない設計」を扱います。
公開中のシリーズ（Animation Fundamentals / Chapter 2）
現在公開している記事は次の通りです。
- #01 requestAnimationFrameの使い方
- #02 deltaTimeとは？
- #03 easing / cubic-bezier
- #04 フレームレートとパフォーマンス
- #05 cancelAnimationFrame設計
- #06 減速ルーレット（実践）
- #07 アニメーション設計まとめ
- #08 ループ設計
- #09 Fixed Time Step
- #10 状態管理統合
- #11 Interpolation
- #12 Canvas統合
- #13 Input設計
- #14 Scene管理進化
- #15 Event設計
- #16 実践構築（統合）
使い方（おすすめの読み順）
- 初めての方は、#01 → #07 で「基礎の骨格」を作るのがおすすめです。
- その後 #08 → #12 で「時間制御と描画の統合」を固め、
- #13 → #16 で「入力・シーン・イベントを含めた拡張設計」に進みます。
このラボが目指すもの
UIの“気持ちよさ”は、センスだけで作られるものではありません。
入力 → 状態 → 時間 → 描画 → イベントの流れを整理し、
小さな実験で確かめながら積み上げれば、誰でも再現性を持って作れます。
Idle Interface は、そのための Interactive UI Design Lab として運営しています。
連絡・依頼
記事の誤り指摘、追加で見たい実験テーマ、取り上げてほしいUI挙動などがあれば、
サイト内の連絡手段（フォーム / SNS 等）からご連絡ください。
※掲載しているコードや実験は、理解を助けるためにできるだけミニマルにしています。
免責
本サイトの内容は、正確性に配慮していますが、利用によって生じたいかなる損害についても責任を負いません。
各自の環境に合わせて検証のうえご利用ください。