Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
株式会社ラスファクトリー ヘッドレスのすゝめ
Search
株式会社ラスファクトリー / LAS FACTORY Inc.
May 02, 2023
Business
0
230
株式会社ラスファクトリー ヘッドレスのすゝめ
コーポレートサイト
https://lasfactory.com/
ヘッドレス CMS 実績
https://headless.lasfactory.com/
株式会社ラスファクトリー / LAS FACTORY Inc.
May 02, 2023
Tweet
Share
More Decks by 株式会社ラスファクトリー / LAS FACTORY Inc.
See All by 株式会社ラスファクトリー / LAS FACTORY Inc.
株式会社ラスファクトリー 会社説明資料
lasfactory
0
740
Other Decks in Business
See All in Business
Sales Marker Culture book
salesmarker
PRO
25
42k
yamory事業紹介資料
assuredjp
0
620
大城エネルギー 会社紹介スライド
daijyou
0
4.6k
採用ピッチ(2025年4月2日更新)
canvas_recruit
1
1.1k
Introduction of Elastic Infra INC.
elasticinfra
0
190
ITエンジニアのためのコーポレートファイナンス入門シリーズ! #3 財務分析の基本
tkhresk
2
210
Josh Blyskal | Profound | We analyed 10,000,000 AI Search Results...
joshbly
1
910
Танец ментора и менти
alexanderbyndyu
0
1.3k
タケウチグループRecruit
takeuchigroup
0
5.6k
[採用資料] Quollio Technologies
rytmq
PRO
2
8.3k
(10枚)目標設定から計画立案の基本 ガントチャートを使ったフェーズ管理、マイルストーン管理について
nyattx
PRO
0
1.8k
Crisp Code サービス紹介 / 料金表 | Services & Price list
so_kotani
1
320
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Embracing the Ebb and Flow
colly
85
4.6k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
How STYLIGHT went responsive
nonsquared
99
5.5k
Code Reviewing Like a Champion
maltzj
522
39k
Raft: Consensus for Rubyists
vanstee
137
6.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
510
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
The Cost Of JavaScript in 2023
addyosmani
48
7.7k
A better future with KSS
kneath
239
17k
Transcript
© LAS FACTORY Inc. 株式会社ラスファクトリー v20240822 ヘッドレスのすゝめ
© LAS FACTORY Inc. 目次 1. システム構成 2. WordPress
のメリット、デメリット 3. ヘッドレスのメリット 4. ヘッドレスのデメリット 5. ヘッドレスの適性 6. 参考例 7. お問い合わせ先 2
© LAS FACTORY Inc. システム構成 従来型 • バックエンドとフロントエンドが一体化 している
• バックエンドとフロントエンドを 一貫した技術で開発や保守などができる • コンテンツは、バックエンドで データベースから取得して レンダリングされる 3 主な技術スタック • WordPress • レンタルサーバー / AWS
© LAS FACTORY Inc. システム構成 ヘッドレス型 • バックエンドとフロントエンドが分離 している
• バックエンドとフロントエンドで 異なる技術選定や開発などができる • コンテンツは、フロントエンドで バックエンドが提供する API から 取得してレンダリングされる 4 主な技術スタック • microCMS / NILTO / Newt • Astro / SvelteKit (Svelte) / Nuxt (Vue) / Next.js (React) • Cloudflare / Vercel / Netlify / Google Cloud / AWS
© LAS FACTORY Inc. WordPress のメリット、デメリット メリット •
無料で利用できる • 初心者でも構築から運用までできる • テンプレートやプラグインが豊富にある • 情報や開発者が多い 5 デメリット • メンテナンスコストがかかる • セキュリティーの不安がある ※1 • 新技術との相性が悪い • サポートがない
© LAS FACTORY Inc. ヘッドレスのメリット メンテナンスコストが軽減される • バックエンド (ヘッドレス
CMS) における管理画面やインフラのメンテナンスが不要になる • システム構成によってはランニングコストも軽減される場合がある セキュリティーが向上する • フロントエンドのセキュリティーリスクがバックエンド (ヘッドレス CMS) に影響しないため、 フロントエンドが攻撃されてもバックエンド (ヘッドレス CMS) でデータ改ざんなど発生しない • フロントエンドからバックエンド (ヘッドレス CMS) へのアクセスが API のため、 認証やアクセス制御を導入できる 開発や保守の並行が容易になる • バックエンド (ヘッドレス CMS) とフロントエンドで互いに作業が影響しない 6
© LAS FACTORY Inc. ヘッドレスのメリット パフォーマンスやユーザー体験が向上する • バックエンド (ヘッドレス
CMS) やフロントエンドのフレームワークに画像最適化の機能がある • フロントエンドでコンテンツに最適なレンダリング方法を選択できる スケーラビリティーが向上する • 1 つのバックエンド (ヘッドレス CMS) から複数のプラットフォームやチャネルにコンテンツを配信できる • 複数バックエンド (ヘッドレス CMS) のコンテンツを 1 つのフロントエンドで集約して表示できる 7
© LAS FACTORY Inc. ヘッドレスのデメリット システム構成が複雑になる • WordPress のように
1 つのシステムで完結しない • バックエンド (ヘッドレス CMS) やフロントエンドなど複数のシステムを構築する必要がある 開発に高いフロントエンドスキルが必要になる • WordPress のようにプラグインのインストールで機能を追加できない • フレームワークやライブラリーを駆使して開発するスキルが必要になる • API 経由でコンテンツを取得するスキルが必要になる コンテンツが外部に格納される • 他社 (ヘッドレス CMS) のデータベースやストレージにコンテンツや画像などを格納することになる 8
© LAS FACTORY Inc. ヘッドレスの適性 向いている • メンテナンスコストを軽減したい
• 品質を向上したい • コンテンツを複数のプラットフォームや チャネルで活用したい • 新技術を導入したい 向いていない • WordPress のテンプレートを ノーコード的に利用している • 規模が小さくコストを抑えるために 1 人で運用している • 更新がほとんどない • 開発者がいない 9
© LAS FACTORY Inc. 参考例 コーポレートサイト ※1 概要 • 新規開発でヘッドレス
CMS 導入 • コンテンツ、カテゴリー、タグなどすべて CMS 管理 • ページテンプレートは 14 ファイル • カテゴリーやタグによるフィルタリングを開発 システム構成 • microCMS • Next.js • Vercel • GitHub 工数 • 3 人月 10
© LAS FACTORY Inc. 参考例 オウンドメディア ※1 概要 • 新規開発でヘッドレス
CMS 導入 • 記事、カテゴリー、タグなどだけでなく 他ページ、ヘッダー、フッターなどもすべて CMS 管理 • ページテンプレートは 9 ファイル • カテゴリーやタグによるフィルタリング、 関連記事、人気記事、人気キーワードなどを開発 システム構成 • microCMS • Next.js • Vercel • GitHub 工数 • 3 人月 11
© LAS FACTORY Inc. 参考例 プロダクトブランドサイト ※1 概要 • リニューアルで
WordPress からヘッドレス化 • 619 記事、50,000 画像、47 カテゴリー & タグなどを 整理しながら移行 • ページテンプレートは 43 ファイル • カテゴリーやタグによるフィルタリング、 関連記事、ランキング、オンデマンドビルドなどを開発 システム構成 • microCMS • Next.js • Vercel • GitHub 工数 • 12 人月 12
© LAS FACTORY Inc. お問い合わせ先 お問い合わせやご相談など、 お気軽にご連絡ください 13
会社名 株式会社ラスファクトリー 設立 2016 年 11 月 所在地 東京都渋谷区神宮前 3-27-15 HIサンロード原宿ビル 2F 資本金 1,000 万円 ウェブからのお問い合わせ https://headless.lasfactory.com/ メールでのお問い合わせ info@lasfactory.com