TechCat
  • Gallery
  • Blog
  • Life
  • About
  • Career
プライバシーポリシー

© 2026 TechCat

ブログ一覧に戻る
開発ログ2025-08-11

TechCat LPリニューアルしました!裏話とこだわりポイント

LPリニューアル、ついに完了

ついにLP(ランディングページ)の大幅リニューアルが完了しました! 前のLPは「とりあえず動く」レベルで、正直ずっと気になっていたんですよね。

今回は「使いやすさ」と「読みやすさ」を両立すべく、いろいろ詰め込みました。こだわりポイントや裏話をゆるっと紹介します!

今回やったこと

1. 地域別Cookieバナー制御

海外アクセスが増えてきたので、「国によってCookieバナーを出す/出さない」を自動で切り替える仕組みを作りました。 クローラーやAI学習などの人間ではないアクセスの可能性もありますが、念の為対応しました。

具体的には、

  • 日本・アジア圏:バナー出さない(コンテンツの表示領域が狭くなるので)
  • EU/US/CA/BR/KR:規制に合わせてバナー表示
  • 位置情報が取れなかったら?→デフォルト動作でカバー

2. ギャラリーのLightbox大改造

ギャラリーのLightbox(画像拡大表示)、挙動が安定せず「もうやめようかな…」と思うこともありました。

  • React Portalでモーダルの重なり順をちゃんと制御
  • 画像のセンタリングも安定化
  • サムネイルのサイズも調整、メイン画像と被らないように

「細かいけど気になる」部分を徹底的に直したので、UIのヌルヌル感を提供。

3. CI/CDもパワーアップ

今までは「とりあえずCI/CD回してる」状態でしたが、今回はテストの自動化や品質チェックを徹底! これで「うっかりバグ混入」もだいぶ減るはず(多分…)。

4. 開発環境も地味に快適に

  • pnpmの設定を見直してCIとの相性アップ
  • lockファイルも整理して依存関係スッキリ

この辺の整備、思ったより大変でした…! でも、こういう地味な改善が後々めちゃくちゃ効いてくるはず!

5. デザイントークンでUIも統一

色・余白・フォントなど、デザイントークンで一元管理するようにしました。

  • カラーやタイポ、スペーシングを全部ルール化
  • Hero/Works/Featureなど各セクションも統一感アップ
  • モバイル対応もより一貫した見た目に

「なんかまとまってる感」が出てきた気がします!Hero画像は今後もこまめに変えていく予定です。

作ってみての感想とか

  • こだわると時間はかかるけど、やっぱり楽しい!
  • 思ったよりデプロイが大変だった(特にCI/CD)
  • Cookieバナーの地域別制御が本当に大変…日本向けはシンプルだけど、海外は規制が厳しくて細かい設定が必要でした。

これからやりたいこと

  • Worksの詳細ページやブログ記事をもっと充実させたい
  • SEOもさらに強化したい
  • Core Web Vitalsも引き続き改善
  • 多言語対応もやりたい!