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

by Nagisa Yata

Slide 1

Slide 1 text

WordPressからヘッドレスCMSへ! Storyblokへの移行プロセス矢田和沙 2025.06.27 Women developers summit 2025

Slide 2

Slide 2 text

矢田和沙(ヤタナギサ) 自己紹介株式会社クラシコムシステムプラットフォーム部テクノロジーグループエンジニア 2017年ヤフー株式会社(現LINEヤフー株式会社)に新卒で入社 2020年7月株式会社クラシコムに中途入社フロントエンド・バックエンド・インフラと「北欧、暮らしの道具店」まわりの開発をしていますほぼ毎日猫に邪魔をされながら仕事中です 2

Slide 3

Slide 3 text

03 クラシコムについて D2C（商品販売）暮らしにフィットする様々な商品を販売 • 雑貨、アパレル、コスメなど多様な商品を販売コンテンツパブリッシャー世界観を表現する様々なコンテンツを発信 • コラムからポッドキャスト・動画まで、多様に配信 • YouTubeチャンネル登録者数は100万人を突破 • 売上の約55％がオリジナル商品　※2024年7月期 © Kurashicom Inc. 「北欧、暮らしの道具店」を運営しています。ブランドソリューションナショナルブランドのマーケティングを支援 • お取り組みは200ブランド以上 • 記事タイアップから商品開発まで幅広いソリューションを提供

Slide 4

Slide 4 text

4 顧客体験と開発領域 © Kurashicom Inc. お客さま向けプラットフォームより良い顧客体験のためプロダクト開発が支える領域 iOS,Androidアプリ  株式会社Sun Asteriskとの共同開発 Webサイトコンテンツ管理商品管理受注・出荷管理発注管理スタッフ向けプラットフォーム株式会社ソニックガーデンと共同開発インフラ・開発基盤の整備「北欧、暮らしの道具店」の顧客体験を複数の領域から支える。コンテンツを楽しむ動画・ラジオ・読みもの顧客体験買い物をする商品・決済商品を受け取る配送

Slide 5

Slide 5 text

アジェンダ 1. 北欧、暮らしの道具店のコンテンツ 2. クラシコムのシステムの概要以前のシステムとその問題点、エンハンスへのハードル 2. CMS移行へのステップ CMSの選定、組織での意思決定方法、影響範囲 3. 非エンジニア組織と一緒に進めるCMS移行 CMS利用グループとの開発・リリースの進め方 4. CMS移行の結果リリース後の効果や感想、サポート 5. まとめ 5

Slide 6

Slide 6 text

北欧、暮らしの道具店のコンテンツ

Slide 7

Slide 7 text

北欧、暮らしの道具店のコンテンツ 7 よみもの商品ページビデオラジオ TOP

Slide 8

Slide 8 text

北欧、暮らしの道具店のコンテンツ 8 よみもの商品ページビデオラジオ TOP

Slide 9

Slide 9 text

北欧、暮らしの道具店のコンテンツ 9 コラムブランドノートお知らせ着用レビューラジオ告知商品紹介

Slide 10

Slide 10 text

北欧、暮らしの道具店のコンテンツ ● 更新頻度: 平日1回(時々土日にも) ● 更新時刻: おおよそ朝9:30 (JST) ● 一日に2~4記事の公開 10

Slide 11

Slide 11 text

クラシコムのシステムの概要

Slide 12

Slide 12 text

北欧、暮らしの道具店のコンテンツ 12 よみもの商品ページビデオラジオ TOP WordPress WordPress WordPress 内製システム内製システム

Slide 13

Slide 13 text

北欧、暮らしの道具店のシステムの概要(旧) 13 AWS WAF クラシコムスタッフまたは社外ライターさんお客様 Amazon Cognito

Slide 14

Slide 14 text

北欧、暮らしの道具店のコンテンツ 14 よみもの商品ページビデオラジオ TOP Storyblok Storyblok Storyblok Storyblok 内製システム

Slide 15

Slide 15 text

北欧、暮らしの道具店のシステムの概要 15 AWS WAF クラシコムスタッフまたは社外ライターさんお客様 Amazon Cognito

Slide 16

Slide 16 text

北欧、暮らしの道具店のシステムの概要 16 AWS WAF クラシコムスタッフまたは社外ライターさんお客様

Slide 17

Slide 17 text

CMS移行へのステップ

Slide 18

Slide 18 text

CMS移行へのステップ 18 チームでの意思決定 CMS調査社内ヒアリング会社での意思決定実装ヒアリングレクチャー導入

Slide 19

Slide 19 text

WordPressをやめたい理由 ● バージョンアップが必要になる ● プラグインが使えなくなることがある ● 有名なソフトウェアなのでよく脆弱性が見つかる ● エンドポイントも攻撃の対象になりやすい ● 拡張性が低い ● HTMLがいじれるのでScript入れ放題 ● 壊れやすい ● スマートフォンアプリ向けによみものコンテンツのデータを構造化された情報で持ちたい ● 写真にメタデータとして商品情報などを紐付けたい 19

Slide 20

Slide 20 text

WordPressのいいところ ● サーバー代以外はお金がかからない ● 編集者が使いやすい ● 柔軟性が高い 20

Slide 21

Slide 21 text

北欧、暮らしの道具店のコンテンツ管理システムでやりたいこと ● よみものの管理 ● ビデオ・ラジオの管理 ● 商品ページの管理 ● 商品カテゴリーの並び替え ● トップページの管理 21

Slide 22

Slide 22 text

移行に期待すること 22 編集チームお客様エンジニア • ストアフロントの開発に注力しコンテンツ管理部分は外部に任せたい • バージョンアップの対象範囲を減らしたい • 入稿しやすい • 並べ替えやすい • データの再利用をしやすい • 機能追加を依頼しやすい • 閲覧しやすい • 検索しやすい

Slide 23

Slide 23 text

移行先CMSに求めるもの 23 Want Must ● 複数環境（本番・テスト）を扱える ● 権限管理 ● 料金体系 ● 画像がうまく扱える ● 日本語がうまく扱える ● 予約投稿 ● データのインポート ● データのエクスポート ● 並べ替えがしやすい ● 文字の色をつけられるか ● テーブルを扱えるか ● 既存のHTMLを扱えるか ● こちらのAPIを外部参照できるか ● プレビューできるか ● バックアップ

Slide 24

Slide 24 text

CMS移行先の候補 24 SaaS OSS WordPressホスティング外注エディターが使いやすいバージョンアップをしなくて良いシステムの管理を任せられるできることに制約がある金額感が高めサービスが終了する可能性がある編集チームが慣れているエディターを利用できるバージョンアップをしなくて良いデータの構造化がしにくい利用できるプラグインが限られるカスタマイズ性が高い一から作るより楽メンテナンスが継続されない可能性があるバージョンアップ・ホストの維持などの管理が必要カスタマイズ性が高い保守・運用を任せられる社内のリソースに余裕ができる社内編集チームの要望の反映やエンハンスの速度が遅くなる

Slide 25

Slide 25 text

Storyblok ・ヘッドレスCMSのSaaS ・ビジュアルエディターを備えたヘッドレスCMS ・各言語に対応したSDKがある・コンテンツの履歴を見られてバージョニングが可能 25

Slide 26

Slide 26 text

Storyblok 26 プレビュー表示公開・非公開時 Webhook起動コンテンツの表示コンテンツ編集画面の提供データ構造の作成

Slide 27

Slide 27 text

導入までの意思決定ヘッドレスCMSの調査・選定 27 チームでの CMS選定技術検証 CTO相談ヒアリング社長相談導入ヘッドレスCMSの技術検証移行に際してのロードマップ相談進捗状況の報告 CMS移行対象機能を利用している部署へのヒアリング実際に実装したものをテスト利用してもらう SaaS金額面の相談移行に際する工数とメリット・デメリットの説明導入に向けての実装利用する各部署への説明・サポート隔週に1回都度対応

Slide 28

Slide 28 text

非エンジニア組織と一緒に進めるCMS移行

Slide 29

Slide 29 text

コンテンツごとの担当部署 29 コラムブランドノートお知らせ着用レビューラジオ告知商品紹介メディア編集ブランドソリューション人事広報ストア編集コンテンツ開発 MD

Slide 30

Slide 30 text

導入までの道のり 30 ヒアリング実装・修正テスト利用メディア編集グループのマネージャーとメンバー1名ずつにヒアリング利用頻度や利用方法、改善したい内容や困っていることなど実際によみものの機能をStoryblokを利用して実装テスト環境に反映ヒアリングをしたメディア編集グループのマネージャーとメンバーに実際利用して記事を作成してもらう

Slide 31

Slide 31 text

記事の種類による記事制作フィードバック時の例 31 社外ライターさんによる直接入稿テキストを先に固めて入稿される方が多い。入稿後、社内で写真を変更する。表記揺れを編集画面で検索したい社外ライターさんの原稿の代理入稿 Wordなどのテキストの状態で入稿される。スタイルはうまく作成できないが Storyblokでの作成は簡単だった社内による制作(商品関連以外) 画像をAdobe Bridgeからドラッグ＆ドロップで入れたい。画像を差し替えることがあるのであとから探しやすくしたい。仮のテキストを入れておくことがある。セクションを分けるのはやりにくい社内による制作(商品関連) 画像をたくさん入れるのでまとめてアップロード・挿入したい。画像が大きいとエラーがでてしまうことがあった。先にレイアウトを制作して、細かいところを詰めていくことが多い。画像の位置移動もよくする。

Slide 32

Slide 32 text

各部署への説明会の実施・よみものを制作している各部署にオンラインで説明会を行った・各部署ごとに1時間ずつ6回ほどの説明会を設けた・説明会の録画をとり欠席者や後からでも参考にできるようにした・社外のライターさんに関してはメディア編集Gよりレクチャーを行っていただいた・アカウントを説明会以前に発行し2FAなどアカウントの設定を先にしてもらうようにした・ここでつまづくメンバーも多かった・チャットやオンラインでのMTGで手厚くサポートできるように心がけた 32

Slide 33

Slide 33 text

ヒアリングと実装 33 開発編集グループフィードバックテックテック課題のトリアージ

Slide 34

Slide 34 text

リリース方法 34

Slide 35

Slide 35 text

リリース時 ● 3/31 機能のリリース・4/1公開予定の記事の確認 ● 4/1 9:30 予約した記事が公開されるか確認 ● Storyblok、WordPress両方で公開予約された記事があった ● いくつか不具合があったがエンジニア全員で作業分担したことで1日でエラーを収束させることができた 35

Slide 36

Slide 36 text

リリース後 ● リリース後もエラーや実装漏れがいくつもでてきました ● 4/1以降に初めてStoryblokで記事を触り始めた人も多かった ● 様々な記事が制作されるにつれ実装もれや要望も増えた ● リリース後1ヶ月は他のタスクよりStoryblokまわりのヘルプやサポートを優先し対応しました ● 今日で3ヶ月ほど経ちましたが、サポートする量が減りました 36

Slide 37

Slide 37 text

WordPressクローズ ● 現在はWordPressのクローズに向けてWordPressに残ったデータの移行を行なっています ● Storyblok上にHTMLを持たせて表示させる対応をする予定です ● 変更や公開・非公開が必要な記事は手動でHTML→JSON構造体への変換を行います 37

Slide 38

Slide 38 text

CMS移行の結果

Slide 39

Slide 39 text

移行完了機能 39 よみもの商品ページビデオラジオ TOP 内製システム

Slide 40

Slide 40 text

振り返り 40

Slide 41

Slide 41 text

まとめ

Slide 42

Slide 42 text

まとめ・WordPressからStoryblokへコンテンツ管理システムを移行しました・社内のたくさんのチームを巻き込んでの導入となりました・いままでより安全に記事を作成でき、機能追加開発がより早くできるようになりました・５年かけてWordPressをクローズできそうです 42

Slide 43

Slide 43 text

アンケートにご回答いただいた方には本日の資料をメールでお送りします。ぜひご回答ください

Slide 44

Slide 44 text

採用情報募集要項はこちらクラシコムでは Webエンジニアを募集しています • Webアプリケーションの開発経験5年以上（フロントエンドのみは除く） • 北欧、暮らしの道具店のサービスに共感し、支える仕事に興味のある方 • 特定の技術領域にこだわらず、幅広く経験を重ねていきたい方 Kurashicom Tech Blog https://note.com/kurashicom_tech/ https://ﬁndy-code.io/companies/2068