こんにちは！@Ryo54388667です!☺️

5月のリリースノートをお届けします！

ゴールデンウィークも終わり、開発も本格的に再開しました。今月は国際化対応やUI/UX改善など、品質と使いやすさの両面で大きな進歩がありました。特に、グローバル展開を見据えた多言語対応の実装は、今後のブログ運営において重要な基盤となっています。

アプリケーションのアップデート

国際化対応（i18n）の実装 🌍

ブログをグローバルに展開するため、ついに国際化対応を実装しました！日本語と英語の切り替えが可能になり、より多くの読者に技術情報を届けられるようになりました。

主な実装内容:

Next.js 14のApp Routerを活用したロケールベースのルーティング
URLパス構造: /ja/blogs、/en/blogsでSEO最適化
ヘッダーナビゲーション、フッター、検索機能の多言語対応
カテゴリ名、記事メタデータの国際化

// 言語切り替えの実装例
const switchLanguage = (newLocale: string) => {
  const currentPath = pathname.replace(`/${locale}`, '')
  router.push(`/${newLocale}${currentPath}`)
}

実装後に「言語切り替えボタンが目立ちすぎるかも...」と思い、プロダクトの色とトーンに合わせて調整しました😇 最終的にはより自然で使いやすいUI設計に落ち着いています。

SEO効果:

各言語での検索エンジン最適化
hreflang属性による多言語サイトの適切な認識
OpenGraph画像の言語別生成

コードブロックの機能強化 💻

技術ブログの命とも言えるコードブロックに、開発者体験を向上させる便利な機能を追加しました。

テキストコピーボタン

コードをワンクリックでコピーできるボタンを追加。地味ですが、読者の方から要望が多かった機能です👌

// コピー機能の実装
const copyToClipboard = async (text: string) => {
  await navigator.clipboard.writeText(text)
  setIsCopied(true)
  setTimeout(() => setIsCopied(false), 2000)
}

折り返し（ラップ）ボタン

長い行のコードを折り返して表示する機能を実装。横スクロールが嫌いな方にも優しい設計になりました。

// 折り返しボタンの実装
const toggleWrap = () => {
  setIsWrapped(!isWrapped)
}

// CSSクラスの動的切り替え
className={`${isWrapped ? 'whitespace-pre-wrap' : 'whitespace-pre'}`}

当初はクリック時にツールチップを表示していましたが、ホバー時に変更することでより直感的なUXになりました。

LLMs連携ボタンの追加 🤖

AI時代に対応して、ヘッダーにLLMs（Large Language Models）との連携ボタンを追加しました。記事の内容をAIと一緒に深掘りしたい読者のための機能です。

実装の特徴:

アイコンの背景を透過にして、ダークモード・ライトモード両対応
記事内容を適切にフォーマットしてAIツールに連携
ユーザビリティを考慮したボタン配置とデザイン

この機能により、技術記事をより深く理解したい読者が、AIツールを活用して学習を進められるようになりました。

リストマーカーの表示改善 📝

カスタムリストコンポーネントで、リストマーカーが左マージンからはみ出してしまう問題を修正しました。

/* 修正前 */
.custom-list {
  list-style: disc;
}

/* 修正後 */
.custom-list {
  list-style: disc;
  @apply list-inside; /* TailwindCSSのlist-insideクラスを追加 */
}

細かい修正ですが、読みやすさとレイアウトの安定性に大きく貢献する改善だと思います。こういった細部へのこだわりが、ユーザー体験の向上につながります。

インフラのアップデート

SEO最適化の強化 🔍

URLパスの最適化を実施しました。カテゴリページをクエリパラメータからパスパラメータに変更し、検索エンジンフレンドリーな構造に改善しています。

# Before
/blogs?category=tech&page=2

# After  
/blogs/tech/2

実装内容:

Next.js 14のDynamic Routesを活用
旧URLから新URLへの301リダイレクト処理
サイトマップの自動更新
パンくずリストの改善

また、既存のリンクが切れないよう配慮したリダイレクト処理も実装し、SEO評価の継承とユーザー体験の両立を実現しています。

ビルド時の最適化 ⚡

Static Site Generation（SSG）の範囲を拡大し、パフォーマンスの向上を図りました。

主な改善内容:

ページネーションページのビルド時生成
初回アクセス時のレスポンス時間短縮
不要なrevalidate処理の削除によるビルド時間最適化

// ページ生成の最適化
export async function generateStaticParams() {
  const totalPages = await getTotalPages()
  return Array.from({ length: totalPages }, (_, i) => ({
    page: (i + 1).toString(),
  }))
}

これにより、ユーザーがアクセスした際の体感速度が大幅に向上しています。

デプロイメント設定の改善 🚀

CI/CDパイプラインの安定性向上のため、以下の改善を実施しました：

deploy.ymlの設定最適化
ビルドエラーの事前検知機能追加
テスト実行プロセスの改善
デプロイ失敗時の自動ロールバック機能

これらの改善により、より安全で安定したデプロイメントが可能になりました。開発者体験の向上だけでなく、サイトの可用性も大幅に向上しています。

来月（6月）の予定 📅

パフォーマンス大幅改善プロジェクト 🚀

合計8秒以上のパフォーマンス改善を目標に、以下の最適化を実施予定です：

テキスト圧縮の有効化 (2.25秒改善見込み)
CSS最適化とクリティカルCSS実装 (1.8秒改善見込み)
HTTP/2の有効化 (1.7秒改善見込み)
JavaScriptバンドル最適化 (1.05秒改善見込み)
画像最適化の強化 (LCP改善)

新機能追加

最も読まれている記事機能

Google Analytics データを活用した人気記事の表示
カテゴリページでの記事レコメンデーション機能
記事間回遊の促進による滞在時間向上

Lighthouse CI連携

本番環境での継続的なパフォーマンス監視
Notion APIと連携した計測結果の可視化
モバイル・デスクトップ両対応での品質管理

UI/UX・アクセシビリティ改善

「続きを読む」ボタンの色コントラスト修正
スマートフォンでの画像表示最適化
Skeletonコンポーネントの統一によるCLS改善
ARIA roleの適切な実装

来月は特にパフォーマンス改善に重点を置き、数値的な目標を設定して取り組む予定です。ユーザー体験の大幅な向上が期待できます！

まとめ

5月は以下の成果を上げることができました：

✅ 国際化対応（i18n）の完全実装 - グローバル展開の基盤構築
✅ コードブロック機能の強化 - 開発者体験の向上
✅ LLMs連携機能の追加 - AI時代への対応
✅ SEO最適化 - 検索エンジンフレンドリーなURL構造への移行
✅ インフラ改善 - ビルド・デプロイプロセスの最適化

6月はパフォーマンス改善を中心に、より高速で使いやすいブログを目指します。引き続き、読者の皆様により良い技術情報をお届けできるよう努めてまいります。

最後まで読んでいただき、ありがとうございました！🙏

ご質問やフィードバックがございましたら、お気軽にTwitter（@Ryo54388667）までお声がけください。来月もできれば書きたい。いや、書きます。(たぶん)😊