見出し画像

ヘッドレスCMSとは?Webディレクターも知っておきたい最近のCMS事情

HIGH-FIVE┃Webクリエイター転職エージェント

こんにちは、「はいふぁい」編集部です。

Webディレクター・マーケティングなどを行っているクリーク・アンド・リバー社シニアディレクター「アベ」と、フリーランスWebデザイナー・エンジニア「ケン」が、会社じゃ話せないホンネや実体験から得られたノウハウ&教訓をお伝えしていきます!

今回はWebエンジニアもこなすケンより、ヘッドレスCMSの概要からmicroCMSについて、近年のCMS事情についてレクチャーしてもらいました!ちなみに(編)はWordPressしか知らないので、お話についていくのが大変でした(汗)。Webエンジニアされてる方はもちろん、Webディレクターの方も、ぜひ読んでみてくださいね!

名前:アベ
出身:千葉県
職業:マーケティング、Webプロデューサー・ディレクター・・・何でも屋
趣味:空手、ギター、DTM、プラモデル製作、毎朝の散歩、ネコ
休日にすること:趣味全般、Youtube見てることも多いかな。。

名前:ケン
出身:新潟県
職業:Webデザイナー
趣味:銭湯巡り
休日にすること:ネットフリックス見ます!

名前:ショーコ
出身:島根県(石見の国出身)
職業:編集者、ライター、メディアディレクター等
趣味:裁判傍聴、水泳、美術館巡り、半身浴、音楽鑑賞
休日にすること:読書、ネットショッピング、部屋の掃除、ブログの執筆、友人とご飯に行くこと

WordPress以外のCMSのお話

ケ:今回はCMSの話ですね。要はプログラミングだったり、Webサイト作ったことない人でも簡単にブログ作れる、というのがもう今から何十年前から始まったんですけど...。「ブログ運営に必要な機能」だけではなくて、徐々にいろんな機能を持ち始めたんですね。

お問い合わせページの設置やカテゴリ、タグなど...あらゆる便利機能が追加されたことによって、ただのブログとしての役割のほか、コーポレートサイト、オウンドメディア、サービスサイトなど様々なシーンで使われるようになりました。

ア:これ2022年、日本のCMSシェアなんですけど...。どうです?イメージつきます?
※CMSシェア画像

出展:マニュオン(https://manuon.com/cms-share-ranking/)

ケ:やっぱり、WordPressが圧倒的シェアですね。僕らWeb開発者からしてみると、WordPressってかなり遅いんですよね。運営中のオウンドメディア(HIGH-FIVE:https://high-five.careers/)で言うとトップページ “転職事例1000”の一覧ページからなにかの記事を押下した際の裏側の処理...。クリックされたら、PHPでデータベースにアクセスします。

アクセスしているときに、SQLクエリでデータベースに要求をするのですが、それに応じて膨大な量の処理が動くことになります。

ア:うんうん。

ケ:今って開発の技術とか進んできていて、今までWordPressで作っていたものを、現在の技術を使ってもっと高速で機能できるCMSを作ろうじゃないか、というのが少し前に流行って、最近それが次々に出てきた印象です。

WordPressは、フロント側とバックエンド側があるんですけど、WordPressはそれらが一緒になっているんです。つまり分離ができないので、更新作業などが発生した際、更新性が悪いのと、スピードが低下してしまうといったデメリットがあります。それを解決しようと登場したのが “ヘッドレスCMS”という技術です。

出典:BtoBプラットフォーム 業界チャネル
(https://b2b-ch.infomart.co.jp/news/detail.page?IMNEWS4=3044095)

編:へー。初めて聞きました。

ケ:端的に言うと、「バックエンド部分だけを管理する」そういうCMSなんですね。自分たちが作ったフロントエンドの画面とヘッドレスCMSで作った裏側のロジックをつなぎ合わせて、サイトスピードが上がったWebサイトが構築できるというのがざっくりとした概念です。

WordPressでメディアサイト作ったときに、Googleのスピードスコアで40点とかでSEOの観点で言うと “✕(バツ)”なんですよね。それが80点、90点とかなるとランクが上がる要因になります。でもWordPressの時点でそれができないんですよ。いくら画像を軽くしたところで、裏側の仕組みが遅すぎるので対応できかねると。

でもその原因ってバックエンドとフロントエンドが一体化してるからなんですよ。

ア:うんうん。

ケ:なんですけど、あくまでもフロントエンドとバックエンドのロジックを分離させて繋ぎこむことによって、自作したフロントエンドの中は高速で動くので、基本的にはGoogleのスコアで前出ぐらいのスコアは出せます。

スペックはいいものの、導入コストがかさむことへのハードル

ア:開発コストとかどうなんですか?

ケ:開発コストはかかります。フロントエンドを構築したり、裏側のヘッドレスCMSと自作のフロントエンドを繋ぎこむときに、APIという秘術を使うんです。APIの知識がないと開発自体できません。なので、エンジニアとしてちゃんと仕事できる人でないと難しいです。

ア:参入障壁が高い感じですかね?

ケ:そうです!正直言うと高いです。WordPressってWebデザイナーの延長線上でできるんですよ。自分でデザインしたものをHTMLとCSSコーディングしていって、次の段階で自作のテーマを作って、WordPressの機能を提供しよう、というところまでは大体いけるんです。

ア:そうですね。

ケ:はい。でも今お話したものって開発と制作みたいな話になってくるんで、コストは高いですね。

ア:なるほどね~。だから普及っていうところでいうとそんなに一気に拡がっていく感じではないんですね。

ケ:まあ、お客様が何を求めているかというところなんですけど、WordPressやってていいことも勿論たくさんあるんですよ。SEOも運用も満足しているし、これでいいよねって。

WordPressの国内シェア率は驚きの8割超

ア:これだけ8割もWordPressが普及していると世の中のWebサイトいじってる人たちが管理画面のUIに慣れちゃってるんですよね。選択肢も単純に「WordPressでいいでしょ」ってなってしまっている。これは良くないことですよね。

ケ:はい。

ア:WordPressで作るんだったら自分達も運営できるし、イメージが湧きやすいですよね。ただ、僕も今回ご紹介いただいたCMSは使ったことがないので運用イメージが湧いてないんですよね。

ケ:フロントエンドとバックエンドが分離するってお話をしたんですけど、例えば既存のLPが一つあったとして、そのLP内にお問い合わせフォームをつけたいときってあると思うんですよ。これまではPHPで書くかWordPressにいれてやるかという二択だったと思うんです。

でもフロントエンドとバックエンドが分離しているので、その一部分だけをAPI連携させて、既存のLPはそこだけお問い合わせ機能をパコッと当てはめるイメージです。ヘッドレスCMSを連携させることによって。

ア:そうですね。なのでそのへんが基本的にはWordPressでできるし、ケンさんが話してくれたこともイメージできるんだけど、それがさらに簡単にできるイメージなんですかね。

ケ:そうですね。でも大半の人って、現状をあまりいじりたくないというか、現状維持の人がほとんどだと思うので、今あるWordPressからわざわざ乗り換える必要性も感じないし、なのであまり普及していないのかなぁと思います。

ヘッドレスCMSはまだまだ発展途上?

編:阿部さんがさっき話していた「使う側がWordPressの管理画面のUIに慣れている」みたいな、あったと思うんですけど、記者・編集者の募集要項を見ていて「CMSといったらWordPress」というぐらい、「WordPressが使える人」という風にわざわざ書いてあるんですよ。なのでそれ一択しかないんだな、と思いましたね。

ア:そうですね。市場全体でそうなんでしょうね。エンジニアとかケンさんはWordPress使いながら “使い難さ”を感じていたんでしょうけど、で、今回みたいなヘッドレスCMSとかあるとエンジニアとかは使いたくなる、と。

編:うんうん。

ア:WordPressは基本的に無料なので、開発・運営コストも検討し易い。

編:使いやすいですよね。ところで海外でのヘッドレスCMSの普及状況ってどうなんでしょうか?少なくとも日本はまだまだ発展途上ということですよね?

ケ:そうですね。

ア:海外では盛り上がりを見せている感じですよね。

ケ:microCMSは日本製のCMSなので、もしかしたら海外はまた違った何かがあるのかもしれないですね。

出展:マニュオン(https://manuon.com/cms-share-ranking/)

編:私は終始ちんぷんかんぷんでした(笑)。WordPressが今まで当たり前すぎました。WordPress以外のCMSが日本で普及する日も近いのでしょうか!?今回はケンさんにWordPress以外のCMS情報についてお話してもらいました。

お二人ともありがとうございました!

ア&ケ:ありがとうございました!

まとめ:
国内外共にWordPressのシェアが高いです。メリットもありますがデメリットもよく聞くようになってきています。それぞれの目的やシーンに合わせて使えるCMSの選択肢が増えることは、Webエンジニアに限らず、企画を考えるWebディレクターにとっても知っておくべき情報だと思いました。

お話の中に出てきたキーワードたち
・microCMS(日本製ヘッドレスCMS)
https://microcms.io/
・Next.js(javascriptのフレームワークのreactのフレームワーク)
Next.js by Vercel - The React Framework (nextjs.org)
・aws.amazon(next.jsで作成したWebページを配信するサービス)
アマゾン ウェブ サービス(AWS クラウド)- ホーム (amazon.com)
・SGとそれに付随する情報(Webサイトを高速配信できる機能)
図解 CSR, SSR, SG(SSG), ISR (zenn.dev)

・・・

ーTwitter

はいふぁい@HIGH-FIVE転職エージェントでは「はいふぁい」編集部員が日常も交えて、クリエイターさんと遊んでいます(情報交換)。使える情報も3割!

ークリエイターキャリア支援メディア『HIGH‐FIVE』

IT/Web領域クリエイターの転職情報・キャリアコラムを配信中!
1.C&R社の転職エージェントってなにしてくれるの?
2.具体的な転職事例が知りたい!
3.どんな求人を持っているの?

ーLINE

ーInstagram


みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!
HIGH-FIVE┃Webクリエイター転職エージェント
【Webクリエイター・デザイナー・マーケター・エンジニアのキャリアに寄り添う!ハイキャリアを目指すWebクリエイター専門転職エージェント】C&R社公式▶フォローすると「仕事術💻」「体調管理術🩺」や「豊かな生活術🙌」をお届け!Webクリエイターのキャリアアップを支援中です📢✨