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
650
Other Decks in Business
See All in Business
데이터를 근거로 내 기획안 효과적으로 설득하기
datarian
0
1.2k
Amazon 流のプロダクトマネジメント @ Product DeepLive 会場 + 懇親会スポンサーセッション
icoxfog417
3
380
TOKYOスマート・カルチャー・プロジェクト
tokyo_metropolitan_gov_digital_hr
0
440
2024年8月期_通期決算説明資料
sciencearts
0
1.6k
伝わる「壁面グラフィック」の構成方法/展示会ブースの壁面デザイン手法
superpenguin
PRO
0
130
FABRIC TOKYO会社紹介資料 / We are hiring(2024年10月23日更新)
yuichirom
31
270k
マネージャーとエンジニアが効果的に協力するために意識した方が良い事
kotominaga
2
120
We are Wunderbar, Culture Deck Min
wunderbar
0
230
Sales Marker Culture Book(English)
salesmarker
PRO
1
2.4k
Theoria technologies:About Us
theoriatec2024
1
780
株式会社kubellストレージ 会社説明資料
kubell_storage
2
180
El Mercado cuartohorario de electricidad
neuroenergia
PRO
0
120
Featured
See All Featured
RailsConf 2023
tenderlove
29
880
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Code Review Best Practice
trishagee
64
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Being A Developer After 40
akosma
86
590k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
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]