Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「ヘッドレスCMSとは」社内勉強会資料

RyoSogawa
April 12, 2021

 「ヘッドレスCMSとは」社内勉強会資料

2021/04/07 ONE SWORD株式会社社内でヘッドレスCMSについての勉強会を行いました。
その時の資料を公開します。

RyoSogawa

April 12, 2021
Tweet

More Decks by RyoSogawa

Other Decks in Programming

Transcript

  1. Core Web Vitals - Core Web Vitalsとは、Googleが打ち出したWebUXの指標 - LCP、FID、CLSの3つの指標があり、それぞれの得点が高いほど UXの高いサイトとして、検索ラン

    キングで優遇することが発表された - LCPはページの表示速度、FIDはユーザーが始めて操作出来るようになるまでの時間で、ページの 表示速度はSEOに求められる要素となった 画像引用元 :https://web.dev/vitals/ 17
  2. 通常の WordPress ヘッドレスCMS構成 SSG Next.js SSG+fallback ISR 自由な技術選定 - ⭕

    ⭕ 表示速度 - ⭕ ⭕ SEO ⭕ ◎ ※CoreWebVital◯ ◎ ※CoreWebVital◯ 負荷耐性 - ⭕ ⭕ コンテンツ追加反 映速度 ⭕ - ⭕ コンテンツ更新反 映速度 ◎ ※リアルタイム - ⭕ ※リアルタイムではない 33
  3. 34 SSGを採用することで表示速度が速くな り、 - 表示が速い - SEOに強い - 負荷に強い サイトに出来る。

    SSGの欠点である - コンテンツの更新に時間がかかる という点をfallback・ISRで補完。
  4. MicroCMS Contentful WordPressAPI 自前 WordPressAPI 月額料金(おおよそ) 4900円 ※無料プランあり $489? ※無料プランあり

    1000円 ※サーバー代 1000円 ※サーバー代 コンテンツ・通信量制 限 無料だと制限あり 無料だと制限あり 基本なし 基本なし サーバー管理不要 ⭕ ⭕ - - 日本語対応 ⭕ - ⭕ ⭕ 自由なカスタマイズ - - ⭕ ⭕ 管理画面の操作経 験 - - ⭕ ⭕ 記事プレビュー ⭕ ⭕ - ⭕ GraphQLでの高効率 データ取得 - ⭕ - ⭕ 42
  5. フロントエンド ヘッドレスCMS - 使い慣れた管理画面 - 料金が安い - 容量や通信量の制限を気にしないでよ い -

    ショートコード等自由にカスタマイズ出 来る - プレビューが出来る 最も大変な構築・実装部分は完了した。 🥳 SSGを採用することで、 - 表示が速い - SEOに強い - 負荷に強い サイトに出来る。 SSGの欠点である - コンテンツの更新に時間がかかる という点をfallback・ISRで補完。 46 (自前API)
  6. フロントエンド比較表 47 通常の WordPress ヘッドレスCMS構成 SSG Next.js SSG+fallback ISR 自由な技術選定

    - ⭕ ⭕ 表示速度 - ⭕ ⭕ SEO ⭕ ◎ ※CoreWebVital◯ ◎ ※CoreWebVital◯ 負荷耐性 - ⭕ ⭕ コンテンツ追加反 映速度 ⭕ - ⭕ コンテンツ更新反 映速度 ◎ ※リアルタイム - ⭕ ※リアルタイムではない
  7. バックエンド(ヘッドレス CMS)比較表 48 MicroCMS Contentful WordPressAPI 自前 WordPressAPI 月額料金(おおよそ) 4900円

    ※無料プランあり $489? ※無料プランあり 1000円 ※サーバー代 1000円 ※サーバー代 コンテンツ・通信量制 限 無料だと制限あり 無料だと制限あり 基本なし 基本なし サーバー管理不要 ⭕ ⭕ - - 日本語対応 ⭕ - ⭕ ⭕ 自由なカスタマイズ - - ⭕ ⭕ 管理画面の操作経 験 - - ⭕ ⭕ 記事プレビュー ⭕ ⭕ - ⭕ GraphQLでの高効率 データ取得 - ⭕ - ⭕