JTBパブリッシングが発行する旅行情報誌「るるぶ」から厳選された情報が掲載される無料サービス「るるぶ＋」。iOSアプリ、Androidアプリ、ウェブサイトの3つのプラットフォームで展開され、そのすべてにmicroCMSが活用されています。

今回は「るるぶ＋」の開発を担当されたフラー株式会社の三輪昇平さん、阿部圭杜さん、福嶋真也さん、久下弘則さんにインタビューを実施しました（福嶋さんと久下さんはリモートで参加）。microCMSの導入背景やアプリ開発での活用方法などを詳しくご紹介いただきます。

導入の背景：柔軟なデザインのスマホアプリとウェブサイトを低コストで開発したい 

「るるぶ＋」の開発にmicroCMSを導入した背景を教えてください。

-三輪さん

今回のプロジェクトは、もともと提供されていたアプリのリニューアルとしてスタートしました。リニューアルの背景には、以前のアプリでは紙の「るるぶ」の世界観を十分に表現できていなかったという課題があります。そのため、単に「るるぶ」のデジタル版をつくるだけでなく、長年愛されている「るるぶ」の世界観を表現することが重要でした。「るるぶ」らしいフォント・色合い・余白などのレイアウトやデザインを再現する必要があり、コンテンツ管理のしやすい手法を検討していたんです。

更新性の高いスマートフォンアプリを開発する際には、管理画面の開発を合わせて行うことも多いのですが、既存のサービスを利用するのではなくフルスクラッチで開発するケースも当社では少なくありません。どのように開発するかはお客様のご予算や要望に応じてご提案させていただくのですが、フルスクラッチで開発するとなると工数を要するため、開発スケジュールもコストもかかってしまいます。

今回の場合、お客様の要望に合わせて低コストで要件を満たすには、ヘッドレスCMSが良さそうだとわかり、microCMSに出会いました。

microCMSを導入した決め手は何でしたか？

-三輪さん

一番のポイントは、「るるぶ」の世界観を表現できる柔軟性があることでした。

CMSでそれが実現できなければ、時間とコストがかかってもスクラッチで開発することをご提案させていただいたかもしれません。microCMSは管理画面も自由に設計できるし、「るるぶ」らしい自由なレイアウトを実現できそうだと感じてJTBパブリッシング様に提案しました。また、APIベースのCMSなのでマルチプラットフォームでの展開に適しているという点も決め手のひとつです。

-阿部さん

選定時には他社のヘッドレスCMSと比較検討し、それぞれプロトタイプも作成しました。他社のヘッドレスCMSだと、JSONフォーマットで入稿しないと「るるぶ＋」で表現したいデザインが再現できないのがネックだと分かったんです。また、今回はエンジニアではない人が入稿作業を担当することが前提だったので、JSONでの入稿は現実的ではなかったんですよね。

また、検索機能の仕様も決め手になりました。microCMSのqパラメータによる全文検索の使い勝手が良くて、手を加えなくてもGoogle検索のような使用感が実装できるのは大きかったですね。

活用の状況：ほとんどのコンテンツをmicroCMSで管理。個性的なレイアウトも手軽に実現

microCMSは「るるぶ＋」でどのように利用されていますか？

-阿部さん

基本的な記事コンテンツのほか、カテゴリ管理、検索、お知らせなどもmicroCMSを利用しています。ログイン周り以外は、ほぼすべてですね。

-福嶋さん

ウェブ版はNext.jsを使用していて、サーバからmicroCMSにデータを取得しにいき、HTMLを返す構成になっています。アプリの方は、クライアントサイドでmicroCMSのAPIを直接リクエストする形で情報を取得しています。

「るるぶ」の世界観を再現するために工夫した点を教えてください。

（画像：フラー株式会社のプレスリリースより）

-三輪さん

「るるぶ＋」のページはとても自由なレイアウトに見えますが、実際には複数のテンプレートやコンポーネントの組み合わせで実現しています。見開きの冊子である「るるぶ」のデザインを縦スクロール画面に変換するために、社内のデザイナーとも検討を重ねました。

-阿部さん

microCMSのマニュアルを読みながら、デザイナーの作成したデザイン案に合わせて最適なカスタムフィールドを組み合わせる方法を試行錯誤しました。どのフィールドを使えばデザイン要素が表現できるだろうかと、ドキュメントと照らし合わせて細かく精査しながら設計しました。

飲食店や観光スポットを紹介するブロックをまとめて「物件紹介」というコンポーネントとして定義したり、モデルコースと時間を表示する「コースマップ」をコンポーネント化したりして、複数の記事で使い回せるようにしています。各コンポーネントにはカラーコードや画像の傾き具合を指定できるスタイル設定項目を追加し、デザインの自由度を担保しました。

また、リッチエディタで自由に入稿できるようにもしているので、事前にテンプレートを定義しきれなかったデザインにも対応可能です。

マルチプラットフォームで展開するための工夫や、難しかった点があれば教えてください。

-福嶋さん

アプリ内の記事についてはWebViewで表示させているので、ウェブ版もアプリ版も見た目が統一された一貫性のある設計になっています。

開発当初は、WebViewを使うのではなくアプリ側で独自のフロントエンドを構築する案もありました。ただ、AndroidとiOSの表示を統一させるのはなかなか難しくて、工数削減の観点からも記事の画面はWebViewでの実装になりました。

-阿部さん

プラットフォームによって、APIリクエストをするときの適切なパラメータが違うケースがあります。「このプラットフォームでこのAPIリクエストをするときには、このパラメータを付ける」という認識を開発チームごとに揃えていくのは、なかなか大変でしたね。

コンテンツの運用フローについても教えてください。

-久下さん

デジタル化したい雑誌記事をJTBパブリッシング様から指定していただき、提供されたPDFやInDesignのデータをもとに、記事のデザインに落とし込んでいきます。管理画面から入稿したものをJTBパブリッシング様がプレビューで確認し、修正指示などのやり取りを経て公開する流れです。私たちフラーだけでなく、他の協力会社の方も入稿作業を担当されています。

今年4月のローンチ時には350件ほどの記事がアップされており、現在までの約10か月で記事数は2倍以上になりました。今後も毎月数十本ペースで更新されていく見込みです。

導入の効果：非エンジニアでもスムーズに入稿作業が可能

導入にあたって、microCMSの良さは感じられましたか？

-三輪さん

直感的に操作できる管理画面なので、入稿作業はスムーズでした。開発業務に携わっていない非エンジニアにも入稿を担当してもらったのですが、特に問題なく作業できていましたね。他の協力会社の方たちもトラブルなく作業していただいています。複雑なデザインのページ構成でありながら誰でも簡単に入稿できるという点は、microCMSを使った大きな成果ですね。

-久下さん

JTBパブリッシング様からも、非常に使いやすいとの声をいただいています。運用していく中で細かいご要望はいただいていますが、microCMSのサポート体制も充実しているのでスムーズに対応できていると思います。

-福嶋さん

ドキュメントが充実していて、とても開発しやすかったですね。特に今回はトライアンドエラーをしながら仕様を確定させていく場面も多かったので、microCMSでフレキシブルに設計できて助かりました。もしスクラッチで作成していたら、4〜5倍は開発工数が掛かっていたでしょう。運用フェーズに入ってからの改修作業についても、あまり工数を掛けずに修正してリリースできています。

認知度の高いメディアなのでPV数も多いかと思いますが、データ転送量の課題はいかがでしょうか。

-福嶋さん

Next.jsのImageコンポーネントで最適化できると考えていたのですが、インフラ側にデータをキャッシュするのでサーバ費用がかさんでしまうことに気づきました。そこで、microCMSの提供している画像APIを利用することにしました。また、WebP形式を使うことでも転送量が抑えられています。

久下さん

リッチエディタで画像APIをそのまま使えないという問題もありましたが、裏側でパースしてクエリを付与することで対応できました。もともと月間5TB近くあった転送量を、半分近くにまで抑えることができています。

（関連ヘルプ：リッチエディタ内の画像に対して、画像APIを適用する方法は？）

今後の展望：ノウハウを活かして、こだわったアプリやウェブの開発に活用

microCMSに期待していることはありますか？

-三輪さん

検索機能がさらに強化されることを期待しています。たとえば「京都」を検索したときに「東京都」もヒットしてしまうんですよね。ある程度は仕方ないことだとは思うのですが、より改善されれば嬉しいです。

-阿部さん

現状のリッチエディタはObject形式での書き出しができず、HTML形式でしか書き出せませんよね。HTMLデータをアプリで受け取って表示させるには工数が掛かるので、JSONでの書き出しもできると使い勝手が上がるのかなと思います。

今後のmicroCMSの活用計画があれば教えてください。

-三輪さん

特別にこだわった表現を求められる企画や、ウェブとアプリをAPIで接続したい案件には、積極的にmicroCMSを提案したいと思います。今回のプロジェクトのおかげで社内にノウハウも蓄積されましたし、いろいろな場面で使っていきたいですね。

取材協力：エディット合同会社（ライター：藤井亮一　撮影：関口佳代）