デザイン性を追求するなら、Studioの一択だった

── Studio導入の背景について教えていただけますか？

深田様：kubellでは、2024年7月1日の社名変更に伴って、ロゴの刷新やコーポレートサイトのリニューアル、オフィス移転などのプロジェクトが一斉に実施されました。オウンドメディア「kubell days」も同じタイミングでのリリースが決まったため、少ない工数・短い期間でのサイト制作が求められました。そのとき私の脳裏に浮かんだのがStudioでした。

私は前職まで長年制作会社のWebディレクターのキャリアを歩んできた関係もあり、Studioというノーコードツールの存在は知っていたんです。そこで、Studioで作られた世界中のWebサイトをジャンルやテイスト別に探せるギャラリーサイト「Showcase」を拝見したところ、多くの洗練されたサイトが公開されていることを知りました。

社内のリソースも限られていたため「ここまでデザイン性を追求できるなら、Studio一択でプロジェクトを進めよう」と思い、導入を決めました。

── 当時はどのような制作体制だったのでしょうか？

深田様：ブランド領域を手掛けるデザイナーが3名、兼務を含めて4名です。マークアップエンジニアも1名います。ただ、当時はリブランディングに向けた制作物の数も多く、余裕のあるメンバーはいませんでした。そこで、オウンドメディアの立ち上げは基本的に私が1人で設計から実装までを担当し、デザイナーが監修するという体制を構築しました。

デザイナーによるロゴ開発を含めてオウンドメディアの制作期間は1ヶ月ほどで、それ以外にも複数の既存サイトを統合する業務やグループ会社のサイトリニューアル、各種ブランドアセットの制作や社員総会のクリエイティブなども同時並行でした。

こうした背景から、私のリソースだけで設計から実装までをワンストップで進められるStudioが、要件としてぴったりでした。Studioは国内製のため日本語でチャットに問い合わせることも可能ですし、検索をすれば豊富なナレッジも共有されている。導入時の不安も少なかったですね。

── 導入の決め手について、時田さんにもお伺いしたいと思います。

時田様：私は、運用コストの面でメリットがあると最初に感じました。今回立ち上げた「kubell days」は、前身のオウンドメディア「Cha道（ちゃどう）」から記事を引っ越しする計画もあったので、月額費用の比較は軽視できない部分でした。

また、以前使っていたブログサービスでは、デザインカスタマイズをしていたため、記事カテゴリを1つ増やすにしてもコードを触る必要があったので、日々運用をする中でもエンジニアの手を借りる必要がありました。Studioは基本的にエンジニアの手を借りずにサイトの改善や運用ができるため、中長期的に考えた場合に運用コストも下がる計算でした。

100記事以上の移行もCMSダッシュボードでスムーズに整理

── 実際にStudioを利用してみた感想をお聞かせください。

深田様：Figmaとの連携（Figma to Studio）はとても便利でした。パーツ単位、コーポネント単位でStudioにインポートできるのは使いやすかったです。ほかにも、リスト機能やカルーセル機能は使い勝手が良いと感じました。個人的に一番感動したのはCMSダッシュボードです。コンテンツ一覧を見ながら、さまざまなプロパティを設定できるため、UIが非常に優れていると感じました。

CMSダッシュボード

時田様：以前のメディアから100記事以上を「kubell days」に移行したので、一覧の画面からページを切り替えることなく、すべてのタグやカテゴリを設定できたのは良かったですね。

あとはライブプレビュー機能にも感動しました。更新ボタンを毎回押さなくても、自動的に最新のプレビューが表示されるんですよね。深田がよく「かゆいところに手が届くUIだ」と言っているのですが、本当に私も共感できます。

ライブプレビュー

── デザインエディターで便利に感じる機能はありますか？

深田様：レイアウト調整などは視覚的に操作できるので、思っていた以上に使いやすかったです。CSS（コーディング）の知識がある場合は、ノーコードのエディタを触るよりもコードを書く方がレイアウト周りの細やかで複雑な調整を正確にできると一般的には考えると思います。しかし、Studioにおいては操作性が直感的だったため、コードを触る必要はないと改めて感じるほどの使いやすさがありました。

レスポンシブ設定なども最初は「どうやればいいんだろう？」と戸惑いはしましたが、慣れれば本当に手軽で、わかりやすいなと思いました。

── 操作に迷った際、サポートコンテンツなどは使われましたか？

深田様：とても便利でしたね。最初はYouTubeで基本的な知識をインプットをしまして、以降は使い方がわからない部分が出てくるたびにWeb検索をすると大体最初にヒットするのが「ヘルプセンター」なので、都度お世話になっていました。

── 運用の開始後、更新面での感想もぜひ教えてください。

時田様：記事コンテンツの制作が手軽になったと感じています。現在は社内外への広報活動を担う部署メンバーを中心に、約5名が持ち回りで執筆・編集を担当しています。特別な専門知識も不要なので、チームでのメディア運営も円滑に回せています。

デザインの制約を受けずに、設計～実装を1人で完遂

── 改めて、Studioの導入でどのような成果が得られましたか？

時田様：私がもっとも成果を感じているのは、多様な切り口で記事を見せられるようになった点です。今回立ち上げた「kubell days」では、コーポレートミッション・コーポレートビジョンの実現に向けた取り組みや、kubellグループとして自ら体現していく過程を社内外へ発信したいという狙いがあります。

MVVやカルチャーに紐づく記事も必要ですし、読者に届けるための工夫も必要。そこで、CMSのコレクション機能を活用してトップページのファーストビューに「今日の『くべる』ことば」というセクションを用意し、読者の関心を引くようなアプローチを考えました。使用する文言の変更も、CMSダッシュボードからテキストを変更するだけなので簡単です。

深田様：以前のブログサービスでも、読者をサイト内で回遊させる工夫は可能でしたが、コーディングが発生する以上、今回はスケジュールの観点から現実的ではありませんでした。もはや、ノーコードでデザインの自由度が高いStudioを活用することは必然だったと思います。

「ノーコードツール＝デザインの制約がある」というイメージを持っていたのですが、最終的にデザインの制約をほぼ受けることなく1人で公開まで持っていけたのは何よりも大きな成果だったと思います。

時間はない、だけどデザインを妥協したくない企業へ

── 今後、Studioを活用して取り組んでいきたいことは何ですか？

深田様：現時点で、構想段階でやりたかったことを100%実現できているわけではありません。デザインのテコ入れをしつつ、アクセス解析機能の「アナリティクス」でサイト分析をしながら、より多くの方々に閲覧してもらえるオウンドメディアに育てていきたいですね。

時田様：私はチームでの編集体制をより強化していきたいですね。以前は私だけが更新作業をしていたため、工数的に負担がありました。それが今は5名体制になったことで、毎週の記事更新も無理なく可能となりました。記事の品質を高めながら、新社名への思い、「働く人の心に宿る火に、薪をくべるような存在でありたい」という願いを届け続けていきたいと思います。

──最後に、どのような企業にStudioがおすすめできるか教えていただけますか？

深田： 今回の私たちのように、スケジュールやリソースが限られている中でもデザインを妥協したくない企業におすすめしたいです。

kubellという新社名を発表し、リブランディングも大々的に実施したわけですが、スピードだけを重視してデザインを置き去りにしてしまっては本末転倒になっていたはずです。Studioはデザインや表現を制限することなく、制作スピードを大幅に上げるために最適なノーコードWeb制作プラットフォームだと思っています。これからも会社だけでなく、個人での活用も含めてStudioの可能性を模索していきたいです。

── 今後もより使いやすいツールとなるように、改善を進めて参ります。貴重なお話をありがとうございました！

※掲載内容は取材当時のものです。

撮影場所：WeWork 乃木坂