概要

• FrontPrep の質問一覧ページで、企業ロゴのツールチップ挙動の最適化について解説
• ホバー時のツールチップ表示ディレイとユーザー体験のバランス
• 「ウォームウィンドウ」 （暖かい状態）による即時表示パターンの導入
• Reactによる実装例とその仕組みの詳細解説
• 良質なUI/UXのための判断力とスキルの重要性を提言

FrontPrepのロゴツールチップ挙動最適化

• FrontPrep の質問一覧ページで、各企業ロゴの横にツールチップで企業名を表示する設計
• ユーザーがロゴにカーソルを合わせると即座にツールチップが表示される仕様で、 delay=0ms のため、カーソル移動時に意図せず次々とツールチップが表示される問題
• 一時的な解決策として 200msのディレイ を設定したが、複数ロゴが並ぶUIでは毎回200ms待たされ、操作感が悪化
• この投稿の主旨は「ツールチップの作り方」ではなく、 UI細部のインタラクションパターン の重要性に着目

問題の本質と改善パターン

• ユーザーがロゴ上にホバーした際、 200ms待ってからツールチップ表示
• ツールチップを閉じると 300msの「ウォームウィンドウ」 （暖かい状態）に入り、この間に別ロゴにホバーすれば 即座にツールチップ表示
• 300msを過ぎると通常状態（コールド）に戻り、再度200ms待ちが必要
• このパターンは ブラウザツールバーや多くのWebサイトで採用 されているが、意外と認知されていない

実装の流れ（React例）

• onMouseEnter 時にtooltips.isWarmを判定し、「暖かい」なら即表示、そうでなければ200msタイマー開始
• show()関数 で
  • tooltips.isWarmの値をinstantステートにコピー
  • ツールチップを開く
  • Providerに「開いた」ことを通知し、ページを「暖かい」状態に
• onMouseLeave 時は
  • タイマーをクリア
  • ツールチップが開いていれば閉じ、Providerに「閉じた」ことを通知し、300msのクールダウンタイマー開始
• Provider は「暖かい」状態をuseRefで管理し、クールダウン中に再ホバーすれば即時表示、タイマー終了で「冷たい」状態に戻す
• isWarmを stateではなくrefで管理 することで、不要な再レンダリングを防止

ディレイ値の根拠

• 150ms未満 だとカーソルが通過しただけでもツールチップが開いてしまう
• 250ms超 だと意図的なホバーでも表示が遅く、UXが悪化
• 200ms がバランスの取れた値

UI/UXと判断力

• AIは機能的なツールチップ実装はできるが、「磨き抜かれた」UI/UXは人間の判断力が不可欠
• 長年の経験・失敗・実践から「良いUI」を見抜く目を養うことが重要
• 他エンジニアやデザイナーのノウハウやスキルを参考にしつつ、自分の基準で最終チェック・出荷を行う

汎用的なツールチップ監査Skill例（Claude用）

• どのコードベースにも適用できるツールチップ監査用スキル
• ツールチップは意図しないホバーで開かないようディレイを持たせる設計が推奨
  • 例：
    • 開始ディレイ： 200ms
    • 「ウォームウィンドウ」： 300ms
    • 閉じるディレイ： 0ms
• 推奨挙動
  • hover → 200ms待つ → ツールチップ表示（ページが暖かい状態に）
  • leave → ツールチップ閉じる → 300msクールダウン

---

まとめ

• ツールチップの細かな挙動設計 は、ユーザー体験を大きく左右
• ウォームウィンドウパターン の導入により、直感的かつ快適な操作感を実現
• 実装の工夫と判断力 が「動くプロダクト」と「洗練されたプロダクト」の差を生む