WordPressは素早くWebサイトを立ち上げることができ、ほとんど何でもできるという強みがありますが、いくつかのデメリットを抱えていることも事実。 そこで最近は”脱WordPress”の流れが世界、そして日本でもある程度起こっています。
本記事では、なぜWordPressから脱出する必要があるのか、そしてWordPressの代替となるサービスや開発手法について解説していきます。
目次:
- なぜWordPressから脱出する必要があるのか。抱えるデメリット
- セルフホスティングしている場合はプラグインを含めて保守が面倒。定期的なアップデートが必要
- セキュリティ面が不安
- フロントとバックエンドを分離させることができず、改修コストが大きい
- 3つのノーコードツールで脱WordPressを目指す
- 脱WordPressの主流ノーコードツール ”Webflow”
- 最高のコンテンツ管理とライティング体験を保ってサイト公開 ”Notion”
- 美しいデザインを簡単に。簡易CMSも備える国産ノーコードツール “STUDIO”
- 静的サイトジェネレータ（SSG）×ヘッドレスCMSで超高速かつデザイン性の両立
- 静的サイトジェネレータの有名どころ（フロント）
- Gatzby
- Next.js
- Astro.js
- Svelte（SSGではありません。UIフレームワークとしてご紹介）
- フロント構築としてGatzby, Next.js, Astro.js, Svelteのどれを採用するか？
- ヘッドレスCMSの有名どころ（バックエンド）
- Contentful
- Neflify CMS
- 日本語対応の国産CMS”micro CMS”
- ヘッドレスフォームも利用可能な国産CMS”Newt”
- Notionを軽量ヘッドレスCMSとして利用
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
なぜWordPressから脱出する必要があるのか。抱えるデメリット
たとえば、WordPressには下記のデメリットがあります。
セルフホスティングしている場合はプラグインを含めて保守が面倒。定期的なアップデートが必要
メジャーアップデートを実行する際に、プラグインとの兼ね合いで不具合が発生することもしばしば。
定期的なアップデートは、セキュリティ対策においても必至です。
セキュリティ面が不安
WordPressは世界で最も浸透しているCMSである反面、世界で最も狙われやすいCMSになっています。
私も過去、WordPressサイトがハッキング被害に遭い、大変な目を見ました。
WordPressのセキュリティ対策においては、たとえば下記のようなセキュリティ対策を行っていく必要があります。
フロントとバックエンドを分離させることができず、改修コストが大きい
WordPressの構造上、フロントとバックエンドを一体として扱うCMSとなっており、デザインとコンテンツの分離をさせることができません。
後述する「ヘッドレスCMS」においては、コンテンツ配置やデザイン要素などの出力をさせるフロントと、コンテンツそのものを管理するコンテンツ管理（管理画面とコンテンツ自体の管理）がそれぞれ異なる持ち場をもっています。
フロントとバックエンドが疎結合な状態をもつことによって、「フロント開発・改修のしやすさ」「多様なデバイスへの表示をさせやすくなる」「セキュリティ面が改善する」といったメリットが生まれます。
WordPressの管理画面のみを利用してヘッドレスCMSとして扱い、開発したフロントにAPI経由でWordPressのコンテンツを出力させる、という方法もあります。
3つのノーコードツールで脱WordPressを目指す
上で述べたように、WordPressにおいては現状3つの問題点が挙げられます。
- 保守コスト
- セキュリティ面での不安
- 改修・変更の際の開発コスト
このうち、保守やセキュリティ面の不安のみが問題なのであれば、WordPressのフルマネージドサービスを検討すれば良いでしょう。
たとえば、セキュリティと高速表示に定評のあるKinstaのマネージドWordPressホスティングは月額$35~で利用することができます。
しかし、WordPressを採用している以上、マネージドサービスに契約しても「改修・変更の際の開発コスト」からは逃れることができません。（FSEで済む場合は除く）
そこでまず候補となるのが、SaaS型のノーコードWeb制作ツールです。
脱WordPressを目指せるノーコードツールとして、次の3つを順に紹介します。
- 脱WordPressの主流ノーコードツール ”Webflow”
- 最高のコンテンツ管理とライティング体験を保ってサイト公開 ”Notion”
- 美しいデザインを簡単に。簡易CMSも備える国産ノーコードツール “STUDIO”
脱WordPressの主流ノーコードツール ”Webflow”
WordPress代替となるノーコードツールとして注目されているのが、”Webflow”。 ノーコードでデザイン・CMS構築できるサービスとして、海外ではWordPressの代替CMSとして挙げられることが多いです。
Webflowの特徴について、下記のような特徴があります。
- デザイン部分についてはWixライクにノーコードで開発しつつ、APIを介してさまざまな他SaaSとかんたんに連携することが可能。
- デザイン部分についてコーディングを行うことがなくなる。
- ただし、WordPressは近年FSE(Full Site Edit)機能に対応したことにより、ノーコードでレイアウトの変更が行えるようになった。WebflowやWixほどの自由さはないが、多少の変更や凝らないデザイン程度であればFSEで十分なこともある。
- WordPressの中で閉じたエコシステムである”プラグイン”とは異なり、WebflowはAPIベースで外部サービスと連携させていく設計思想となっています。他SaaSやノーコードサービスと自由に接続させやすいのはWebflowでしょう。
- JavaScriptの埋め込みが可能。
- いわゆるSaaS型のサービスのため、サーバー管理やミドルウェア等においての設定を行うことはできない。反面、アップデートなどの保守作業は不要。
- 有料プランはCDNによる配信となっているが、日本に最適なCDN構成となっているかは不明。高速に配信されない恐れもある。
デメリットがあるとすれば、後述するSTUDIOと比べると学習コストがやや高いという点。Webflowもノーコードツールであるとはいえ、汎用的に使うことができるぶん、ツール自体の使い方に習熟する必要があります。
しかし、実装する際においてはコーディングをするよりも素早くデザインを実装・変更させていくことができるでしょう。
またSEOに関していうと、WebflowよりWordPressのほうに軍配が上がります。WordPressにはSEO効果を高める優れたさまざまなプラグインが提供されており、かんたんに万全なSEOを施すことができるためです。
さらに、すべてのケースにおいてWebflowが万能という訳ではありません。Webflowがおすすめできるケースは下記の記事で紹介しています。
2022年11月、ネイティブ機能としてMembership機能（会員制サイト機能）オープンβとして一般ユーザー公開されました。
このMembership機能により、簡単に会員制サイトを制作し、メンバー管理を行うことが可能になりました。登録・支払いを行った会員限定でコンテンツを公開するなど、ゲートウェイコンテンツをWebflowで制作したサイト上に実装することが可能です。
会員制サイト・コミュニティアプリの自前開発におすすめなCMS・ノーコード の記事で詳細を解説しています。
WordPressでプラグインを盛々にして会員制サイトを制作するより、セキュリティ上の懸念が少ない制作方法ではないでしょうか。
最高のコンテンツ管理とライティング体験を保ってサイト公開 ”Notion”
次は、All in Oneワークスペースである Notionを軽量CMS（ヘッドレスCMS）として活用する方法。
私は個人的にNotionのライティングのしやすさとコンテンツ管理の簡単さ・柔軟さが大好きで、「コンテンツを書くならNotion」とさえ思っています。（本記事もNotionで書いたものをSuper.soで出力させています）
このNotionをWebサイトとして活用する方法として、「Notionを軽量CMSとして扱いコンテンツはNotionで管理、出力は別のフロント用アプリで出力させる」ことをおすすめしています。
下の記事で紹介している方法であれば、エンジニアでなくてもノーコードでNotionを軽量CMSとしてWebサイト化させることができます。
参考: NotionをWebサイトとして公開する方法 : SuperとWraptas（Anotion）
Notionの特定のページ以下の階層を丸ごとWebサイトにしてしまう、という方法。
Notionページを丸ごとWebサイトとするのではなく、フロントは別途独自に用意して、NotionをヘッドレスCMSとして活用することも可能です。
実際に私はWordPressから脱出して、Notion×Superでのコンテンツ運用に切り替えました。
ただし、NotionをWebサイトとして公開する場合、WordPressのように「何でもできる」という万能さはなくなります。
Super.soやWraptasなどのツールを使って公開する場合、あくまでテクニカルなSEO面においてですが、たとえばインデックスさせやすくするなどの機能はWordPressのほうが優秀でしょう。
参考: Super.so × NotionブログのデメリットとテクニカルSEO面2つの不満
しかし、実際に本Webサイトは立ち上げ期はインデックスまで少し時間はかかったものの、現在は各記事において上位を獲得できています。（1〜2位をとっている記事も複数）
SEOの占める割合はつまるところ「コンテンツ品質」やそれに伴う被リンクやドメインパワーによるところが大きいため、WordPressと比べるとたしかに劣りはします。しかし、Notionではそれを補って余りある「コンテンツの更新しやすさ」をCMSとして発揮できるでしょう。
美しいデザインを簡単に。簡易CMSも備える国産ノーコードツール “STUDIO”
STUDIOはノーコードでかんたんに美しいWebサイトを制作することができる、デザイナー向けノーコードツール。デザインツールを触る感覚で、ドラッグ&ドロップでWebサイトを制作していくことが可能です。
日本発のノーコードツールであることから、多くの日本語フォントを備えていることや、縦書きの文字組みにも対応している点がありがたいポイント。
アニメーション効果をつけることも可能で、動きのあるデザインを実装することができます。
またSTUDIOは最近のアップデートで、CMSをもつプランを月額2,480円で公開しました。
以前はSTUDIOはお知らせ・投稿をもたないLPなどでしか利用されることが多かったのですが、CMS機能搭載により通常のコーポレートサイト等でも十分活用していくことが可能に。
さらに、コンテンツ整理のための機能も下記のようにパワーアップされています。
- リアルタイム共同編集
- コンテンツのレビュー
- 予約公開
- WordPressインポート
- ライター権限（Businessプランのみ）
要件次第ではありますが、会員機能や複雑な機能が要求されない通常程度のWebサイトであれば、STUDIOを第一候補としても問題ないでしょう。
参考タグ: STUDIO
静的サイトジェネレータ（SSG）×ヘッドレスCMSで超高速かつデザイン性の両立
ここからは「柔軟さをもちつつ、高速表示かつデザイン性も両立させたい、セキュリティも改善させたい」という方向け。
ただし、開発コスト・学習コストがかかることは覚悟が必要。
また、静的サイトとして構築する場合にはプレビュー表示機能などの一部の機能の実現が難しい場合があります。
静的サイトジェネレータにおいては動的な処理を行いにくいため、会員制サイトや頻繁な更新のあるサイトには向かないかもしれません。
静的サイトジェネレータの有名どころ（フロント）
静的サイトジェネレータ（SSG）の機能をもつフロント向けフレームワークとして、GatzbyとNext.jsがあります。
Gatzby, Next.jsともにReactベース。
Gatzby
Gatzbyの特徴としては下記。
- 特殊なことをしなければテンプレートのまま公開させることも可能
- 歴史がある
- プラグインが豊富
- ブラックボックスになりやすい
純正テンプレートではありませんが、Gatsby × Contentfulで構築されenvatoで販売されているテンプレートがなかなか良さそうだなと感じました。
Next.js
Next.jsは静的サイトジェネレータとして特化している訳ではなく、静的サイトジェネレータとしての役割をもつReact製フレームワークです。
Next.jsによるヘッドレスCMS用フロント開発の特徴として、下記があるようです。
- カスタマイズしやすい、コードを書きやすい
- 反面、自分で構築・設定していく必要が多い
Astro.js
上のNext.jsはJavaScript開発において主流のフレームワークの1つですが、Next.jsは高機能になりすぎてむしろWebサイト制作には向かなくなってきているのでは？という流れがあるようです。
そこで最近注目されてきている静的サイトジェネレータ（ビルドツール）が、”Astro.js”。Next.jsよりシンプルな機能で、より軽量で高速とのこと
Astro.jsは基本的には静的サイトを出力するものですが、Astro Islandsという部分的に動的なアーキテクチャとして構築することも可能。「静的サイトに浮かぶ動的な島」という意味合いで、部分的にコンポーネントを動的に出力できます。
この機能により、動的なコンポーネントはSvelte, React, Vueなど様々なUIフレームワーク資産と組み合わせて利用することが可能です。
またAstro.jsは、stateofjs2022のRendering Frameworksにおいても注目される結果を得ています。
このAstroとヘッドレスCMS”micro CMS”でブログサイトを作るチュートリアル記事も公開されています。
Svelte（SSGではありません。UIフレームワークとしてご紹介）
Svelte • Cybernetically enhanced web apps
近年台頭してきている軽量JavaScriptフレームワーク”Svelte”。
小規模〜中規模のサイトである場合、Next.jsやGatzbyの代替としてSvelteも良いと思われます。
Svelteは単体で利用する場合にはサイトを静的化するものではありませんので、会員制サイトを構築する場合にも利用できると思います。（もちろんReactやVanilla JSなどでも可）
フロント構築としてGatzby, Next.js, Astro.js, Svelteのどれを採用するか？
一見すると、「単純に静的サイトにしたいだけ」であればGatzbyが適しているように思えます。
しかし、「Gatzy Next.js ブログ」で検索すると、「Gatzbyが嫌になってNext.jsへ移行しました」とするブログ運営者の方が多いようです。
カスタマイズ性の悪さに嫌気が指した、ブラックボックスで何やってるのか分からない（けど動く）のが気持ち悪くなった、などの理由が多そうでした。
下記ブログ様での翻訳が大変参考になりました。（元記事は英語）
Next.js は「 SSR 」や「 Incremental Static Regeneration 」、他方 Gatsby は「プラグインのエコシステム」「小さいサイトで始めやすい」などがそれぞれ魅力であると書かれています。 使いどころはそれぞれ次のとおりとのことです。 Next.js: ・大規模なマルチユーザーサイト ・ポータルサイト ・SPA (Single Page App) Gatsby: ・コーポレートサイト ・サービス紹介サイト・カタログサイト ・個人ブログのサイト Next.js と Gatsby でサイトを構築し一定期間運用したことのある人であれば多くの人が同意する分析ではないかと思います。
ヘッドレスCMSのためだけでなく、Next.jsはさまざまなフロントエンド開発の場で使われているので、フレームワークの将来性も考慮にいれるとNext.jsを用いてヘッドレスCMSを開発していくのが良いのかもしれません。
小〜中規模の場合、Next.jsに一部代わるものとして近年台頭してきている軽量JavaScriptフレームワーク”Svelte”を利用するのも良さそうです。
また同様に、要件が合致すればAstro.jsで開発していくのもシンプルで面白そうです。
ヘッドレスCMSの有名どころ（バックエンド）
それぞれの詳しい説明や比較については ヘッドレスCMS代表格4つを比較【microCMS・Newt・Contentful・Strapi】 の記事で解説しています。
以下では概要・Twitterでの評価などを交えて有名ヘッドレスCMSを簡単に紹介いたします。
Contentful
様々な入力に対応。APIとしての入出力に対応。
Neflify CMS
導入・設定がカンタン。
日本語対応の国産CMS”micro CMS”
国産CMS。日本語対応しているためクライアントワークにも適していそう。
日本では最も浸透していそうなCMSで、「使いやすい」と定評があります。
キーワード検索では「ヘッドレスCMS」よりも「microCMS」のほうが検索数が多いようです。
microCMSは国産ヘッドレスCMSにおける代名詞、といっても過言ではないですね。
microCMSでは権限管理やワークフロー設定も可能なため、コンプライアンスを気にするクライアントに対してもおすすめできそうです。
microCMSの公式サイトに採用事例が数多く載っています。どのようなWebサイトが制作されているのか、チェックしてみてください。
導入事例一覧｜microCMS｜APIベースの日本製ヘッドレスCMS
ヘッドレスフォームも利用可能な国産CMS”Newt”
microCMSと比べると新しめの国産CMS、Newt。
複数サイトのコンテンツを、1つのスペースで柔軟に管理できるのが特徴で、管理画面も使いやすいと定評があります。
また、ヘッドレスCMS構築ではやや面倒なポイントとなるフォームについて、Form Appというヘッドレスフォームを作成できる仕組みを構築しています。
Newtでも権限管理が可能です。ワークフロー設定が可能かどうかは、詳細を見つけることができませんでした。
Appロール（権限管理） | ドキュメント | ヘッドレスCMS「Newt」
Notionを軽量ヘッドレスCMSとして利用
ほかにも、Notionを軽量ヘッドレスCMSとして利用する方法もあります。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
🍀 Webサイト制作とSEOの専門家 - Marketing Wizard
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
この記事の気になった箇所を読み返す:
- なぜWordPressから脱出する必要があるのか。抱えるデメリット
- セルフホスティングしている場合はプラグインを含めて保守が面倒。定期的なアップデートが必要
- セキュリティ面が不安
- フロントとバックエンドを分離させることができず、改修コストが大きい
- 3つのノーコードツールで脱WordPressを目指す
- 脱WordPressの主流ノーコードツール ”Webflow”
- 最高のコンテンツ管理とライティング体験を保ってサイト公開 ”Notion”
- 美しいデザインを簡単に。簡易CMSも備える国産ノーコードツール “STUDIO”
- 静的サイトジェネレータ（SSG）×ヘッドレスCMSで超高速かつデザイン性の両立
- 静的サイトジェネレータの有名どころ（フロント）
- Gatzby
- Next.js
- Astro.js
- Svelte（SSGではありません。UIフレームワークとしてご紹介）
- フロント構築としてGatzby, Next.js, Astro.js, Svelteのどれを採用するか？
- ヘッドレスCMSの有名どころ（バックエンド）
- Contentful
- Neflify CMS
- 日本語対応の国産CMS”micro CMS”
- ヘッドレスフォームも利用可能な国産CMS”Newt”
- Notionを軽量ヘッドレスCMSとして利用
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Category: 便利サービス
Tag: CMS一般 | WordPress | Webflow | STUDIO | Notion | No-Code