😤『なんでタグクリックできないの！？』から始まったブログUI大改革の奇跡

こんにちは！今日は血の気が引くようなユーザビリティの問題を1時間で一気に解決した話をシェアさせてください。

🔥 発端：ユーザビリティの地獄絵図

ブログサイトをチェックしていたら、こんな問題だらけの状況に気づいてしまいました...

• タグがクリックできない 😱（なんの意味があるの...）
• 外部リンクが同じタブで開く 😤（戻るの面倒すぎ）
• パンくずナビがない 😭（どこにいるかわからん）
• 戻るボタンでスクロール位置がリセット 💢（読んでたとこどこ？）
• 文字化けが散見 🤮（絵文字が変になってる）

「これは...ユーザーが可哀想すぎる」と思い、即座に改善に取り掛かりました。

🎯 実装した改善施策

1. タグをクリック可能なリンクに変更

問題: 記事のタグが表示されているだけでクリックできない

解決策: spanをaタグに変更してホバー効果も追加

// Before: クリックできないタグ
<span className="px-4 py-2 bg-gradient-to-r from-blue-100 via-purple-100 to-blue-100 text-blue-800 rounded-full text-sm font-bold shadow-md border border-blue-200">
  🏷️ {tag}
</span>

// After: クリック可能なタグ
<a
  href={`/tag/${tag}`}
  className="px-4 py-2 bg-gradient-to-r from-blue-100 via-purple-100 to-blue-100 text-blue-800 rounded-full text-sm font-bold shadow-md border border-blue-200 hover:from-blue-200 hover:via-purple-200 hover:to-blue-200 hover:shadow-lg transition-all"
>
  🏷️ {tag}
</a>

ポイント: ホバー時の色変更とシャドウの強化でクリック可能であることを視覚的に示す

2. パンくずナビゲーション追加

問題: ユーザーがサイト内のどこにいるかわからない

解決策: セマンティックなナビゲーション構造を実装

<nav className="mb-6" aria-label="パンくず">
  <ol className="flex items-center space-x-2 text-sm text-gray-600 mb-4">
    <li>
      <a href="/" className="text-blue-600 hover:text-blue-800 transition-colors">
        🏠 ホーム
      </a>
    </li>
    <li className="flex items-center">
      <svg className="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
      <a href={`/category/${article.category}`} className="text-blue-600 hover:text-blue-800 transition-colors">
        {article.category}
      </a>
    </li>
    <li className="flex items-center">
      <svg className="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
      <span className="text-gray-500 truncate max-w-xs" title={article.title}>
        {article.title}
      </span>
    </li>
  </ol>
</nav>

ポイント: aria-labelでアクセシビリティも考慮し、階層構造を明確に表示

3. 外部リンクを別タブで開く機能

問題: 外部リンクが同じタブで開いて元のページに戻りにくい

解決策: ReactMarkdownのカスタムコンポーネントで外部リンク判定

a: ({ href, children, ...props }: any) => {
  // 外部リンクの場合OGPカード表示
  if (href && href.startsWith('http')) {
    const ogpData = ogpDataMap.get(href);
    
    // リンクのテキストがURLと同じ場合はカード表示
    if (children?.toString() === href || children?.[0] === href) {
      return <OGPLinkCard url={href} ogpData={ogpData} />;
    }
    
    // 外部リンクは別タブで開く
    return (
      <a 
        href={href} 
        {...props} 
        target="_blank" 
        rel="noopener noreferrer"
        className="text-blue-600 hover:text-purple-600 font-medium underline decoration-blue-300 hover:decoration-purple-400 transition-colors"
      >
        {children}
        <span className="ml-1 text-xs">🔗</span>
      </a>
    );
  }
  
  // 内部リンク
  return (
    <a href={href} {...props} className="text-blue-600 hover:text-purple-600 font-medium underline decoration-blue-300 hover:decoration-purple-400 transition-colors">
      {children}
    </a>
  );
}

ポイント: 🔗アイコンで外部リンクであることを明示し、セキュリティのためにrel="noopener noreferrer"を追加

4. スクロール位置記憶機能

問題: 戻るボタンで元のページに戻ってもスクロール位置がリセットされる

解決策: sessionStorageを使った位置記憶システム

// スクロール位置の記憶
useEffect(() => {
  const scrollKey = `scroll-${article.slug}`;
  const savedPosition = sessionStorage.getItem(scrollKey);
  
  if (savedPosition) {
    // 少し遅らせてスクロール位置を復元
    setTimeout(() => {
      window.scrollTo(0, parseInt(savedPosition, 10));
    }, 100);
  }

  // ページを離れる時にスクロール位置を保存
  const handleBeforeUnload = () => {
    sessionStorage.setItem(scrollKey, window.scrollY.toString());
  };

  // 戻るボタンでの遷移を検知してスクロール位置を保存
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'hidden') {
      sessionStorage.setItem(scrollKey, window.scrollY.toString());
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  document.addEventListener('visibilitychange', handleVisibilityChange);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  };
}, [article.slug]);

ポイント: 複数のイベントリスナーで確実にスクロール位置をキャッチし、記事ごとに個別に保存

5. 文字化け修正

問題: 日本語文字や絵文字が文字化けしている

解決策: 正しいUTF-8エンコーディングで文字列を置換

// Before
🏷�E�E{tag}  // 文字化け
記事一覧に戻めE  // 文字化け
コピ�Eに失敗しました  // 文字化け

// After  
🏷️ {tag}
記事一覧に戻る
コピーに失敗しました

📊 改善結果

🎉 ユーザビリティの劇的向上

• タグナビゲーション: 1クリックで関連記事に移動可能
• サイト内移動: パンくずでどこにいるか一目瞭然
• 外部リンク体験: 別タブで開いて元ページを失わない
• スクロール記憶: 戻るボタンで読んでいた箇所に瞬間復帰
• 視覚的品質: 文字化けゼロのクリーンな表示

⚡ 開発効率の向上

• 実装時間: わずか1時間で全機能実装
• コード品質: TypeScript型安全性を保持
• 保守性: 各機能が独立していて修正しやすい

💡 今回学んだユーザビリティのポイント

1. 「当たり前」を疑う姿勢

タグが表示されていたら、ユーザーは「クリックできるもの」だと思います。でも実装側は「表示するだけ」で満足してしまうことが多いんです。

2. 小さな改善の積み重ね

一つひとつは小さな機能でも、組み合わさると劇的にユーザー体験が向上します。

3. アクセシビリティも忘れずに

aria-labelやtitle属性で、すべてのユーザーが使いやすいサイトを心がけました。

🚀 次のステップ

今回の改善で基本的なナビゲーション体験は大幅に向上しました。次は：

• 検索機能の追加
• お気に入り機能
• コメント機能
• 読了時間表示

などを検討しています。

🎯 あなたへのメッセージ

もしあなたのサイトで「なんかイマイチだな...」と感じる部分があったら、それはきっと改善のサインです。

ユーザーの立場に立って「クリックしたくなるもの」「迷わず使えるもの」を作ることで、きっと素晴らしいサイトになるはずです。

一緒にユーザーファーストなサイトを作っていきましょう！ 🎉

---

この記事があなたのWeb開発の参考になれば嬉しいです。一緒に頑張りましょう！ ✨