開発ログ
TechCat-Nest LPリニューアルやりました!裏話とこだわりポイント
TechCat-NestのLPをガッツリ作り直しました!地味に大変だった地域別Cookie制御やLightbox改善、CI/CD強化の舞台裏をゆるっと紹介します。
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も引き続き改善
- 多言語対応もやりたい!