1
/
5

Lightning Talk_ヘッドレスCMS | 既存のプロダクトLPをサクッとCMS化させる話

こんにちは!
Another worksでフロントエンドエンジニアを担当している宮内(みやぞん)です!
今回は弊社のプロダクトLPをヘッドレスCMSに移行改善に関する取り組みをご紹介します!

弊社LPの導入事例記事の現在

弊社サービスLPの導入事例記事ページは記事内容をコード内に直書きする方法で実装されています。
リリースまでは最小工数でたどり着けるのはよかったものの、やはり記事追加や更新などのメンテンナンスで工数が地味に発生します。
このボディブローのようにじわじわと効いてくる作業の工数を減らせないかと色々考えてみました。(ボディブローは受けたことがありません)

前提条件

  • 投稿するのは開発チームではない

解決策の候補たち

  • 管理画面から投稿できる仕組みを作る
  • noteなどに投稿しRSSで情報取得する
  • スプレッドシートにデータ入力しS3(AWS)を使用して情報取得
  • ヘッドレスCMS化 (結論)

結論と書いてあるとおり選ばれたのは「ヘッドレスCMS」なのですが、それ以外の選択肢は何がだめだったのかというところを簡単に説明していきます。

管理画面から投稿できる仕組みを作る

記事投稿UIを自前で作成しなければならないことに加え、当然DB設計やデータベースそのものも用意する必要があり、結構大きな工数がかかります。
外部サービスに依存せず、長く使えることは確実ではあるのですが、工数とインパクトを考えたときに「よしやろう」とはなりませんでした...。

noteなどに投稿しRSSで情報取得する

みんな書き慣れてるし、投稿UXも最高やん!これでええやん!と思ったのですがこの案が一番論外でした。
SEOの観点でデメリットは沢山あります。

  • 離脱率が上がる
  • 回遊率が下がる
  • コンバージョンのための導線が減る
    他のサービスLPを見てもやはりこういうやり方をしていないのは上記の理由からなのかなと。
    というわけで、却下となりました。

スプレッドシートにデータ入力しS3(AWS)を使用して情報取得

弊社システム内で似たようなことをしている部分があるので真似しようとしましたが、入力UXが最悪です。
おそらく入力文言のセルの隣にHTMLタグの種別を設定するプルダウンを用意したり...。
ちょっと想像しただけでよろしくないなと🤢

選ばれたのは「ヘッドレスCMS」でした

CMSってWordpressとかに代表されるWebサイトの構築から更新まで、管理画面でめっちゃ簡単にできるシステムだよね?
というのは知っていましたし、なんなら開発経験もありました。
しかし「ヘッドレスCMS」となると、聞いたことはあるけど何なのかはわかっていませんでした。
ただ、APIだけを提供するCMSじゃなかったけ?というごく浅い知識はあったので、ダメ元で少し調べてみたのでした。

ヘッドレスCMSとは?


https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/headless-cms/

ビューの部分を持たないCMSで、Wordpressは見た目までをセットで提供しているのに対して、
「ヘッドレス」なCMSはその画面上の見た目以外の「管理画面」と入力したデータを引っ張り出す「APIとデータベース」のみを提供します。
つまり、表示のための画面は自前で用意しているものをそのまま使用できるのです!

でもきっと、導入は難しいんでしょう?

いいえ、ヘッドレスCMSの導入は朝起きて歯を磨くことよりも簡単です。

ここでは国産ヘッドレスCMSである「microCMS」を使用して説明します。(当然日本語に対応しています!)

  1. まずアカウントを作成し管理画面にアクセスします。(https://microcms.io/)
  2. あとは登録したいAPIのフィールドを自分でカスタムして、投稿するだけです。

サムネイルを追加したければ画像登録フィールドを簡単に作れますし、キー名も自分で決められます。
記事投稿であればリッチテキストエディタも必須ですね!というような構成も簡単に組めます。

あとは、Next.jsで書いた自前のページに組み込むだけです。
これもSDKが用意されており、たった少しのコードで世界を変えることができます。

SDKをインポートするだけで簡単にAPIへのアクセス可能

import { createClient } from 'microcms-js-sdk';

const client = createClient({
serviceDomain: 'service-domain',
apiKey: process.env.API_KEY,
});

const data = await client.get({ endpoint: "blog" });

あらすごい。簡単に一覧情報が取得できます。
詳細情報の取得はもちろん、前後の記事取得なども情報がたくさん出ているので簡単に実装可能です。

ヘッドレスCMS最高!

「既存のページをCMS化したい」というニーズのある方はぜひ一度使ってみてください!Hobbyプランであれば多少の制限があるものの無料で使用できるのでおすすめです!


エンジニア
CTO室立ち上げ!技術で経営課題を解決できるエンジニア募集!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、現在は39,000名にご利用いただき、導入企業も900社を超える急成長を遂げています。(2022年7月末時点) 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。Another worksが契約の間に入らないからこそ実現できています。専属のCSが採用成功に向けて伴走し、複業人材の採用成功率は80%以上です。 ◎新規事業への挑戦 新たな市場創造に向けて今後の柱となる新規事業をforシリーズとして展開しております。 ▼複業クラウドfor Public - 地方自治体様×複業人材 ▼複業クラウドfor Sports - スポーツ団体様×複業人材 ▼複業クラウドfor Academy - 学校法人様×複業人材 ▼複業クラウドfor Professional - 企業様×プロ複業人材 既に37自治体様との連携や5つのスポーツ団体様との連携など圧倒的な速度で事業展開を行っております。 ■Another worksの特徴 ◎社員について 年代:20代が中心 平均年齢:27歳 社員数:40名 男女比:6:4 ◎社員出身企業 ビズリーチ、リクルート、パソナ、パーソル、レバレジーズ、マイナビ、ディップ、JAL、EPARK、フォトシンス、マネーフォワード、ベネフィット・ワン
株式会社Another works
AI・機械学習エンジニア
AI・機械学習を使って複業を世の中に広めるプロダクトを作りましょう!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、現在は39,000名にご利用いただき、導入企業も900社を超える急成長を遂げています。(2022年7月末時点) 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。Another worksが契約の間に入らないからこそ実現できています。専属のCSが採用成功に向けて伴走し、複業人材の採用成功率は80%以上です。 ◎新規事業への挑戦 新たな市場創造に向けて今後の柱となる新規事業をforシリーズとして展開しております。 ▼複業クラウドfor Public - 地方自治体様×複業人材 ▼複業クラウドfor Sports - スポーツ団体様×複業人材 ▼複業クラウドfor Academy - 学校法人様×複業人材 ▼複業クラウドfor Professional - 企業様×プロ複業人材 既に37自治体様との連携や5つのスポーツ団体様との連携など圧倒的な速度で事業展開を行っております。 ■Another worksの特徴 ◎社員について 年代:20代が中心 平均年齢:27歳 社員数:40名 男女比:6:4 ◎社員出身企業 ビズリーチ、リクルート、パソナ、パーソル、レバレジーズ、マイナビ、ディップ、JAL、EPARK、フォトシンス、マネーフォワード、ベネフィット・ワン
株式会社Another works
アプリエンジニア
React Native/創業メンバーのエンジニアとして働きませんか?
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるエンジニアを募集しています!
株式会社Another works
サーバーサイドエンジニア
日本で働く全ての人の挑戦機会を最大化させるサーバーサイドエンジニア募集!
『挑戦する全ての人の機会を最大化する』VISIONの実現に向けて 複業したい方と企業を繋ぐプラットフォーム「複業クラウド」を運営しています。 ■複業クラウドの特徴 ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、現在は39,000名にご利用いただき、導入企業も900社を超える急成長を遂げています。(2022年7月末時点) 『挑戦する全ての人の機会を最大化する』VISION実現に向けて、事業ピポットすることなくより良いプロダクトを開発し続けております。 ◎手数料や中間マージンが無料 人材業界の常識を覆す。企業と個人が直接契約ができるサービスをSaaSで提供。Another worksが契約の間に入らないからこそ実現できています。専属のCSが採用成功に向けて伴走し、複業人材の採用成功率は80%以上です。 ◎新規事業への挑戦 新たな市場創造に向けて今後の柱となる新規事業をforシリーズとして展開しております。 ▼複業クラウドfor Public - 地方自治体様×複業人材 ▼複業クラウドfor Sports - スポーツ団体様×複業人材 ▼複業クラウドfor Academy - 学校法人様×複業人材 ▼複業クラウドfor Professional - 企業様×プロ複業人材 既に37自治体様との連携や5つのスポーツ団体様との連携など圧倒的な速度で事業展開を行っております。 ■Another worksの特徴 ◎社員について 年代:20代が中心 平均年齢:27歳 社員数:40名 男女比:6:4 ◎社員出身企業 ビズリーチ、リクルート、パソナ、パーソル、レバレジーズ、マイナビ、ディップ、JAL、EPARK、フォトシンス、マネーフォワード、ベネフィット・ワン
株式会社Another works
インフラエンジニア
SREチーム立ち上げ!一人目クラウドエンジニア募集!!
成約手数料無料で複業したい人と企業をつなぐプラットフォーム「Another works」を運営しています!企業は必要なタイミングで、必要なプロジェクトに、必要な人材を自由に仲間にすることができます! Another worksは成約手数料も初期費用も無料で、直接つながることができるので、高額な手数料や複雑な契約形態に悩むこともありません!また、約15,000名の登録者もAnother worksに入れば複業案件を自由に探すことができ、エントリーや企業にメッセージを送ることができます! 今話題の【複業】×【SaaS】領域です! トレンドの最先端の領域で、新しい働き方の概念を発信していきます! 副業市場はどんどん拡大しており、Another worksも急成長をしております!創業期メンバーとして一緒にAnother worksを盛り上げてくれるインターン生を募集しています!
株式会社Another works
株式会社Another worksでは一緒に働く仲間を募集しています
5 いいね!
5 いいね!
同じタグの記事
今週のランキング