株式会社ラスファクトリー ヘッドレスのすゝめ

コーポレートサイト
https://lasfactory.com/

ヘッドレス CMS 実績
https://headless.lasfactory.com/

Transcript

1. © LAS FACTORY Inc.
 株式会社ラスファクトリー
 v20230606
 ヘッドレスのすゝめ

2. © LAS FACTORY Inc.
 目次
 
 1. システム構成
 2. WordPress のメリット、デメリット
 3. ヘッドレスのメリット
 4. ヘッドレスのデメリット
 5. ヘッドレスの適性
 6. 参考例
 7. お問い合わせ先
 2

3. © LAS FACTORY Inc.
 システム構成
 従来型
 • バックエンドとフロントエンドが一体化 
 している
 • バックエンドとフロントエンドを 
 一貫した技術で開発や保守などができる 
 • コンテンツは、バックエンドで 
 データベースから取得して 
 レンダリングされる
 3
 主な技術スタック
 • WordPress
 • レンタルサーバー / AWS

4. © LAS FACTORY Inc.
 システム構成
 ヘッドレス型
 • バックエンドとフロントエンドが分離 
 している
 • バックエンドとフロントエンドで 
 異なる技術選定や開発などができる 
 • コンテンツは、フロントエンドで 
 バックエンドが提供する API から
 取得してレンダリングされる 
 4
 主な技術スタック
 • microCMS / hacoCMS / Newt
 • Astro / SvelteKit (Svelte) / Nuxt (Vue) / Next.js (React)
 • Cloudflare / Vercel / Netlify / Google Cloud / AWS

5. © LAS FACTORY Inc.
 WordPress のメリット、デメリット
 
 
 メリット
 • 無料で利用できる
 • 初心者でも構築から運用までできる 
 • テンプレートやプラグインが豊富にある 
 • 情報や開発者が多い 
 5
 
 
 デメリット
 • メンテナンスコストがかかる 
 • セキュリティーの不安がある ※1
 • 新技術との相性が悪い 
 • サポートがない

6. © LAS FACTORY Inc.
 ヘッドレスのメリット
 
 メンテナンスコストが軽減される
 • バックエンド (ヘッドレス CMS) における管理画面やインフラのメンテナンスが不要になる
 • システム構成によってはランニングコストも軽減される場合がある
 セキュリティーが向上する
 • フロントエンドのセキュリティーリスクがバックエンド (ヘッドレス CMS) に影響しないため、
 フロントエンドが攻撃されてもバックエンド (ヘッドレス CMS) でデータ改ざんなど発生しない
 • フロントエンドからバックエンド (ヘッドレス CMS) へのアクセスが API のため、
 認証やアクセス制御を導入できる
 開発や保守の並行が容易になる
 • バックエンド (ヘッドレス CMS) とフロントエンドで互いに作業が影響しない
 6

7. © LAS FACTORY Inc.
 ヘッドレスのメリット
 
 パフォーマンスやユーザー体験が向上する
 • バックエンド (ヘッドレス CMS) やフロントエンドのフレームワークに画像最適化の機能がある
 • フロントエンドでコンテンツに最適なレンダリング方法を選択できる
 スケーラビリティーが向上する
 • 1 つのバックエンド (ヘッドレス CMS) から複数のプラットフォームやチャネルにコンテンツを配信できる
 • 複数バックエンド (ヘッドレス CMS) のコンテンツを 1 つのフロントエンドで集約して表示できる
 7

8. © LAS FACTORY Inc.
 ヘッドレスのデメリット
 
 システム構成が複雑になる
 • WordPress のように 1 つのシステムで完結しない
 • バックエンド (ヘッドレス CMS) やフロントエンドなど複数のシステムを構築する必要がある
 開発に高いフロントエンドスキルが必要になる
 • WordPress のようにプラグインのインストールで機能を追加できない
 • フレームワークやライブラリーを駆使して開発するスキルが必要になる
 • API 経由でコンテンツを取得するスキルが必要になる
 コンテンツが外部に格納される
 • 他社 (ヘッドレス CMS) のデータベースやストレージにコンテンツや画像などを格納することになる
 8

9. © LAS FACTORY Inc.
 ヘッドレスの適性
 
 
 向いている
 • メンテナンスコストを軽減したい 
 • 品質を向上したい
 • コンテンツを複数のプラットフォームや 
 チャネルで活用したい 
 • 新技術を導入したい 
 
 
 向いていない
 • WordPress のテンプレートを
 ノーコード的に利用している 
 • 規模が小さくコストを抑えるために 
 1 人で運用している
 • 更新がほとんどない 
 • 開発者がいない
 9

10. © LAS FACTORY Inc.
 参考例
 コーポレートサイト ※1
 概要
 • 新規開発でヘッドレス CMS 導入
 • コンテンツ、カテゴリー、タグなどすべて CMS 管理
 • ページテンプレートは 14 ファイル
 • カテゴリーやタグによるフィルタリングを開発 
 システム構成
 • microCMS
 • Next.js
 • Vercel
 • GitHub
 工数
 • 3 人月
 10

11. © LAS FACTORY Inc.
 参考例
 オウンドメディア ※1
 概要
 • 新規開発でヘッドレス CMS 導入
 • 記事、カテゴリー、タグなどだけでなく 
 他ページ、ヘッダー、フッターなどもすべて CMS 管理
 • ページテンプレートは 9 ファイル
 • カテゴリーやタグによるフィルタリング、 
 関連記事、人気記事、人気キーワードなどを開発 
 システム構成
 • microCMS
 • Next.js
 • Vercel
 • GitHub
 工数
 • 3 人月
 11

12. © LAS FACTORY Inc.
 参考例
 プロダクトブランドサイト ※1
 概要
 • リニューアルで WordPress からヘッドレス化
 • 619 記事、50,000 画像、47 カテゴリー & タグなどを
 整理しながら移行
 • ページテンプレートは 43 ファイル
 • カテゴリーやタグによるフィルタリング、 
 関連記事、ランキング、オンデマンドビルドなどを開発 
 システム構成
 • microCMS
 • Next.js
 • Vercel
 • GitHub
 工数
 • 12 人月
 12

13. © LAS FACTORY Inc.
 お問い合わせ先
 
 
 お問い合わせやご相談など、
 お気軽にご連絡ください
 13
 会社名 　株式会社ラスファクトリー 
 設立 　2016 年 11 月
 所在地 　東京都渋谷区神宮前 3-27-15 HIサンロード原宿ビル 2F
 資本金 　1,000 万円
 ウェブからのお問い合わせ
 https://headless.lasfactory.com/
 メールでのお問い合わせ
 info@lasfactory.com