シマーボタン

ホバー時や定期的に光の帯（シマーエフェクト）が流れる、美しく視線を惹きつけるボタンコンポーネントです。ユーザーの注目を集めたいCTA（Call To Action）に最適です。

プレビュー (Preview)

ユースケースと特徴 (Use Cases & Features)

コンバージョン率の向上: 視覚的な動きがあるため、ユーザーの目を引きやすく、サインアップや購入ボタンなどの重要なCTA（Call To Action）に最適です。
さりげないアニメーション: 派手すぎない一定周期のシマー（光の反射）エフェクトにより、洗練された印象を与えます。
マイクロインタラクション: ホバー時にボタンがわずかに浮き上がり、シャドウが追加されることで、クリック可能な要素であることを強調します。

デザインとUXのポイント (Design & UX)

コントラストと視認性: 暗めの背景に対して明るい光の帯を走らせることで、エフェクトを強調しています。
パフォーマンス: transform と opacity を活用したアニメーションにより、ブラウザの描画負荷を最小限に抑え、滑らかな動きを実現しています。
アクセシビリティ: フォーカス時のリング（focus:ring）を適切に設定し、キーボード操作でも状態が視覚的に伝わるように配慮しています。

カスタマイズ方法 (Customization Guide)

色の変更: rgba(255, 255, 255, 0.2) の部分をブランドカラー（例: rgba(59, 130, 246, 0.3)）に変更することで、光の色をカスタマイズできます。
アニメーション速度の調整: animation: shimmer-effect 3s infinite; の 3s を 2s にすると早く、5s にするとゆっくりとした動きになります。
Tailwindのみでの実装: tailwind.config.js に keyframes を追加することで、カスタムクラスを使わずにTailwindのユーティリティクラスのみで完結させることも可能です。

実装コード (Implementation)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

React (Tailwind Configuration)

Tailwindの設定ファイル（tailwind.config.js）を拡張することで、Reactコンポーネント内で完結させるアプローチです。