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
210
株式会社ラスファクトリー ヘッドレスのすゝめ
コーポレートサイト
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
680
Other Decks in Business
See All in Business
XENDOU会社概要
xendou
0
190
merpay-Overview
mercari_inc
7
160k
HireRoo Culture Deck(日本語)
kkosukeee
1
25k
요즘 팀장 생존법 (SLIT-CON)
lemonadegt
0
190
3次元データを用いた差分解析による工事発注への取組
tokyo_metropolitan_gov_digital_hr
0
390
(18枚)製造業の営業を最大化させる「ブリッジ管理」とは?
nyattx
PRO
1
110
【Otegami】「月経期間のパートナーとのすれ違いを軽減する」
hinalin
0
690
採用ピッチ資料
beglobal_document
0
350
Nstock 採用資料 / We are hiring
nstock
26
250k
20241027.jjug_ccc_creditsaison.pdf
lalha
4
2.5k
El Mercado cuartohorario de electricidad
neuroenergia
PRO
0
260
【DearOne】Dear Newest Member
hrm
2
6k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Designing Experiences People Love
moore
138
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
How to Ace a Technical Interview
jacobian
276
23k
A Tale of Four Properties
chriscoyier
156
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Automating Front-end Workflow
addyosmani
1366
200k
Rails Girls Zürich Keynote
gr2m
94
13k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
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/ メールでのお問い合わせ
[email protected]