Shifter Headless の特徴

WordPress を利用し、
Jamstack なウェブサイトを
すぐに構築

Shifter Headless は、WordPress ダッシュボードを CMS として利用し、API を通じてフロントエンドにコンテンツデータを提供。使い慣れた WordPress の管理画面のまま、ウェブサイトをヘッドレス化し、コンテンツの制作とフロントエンド開発を自由に行うことができます。

👋 Shifter Headless のメリット

1つのデータソースを利用し
マルチチャンネルでコンテンツを自由に表現

ヘッドレス CMS とは

ヘッドレスの「ヘッド」とは、フロントエンドのことを指します。
従来の CMS はフロントエンドとバックエンドが一体になっているのに対し、ヘッドレス
CMS はヘッド(フロントエンド)がなく、API 経由でコンテンツが配信されます。

従来のCMS

バックエンド

コンテンツ管理

フロントエンド

ウェブサイトの見た目の管理
ウェブサイト

フロントエンドとバックエンドが一体化されていて、一つのチャネル*のみの開発しかできない。*ウェブサイトなど

ヘッドレスCMS

バックエンド

コンテンツ管理

API

フロントエンド

ウェブ
サイト
ネイティブ
アプリ
デジタル
サイネージ

フロントエンドとバックエンドが切り離され、API経由で同じコンテンツの表示が可能。チャネルに応じたフロントエンドの開発ができる。

ヘッドレス CMS を利用するメリット

バックエンドの制約なしで

コンテンツを
自由に表現できる

SPA 化や静的ファイルのホスティングで

表示を高速化

複数デバイス、マルチプラット
フォームへのコンテンツ配信を

1つのデータソースで実現

🎉 Shifter Headless の6つの特徴

Jamstack に最適な WordPress 環境を
Shifter Headless がすばやく提供

Shifter Headless が Jamstack に必要なプラグインなどをプリセット。 WordPress をヘッドレス CMS として利用できる最適な環境をすばやく提供します。 Shifter Headless を使えば、エンジニアはモダンな開発環境でフロントエンドをすぐに構築できます。

01. コンテンツの更新が簡単

WordPress を
CMS として使用できる

Shifter Headless は、WordPress の管理画面をそのまま利用してコンテンツを更新することができます。これまでに WordPress を使ったことのある人なら簡単に更新作業ができ、コンテンツ運用担当者の学習コストがほとんどかかりません。

02. モダンな開発が可能

開発者はお気に入りの
JavaScript フレームワークを使える

Shifter Headless では、開発者が React、Vue、Angular など、任意の JavaScript フレームワークを自由に選択できます。JavaScript フレームワークのアップデートに合わせて、最新の技術やトレンドを取り入れ、より高速でレスポンシブなウェブサイトを構築することができます。

03. 開発と運用を分業できる

フロントエンドと
バックエンドの開発を分離

フロントエンドとバックエンド(データソース)を完全に分離すること、開発者と運用者が分業したワークフローを実現できます。

04. メンテナンスフリー

Jamstack に必要なプラグインを
プリインストール&自動更新

Shifter Headless では、Jamstack に必要なプラグインがプリインストールされています。自分でインストールする手間がかからず、アップデートも自動で行われるためメンテナンスフリーです。

05. 複数デバイス、マルチプラットフォーム

複数サイトやアプリへの
コンテンツ配信を一括管理

Shifter Headless では、同じコンテンツを異なるフロントエンド(ウェブサイト、モバイルアプリ、IoTデバイスなど)に向けて配信することができます。コンテンツの一貫性を維持しつつ、迅速かつ効率的な運用が可能です。

06. セキュリティ面も安心

不正アクセスや
サイバー攻撃を受けにくい

公開されるドメインとは別に Shifter の WordPress ダッシュボード専用の URL が発行されるため、不正アクセスやサイバー攻撃を受けにくく、セキュリティも安心です。

🔧 サイト生成のしくみ

Shifter Headless でウェブサイトを公開するまで

step1

WordPress 管理画面で
コンテンツを作成

WordPress admin URL から WordPress の管理画面に入り、投稿や固定ページを作成しましょう。

step2

フロントエンド開発環境を準備

React.js や Vue.js など、任意のフレームワークを使用してウェブサイトのフロントエンドを構築し、Shifter Headless の WordPress から API を経由して投稿や固定ページなどのコンテンツの取得を行いましょう。

step3

フロントエンドをカスタマイズ

レイアウトやフォーム、スマートフォン対応などを行い、ウェブサイトのフロントエンドをカスタマイズしていきます。

step4

公開

Netlify や Vercel などのビルド&ホスティングサーバや他サーバを利用し、ウェブサイトのファイルをホスティングして公開しましょう。

Static

「Shifter Static」は、WordPress を静的化し、HTML/CSS を CDN から配信することで、WordPress と公開領域を分離。安全かつ高速なウェブサイトを構築できます。

Headless

「Shifter Headless」は、WordPress ダッシュボードを CMS として利用し、API を通じてフロントエンドにコンテンツデータを提供。使い慣れた WordPress ベースでウェブサイトをヘッドレス化することが可能です。