KARMA Studio公式サイトの高速化とメタタグ整備を行いました

5月13日は、KARMA Studio公式サイトの表示速度改善と、検索・SNS共有向けのメタタグ整備を中心に作業しました。

前日にサイト導線やゲーム紹介ページを整えたので、本日はその仕上げとして、ページの読み込みを軽くする作業と、検索結果で内容が伝わりやすくなる調整を行っています。

画像をWebP形式に対応しました

今回の大きな作業は、トップページで使っている画像のWebP対応です。

WebPは、画像の見た目を保ちながらファイルサイズを小さくしやすい形式です。
サイトで使っている大きな画像をWebP化することで、ページを開いたときの読み込み負担を減らすことができます。

対象にした主な画像は、トップページのヒーロー画像、ゲームカード画像、セクション画像、見出し画像などです。

安全に確認しながら進めました

画像の切り替えでは、一度表示エラーが起きる場面もありました。
そのため、バックアップから復旧したうえで、画像を一つずつ確認しながら安全に進めています。

最終的には、主要画像をWebPで読み込めるようにしつつ、元画像もフォールバックとして残す形にしました。

これにより、対応している環境では軽量なWebP画像を読み込み、万が一の場合でも元画像で表示できるようになっています。

PageSpeedも改善しました

画像の軽量化とWebP対応により、PageSpeed Insightsの結果にも改善が見られました。

特にデスクトップ表示では大きく改善し、より快適に閲覧しやすい状態になっています。

モバイル表示については、まだ改善の余地がありますが、今回は表示崩れを避けながら、安全な範囲で画像改善を進めました。

メタタグを追加しました

検索結果やSNSでページを共有したときに内容が伝わりやすくなるよう、メタタグも整備しました。

対応した主なページは以下です。

  • トップページ
  • ゲーム一覧ページ
  • 各ゲーム紹介ページ

ページごとに、タイトル、説明文、OGP、Twitterカード情報を設定しています。

これにより、検索エンジンやSNSに対して、各ページの内容をより分かりやすく伝えられるようになりました。

今回の主な作業

5月13日に行った主な作業は以下です。

  • トップページ主要画像のWebP対応
  • ゲームカード画像のWebP対応
  • セクション画像・見出し画像のWebP対応
  • PageSpeed改善
  • トップページのメタタグ追加
  • ゲーム一覧ページのメタタグ追加
  • ゲーム紹介ページのメタタグ追加
  • 表示確認とキャッシュ削除
  • 重大エラー発生時の復旧確認

サイト修正はいったん一区切りです

今回の作業で、KARMA Studio公式サイトの大きな修正はいったん完了です。

サイトの見た目、導線、ゲーム紹介ページ、画像軽量化、検索向けの情報整理まで進めることができました。

次回からは、AIオーケストレーション開発やゲーム開発へ戻りながら、必要に応じてサイト側の細かな改善も続けていきます。