WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス

2025年06月27日(金)に開催されたWomen Developers Summit2025で登壇させていただいた発表資料になります。

Transcript

1. WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス 矢田和沙 2025.06.27 Women developers summit 2025
2. 矢田和沙(ヤタナギサ) 自己紹介 株式会社クラシコム システムプラットフォーム部 テクノロジーグループ エンジニア 2017年 ヤフー株式会社(現LINEヤフー株式会社)に 新卒で入社 2020年7月 株式会社クラシコムに中途入社 フロントエンド・バックエンド・インフラと「北欧、 暮らしの道具店」まわりの開発をしています ほぼ毎日猫に邪魔をされながら仕事中です 2
3. 03 クラシコムについて D2C（商品販売） 暮らしにフィットする様々な商品を販売 • 雑貨、アパレル、コスメなど多様な商品を販売 コンテンツパブリッシャー 世界観を表現する様々なコンテンツを発信 • コラムからポッドキャスト・動画まで、多様に 配信 • YouTubeチャンネル登録者数は100万人を突破 • 売上の約55％がオリジナル商品 　※2024年7月期 © Kurashicom Inc. 「北欧、暮らしの道具店」を運営しています。 ブランドソリューション ナショナルブランドのマーケティングを支援 • お取り組みは200ブランド以上 • 記事タイアップから商品開発まで幅広い ソリューションを提供
4. 4 顧客体験と開発領域 © Kurashicom Inc. お客さま向けプラットフォーム より良い顧客体験のためプロダクト開発が支える領域 iOS,Androidアプリ
 株式会社Sun Asteriskとの共同開発 Webサイト コンテンツ管理 商品管理 受注・出荷管理 発注管理 スタッフ向けプラットフォーム 株式会社ソニックガーデンと共同開発 インフラ・開発基盤の整備 「北欧、暮らしの道具店」の顧客体験を複数の領域から支える。 コンテンツを楽しむ 動画・ラジオ・読みもの 顧客体験 買い物をする 商品・決済 商品を受け取る 配送
5. アジェンダ 1. 北欧、暮らしの道具店のコンテンツ 2. クラシコムのシステムの概要 以前のシステムとその問題点、エンハンスへのハードル 2. CMS移行へのステップ CMSの選定、組織での意思決定方法、影響範囲 3. 非エンジニア組織と一緒に進めるCMS移行 CMS利用グループとの開発・リリースの進め方 4. CMS移行の結果 リリース後の効果や感想、サポート 5. まとめ 5
6. 北欧、暮らしの道具店の コンテンツ
7. 北欧、暮らしの道具店のコンテンツ 7 よみもの 商品ページ ビデオ ラジオ TOP
8. 北欧、暮らしの道具店のコンテンツ 8 よみもの 商品ページ ビデオ ラジオ TOP
9. 北欧、暮らしの道具店のコンテンツ 9 コラム ブランドノート お知らせ 着用レビュー ラジオ告知 商品紹介
10. 北欧、暮らしの道具店のコンテンツ • 更新頻度: 平日1回(時々土日にも) • 更新時刻: おおよそ朝9:30 (JST) • 一日に2~4記事の公開 10
11. クラシコムの システムの概要
12. 北欧、暮らしの道具店のコンテンツ 12 よみもの 商品ページ ビデオ ラジオ TOP WordPress WordPress WordPress 内製システム 内製システム
13. 北欧、暮らしの道具店のシステムの概要(旧) 13 AWS WAF クラシコムスタッフ または社外ライターさん お客様 Amazon Cognito
14. 北欧、暮らしの道具店のコンテンツ 14 よみもの 商品ページ ビデオ ラジオ TOP Storyblok Storyblok Storyblok Storyblok 内製システム
15. 北欧、暮らしの道具店のシステムの概要 15 AWS WAF クラシコムスタッフ または社外ライターさん お客様 Amazon Cognito
16. 北欧、暮らしの道具店のシステムの概要 16 AWS WAF クラシコムスタッフ または社外ライターさん お客様
17. CMS移行へのステップ
18. CMS移行へのステップ 18 チームでの 意思決定 CMS調査 社内 ヒアリング 会社での 意思決定 実装 ヒアリング レクチャー 導入
19. WordPressをやめたい理由 • バージョンアップが必要になる • プラグインが使えなくなることがある • 有名なソフトウェアなのでよく脆弱性が見つかる • エンドポイントも攻撃の対象になりやすい • 拡張性が低い • HTMLがいじれるのでScript入れ放題 • 壊れやすい • スマートフォンアプリ向けによみものコンテンツのデータを構造化された情報で持ちたい • 写真にメタデータとして商品情報などを紐付けたい 19
20. WordPressのいいところ • サーバー代以外はお金がかからない • 編集者が使いやすい • 柔軟性が高い 20
21. 北欧、暮らしの道具店のコンテンツ管理システムでやりたいこと • よみものの管理 • ビデオ・ラジオの管理 • 商品ページの管理 • 商品カテゴリーの並び替え • トップページの管理 21
22. 移行に期待すること 22 編集チーム お客様 エンジニア • ストアフロントの開発に注力 しコンテンツ管理部分は外部 に任せたい • バージョンアップの対象範囲 を減らしたい • 入稿しやすい • 並べ替えやすい • データの再利用をしやすい • 機能追加を依頼しやすい • 閲覧しやすい • 検索しやすい
23. 移行先CMSに求めるもの 23 Want Must • 複数環境（本番・テスト）を 扱える • 権限管理 • 料金体系 • 画像がうまく扱える • 日本語がうまく扱える • 予約投稿 • データのインポート • データのエクスポート • 並べ替えがしやすい • 文字の色をつけられるか • テーブルを扱えるか • 既存のHTMLを扱えるか • こちらのAPIを外部参照でき るか • プレビューできるか • バックアップ
24. CMS移行先の候補 24 SaaS OSS WordPressホスティング 外注 エディターが使いやすい バージョンアップをしなくて良い システムの管理を任せられる できることに制約がある 金額感が高め サービスが終了する可能性がある 編集チームが慣れているエディ ターを利用できる バージョンアップをしなくて良い データの構造化がしにくい 利用できるプラグインが限られる カスタマイズ性が高い 一から作るより楽 メンテナンスが継続されない可能 性がある バージョンアップ・ホストの維持 などの管理が必要 カスタマイズ性が高い 保守・運用を任せられる 社内のリソースに余裕ができる 社内編集チームの要望の反映やエ ンハンスの速度が遅くなる
25. Storyblok ・ヘッドレスCMSのSaaS ・ビジュアルエディターを備えたヘッドレスCMS ・各言語に対応したSDKがある ・コンテンツの履歴を見られてバージョニングが可能 25
26. Storyblok 26 プレビュー表示 公開・非公開時 Webhook起動 コンテンツの表示 コンテンツ編集画面の提供 データ構造の作成
27. 導入までの意思決定 ヘッドレスCMSの調査・選定 27 チームでの CMS選定 技術検証 CTO相談 ヒアリング 社長相談 導入 ヘッドレスCMSの技術検証 移行に際してのロードマップ相談 進捗状況の報告 CMS移行対象機能を利用している部署へのヒアリング 実際に実装したものをテスト利用してもらう SaaS金額面の相談 移行に際する工数とメリット・デメリットの説明 導入に向けての実装 利用する各部署への説明・サポート 隔週に1回 都度対応
28. 非エンジニア組織と 一緒に進めるCMS移行
29. コンテンツごとの担当部署 29 コラム ブランドノート お知らせ 着用レビュー ラジオ告知 商品紹介 メディア編集 ブランド ソリューショ ン 人事広報 ストア編集 コンテンツ 開発 MD
30. 導入までの道のり 30 ヒアリング 実装・修正 テスト利用 メディア編集グループのマネージャーとメンバー1名ずつにヒアリング 利用頻度や利用方法、改善したい内容や困っていることなど 実際によみものの機能をStoryblokを利用して実装 テスト環境に反映 ヒアリングをしたメディア編集グループのマネージャーとメンバーに 実際利用して記事を作成してもらう
31. 記事の種類による記事制作フィードバック時の例 31 社外ライターさんによる直接入稿 テキストを先に固めて入稿 される方が多い。 入稿後、社内で写真を変更する。 表記揺れを編集画面で検索したい 社外ライターさんの 原稿の代理入稿 Wordなどのテキストの状態 で入稿される。 スタイルはうまく作成できないが Storyblokでの作成は簡単だった 社内による制作(商品関連以外) 画像をAdobe Bridgeから ドラッグ＆ドロップで入れたい。 画像を差し替えることがあるので あとから探しやすくしたい。 仮のテキストを入れておくこ とがある。 セクションを分けるのはやりにくい 社内による制作(商品関連) 画像をたくさん入れるので まとめてアップロード・挿入したい。 画像が大きいとエラーが でてしまうことがあった。 先にレイアウトを制作して、細かい ところを詰めていくことが多い。 画像の位置移動もよくする。
32. 各部署への説明会の実施 ・よみものを制作している各部署にオンラインで説明会を行った ・各部署ごとに1時間ずつ6回ほどの説明会を設けた ・説明会の録画をとり欠席者や後からでも参考にできるようにした ・社外のライターさんに関してはメディア編集Gよりレクチャーを行っていただいた ・アカウントを説明会以前に発行し2FAなどアカウントの設定を先にしてもらうようにした ・ここでつまづくメンバーも多かった ・チャットやオンラインでのMTGで手厚くサポートできるように心がけた 32
33. ヒアリングと実装 33 開発 編集グループ フィードバック テック テック 課題のトリアージ
34. リリース方法 34
35. リリース時 • 3/31 機能のリリース・4/1公開予定の記事の確認 • 4/1 9:30 予約した記事が公開されるか確認 • Storyblok、WordPress両方で公開予約された記事があった • いくつか不具合があったがエンジニア全員で作業分担したことで1日でエラーを収束させることが できた 35
36. リリース後 • リリース後もエラーや実装漏れがいくつもでてきました • 4/1以降に初めてStoryblokで記事を触り始めた人も多かった • 様々な記事が制作されるにつれ実装もれや要望も増えた • リリース後1ヶ月は他のタスクよりStoryblokまわりのヘルプやサポートを優先し対応しました • 今日で3ヶ月ほど経ちましたが、サポートする量が減りました 36
37. WordPressクローズ • 現在はWordPressのクローズに向けてWordPressに残ったデータの移行を行なっています • Storyblok上にHTMLを持たせて表示させる対応をする予定です • 変更や公開・非公開が必要な記事は手動でHTML→JSON構造体への変換を行います 37
38. CMS移行の結果
39. 移行完了機能 39 よみもの 商品ページ ビデオ ラジオ TOP 内製システム
40. 振り返り 40
41. まとめ
42. まとめ ・WordPressからStoryblokへコンテンツ管理システムを移行しました ・社内のたくさんのチームを巻き込んでの導入となりました ・いままでより安全に記事を作成でき、機能追加開発がより早くできるようになりました ・５年かけてWordPressをクローズできそうです 42
43. アンケートにご回答いただ いた方には本日の資料をメ ールでお送りします。 ぜひご回答ください
44. 採用情報 募集要項はこちら クラシコムでは Webエンジニアを募集しています • Webアプリケーションの開発経験5年以上（フロントエンドのみは除く） • 北欧、暮らしの道具店のサービスに共感し、支える仕事に興味のある方 • 特定の技術領域にこだわらず、幅広く経験を重ねていきたい方 Kurashicom Tech Blog https://note.com/kurashicom_tech/ https://findy-code.io/companies/2068