概要

2024年3月にコーポレートサイトをリニューアルしたので、良くなったことなどを紹介します。

この記事で書くこと

WordPressで構築されたコーポレートサイトをヘッドレスWordPress・Next.jsを導入することでリニューアルしました。
なぜリニューアルしたのか、リニューアルすることで何が良くなったのか書いてみます。

なぜリニューアルしたのか

ライトコードのコーポレートサイトは、WordPress単体で運用していました。

テンプレートを組み合わせるだけで素敵なサイトがつくれるWordPressは、素晴らしい技術です。
しかし、ありあわせのテンプレートを組み合わせるだけでは、技術を売りにしている会社の「技術」が表れません。

まずはフロントエンド部分にこれまで培ってきた技術を反映することで、コーポレートサイトをさらに良くしたい思いから、リニューアルプロジェクトをスタートさせました。

リニューアルを支えた技術

直近の社内プロジェクトにて、Next.js + GraphQLの構成で開発した実績がありました。
ですので、コーポレートサイトでも同様の技術をベースに、スピード感をもってリニューアルに取り組んできました。

ここでは実際に使った技術と触れてみての感想を簡単に書いておきます。

WPGraphQL

WordPressプラグインを導入するだけで、WordPressをGraphQLサーバとすることができます。

さらに、管理画面からplaygroundでスキーマや実際のリクエスト・レスポンスを確認することができます。

実装するのに何度もお世話になった便利な機能でした。
ドキュメントが少々発展途上なところはありますが、十分実用に耐えうるプラグインだと思いました。

Next.js

社内でも注目度が高まっていたApp Routerを導入しました。
ディレクトリ構造でルーティングルールを定めたり、クライアント・サーバサイドの境界が明確にされたりと、
やりたいことを実現する上でどこに何を書けば良いか分かりやすくなっていると感じました。

ただ、キャッシュ周りを筆頭にまだまだ使いこなせていない機能も多いので、これからコーポレートサイトを育てながらキャッチアップしたいなと思っています;)

リニューアルで良くなったこと

ここからはコーポレートサイトがリニューアルされたことで良くなったな、と思ったことを紹介します。

デザイン

WordPressをヘッドレス化させたことで、デザインをより柔軟にカスタマイズできるようになりました。
ということで、デザイナーさんの協力のもと、すべてのページを刷新しました。

全部のページは紹介しきれないので、本記事では、とくに力の入ったところを抜粋して見ていきます。

トップページ

ライトコードの顔とも言えるページです。
ライトコードらしさを残しつつ、読みやすくなるようこだわってきました。

ヘッダやフッタも試行錯誤の末完成させたので、スクロールして触ってみてください(:

ブログ記事

目次が表示されたり、コードがコピーできるようになったりと、読みやすさだけでなく使い勝手も改善されました。
目次機能はずっと欲しかったので、ようやく使えるようになって感慨深いですね。

過去の技術記事にもデザインは反映されているので、どんな風に変わったのか色々読んでみてください。

開発体験

Next.jsを導入することで、ページを組み上げるのがとても楽しくなりました。
どんなところが良かったのか、簡単に整理しておきます。

コンポーネント化

コーポレートサイトのページは、コンポーネントを単位に構築してきました。
コンポーネントが開発の単位になっていると、Storybookで要素別にデザインや動きを見ることができます。

すると、コンポーネントからページを組み立てることで、再利用しやすくなるだけでなく、レビューしやすい仕組みも整えることができました。

実際に開発中でもコンポーネントをベースに、もっとこうした方が良いんじゃないか、という議論が生まれていました。

まとめると、コンポーネントのおかげで開発・改善しやすい仕組みをつくりあげることができた、と感じました。

Bulletproof React + App Routerを組み合わせたディレクトリ構成

ディレクトリ構成はBulletproof Reactを参考にし、App Routerと組み合わせることで、開発効率が上がったと感じました。

具体的には、決まったルールのもとにファイルを配置していくので、どこに何があるのか一目で分かるようになりました。
これにより、複数人のチームで開発していく中でも一定の品質を保ってコードを書くことができました。

品質が担保できるのもうれしいですが、実装するときにファイルの置き場所に迷うことなく、つくりたい機能に集中することができたのも、開発体験を向上させてくれました。

速度

Next.jsのISRという仕組みを利用することで、ページが素早く表示されるようになりました。

さらにCloudFrontも導入したのですが…長くなってしまうので、この話はインフラ編に譲ることにします。

まとめ

本記事では、リニューアルしたコーポレートサイトについて紹介してきました。
ここで紹介しきれなかった改善点もたくさんあるので、ぜひ一度新しくなったコーポレートサイトを覗いてみてください。