WordPressのブログをNext.jsに移行した感想と振り返り
今回、WordPressで運営していたこのブログをNext.jsのサイトにしました。
初のブログリニューアルについてやWordPress Headless CMSについてなど、感想や振り返りをメモしていこうと思います。
目次
WordPressのブログをNext.jsで作り替えた。
改めて、今までWordPressで運営していたブログを、Next.jsで構築したサイトに移行しました。
記事データや管理画面は「WordPress」、フロントエンドは「Next.js」という構成になっています。
今回使った技術・サービス
- WordPress（ヘッドレスCMS）
- Next.js
- TypeScript
- Vercel
ブログ移行してみた感想
ずっとWordPressのヘッドレスCMS化は興味があったので、やっと作れて開発がとても楽しかったです。
またこれで苦手なPHPじゃなくなってやりたいカスタマイズは大体できるようになったので、よりわかりやすいサイト構成にしたり便利なコンテンツを追加したりしていきたいです。
あと今回作ってみて改めて感じたのは「やっぱりWordPressはすごい」です。ブログやメディアを運用するほとんどの場面ではWordPressで十分だと思います。
今回のブログ移行の理由・きっかけ
「興味がある技術(WordPressのヘッドレスCMS化)を使ってみたい」「WordPressをカスタマイズできたら楽しそう」といった感じで気軽に始めてました。（結果的に、知らないことを勉強するのも手を動かすのも、ストレスなく楽しみながらできたのでよかった。）
あと、今後WEBサービスを作った時に「サブドメインやサブディレクトリにメディア/ブログを置けるようになりたい」というのも少しありました。ブログは様々な用途で利用されることがあるので、活用できる幅が増えたことはよかったです。
今回のブログ移行で大変だった点
TypeScriptの型宣言
今回で初めてTypeScriptを使ったので、型宣言のタイミングや書き方になかなか苦労しました。
元サイトから新サイトへのリダイレクト処理
正規表現が苦手なので、全然違うパスにリダイレクトしてしまったりして何度も変更を繰り返して設定しました。
今もまだ正しく処理されているか不安なので、アナリティクスのデータを見たりしながら異常がないかチェックしていこうと思います。
（リダイレクト処理にはWordPressの「Redirection」というプラグインを使用しました）
【画像で見る】旧ブログと新ブログの違い
今回、ページ構成はほとんど変えずに移行しました。
元サイトと新サイトを画像で見比べてみて、どんな変更をしたのか振り返りつつ、デザイン面のメモを簡単にしていきます。
全体的な変化
大きな変更としてはPCのレイアウトを「2カラムから1カラム」に変更しました。以前より多少コンテンツに集中できるようになるのかなと思います。（後々2カラムに戻る可能性あり）
今後も調整を続けてコンテンツがより読みやすくなるようにしていきたいです。
TOPページ
現時点でコンテンツの構成は変えていません。
記事カードを少しコンパクトにしたので、画面内に表示される記事数が増えました。ほんの少しだけ一覧ページで記事が探しやすくなったのかなと思います。
あとサムネイルがない場合に、記事カードにデフォルト画像(仮)が表示されるようになりました。
Category / Tagページ
TOPページと構成・デザインはほぼ同じです。シンプルなページ。
Postページ
PC表示ではレイアウトを1カラムにしたことで記事レイアウトが中央寄せになりました。全体のバランス感がよく個人的にはこっちの方が好きです。
また記事の横幅が広くなり、縦方向にコンパクトになりました(PC表示)。一方この懸念点として、1行あたりの文字数が多くなっていることがあります。もしかすると少し見づらくなってしまった可能性があり、今後調整が必要になるかもしれません。
見出しのデザインを変更しました。より見出しの強調性を上げて、「通常テキスト」と「見出し」の区別しやすくして流し見しやすいようにしました。
（※画像デザインの参考：デザイン研究所さん）
旧ブログと新ブログのSEO面の違い
移行したばかりなので、現時点ではまだ変化がわかりません。
サイト規模自体も小さいので、致命的なミスなどなければプラスもマイナスも大きな変化はそれほどないのではないかと考えています。
今回、移行前のLighthouseスコアを控え忘れるミスをしてしまったので、基本SearchConsoleのデータを見ながら何か変化が起こるかどうかチェックしていこうと思います…
今後の実装予定 / 検討中のこと
- SNS共有ボタン
- ページごとのOGP生成
- 追従する目次&ステータスバー
まとめ
今回やってみて、ただブログを作るだけならやっぱりWordPressで十分だし、コスパだけ考えたらわざわざヘッドレスCMSにするメリットは少ないと思いました。
ただ開発するのは楽しいし、愛着も湧いてもっと記事書いたり機能実装したりしたいと感じるし、いいこともたくさんあります。
最近の記事
