工藤 港
今回は株式会社ZOZO NEXT様にオンラインで導入事例インタビューをお受けいただきました。
御社の事業内容を教えてください
- 藤嶋さん
ZOZO NEXTはZOZOグループのエンジニア・デザイナーといった技術者が集結した企業です。具体的な事業内容は、日本最大級のファッション通販サイト「ZOZOTOWN」や、コーディネートアプリ「WEAR」の開発を行っています。
私たちが運用している「Fashion Tech News」は、「ファッションテック」にフォーカスしたオウンドメディアです。2018年に運用開始以来、ファッションとテクノロジーという領域の潮流について発信しつづけてきました。
これまではnoteのみで運用していましたが、2021年の4月に新たにWebサイトを立ち上げました。この新しいWebサイトの中では、以前から発信していたファッションテックに関するサービスやプロダクトの紹介に加えて、文化や思想にフォーカスした記事も配信しています。「ファッションテック」を考えるための場として、衣服やファッション、そして私たちの身体環境の「未来」を捉えるうえでの文化的土壌を育むコミュニティを目指しながら運用しております。
（写真左から武田さん、藤嶋さん）
ご担当業務を教えてください
- 藤嶋さん
私は「Fashion Tech News」で配信する記事の取材や執筆といった、コンテンツの制作部分を担当しており、microCMSは記事を入稿する際に利用しております。
- 武田さん
「Fashion Tech News」のインフラの構築等のバックエンド部分とHTMLやCSSなどのフロントエンド部分の一連の開発業務を担当しております。加えて、分析周りの基盤作成やダッシュボード作成なども幅広く担当しております。
microCMS導入のきっかけを教えてください。
- 武田さん
きっかけは、サイト自体の自由度を保ちたいものの、一からCMSを開発するのはコストがかかりすぎると感じたことです。
「Fashion Tech News」はメディアという特性上、記事の中に連載記事やカテゴリーといった概念がいくつかあります。例えば、連載記事の場合は親のページが必要になるなど、サイト自体が少し複雑な構成になるという点が要件としてありました。
CMSで運用を検討する際に、予約投稿機能やプレビューなど最低限必要な機能がいくつかありました。それらの機能をすべて自前で開発・メンテナンス・運用していこうとするとコストが高くなるという結論に至り、ヘッドレスCMSを検討し始めました。
ヘッドレスCMSと言ってもいくつかありますが、中でもmicroCMSは、アカウント数やリクエスト数・記事数が調整しやすいという点に惹かれて採用を決めました。
実は、ZOZOTOWNでもmicroCMSを利用しているのですが、導入を決めた後に知りました。社内の技術共有会の中で、「今度microCMSを使おうとしている」と共有したところ、「実はうちのプロジェクトでも導入しようと思ってる」といった反応があり、発覚しました（笑）。なので、その後リリースまでの期間はZOZOTOWN側の開発メンバーとも情報交換をしながら開発を進めました。TECH BLOGでもZOZOTOWNでのmicroCMS導入の話が取り上げられていましたね。
【ZOZO Technologies TECH BLOG】最新号
— 株式会社ZOZOテクノロジーズ (@zozotech) May 17, 2021
高頻度で公開しているZOZOTOWNキャンペーンページの作成を、ReactとmicroCMSを用いてノーコード化した事例を紹介します。 #zozotech
「React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化」https://t.co/Vw2zaNjeXT
microCMSをどのような用途でお使いですか？
- 武田さん
「Fashion Tech News」の一つ一つの記事は全てmicroCMSで管理しています。
あとはSERIESやPROJECTSなどの各一覧ページ（記事の親ページ）もmicroCMSで管理しています。例えば、SERIESだったらどのようなシリーズを配置するのか、そのシリーズの見出しはどうするのか等を設定しています。
それぞれの記事では繰り返しフィールドとカスタムフィールドをうまく組み合わせることで、記事の内容や基本情報など選べるようにしたり、SERIESやPROJECTSなどの親ページに紐づけができるようにしています。
（↑カスタムフィールドの設定画面）
やろうと思えばテキストエリアでもできなくはないと思うのですが、そうすると秩序が失われる可能性があります。カスタムフィールドの組み合わせによって入力の制約をかけているので、入力内容をシンプルに維持できています。
例えばインタビュー記事の質問部分は、質問用の見出しのパーツを用意し、人の名前や発言内容の部分は会話カードというパーツをあらかじめ用意しています。会話カードには、決められた文字色を何パターンか用意しているので、発言者を色で分けることができます。
記事のパーツをどういう要素にするかといった部分も、開発の段階でよく話合って進めています。テキストと画像を横に並べたいとか、プロフィールカードはこうしたいといった要望を運用側から聞きながら、随時アップデートをしています。
microCMSを導入してみて、どのような変化がありましたか？
- 藤嶋さん
microCMSを導入してからは、階層をつけて設計できるようになったので、コンテンツ制作における自由度が上がり、連載や特集といった企画にも挑戦できるようになりました。また、レイアウトや見出しの入れ方・写真の配置についても、構築の際にあらかじめこちらが理想とする形を伝えて設定してもらえたので、柔軟な調整が可能となったと感じています。
私たちの媒体の性質として、ひとつひとつの記事がボリュームのある長文コンテンツで発信しています。レイアウトの自由度が上がったことで、読みやすくなるような画像の配置、スクロールが長すぎないよう行間を少し詰めるなど、細かい調整ができるようになりました。
また、サイドバーやメニューバー、トップに分かりやすくカテゴリー表示されることで、ユーザーにもサイト内を回遊してもらいやすくなり、じっくりサイトに滞在してもらえているという実感があります。
このように色々なことができるようになったのですが、操作自体は複雑なわけではなく、メンバーもすぐに習得できています。
- 武田さん
microCMSでは記事コンテンツの管理の他に、記事の一番下にある関連記事の指定もできるようにしています。例えば、記事Aを読んだら記事Bに飛ばす、同じカテゴリーの最新の記事に飛ばすなど、柔軟な設定が簡単にできるようになったので、開発の際に回遊辺りの設計がやりやすくなりました。
また、カテゴリーとは別でハッシュタグも付与できるように設計しているため、より細かい粒度のメタ情報の付与と分析がしやすくなりました。
階層の設計は難しいですが、構築する前に開発メンバーと運用メンバーで何度もディスカッションを交わしながら設計したことも、うまく運用ができている要因かと思います。microCMSだと管理画面の開発にかける時間がほぼ必要なかったので、社内メンバーとの事前コミュニケーションに時間を費やせたというのが大きい気がしますね。
これからmicroCMSに期待してることはありますか？
- 武田さん
まずは、プレビュー機能やWebhookの設定など、公式ブログやドキュメントがすごく分かりやすく整備されていて、サクサク開発できているので助かっています。ありがとうございます。
Webhookの設定やステージングの環境が切り分けられると嬉しいなと思っていましたが、最近この辺りの機能も追加されたのでありがたいです。先ほどZOZOTOWNのほうでもmicroCMSを使っているという話が出ましたが、その辺りも社内メンバーからシェアしてもらいました。
現在は、繰り返しフィールドを使用してコンテンツをフロント側に表示する部分でTypeScriptを使っているのですが、型の設定を自分で書かないといけないので、今後はその辺りの連携ができるとさらに嬉しいです。
- 藤嶋さん
実際の運用の中で特段困ったことはなく、今後コンポーネントなどで必要なものがあっても、武田さんと相談すればできてしまう範囲のことだと思っています。
おわりに
今回は、株式会社ZOZO NEXT様にオンラインでお話を伺いました。
カスタムフィールドや繰り返しフィールドをうまく組み合わせて設計するなど、メディアでのmicroCMSの有効な活用方法について詳しくお話を伺えて、とても参考になりました。
藤嶋さん、武田さん、ありがとうございました！
-----
microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、お問い合わせフォームからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！
