ノーコードWeb制作プラットフォームStudioのWeb制作代行会社・フリーランスが加盟するプログラム「Studio Experts」に株式会社ZIZOが加盟しました。同社は2024年2月にStudioが主催するワークショップを経て、同年5月に社内初となるStudioサイト「モノコトLab.」をリリース。本サイトはサービスリリース前のティザーサイトということもあり、コストを抑えつつも「子どもたちがワクワクするようなデザインを目指した」と言います。今回は株式会社ZIZOの加納さん、辻塚さん、西村さんにインタビューを実施。Studio導入背景から導入後の制作プロセスの変化についてお聞きしました。現役エンジニアがものづくりの“楽しさ”を届ける「モノコトLab.」──今回Webサイト制作を担当された「モノコトLab.」について教えてください。加納：「モノコトLab.」は、電子工作キットを使って手を動かしながら学ぶことができる小中学生向けのモノづくりオンラインスクールです。自動機械の設計・製作などを手がけるTKエンジニアリング株式会社が提供するサービスで、今秋からスクールの参加受付をスタートします。現在（2024年8月時点）のサイトは、サービスリリース前のティザーサイトなので、スクール参加受付開始のタイミングにあわせて絶賛リリース準備も行なっているところです。──とてもユニークで楽しそうなスクールですよね。今回のプロジェクトはどういった経緯からスタートしたのでしょうか。加納：もともと今回のプロジェクトは、当初TKエンジニアリング社から電子工作キットを企業向けに販売したいというご相談からスタートしています。ただ中長期的な視点に立ったときに、子どものころから電子工作に楽しく遊びながら触れてもらうほうが未来の技術者を増やせるのではないかと提案したんです。そこから打ち合わせを重ね、現在の小中学生向けの学習サービス「モノコトLab.」という形で進めることに舵を切りました。辻塚：子ども向けのプログラミング教室は全国各地のスクールやオンラインサービスなど多くの選択肢がありますが、「モノコトLab.」で扱うような電子工作教室って意外と少ないんですよね。とくに「モノコトLab.」は、講師の現役プロ技術者から直接レクチャーが受けられるという点で、より実務経験に基づいた学習を受けられることも大きな特徴です。オンラインのサービスではありますが、配信する動画説明書だけではなく講師・生徒が双方向にコミュニケーションを取りながら進められるような授業も想定しています。コストを抑えながらも「モノコトLab.」の世界観を表現するWebサイトを目指して──「モノコトLab.」のWebサイト制作は、どのように進行していたのでしょうか。辻塚：今回のプロジェクトでは「モノコトLab.」のサービス企画段階からサイト制作も並走していたので、掲載する内容も定まっていませんでした。そのため、サービスの方針に沿ってWebサイトも同時進行で制作していきました。──今回のサイト制作にあたって、なぜStudioを採用したのでしょうか。加納：状況に応じて柔軟性を持って制作できる、という理由もありましたが、サービスの企画段階だからこそWebサイト制作のコストを抑えてサービス内容をよりリッチにしてほしいという想いもありました。例えば生徒に送る工作キットの段ボールや動画説明書のクオリティを高めることに費用をかけたほうが、子どもはワクワクするはずです。サイト制作に費用をかけるよりも、まず子どもたちが喜ぶサービスを作ることのほうが大切だろうと考えていました。とはいえティザーサイトでも「モノコトLab.」の世界観を表現したい。だからこそStudioで制作することで、ワクワクするようなデザインを目指しました。結果的にもデザイナーの西村が作ってくれたLottieアニメーションをはじめ、子どもたちがワクワクするデザインのWebサイトに仕上がったと思っています。──背景の電気基盤や文字のフォントなど、子ども向けながらもかわいすぎずポップなデザインに仕上がっていますよね。西村：今回は小学生と中学生がターゲットということもあり、年齢層が広いんですよね。小学生にフォーカスして考えてしまうと可愛らしくなりすぎてしまうので、ポップだけど幼すぎないように、という加減が難しかったかもしれません。サイトにはビビッドでカラフルな色を積極的に使用しました。また、工作のイメージに合うようなフォントを取り入れたり、シャドウを入れたりすることでポップでありながら動きのあるサイトを意識しています。Studio主催のワークショップが導入のきっかけに──Studioを導入するに至った経緯をお伺いできますか。加納：大きなきっかけになったのは、Studioの導入サポートとしてワークショップを実施していただいたことですね。ノーコードによるサイト制作は、いずれ取り入れる必要があると思っていました。ただ今ほど理解が深い状態ではなく、社内でノーコードに関する情報交換しながら導入を検討していた状態だったんです。そんな折に、Studioから導入ワークショップを実施してもらえると聞いて、社内のメンバーを募って参加させてもらいました。西村さんは以前からStudioを使っていたんですよね。西村：そうですね。プライベートワークとして個人エッセイサイトを作ったことがありました。そのときの経験から感覚的にStudioの使い方は把握していたのですが、ワークショップで直接質問ができたことで理解が深まりましたね。▲あの、忘れられない日々。──ご自身のサイトをStudioで作ってみた印象はいかがでしたか？西村：もともとフリーランスとして10年以上デザインとコーディングも兼任しながら活動してきたので、1人で完結できる点がすごく魅力的でした。エディターを開かずに実装できるってなんて素晴らしいんだろうと。デザインで手を抜いたり妥協したりすることもなく、自分が作ったデザインをパッと公開できることが嬉しかったですね。Studioにはカスタムコードを入れられるEmbedボックス機能もあるので、実装が難しい場合には自分でコーディングすれば大丈夫だろう、という筋道があったのでチャレンジもしやすかったです。辻塚：「モノコトLab.」の実績ができたことで、社内で「Studioのことは西村さんに聞けばわかる」という認知が定着しましたよね。新規案件でStudioの導入が検討されたときに相談できるメンバーがいるだけでも導入ハードルが大きく下がったのではないでしょうか。なんとなく「ノーコードだとStudioが使いやすくて良いらしいよ」という噂も社内に広がっているような気もしています（笑）。Studioをクライアントが手がけるサービスの基盤を築くツールとして活用したい──初めて実案件でStudioを使ってみて、いかがでしたか？西村：Studio内でのコメント機能（※）が特に便利でした。ディレクターからのフィードバックをStudio内で確認しながらデザイン修正と実装ができるので、スムーズにコミュニケーションがとれた記憶です。＞Studioエディタのコメント機能について詳しくはこちら辻塚：ディレクター目線でも、コミュニケーション工数が減ったのは大きなメリットでした。通常の案件であればデザイナーとエンジニアの両者とコミュニケーションをする必要がありますが、今回は西村さんと一対一でやりとりしていたので、言葉にしづらい感覚的な調整をスピーディーに行うことができましたよね。何かあったときにエンジニアやデザイナーに依頼せず自分で調整できることも安心材料になりますし、納品後にクライアントが社内で更新できる点も良いなと感じました。──今後Studioをどのようなプロジェクトやサイトに活用してみたいですか？加納：今回のようにサービスの企画段階から伴走しながらWebサイト作るプロジェクトでは特に提案していこうと目論んでいます。ちょうど今ご相談いただいている内容も、立ち上げ段階のサービスが多いです。スモールスタートからサービスを始めるときって未確定の要素が多いので、Webサイトもどう手をつけたらいいのかわからないケースが多いじゃないですか。だからこそ、まずは柔軟性の高いStudioでサイトを作ってサービスを軌道に乗せることが大切かなと。クライアントが手がけるサービスの第一歩を後押しできるよう、今後もさらにStudioの事例を増やしていきたいと考えています。「ワクワクすることをひとつでも多く！！」というビジョンを掲げ、「世の中への提供価値」×「自分たちの心地よさ」の最大化を目指す株式会社ZIZO。戦略を考え、クリエイティブとテクノロジーの力で企業や商品のブランディング、プロモーションを成功に導く同社のサポートを受け、第一歩を踏み出したいとお考えの方は、ぜひご相談ください。なお、クライアントワークにStudioを導入したいと考えている場合は「Studio Associate Program」に加盟いただくとワークショップの受講が可能です。「Studio Associate Program」とは、今後クライアントワークでのStudio活用を検討中の企業向けに新設された、Studio導入サポートプログラムです。本プログラムへの参加により、Studio導入時の提案・技術的サポートから、新規案件の送客などのサービスが無償で受けられます。＞「Studio Experts」100事業者突破と制作会社向け導入サポートプログラム開始のお知らせ＞「Studio Associate Program」加盟事業者一覧