投稿者: Idle Interface
-
Skeleton Loaderの作り方｜ローディング体験を改善するUIパターン
1.Skeleton Loaderとは Webサイトやアプリでデータを読み込むとき、何も表示されないとユーザーは「止まっているのでは？」と感じてしまいます。 そこでよく使われるのが Skel…
-
クリック位置から広がる Ripple エフェクトの作り方【JavaScript / UIフィードバック】
UIのクリックフィードバックとしてよく使われるのがRipple（波紋）エフェクトです。 Material Design などでも採用されており、クリックした場所から円が広がることで という …
-
気持ちいいHover Animationの作り方【UIフィードバックの基本】
1.Hover Animationとは？ Hover Animationとは、マウスカーソルが要素の上に乗ったときに発生するアニメーションです。 ボタンやカードUIなどでよく使われます。 例えば次のよ…
-
ボタンの気持ちいいクリックアニメーションの作り方【JavaScript / UI Feedback】
1.Button Interaction Animation UIアニメーションの基礎については、以下の記事もおすすめです。 ユーザーがボタンを押したとき、何も反応がないUIは不安になります。 逆に、…
-
スムーズなプログレスバーの作り方【JavaScript】
progress / lerp / easing を使って、気持ちよく伸びるUIを作る 読み込み中、達成率の表示、レベルゲージ、アップロード進行状況など、プログレスバーはさまざまなUIで使われます。 …
-
JavaScriptで数値カウントアップUIを作る方法【Number Animation入門】
1. はじめに 「0 から 1000 まで数字が増えていく表示」を見たことがあると思います。たとえば、以下のようなUIです。 こうした 数値が変化するUI は、ただ値を一気に切り替…
-
実践構築（統合）すべてをつなぐ「最小システムアーキテクチャ」(#16)
← Prev Next → ここまでで、私たちはたくさんの部品を作ってきました。 でも一番大事なのはこれです。 どうやって全部をつなぐの？ 今回はそれをやります。 難しくしません。最小構成で「動く構造…
-
Event設計とは？状態とシーンを“ゆるく”つなぐ仕組み(#15)
← Prev Next → これまでに、 まで進んできました。 ここまで来ると、こう感じませんか？ 「クラス同士が、直接つながりすぎている…？」 そこで登場するのが Event設計（イベント…
-
Scene管理の進化｜JavaScriptで設計する画面構造の拡張(#14)
← Prev Next → 画面が増えたとき、コードはどう設計する？ ここまでで私たちは、 まで作ってきました。 でも、ここで必ず出てくる問題があります。 「タイトル画面とゲーム画面って、どうやって切…
-
Input設計とは？ループと状態に統合する入力管理の基本構造(#13)
← Prev Next → これまでの流れ： そして今回。 「ユーザーの操作を、どうやってゲーム側に伝えるのか？」 ここを設計します。 ❌ よくある初心者パターン 一見問題なさそうですが、これには大き…