サイトリニューアルに「Orizm」を採用！ クリエイティブエージェンシー・NEW FOLKが開発者目線で語る使用感と可能性「技術力があればあるほど、自由度が増しますね」

クリエイティブエージェンシー・株式会社NEW FOLKが、ちょっと株式会社の開発する次世代Web開発プラットフォーム「Orizm（オリズン）」をCMSとして採用したWebサイトを構築し、このたび公開されました。

NEW FOLKは、なぜOrizmを選んだのか。開発者はその使用感をどう捉えたのか。代表でクリエイティブディレクターの本多敏之氏、フロントエンドエンジニアの松村太樹氏、そしてOrizmを手がけたちょっと株式会社の伊藤大知氏と髙橋優斗氏に話を聞きました。

課題解決の可能性を、“今までにないCMS”に見出す

––––はじめに、NEW FOLKさんの主な事業内容を教えてください。

本多敏之（以下、本多）　　私たちは、紙媒体からWebまで、幅広い領域でお客様の規模や業種・業態に応じた課題解決を提供しています。Webサイトに関しては、小〜中規模の案件を中心に、ブランディングを含めた企画提案や、モダンな技術を活用した「見せ方・伝え方」を重視した制作を得意としています。

––––Webサイト制作では、これまでどのようなCMSを使っていたのでしょうか？

本多　　もともとはWordPressを使うことが多かったのですが、課題はずっと感じていました。制作者のレンジがとても広いため、お客様によっては「安く、何でも実現できるツールだ」と思われてしまうこともありましたし、構築後のトラブルも少なくありませんでした。WordPressやPHP、有料テーマがすべて古いバージョンのまま放置されていて、大変な状況になっているケースに遭遇したこともあります。

そうした課題の解決策として、例えば以前からヘッドレスCMSの活用には注目していましたし、当社のフロントエンドエンジニア・松村が積極的に取り入れる姿勢だったこともあり、最近ではmicroCMSなども使うようになっています。Orizmを採用したのも、そうした流れの中での選択でした。

––––松村さんは、Orizmのどんなところに注目したのでしょうか？

松村太樹（以下、松村）　　以前、コーダーとして仕事をしていた際に、技術情報を調べる中でヘッドレスCMSの存在を知りました。そのなかで、当時の案件で感じていた課題を解決したり、開発コストや管理コストの削減に役立てられるのではないかと考えるようになったんです。そうした思いもあり、当社にフロントエンドエンジニアとして入社しました。

ちょっとさんの存在は、技術の勉強を通じて知りました。Jamstackに強い会社という印象で、個人的には“先生”的な存在として、発信される情報をよく参考にしていて。その流れでOrizmの開発も知ったのですが、展示会に出展されると聞いて「これは行くしかない」と思い、実際に現場に足を運びました。そこで、小島さん（ちょっと株式会社代表取締役社長）とも初めてお会いしたんです。

––––展示会でOrizmに触れてみて、いかがでしたか？

松村　　それまでに触れてきたヘッドレスCMSは、管理画面やバックエンドにほとんど手を加えられないものが多かったのですが、Orizmは開発者目線で自由にカスタマイズできる部分が多く、お話をうかがう中で非常に興味を持ちました。

もともとWordPressでも、コードベースでしっかり管理したいという思いがあったので、Orizmのように開発者の手で細かく調整できる設計は魅力的でしたね。APIもある程度カスタマイズ可能で、まるでフルスクラッチに近い感覚で扱えるのは驚きでした。「これは今までにないCMSだ！」と感じて、ぜひ使ってみたいと思うようになりました。

伊藤大地（以下、伊藤）　　Orizmはもともと、“開発者が使いやすいプラットフォーム”であることを重視して開発してきました。ですので、そうした点に注目していただけたのは、とても嬉しかったですね。

ただ、NEW FOLKさんには「Orizm Developer Program」を正式に提供する前の段階で採用を決めていただいたため、開発者向けスターターキットにはアーリーアダプターとしてご参加いただく形になりました。

技術力が高いほど、カスタマイズの自由度も高くなる

––––今回、Orizmを採用して開発されたサイトはどのようなものですか？

本多　　デジタルマーケティング事業や、チャットボットマーケティングプラットフォーム「Revive」を展開する株式会社Canvasさんのコーポレートサイトです。事業領域の拡大に伴うリブランディングを当社が手がけ、その一環でWebサイトもリニューアルすることになりました。

ベンチャー企業ならではの勢いやエネルギーを、Webならではのギミックや動きで表現することを目指しました。デザイン自体はシンプルですが、アニメーションによる大胆な演出を取り入れています。

フロントのフレームワークには、アニメーションの制御がしやすいReactベースのNext.jsを採用しており、その点でOrizmとの親和性が高かったことも、採用の大きな決め手となりました。

こちら（図上）が実際の管理画面です。ニュースなどの更新画面は非常にシンプルでわかりやすく、ベーシックな構成になっています。いわゆる固定ページも管理画面から更新できるのがOrizmの魅力で、デザインを確認しながらテキストを編集できる点は、運用担当者にとっても非常に扱いやすい環境だと思います。

髙橋優斗（以下、髙橋）　　Canvasさんのサイトが実際に動いているのを拝見したのは、今回が初めてでした。デザインやブランディングが素晴らしいのはもちろん、コーディングも本当に見事ですね。

伊藤　　Orizmの開発では、どうしてもデータ設計やバックエンド側に意識が向きがちなんですが、それに加えてフロントのインタラクションまでしっかりコーディングされていて、本当に素晴らしいと思います。

––––松村さんは、実際に開発してみていかがでしたか？

松村　　最初に説明で聞いていたとおり、どこでも自由に触れられる柔軟さを実感しました。また、Orizmはサイトの表示側をそのままCMSに持ち込むような仕組みなので、固定ページのエディターでもデザインの再現性が高く、触り心地もとてもよかったです。

一方で、想像以上に自分でコードを書く場面が多く、開発中は伊藤さんにたびたび質問させていただきました。その都度、丁寧に対応してくださったのがありがたかったですね。自分でも勉強しながら、つまずきつつも何とか乗り越えていきました。

逆に言えば、技術力があるほど自由に扱えるCMSだと思います。TypeScriptの理解が浅いと難しさも感じるので、今後さらに知識を深めていきたいですね。2〜3回ほど案件で使えば、WordPressのように“自分の手に馴染んだ武器”として活用できるようになる感覚があります。

伊藤　　当時は、スターターキットがまだ完全な状態ではなかったのですが、松村さんが非常に優秀で、すぐに理解して対応してくださったのが本当にありがたかったです。

また、開発を通じて貴重なフィードバックもいただき、それをアップデートにしっかり反映させることができました。Next.jsを扱える技術者が増えるのは嬉しいことですし、サポートも全然苦ではありません（笑）。

松村　　安心しました。今後は、もっと質問の頻度を増やすかもしれません（笑）。

自分たちなりに使いやすいCMSに育てていく

––––今回がOrizmとして初めての導入事例となりましたが、今後はどのような活用をお考えですか？

松村　　Orizmはもともと大規模サイト向けに開発されたCMSだと思いますが、当社が手がける案件の多くは中小規模のサイトです。ただ、例えば小規模なサイトをひとつ立ち上げて、それをコードベースで複製し、デザインやコンテンツを調整して横展開していけば、開発工数を大幅に削減できると感じています。

このやり方であれば、当社にとっても、お客様にとっても大きなメリットがありますし、Orizmを開発されているちょっとさんにとっても、より幅広いニーズに応える手段になるはずです。今後も試行錯誤を重ねながら、御社と良好な協力関係を築き、効率的な開発を一緒に進めていけたらと思っています。

髙橋　　NEW FOLKさんの強みであるフロントエンドのインタラクション表現に、より集中して取り組んでいただけるように、私たちも裏側のサポートでお手伝いできたらと考えています。

本多　　Orizmは横展開の仕組みが非常に柔軟なので、使いながらブラッシュアップしていくことで、自分たちなりに扱いやすいCMSへと育てていけるイメージがあります。経営の視点から見ても、その点に大きなポテンシャルを感じていますね。

伊藤　　私たちにとっても、中小規模のWebサイト開発はまだ未知数な部分が多かったので、今回は非常によい経験になりました。中小規模であっても、複雑なデータ構造を持つ案件などでは、Orizmの強みをより活かせると思っています。今後も「Orizm Developer Program」や自社の開発プロジェクトを通じて、さらにアップデートを重ねていきたいですね。

Text：笠井美史乃　Photo：山田秀隆