TCW

自身のインプットした知識を、アウトプットとして活用すべく制作した技術ブログとなっております。

デザイン、コーディング、システムを全て自身で行い、テーマとして1から自作しました。

2026年10月、WordPress＋Webpackの一体型構成から、WordPressをAPI専用のヘッドレスCMSとして残しつつフロントエンドをNext.js（App Router）＋Vercelへ全面刷新する、大規模なアーキテクチャ改修を行いました。

PageSpeed Insightsでの実測値で、TOPページはPerformance 58→70・Accessibility 88→100・Best Practices 92→100・SEO 61→100、記事詳細ページもPerformance 57→71・SEO 61→100と、全指標で数値改善を確認しています。

これにより、コードをストックして業務の効率化を進めるだけでなく、選考の際の実力を知ってもらうための指標にしていただけたら幸いです。

XDを用いてデザインから作成しました。

このサイトの前進である旧サイトのコンセプトである、「モダン×テクノロジーを表現する」を引き継いだサイトデザインとなっております。

現在のトレンドでもある追従型の目次の導入やCODDPENなどうも導入し、よりユーザーにとってインタラクティブで直感的なUIを提供いたしました。

一般的なSEO対策も行っており、解析ツールの導入なども行いました。2026年10月のヘッドレス化以降は、PageSpeed InsightsのSEOスコアも100点まで改善しており、継続的な計測・改善を行っています。

これにより自身のアウトプットがどこで誰に有効活用されているのかを可視化と同時に、今後伸ばすべき技術のヒントとしても活用していく予定です。

初期バージョンはサイト高速化の実験も兼ねて、Webpackを導入してほぼ全てのCSS,JSを一つのファイルにビルドして制作し、テーマ自体も1からPHPで構築しました。PWAの導入により、Android端末でのサイトアプリ化も実現しています。

2026年10月には、WordPressをREST API専用のヘッドレスCMSとして切り離し、フロントエンドをNext.js（App Router）で再構築する大規模なアーキテクチャ刷新を行いました。

記事一覧・固定ページはSSG＋ISR（Incremental Static Regeneration）で静的生成し、記事詳細ページはVercelのData Cache（fetch単位のキャッシュ）を活用することで、サーバーレス関数の実行を抑えつつ表示速度を改善しています。

現在は記事詳細ページについても、generateStaticParamsによる完全な静的生成への切り替えを進めており、さらなる高速化に取り組んでいます。

WordPress側は投稿・編集フローを従来通り維持しつつ表示側だけをモダンな構成に置き換えることで、運用コストを増やさずに技術基盤を刷新する戦略を取りました。