脱WordPressのための代替ノーコードツール・ヘッドレスCMS

WordPressは素早くWebサイトを立ち上げることができ、ほとんど何でもできるという強みがありますが、いくつかのデメリットを抱えていることも事実。 そこで最近は”脱WordPress”の流れが世界、そして日本でもある程度起こっています。

なぜWordPressから脱出する必要があるのか。抱えるデメリット

たとえば、WordPressには下記のデメリットがあります。

セルフホスティングしている場合はプラグインを含めて保守が面倒。定期的なアップデートが必要

メジャーアップデートを実行する際に、プラグインとの兼ね合いで不具合が発生することもしばしば。

定期的なアップデートは、セキュリティ対策においても必至です。

セキュリティ面が不安

WordPressは世界で最も浸透しているCMSである反面、世界で最も狙われやすいCMSになっています。

フロントとバックエンドを分離させることができず、改修コストが大きい

WordPressの構造上、フロントとバックエンドを一体として扱うCMSとなっており、デザインとコンテンツの分離をさせることができません。

WordPressの管理画面のみを利用してヘッドレスCMSとして扱い、開発したフロントにAPI経由でWordPressのコンテンツを出力させる、という方法もあります。

3つのノーコードツールで脱WordPressを目指す

上で述べたように、WordPressにおいては現状3つの問題点が挙げられます。

• 保守コスト
• セキュリティ面での不安
• 改修・変更の際の開発コスト

このうち、保守やセキュリティ面の不安のみが問題なのであれば、WordPressのフルマネージドサービスを検討すれば良いでしょう。

たとえば、セキュリティと高速表示に定評のあるKinstaのマネージドWordPressホスティングは月額$35~で利用することができます。

マネージドWordPressホスティング | Kinsta

マネージドWordPressホスティング

スターターレベルからエンタープライズソリューションまで、豊富なプランをご確認ください。その中からお選びいただくか、特別な選択肢をご希望の場合にはお気軽にご連絡ください！

kinsta.com

しかし、WordPressを採用している以上、マネージドサービスに契約しても「改修・変更の際の開発コスト」からは逃れることができません。（FSEで済む場合は除く）

そこでまず候補となるのが、SaaS型のノーコードWeb制作ツールです。

脱WordPressを目指せるノーコードツールとして、次の3つを順に紹介します。

• 脱WordPressの主流ノーコードツール ”Webflow”
• 最高のコンテンツ管理とライティング体験を保ってサイト公開 ”Notion”
• 美しいデザインを簡単に。簡易CMSも備える国産ノーコードツール “STUDIO”

脱WordPressの主流ノーコードツール ”Webflow”

WordPress代替となるノーコードツールとして注目されているのが、”Webflow”。 ノーコードでデザイン・CMS構築できるサービスとして、海外ではWordPressの代替CMSとして挙げられることが多いです。

Webflow: Create a custom website | No-code website builder

Create professional, custom websites in a completely visual canvas with no code. Learn how to create a website by trying Webflow for free!

webflow.com

Webflowの特徴について、下記のような特徴があります。

• デザイン部分についてはWixライクにノーコードで開発しつつ、APIを介してさまざまな他SaaSとかんたんに連携することが可能。
• デザイン部分についてコーディングを行うことがなくなる。
• ただし、WordPressは近年FSE(Full Site Edit)機能に対応したことにより、ノーコードでレイアウトの変更が行えるようになった。WebflowやWixほどの自由さはないが、多少の変更や凝らないデザイン程度であればFSEで十分なこともある。
• WordPressの中で閉じたエコシステムである”プラグイン”とは異なり、WebflowはAPIベースで外部サービスと連携させていく設計思想となっています。他SaaSやノーコードサービスと自由に接続させやすいのはWebflowでしょう。
• JavaScriptの埋め込みが可能。
• いわゆるSaaS型のサービスのため、サーバー管理やミドルウェア等においての設定を行うことはできない。反面、アップデートなどの保守作業は不要。
• 有料プランはCDNによる配信となっているが、日本に最適なCDN構成となっているかは不明。高速に配信されない恐れもある。

またSEOに関していうと、WebflowよりWordPressのほうに軍配が上がります。WordPressにはSEO効果を高める優れたさまざまなプラグインが提供されており、かんたんに万全なSEOを施すことができるためです。

さらに、すべてのケースにおいてWebflowが万能という訳ではありません。Webflowがおすすめできるケースは下記の記事で紹介しています。

Webflowの事例+3つのおすすめな場合と検討すべきケース | 魔法使いのWebマーケティング

Webflowの事例+3つのおすすめな場合と検討すべきケース | 魔法使いのWebマーケティング

ノーコードのWebサイト制作ツール・CMSである Webflow に関するYouTube動画で、"Webflowを使うべき場合と使わないほうがよい場合" について説明されていました。 大変興味深い内容であり、実際 "WordPressやWix, Studioなど他CMSと比べた際に、Webflowをどう棲み分けて利用すればよいか？" というのはなかなか悩むシーンではあると思います。 ...

marketing-wizard.biz

最高のコンテンツ管理とライティング体験を保ってサイト公開 ”Notion”

次は、All in Oneワークスペースである Notionを軽量CMS（ヘッドレスCMS）として活用する方法。

Notion (ノーション) - すべてのチームをひとつのワークスペースで

Notionは単なるドキュメントやテーブルではありません。望み通りに機能するようにNotionをカスタマイズしましょう。

www.notion.so

実際に私はWordPressから脱出して、Notion×Superでのコンテンツ運用に切り替えました。

WordPressブログをNotion製Webサイトに移行することにしました | 魔法使いのWebマーケティング

WordPressブログをNotion製Webサイトに移行することにしました | 魔法使いのWebマーケティング

こんにちは。まほウェブNakataです。 普段のエンジニアリング業務メモやSEO・Webマーケティングに関することをブログとして公開していた本ブログですが、 Notionと Super によって制作したブログ、 魔法使いのWebスクリプト へと移行することにいたしました。 途中、Notion公開用サードパーティツールを Wraptas（旧Anotion） に変更したのですが、Super → ...

marketing-wizard.biz

参考カテゴリ: 📚Notion | 🔍SEO

美しいデザインを簡単に。簡易CMSも備える国産ノーコードツール “STUDIO”

STUDIOはノーコードでかんたんに美しいWebサイトを制作することができる、デザイナー向けノーコードツール。デザインツールを触る感覚で、ドラッグ&ドロップでWebサイトを制作していくことが可能です。

STUDIO | ノーコードでWebサイトを作成

これからのWebサイト作成に必要なのはSTUDIOだけ。コードやテンプレートに縛られることなく、自由自在にWebサイトをデザインしましょう。

studio.design

日本発のノーコードツールであることから、多くの日本語フォントを備えていることや、縦書きの文字組みにも対応している点がありがたいポイント。

アニメーション効果をつけることも可能で、動きのあるデザインを実装することができます。

参考: STUDIOで基本となる2種類のアニメーション。実装・設定方法を公式動画から解説 | 魔法使いのWebマーケティング

STUDIOで基本となる2種類のアニメーション。実装・設定方法を公式動画から解説 | 魔法使いのWebマーケティング

以前、 WebサイトにおけるNo-Code制作方法①「Webサイトビルダー」 | まほウェブ の記事でさらっとお伝えした、本格的なwebデザインのできるノーコードツール" STUDIO "のアニメーション実装方法についての記事です。 STUDIO | ノーコードでWebサイトを作成 ...

marketing-wizard.biz

要件次第ではありますが、会員機能や複雑な機能が要求されない通常程度のWebサイトであれば、STUDIOを第一候補としても問題ないでしょう。

参考タグ: 🎨STUDIO

静的サイトジェネレータ（SSG）×ヘッドレスCMSで超高速かつデザイン性の両立

静的サイトジェネレータにおいては動的な処理を行いにくいため、会員制サイトや頻繁な更新のあるサイトには向かないかもしれません。

静的サイトジェネレータの有名どころ（フロント）

Gatzby

The Fastest Frontend for the Headless Web | Gatsby

There's a reason why the world's top-performing website teams use Gatsby. Whether your site has 100 pages or 100,000 pages-we're obsessed with delivering dynamic web experiences with performance and security that scales. Build a fast, secure, and powerful website using our React-based, open-source framework. Want further flexibility?

www.gatsbyjs.com

Gatzbyの特徴としては下記。

• 特殊なことをしなければテンプレートのまま公開させることも可能
• 歴史がある
• プラグインが豊富
• ブラックボックスになりやすい

純正テンプレートではありませんが、Gatsby × Contentfulで構築されenvatoで販売されているテンプレートがなかなか良さそうだなと感じました。

FlexiBlog - React Gatsby Multipurpose Blog Theme by ElegantStack | ThemeForest

FlexiBlog - React Gatsby Multipurpose Blog Theme

Buy FlexiBlog - React Gatsby Multipurpose Blog Theme by ElegantStack on ThemeForest. FlexiBlog is a fully functional multi-purpose blog theme powered by React and Gatsby JS v3 and packed with various pa...

themeforest.net

Next.js

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

nextjs.org

Next.jsは静的サイトジェネレータとして特化している訳ではなく、静的サイトジェネレータとしての役割をもつReact製フレームワークです。

Next.jsによるヘッドレスCMS用フロント開発の特徴として、下記があるようです。

• カスタマイズしやすい、コードを書きやすい
• 反面、自分で構築・設定していく必要が多い

Astro.js

Astro | Build faster websites

Trusted by over 30,000 developers and world-class teams Your content, your way. Astro works with your favorite content sources. Pull content from the filesystem or fetch it remotely from your favorite CMS, database, or API. Astro supports both static output (SSG) and live server output (SSR) that can render your content on-demand.

astro.build

上のNext.jsはJavaScript開発において主流のフレームワークの1つですが、Next.jsは高機能になりすぎてむしろWebサイト制作には向かなくなってきているのでは？という流れがあるようです。

そこで最近注目されてきている静的サイトジェネレータ（ビルドツール）が、”Astro.js”。Next.jsよりシンプルな機能で、より軽量で高速とのこと

またAstro.jsは、stateofjs2022のRendering Frameworksにおいても注目される結果を得ています。

このAstroとヘッドレスCMS”micro CMS”でブログサイトを作るチュートリアル記事も公開されています。

AstroとmicroCMSでつくるブログサイト

こんにちは、microCMSの松田です。今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 Astroは静的サイトジェネレーターの一つです。その GitHubリポジトリには2022年9月時点で2万弱のスターが付けられています。 https://astro.build/ 数ある静的サイトジェネレーターの中でなぜAstroを選ぶのか公式のドキュメントで解説されています。 https://docs.astro.build/en/concepts/why-astro/ ここで書かれていることを簡潔にまとめると以下のような内容です。 Astroはウェブアプリではなくウェブサイトを作るために用意されたWebフレームワークです。 Astroはクライアントサイドレンダリングよりもサーバサイドレンダリングを可能な限り使用します。ただし、HTML、CSS、JavaScriptのみで開発は可能です。 デフォルトで高速なサイトができあがります。 React、Preact、Svelte、Vue、Solid、Litなど様々なUIフレームワークをサポートしています。徐々に利用技術を差し替えていくことも可能です。 100以上の統合機能が用意されており、CMSやホスティングサービスとの接続も自由です。 そしてAstroを語る上でもう一つ欠かせないのがAstro Islandsです。これも公式のドキュメントで説明されています。 https://docs.astro.build/en/concepts/islands/ 簡単に解説すると、ページの各UIコンポーネントを別モノとして扱うことができます。これによりコンポーネント間の優先度設定によるパフォーマンス調整やコンポーネント毎にUIフレームワークを変えられることがメリットとなっています。React 18でも導入されたSelective Hydrationにも近い考え方となっていますね。 https://jasonformat.com/islands-architecture/ それではAstroの大枠を知れたところでブログサイトの開発に取り掛かっていきましょう。まずはプロジェクトを作成します。 デフォルトもしくはrecommendedな設定を選んでいけば問題はありませんが、はじめての場合は Which template sould you like to use?の質問で表示されるテンプレートで Blog などを選べばAstroで作るサイトの雰囲気をつかみやすいでしょう。 次に手元のマシン内で開発サーバを立ち上げてサイトを確認してみます。 $ cd my-fisrt-astro-blog $ npm run dev > @example/basics@ 0.0 .1 dev > astro dev 🚀 astro v1.2 .2 started in 35ms ┃ Local http: ┃ Network use --host to expose この状態で http://localhost:3000/にアクセスしましょう。以下のような画面を確認できればOKです。 今回、ブログの情報はmicroCMSより取得します。そのため環境変数にてmicroCMSへのアクセスに必要な情報を定義しておく必要があります。 Astroでは環境変数はプロジェクトルート（ package.json が存在する階層）に .env ファイルを用意することで定義可能です。microCMSの登録情報やAPIキー情報を確認し、以下のように記述しておきましょう。 MICROCMS_SERVICE_DOMAIN= MICROCMS_API_KEY= microCMSをAstroから呼び出すために microcms-js-sdkを導入しておきましょう。導入は1コマンドで完了します。こちらもプロジェクトルートで実行しましょう。 $ npm install microcms-js-sdk それではいよいよブログ記事を作成していきます。 まずはmicroCMSにブログ（blogs）というAPIを用意します。 APIの型の選択ではリスト形式を選択してください。 フィールドは以下のように指定します。この部分は画面上部のファイルインポート機能も利用可能です。本記事の上部でも示した astro-blog-schema.jsonをダウンロードし指定を行ってください。 APIが作成できたら記事も2つほど作成しておきます。 ...

blog.microcms.io

Svelte（SSGではありません。UIフレームワークとしてご紹介）

Svelte • Cybernetically enhanced web apps

Svelte

Cybernetically enhanced web apps

svelte.dev

近年台頭してきている軽量JavaScriptフレームワーク”Svelte”。

小規模〜中規模のサイトである場合、Next.jsやGatzbyの代替としてSvelteも良いと思われます。

Svelteは単体で利用する場合にはサイトを静的化するものではありませんので、会員制サイトを構築する場合にも利用できると思います。（もちろんReactやVanilla JSなどでも可）

フロント構築としてGatzby, Next.js, Astro.js, Svelteのどれを採用するか？

下記ブログ様での翻訳が大変参考になりました。（元記事は英語）

Next.js は「 SSR 」や「 Incremental Static Regeneration 」、他方 Gatsby は「プラグインのエコシステム」「小さいサイトで始めやすい」などがそれぞれ魅力であると書かれています。 使いどころはそれぞれ次のとおりとのことです。 Next.js: ・大規模なマルチユーザーサイト ・ポータルサイト ・SPA (Single Page App) Gatsby: ・コーポレートサイト ・サービス紹介サイト・カタログサイト ・個人ブログのサイト Next.js と Gatsby でサイトを構築し一定期間運用したことのある人であれば多くの人が同意する分析ではないかと思います。

また同様に、要件が合致すればAstro.jsで開発していくのもシンプルで面白そうです。

ヘッドレスCMSの有名どころ（バックエンド）

それぞれの詳しい説明や比較については ヘッドレスCMS代表格4つを比較【microCMS・Newt・Contentful・Strapi】 の記事で解説しています。

以下では概要・Twitterでの評価などを交えて有名ヘッドレスCMSを簡単に紹介いたします。

Contentful

API-first content platform to build digital experiences

More than a headless CMS, Contentful is the API-first content management platform to create, manage and publish content on any digital channel.

www.contentful.com

様々な入力に対応。APIとしての入出力に対応。

Neflify CMS

Netlify CMS | Open-Source Content Management System

Open source content management for your Git workflow

www.netlifycms.org

導入・設定がカンタン。

日本語対応の国産CMS”micro CMS”

microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。

microcms.io

国産CMS。日本語対応しているためクライアントワークにも適していそう。

日本では最も浸透していそうなCMSで、「使いやすい」と定評があります。

キーワード検索では「ヘッドレスCMS」よりも「microCMS」のほうが検索数が多いようです。

microCMSは国産ヘッドレスCMSにおける代名詞、といっても過言ではないですね。

microCMSでは権限管理やワークフロー設定も可能なため、コンプライアンスを気にするクライアントに対してもおすすめできそうです。

• 権限管理｜microCMS｜APIベースの日本製ヘッドレスCMS
• ワークフロー｜microCMS｜APIベースの日本製ヘッドレスCMS

microCMSの公式サイトに採用事例が数多く載っています。どのようなWebサイトが制作されているのか、チェックしてみてください。

導入事例一覧｜microCMS｜APIベースの日本製ヘッドレスCMS

導入事例一覧｜microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。

microcms.io

ヘッドレスフォームも利用可能な国産CMS”Newt”

microCMSと比べると新しめの国産CMS、Newt。

複数サイトのコンテンツを、1つのスペースで柔軟に管理できるのが特徴で、管理画面も使いやすいと定評があります。

また、ヘッドレスCMS構築ではやや面倒なポイントとなるフォームについて、Form Appというヘッドレスフォームを作成できる仕組みを構築しています。

Newtでも権限管理が可能です。ワークフロー設定が可能かどうかは、詳細を見つけることができませんでした。

Appロール（権限管理） | ドキュメント | ヘッドレスCMS「Newt」

Notionを軽量ヘッドレスCMSとして利用

Notion (ノーション) - すべてのチームをひとつのワークスペースで

Notionは単なるドキュメントやテーブルではありません。望み通りに機能するようにNotionをカスタマイズしましょう。

www.notion.so

ほかにも、Notionを軽量ヘッドレスCMSとして利用する方法もあります。

• NotionをヘッドレスCMSとして活用。リッチなWebサイトを構築する方法
• NotionをWebサイト・ブログ公開用の軽量CMSとして使うかどうかの判断基準

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。

🍀 Webサイト制作とSEOの専門家 - Marketing Wizard

上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。

Category: 🎁便利サービス

Tag: 🥡CMS一般 | 🗳️WordPress | ☸️Webflow | 🎨STUDIO | 📚Notion | 🛠️No-Code