ヘッドレスCMSにWordPressを使うという選択

タイアップ

2024年6月18日

使い慣れたWordPressをヘッドレスCMSとして用いればJamstack構成を試すハードルは一段下がります。実際に自社のコーポレートサイトをこの構成でリニューアルした株式会社マーベリックスの取り組みと成果を聞きました。

竹部裕介さん代表取締役／システム開発、Web制作を経験した後、システム開発会社で営業、事業部長を担う。2019年同社設立。

大野晋太郎さんシステム開発部部長エンジニア／システム開発を専門に、企画・提案、プロジェクトマネジメント、技術面のサポートなど開発全般を支援。

株式会社マーベリックス
2019年設立。チームを大切にし、技術力を活かしたWebサイト/システムの受託開発を行う。
https://www.eyemovic.com/

クライアントの不安材料はデータ改ざんと個人情報漏洩

弊社では2022年の3月～6月にかけて、自社コーポレートサイトのリニューアルを行いました。以前のサイトは会社設立の2019年に立ち上げたもので、採用情報や事業内容の紹介をより充実させることが主な目的でした。

以前と同じくWordPressで構築することも可能でしたが、エンジニア全員がNuxt.jsを使える強みを活かして、WordPressをヘッドレスCMSに用いたJamstack構成を採用することにしました。表示速度やセキュリティ面の強みはもちろんですが、私たちの持つ技術を活かして開発する方が結果的により価値あるリニューアルになると考えたことが大きな理由です。Nuxt.jsの経験が浅いメンバーのスキル底上げも狙いました。ただ、学びながら開発する形になったため工数は想定以上にかかることになりました。

　ヘッドレスCMSとしてWordPressを選んだ理由の一つは、運用面の利点です。ブログやニュースをコンスタントに投稿する上で、メンバーが使い慣れたブロックエディタは重要なポイントでした。過去記事の移行も容易です。

もう一つは、WordPressの知見が活かせることです。私たちは現在、あるWeb制作会社に対してJamstack開発の技術サポートを行っていますが、CMSをWordPressにすることで、主にフロントエンドのみサポートすれば自走が可能になります。Jamstack開発を試す上では、まずヘッドレスCMSにWordPressを使うことでハードルが下がるケースは多いのではないでしょうか。

APIを自作、画像の転送WordPressの課題と対策

とはいえ、開発を進める中で他のヘッドレスCMSでは見られなかった課題が出てきました。一つは、静的配信されたページ上でアクションを起こすためのプログラム、具体的には「お問い合わせフォーム」です。今回は、Nuxt.jsで作成したフロントエンド環境から、AWSのAPIゲートウェイを通じてメールが配信されるよう設計しました。この他、関連記事やランキング表示などにもAPIを自作して使用しています。通常プラグインで実装するような機能には注意が必要です。

また、管理画面から記事を投稿した際、画像のアップロード先をWordPress内でなくクラウドストレージにする必要があります。今回はAWSのCloudFront+S3で配信するため、投稿時に自動的に転送されるようカスタマイズしました。

WordPressに限定される課題ではないのですが、現行サイトを維持したままJamstackでリニューアル開発を行う際にはドメインの問題がついて回ります。フロントエンドのプログラムを書くことはできても、動かしてみるには本番環境へのアクセスが必要になることがあり、不用意に書き換えてしまうことに注意が必要です。現行サイトとは別にWordPressを立ててリニューアルを進める方法もありますが、リリース後のアクセス先差し替えが難しいことが課題です。この点はより良いスキームを考えていく必要があります。

ページ評価のアップと開発受注の説得材料に

リニューアルから1年が経った現在、サイト表示が高速化されたことで直帰が減り、アクセス数が増えています。サイト内の遷移も速くなったために離脱率が下がり、ページ評価が上がったことで、SEOの面でも効果を実感しています。経験の浅いスタッフにとってはよい実践の場となり、今後はNuxt.jsの利点を活かした開発の効率化が期待できます。

このリニューアルが実績となり、新しい仕事に結びつく例も出てきました。一つは、モダンな技術スタックを使用したシステム開発のご相談をいただいたことです。システム開発分野では、フロント側をリニューアルしやすかったり、変更に強いつくりにすることを理由にJamstackが選択されやすいという背景があります。今回のリニューアルが技術的な説得力となり、新しい成約につながりました。

もう一つは、先ほども述べたWeb制作会社に対する技術的なサポートや、エンジニアの勉強会、ワークショップなどの依頼です。

Webサイトのコーディングをメインにするエンジニアがフロントエンド開発のスキルを身につければ、システム開発を含めて活躍の場を広げることに役立ちます。JavaScriptフレームワークは今後も需要が高まるスキルなので、こうした面で貢献していきたいと考えています。

Web制作は以前は“つくれる”ことそのものに価値がありましたが、その後はマーケティングやブランディングが求められるようになり、現在はさらなる付加価値が求められているように思います。私たち自身もさまざまな技術を試し、より提案の幅を広げることを目指していく考えです。