Apple風の「数字ボタン押下エフェクト」をCSSとJavaScriptで再現する方法

Posted on by

スマホのロック解除画面やパスコード入力画面のように、
「数字を押した瞬間にふわっと光って、沈み込む」ようなアニメーション。
Appleのデザイン哲学が感じられるあの“気持ちいい押し心地”を、
CSSとJavaScriptだけで再現してみましょう。

Appleの数字ボタンの特徴を分解してみる

まずは観察から。
iOSのパスコード入力画面には、次のような特徴があります。

  1. 丸いボタン：柔らかいガラス質の見た目
  2. 押した瞬間に光がにじむ：中心から広がるハイライト
  3. 物理的な沈み込み：スケールがわずかに小さくなる
  4. 押した後にふわっと戻る：余韻のグロー（光の残像）

つまり「視覚的なグラスモーフィズム + 短いスプリングアニメーション」がポイントです。
CSSのbox-shadowやtransform、radial-gradientを駆使すれば、意外と簡単に近づけます。

完成イメージ

今回作るのはこんなUIです

  • 黒系の背景の上に透明感のある丸ボタン
  • 押すと「ふわっ」「ぽわっ」と光る
  • 数字入力でドットが増える（6桁パスコード風）

※ 実際にはコードを動かすとより自然に見えます。

HTML構造

<div class="wrap">
  <div class="panel">
    <div class="title">パスコードを入力</div>
    <div class="display">
      <div class="dot"></div><div class="dot"></div>
      <div class="dot"></div><div class="dot"></div>
      <div class="dot"></div><div class="dot"></div>
    </div>

    <div class="grid">
      <button class="key" data-key="1"><span class="label">1</span></button>
      <button class="key" data-key="2"><span class="label">2</span><span class="sub">ABC</span></button>
      ...
      <button class="key" data-key="0"><span class="label">0</span></button>
    </div>
  </div>
</div>

構成はシンプルで、button.keyを並べただけ。
ボタンの中に数字 (.label) と文字 (.sub) を入れています。

CSSで「押したときの質感」を作る

ポイントは3つです。

① グラスモーフィズムで透明感を出す

.key {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 10px 24px rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.3s;
}

② 押下中にスケールを縮める

.key.is-pressing {
  transform: scale(0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
              inset 0 -10px 20px rgba(0,0,0,0.6);
}

③ 光のにじみを擬似要素で表現

.key::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle, hsla(220,90%,60%,.4) 0%, transparent 60%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.3s;
}
.key.is-pressing::after {
  opacity: 1;
}

これで「押したときに光る・沈む」が完成。
transformとbox-shadowを組み合わせるだけで、まるで“ガラスのボタン”のような立体感が出せます。

JavaScriptで「押した瞬間」の動きを制御

次に、クリックやタップでアニメーションを発火させます。

const pad = document.getElementById('pad');
const dots = Array.from(document.querySelectorAll('.dot'));
let input = "";

pad.addEventListener('pointerdown', e => {
  const key = e.target.closest('.key');
  if (!key) return;
  key.classList.add('is-pressing');

  // 数字を追加
  const digit = key.dataset.key;
  if (digit) {
    input = (input + digit).slice(0,6);
    updateDots();
  }

  // 押した後に戻す
  key.addEventListener('pointerup', () => {
    key.classList.remove('is-pressing');
  }, {once:true});
});

function updateDots(){
  dots.forEach((d,i)=> d.classList.toggle('filled', i < input.length));
}

さらに、ボタンを押した瞬間の「リップル（波紋）」も追加できます。

function pressVisual(el){
  const ripple = document.createElement('span');
  ripple.className = 'ripple';
  el.appendChild(ripple);
  ripple.addEventListener('animationend', ()=>ripple.remove());
}

押し心地を高める「アニメーションのコツ」

Appleのアニメーションは、単純なイージングではなく**スプリング感（弾性）**があります。
CSSだけでも近い動きを出すには、cubic-bezier()のカーブを少し強めに。

transition: transform 140ms cubic-bezier(.2,.7,.3,1.4);

この設定にすると、押したときに「コトッ」と沈み、離すと「ふわっ」と戻る動きに。
時間は短く、加速度の山を前半に寄せるのがコツです。

応用アイデア

Apple風エフェクトは、次のようなUIにも応用可能です。

用途応用例
フォーム送信ボタンクリック時に発光＋沈み込み
スマート家電UI電源ボタンのON/OFFアニメーション
ゲームUIメニュー選択時の押し感
数字キーパッド電卓・セキュリティ画面の入力エフェクト

さらに--accentカラーを変えれば、
ブルー＝iOS風／ピンク＝かわいい系／ネオングリーン＝近未来感
など、ブランドカラーにも合わせやすいです。

まとめ

今回のApple風ボタンで学べるポイントは3つ。

  1. グラスモーフィズムの基本構成（透明＋光沢＋ぼかし）
  2. 押下感の再現はscaleとshadowで十分
  3. アニメーションは“物理的な速度”を意識する

「押したくなるUI」は見た目だけでなく、“反応の気持ちよさ”が大事。
CSSとJavaScriptのちょっとした工夫で、触感に近い体験を再現できます。

仕上げたい人へ

  • リップルの色を変える → hsla(var(--accent)/.4) を変更
  • 光の範囲を広げる → filter: blur(10px) を大きく
  • 速度を調整する → --spring-in/out の値を短く or 長く

まとめコード

記事内のHTML・CSS・JSを1ファイルにまとめた完成版は以下👇

Apple風数字ボタン 完全版コード（HTML＋CSS＋JS）

このままローカルに保存してブラウザで開けば動作します。

おわりに

Appleのデザインは、
「機能性」よりも「心地よさ」を優先して設計されています。

エンジニア視点でも「見た目＋触感＋反応速度」を再現することで、
プロダクト全体のクオリティが一段上がります。

ぜひあなたのUIにも、この“ふわっと沈む”エフェクトを取り入れてみてください。