見出し画像

Nuxt.js + Contentful + Netlifyでランディングページをリプレイスした話

スマートラウンド

みなさん、こんにちは！
スマートラウンドのフロントエンドエンジニアの千葉です。

smartroundを支える技術についてでも少し触れられていますが、弊社のランディングページはNuxt.js + Contentful + Netlifyで実装・運用されています。

今回はNuxt.js + Contentful + Netlifyで弊社のランディングページ（以下「LP」といいます）をリプレイスした話をしたいと思います。

リプレイスに至った経緯

私がスマートランドに入社してから、LPの更新はほぼ私が担当しており、個人的にはLPの運用に課題を感じていました。

しかし、LPのデザインフルリニューアルの話なども何度か社内で出ており、そのタイミングでコードも刷新されるだろうと思っていました。
しかし残念ながらデザインがフルリニューアルされることはなく、同じ課題を感じていたチームメンバーがissueを作ったことにより、コードだけリプレイスすることとなりました。

リプレイス前の運用課題

リプレイス前のLPでは、主に下記の4点が課題となっていました。

1. コードの二重管理
スマートラウンドのLPはGithub Pagesで配信していました。
そのため本番用のリポジトリと、検証用のリポジトリがあり同じコードを二重管理していました。
また、本番環境での変更を検証するため、検証環境にコードをコピペするなどの非効率な作業をしていました。

2. 共通UIがコード側では共通化されていない
リプレイス前のLPは、全てのページがHTMLファイルで実装されていたので、ヘッダーなどの共通UIがコード側では共通化されておらず、変更があるたび複数のファイルを変更しないといけないという状況でした。

3. 環境ごと環境変数を読み分けられない
本来であれば検証用のLPでは、サービスへの新規登録なども、検証環境に遷移するようにするべきなのですが、環境ごと環境変数を読み分けるといったことができません。
そのため検証用のLPから本番環境に遷移してしまい、本番環境にアカウントを新規登録してしまうなどのミスが発生していました。

4. 更新業務の属人化
弊社のLPでは比較的更新頻度の多い部分があり、ほぼ私が更新業務を担当しています。
更新業務自体は簡単なのですが、他の仕事が忙しくなると更新が遅れたりする場合があり、更新業務の属人化を解決したいと考えていました。

Nuxt.js + Contentful + Netlifyを使い課題を解決する

Nuxt.js
まず、ヘッダーなどの共通UIのコード共通化と、環境ごと環境変数を読み分ける部分についてはNuxt.jsで解決することができました。
またsmartroundではフロントエンドにVue.jsが採用されており、Vue.jsの知見を活かしやすいことと、LPにとって大事なSEO対策がしやすいことなども採用理由となりました。

Contentful
次に更新業務の属人化はContentfulを使うことによって解決しました。
ContentfulはHeadless CMSと呼ばれるAPIベースのCMSです。
更新頻度が多いのはLPの一部分であるため、部分的なCMS化が容易なことや、Nuxt.jsと組み合わせてContentfulが使われている例が多いことなどからContentfulを採用しました。

Netlify
本番環境と検証環境のコードが分かれているという課題は、Netlifyで解決しました。
Netlifyとは静的サイトをホスティングすることができるWebサービスで、サイトのビルド、デプロイができます。
今までGithub PagesでLPを配信していたため、本番環境と検証環境でレポジトリを分けないといけませんでしたが、Netlifyを使用してGithubと連携することにより、１つのリポジトリで本番環境と検証環境を用意することができました。

リプレリスしてどうだったか

リプレイスしてからまだ日が浅いですが、非効率的な作業がなくなり、開発・運用は非常にやりやすくなりました。
今後もパーフォーマンス改善、CVR改善、SEO対策など、やるべきことはまだまだたくさんあるので、引き続き改善に励んでいきたいと思います。

------------- スマートラウンドについて -------------------

スマートラウンドではスタートアップ・投資家・士業の方向けにSaaSを提供してます。
特に「スタートアップ・ファースト」というバリューを掲げており、スタートアップが本業に集中できるよう主に資金調達前後の業務を効率化するようなサービス群を提供しております。
（経営管理・資本政策管理・資金調達マニュアル・他多数）


smartroundでは規模拡大に伴い、全方位的にポジションを募集しております。
（※ 求人更新追いついていない可能性あるので、こちらに無いポジションでももしご興味ある方いればお気軽にご連絡ください）

https://www.wantedly.com/companies/company_4346433


この記事が気に入ったらサポートをしてみませんか？