ご覧いただきありがとうございます！広報のノムラです。
今回は、monomodeのデザイナーやエンジニアが所属する制作部で実施した社内企画「シャッフルチーム企画」についてご紹介します。
メンバーを2チームに分け、同じテーマでWebページを制作。それぞれのチームが、どんな風にアイデアを出し合い、制作を進め、どんな工夫やチャレンジをしたのか？
実際に参加したメンバーへのインタビューを通して、企画の裏側や、取り組みを通じて得られた学び・気づきを深掘りしていきます。
普段からオフィス内でも仲の良い制作部が、全員で一つの取り組みに挑戦したのは今回が初めて。「らしさ」があふれる制作過程は、見ているだけで笑顔になるような楽しい時間でした。
制作部メンバーのリアルな声が詰まった座談会の様子を、ぜひご覧ください！
制作部の社内企画がスタートした背景
野村：まず、この企画の目的やきっかけについて教えてください。
森木：制作部では定期的にミーティングを行っていて、メンバーがそれぞれ議題を持ち寄り、話し合う場を設けています。そのミーティングで、私の中に「みんなで何か一つのものを作りたい」という思いと、「Studioというツールにもっと触れてみたい」という思いがありました。Studioはノーコードツールなので、エンジニアだけでなくデザイナーもコードに触れることができるのが魅力です。「せっかくなら全員がStudioを触って経験を積める機会にしたい」という狙いもあり、この二つの思いを掛け合わせてこの企画を提案しました。
普段はクリエイティブ班とEC班で分かれて作業しているので、今回は混合チームを作ることで普段比較的接点の少ないメンバー同士が交流できるように工夫しました。
テーマは公開時期が夏だったので「暑中見舞い」。ファーストビューで完結するシンプルな内容にすることで、日々の業務に負担をかけずに取り組めるようにしました。
野村：実際に、動き出したのはいつ頃ですか？
齊藤：2月の制作部ミーティングで森木さんが提案したのが最初で、実際に動き出したのは5月頃ですね。
森木：その間にチーム分けだけを先に行いました。
Aチームの制作：「花火」をテーマにmonomodeらしさを表現
デザインと構築の工夫
野村：まずはAチームの制作について詳しく教えてください。
齊藤：Studioの機能とスクロール演出を掛け合わせて何か作ろうと考えた時、「花火」が題材としてぴったりだと思いました。また、夏の暑中見舞いにも合うのでメインデザインに決めました。
monomodeらしさを表現したかったので、ロゴやサイトでもおなじみのキャラクター「モノモ」と「ノモノ」を入れ、可愛らしさを入れる事で親しみやすいデザインを意識しました。その他にも全体的にエフェクトをかけて質感を出したり、ローディング画面に襖の演出を入れたり工夫しました。
ただ、花火のアニメーションはもっと動きをつけられたらよかったなと思っています。
長谷川：私はStudioでの作業は初めてでしたが、なるべくStudioの機能だけで構築したいと思い取り組みました。
Studioのデフォルトではアニメーションの再生判定が画面下に設定されているため、花火の打ち上げが下部で始まってしまいました。そこで判定用の箱を作り直し、花火が画面上部で開くように調整したのが大変でしたが面白いポイントでした。
チームの進め方
野村：Aチームはどうやって進めたのでしょうか？
齊藤：花火の動きの設計をエンジニアが先に進めてくれて、その間にデザインを進める形でした。デザインをそのまま組み込める状態で渡してもらえたので、後半慌てることなく進められました。また、エンジニアのお二人が参考になるデザイン案をたくさん出してくれたのも助かりました。 長谷川：構築はデザインとほぼ同時期に進めていた感じです。「花火」という方向性だけは決まっていたので、実際に出来上がったデザインを見た時とても可愛くて驚きました。
振り返りと改善点
野村：もっとこうしたかったなど、課題に感じた点はありますか？
長谷川：花火のアニメーションはより多彩な動きをつけたかったです。
森木：全体的にコンテンツの量をもっと増やして、セカンドビュー以降も作り込んだほうがよかったかなと感じています。
橋詰：別チームですが、現状のシンプルなボリューム感が花火のイメージにマッチしていて、それはそれで良かったとも思います。
森木：そう言ってもらえると安心します。
Bチームの制作：「やりたいこと全部盛り」でStudioを学ぶ
制作の目的と進め方
野村：続いてBチームについて教えてください。
北出：Bチームは全員がStudio未経験でした。なので、「Studioの仕様を学ぶこと」と「楽しんで作業すること」を目的に進めました。やりたいことをみんなで出し合って、それを全部盛り込むスタイルで進めたのが特徴です。
おみくじ要素を入れたり、スイカ割りをしようとしたり、いろんなアイデアが出た中で、Studioの機能でできること・できないことを見極めながら、実現できるものを詰め込んでいきました。
安藤：デザイン面では、やりたいことが多く、その分作るオブジェクトが多かったので、デザイナー2名で全体のバランスを整えるのが少し大変でした。
野村：確かに、当社のプロジェクトでも1つのプロジェクトにデザイナーが2名入るのは珍しいですよね。
構築でのチャレンジと工夫
橋詰：構築では、スクロールに合わせて芽が伸びる動きを入れたかったのですが、Studioの機能ではスクロール連動の動きができませんでした。そこで「最初から伸びきった絵を用意して、下から上に上がる形にする」という方法で実現しました。
さらに下方にアンカーリンクをつけても、上方にあるフェードインアニメーションが動く事がわかって、これがうまくいったのは嬉しかったですね。そこからデザイナー2人にも仕様を共有してデザインを作ってもらい、最後の細かい部分は前田さんに仕上げてもらいました。
前田：大まかな流れを橋詰さんが作ってくださったので、私は微調整をした形です。
チームのコミュニケーション
野村：Bチームはどのように進めましたか？
安藤：『やりたいこと』をみんなでブレストして、エンジニアがそれらを「こういう仕組みで動かせる」と調べてくれる形で進めました。それに合わせてデザインを組んでいったので、オブジェクトも自然と多くなりました（笑）
橋詰：自由にアイデアを出しすぎて、安藤さんが苦い顔をしていたのを覚えています（笑）
安藤：どうなるんだろう…って思っていました（笑）
北出：でも安藤さんから「おみくじ要素を入れよう」というアイデアが出て、さらにカオスになっていきましたね（笑）
前田：アイデア出しでは、私が思いつきで言った「花が宇宙まで伸びていく」という案も採用されました。こういう自由な雰囲気が楽しかったです。
投票結果と全体の振り返り
野村：今回の企画では、monomode社内報（Slack）上で各チームが制作したWebページを公開し、どちらのページが良かったかを社員に投票してもらうという形式を取りました。その結果、Aチームがより多くの投票数を獲得することに。
届いていたコメントには、「ノスタルジックな雰囲気がよかったです」「お客さんにハガキ代わりに送りたくなりました」といった声もありました。実際に今回の企画をやってみて、いかがでしたか？
安藤：楽しかったですね！
橋詰：今回、デザイナーの北出さんにもStudioを触ってもらったのですが、「分かってきたら楽しいです」と言ってくれて。それが今回の目的をちゃんと果たせたな、と思えた瞬間でした。
北出：最初は本当に、画像を入れるだけでも難しく感じたんです。でも触っていくうちに理解が進んで、だんだん楽しくなっていきました。さらにエンジニアのお二人がどんな作業をしているのかも少しずつ分かるようになってきて、自分がしたいデザインを、自分で実装できるようになったらもっと楽しいだろうなって思いました。
森木：企画した身として、そう言ってもらえるのはすごく嬉しいです。
野村：またこういう機会があれば、やってみたいですか？
森木：やりたい気持ちはありますが、やっぱりタイミングも大事かなと。無理のない形でまた挑戦できればと思います。
野村：では最後に、改めて……皆さん本当にお疲れさまでした。ありがとうございました！
全員：ありがとうございました！
今回の座談会では、企画を通じてチームで試行錯誤しながら制作に取り組むプロセスが、成果だけでなく新たな知見や学びにもつながることを私自身も改めて感じることができました。
monomodeではこうした時間で培われた知見が日々のプロジェクトで活かされるよう、社内外でのチャレンジを積極的に行い、メンバーそれぞれのスキルアップや成長を後押ししています。
「DAYs」では、引き続き当社の様々な取り組みについてもご紹介してまいります。次回の更新もぜひお楽しみに！
