ダブルタップLikeをタップ位置に表示する｜Instagram標準のバイブコーディング実装

SNSのダブルタップLikeは、ただ「Likeする」だけでなく、タップ位置にハートが出るのが標準。Instagram由来の業界標準UXを、Claudeとバイブコーディングで実装した話です。

やったこと

• ダブルタップ検知（300ms以内の2回タップ）
• タップ座標にハートを表示
• アニメーション：表示→拡大→フェードアウト
• 連続ダブルタップでアンライクしない（Instagram標準）
• オーバーレイ表示中・アクション・広告・タブバー上は無効

Claudeに頼んだ実装

「ダブルタップLikeをInstagram標準で実装。タップ位置にハートを表示。連続ダブルタップしてもアンライクされない。アクションボタンやオーバーレイ上では無効化」と指示。30分で完成。

細部の工夫

• 従来は画面中央固定だったハート位置をタップ位置に
• デスクトップでは dblclick イベントも対応
• タッチ精度のブレ吸収（指の太さ分）
• CSSアニメーション（transform + opacity）でスムーズに

「定番UX」の再現はAI時代の強み

「Instagramのダブルタップ挙動」「Twitterのプル・ツー・リフレッシュ」「TikTokの縦スワイプ」――これらの業界標準UXは、AIに「同じ挙動で実装して」と頼むだけで再現できます。手作業で参照実装を読み解く必要がない。

細かい仕様の確認もClaudeに

• 「ダブルタップで2回目はアンライクされる？」→ Instagramでは「されない」
• 「タップ間隔の閾値は？」→ 300msが標準
• 「タップしたまま動かしたら？」→ ドラッグ判定で無効化

挙動の細部もClaude経由で標準を確認できる。「これってどう動くのが正解？」もバイブコーディングの一部。

Moeriumをもっと楽しむ