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
690
Other Decks in Business
See All in Business
カイポケリニューアル プロダクトマネジメントの現在地 / Where we are now with Kaipoke Renewal Product Management
sms_tech
0
470
サスメド株式会社 Culture Deck
susmed
0
37k
なぜ施策優先度を意思決定しなければならないのか? 経験から得た要因と対策
mkitahara01985
2
130
CompanyDeck_v6.pdf
xid
3
17k
リクルートやNRIデジタルとの成功事例に学ぶ、 IVRyのAI音声対話/音声解析ソリューションが 変革するコールセンターの未来
miyashino
1
600
重厚長大なものづくり企業におけるプロダクトマネジメントの挑戦と苦悩 / pmconf2024
tkchy
0
4.3k
Entrance Book ビジネスイノベーションサービス部
arisaiyou
0
170
株式会社AGEST紹介資料/AGEST Recruitment
agest_recruit
0
2.4k
署内デジタルインフォボードの開発
tokyo_metropolitan_gov_digital_hr
0
240
仮説を形作るステップ
tumada
PRO
5
750
The AI-savvy operating model - Matthew Skelton, Conflux - Agile to Agility conference
matthewskelton
PRO
2
140
Godot 会社紹介資料(開発職向け) / Godot Pitch Deck
godot
0
1.3k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
RailsConf 2023
tenderlove
29
920
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
A Philosophy of Restraint
colly
203
16k
Done Done
chrislema
181
16k
The Pragmatic Product Professional
lauravandoore
32
6.3k
KATA
mclloyd
29
14k
Scaling GitHub
holman
458
140k
Gamification - CAS2011
davidbonilla
80
5.1k
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]