Zenn
🐒

UI/UX改善: 注目を引くボタン『フィッツの法則』とおまけ

に公開
zennfes2025free
idea

概要

アプリケーションを作成する際、ユーザーに何をして欲しいのかを視覚的に伝えることの難しさに直面しております。。。
そこで、みんな大好き(？)オライリージャパンから出版されている『UXデザインの法則[第2版]』で紹介されている『フィッツの法則』(P.40)を意識してみました。

※おまけでカスタムチェックボックスの実装を書きました。

・ ロジック実装はJavaScriptで
・ スタイリングはTailwind CSSで
・ 一部インラインスタイルを採用しています（style={{ backgroundColor: '#e7833c' }}）

『フィッツの法則』
ターゲットに至るまでの時間は、ターゲットの大きさと近さで決まる。

主題： 注目を引くボタン

目的

ということで、メッセージや説明書きを記載したモーダルなどでユーザーを誘導するのではなく、まず始めにして欲しいこと（特定のボタンをクリックしてもらう）を目立たせようと考えました。アプリケーションの縦中央・横左半分にそのボタンを配置し、アプリケーションのデザイン感を損なわないよう目立たせてみました。

実装詳細

状態管理:

const [isHighlighted, setIsHighlighted] = useState(true);

// 10秒後にハイライトを解除
useEffect(() => {
  const timer = setTimeout(() => {
    setIsHighlighted(false);
  }, 10000);
  
  return () => clearTimeout(timer);
}, []);

スタイリング:

<div className={`btn btn-primary w-full sm:w-auto transition-all duration-500 ${
  isHighlighted 
    ? 'animate-pulse bg-orange-500 hover:bg-orange-600 scale-110 shadow-lg border-2 border-yellow-400' 
    : ''
}`}>
  {isHighlighted ? '✨ 〇〇をする ✨' : '〇〇をする'}
</div>

イメージ

おまけ： カスタムチェックボックスの実装

目的

標準のチェックボックスがアプリのデザイン統一感にマッチしなかったので、カスタムチェックボックスを実装してみました。

実装詳細

カスタムチェックボックスコンポーネント:

<label className="flex items-center cursor-pointer">
  <div className="relative">
    <input
      type="checkbox"
      checked={task.completed}
      onChange={() => onTaskToggle(task.id, task.completed)}
      className="sr-only" // 元のチェックボックスを隠す
    />
    <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
      task.completed 
        ? 'bg-[#e7833c] border-[#e7833c]' 
        : 'bg-white border-gray-300'
    }`}>
      {task.completed && (
        <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
        </svg>
      )}
    </div>
  </div>
  <span className="ml-2">{task.content}</span>
</label>

イメージ

カスタムチェックボックスの数字の羅列について

<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />

何やら数字の羅列で目が回りそうですが、これは SVG (Scalable Vector Graphics) のパス記法です。

https://developer.mozilla.org/ja/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths

技術詳細:

  1. SVG - XMLベースのベクター画像フォーマット
  2. <path>要素 - 複雑な形状を描画するSVG要素
  3. d属性 - 描画命令を定義するパスデータ

パス命令の意味:

  • M16.707 5.293 - Move to（ペンを移動）
  • a1 1 0 010 1.414 - Arc（円弧を描く）
  • l-8 8 - Line to（線を引く）
  • z - Close path（パスを閉じる）

この具体的なパス:
チェックマーク（✓）の形を描画しています。座標を辿ると：

  1. 右上から開始
  2. チェックマークの角部分へ
  3. 左下の端点へ
  4. パスを閉じる

以上、読んでいただきありがとうございました！

Discussion