2019/10/17

関係者、激白!誕生秘話と裏側-夏休みアプリ:ぱぴぷぺほ編-

10周年記念 座談会 MicroTech

Mogicでは、最先端の技術を取り入れてクスッと笑えるようなアプリやWebサービスを作るMicroTechプロジェクトがあります。プロジェクトメンバは若手社員、学生インターンが中心。Mogicのものづくりを体感してもらいました。どのようにプロジェクトを進め、危機的状況を乗り越えてリリースに至ったのでしょうか?その辺りをプロマネYさん、デザイナーインターン:K.Mちゃん、エンジニアインターン:タマティくんに座談会形式で語っていただきます。青い覆面をかぶった怪しい人が来ましたが……

今回のマイクロテックメンバーは、このお三方です(自己紹介)

これから、マイクロテックの座談会を始めたいと思います。進行は、うぉんじまが担当させていただきます。では、プロジェクトマネージャーから簡単に自己紹介をお願いします。

Mogicでエンジニアをやっていて、前回に引き続きマイクロテックのプロマネを勤めさせていただいるY.Yです。

K.Mちゃん、お願いします。

デザイナーインターンのK.Mです。デザインとコーディングをやりました。

あれ?いつもより堅い感じだけど。

謎の青い覆面男の方、お願いします。

エンジニアインターンのD.Tです。

覆面かぶってるわりに、意外と言うことは普通じゃん!

こうしてマイクロッテクプロジェクトは始まりました

プロジェクトのキックオフミーティングはいつごろでしたか?

最初の企画を練るところは僕とエンジニア社員のSでやって、大体企画が固まってからタマティとK.Mちゃんにも入ってもらった感じですかね。それが6月入ったぐらい?

そうですね。

どんなふうにチームで作っていったんですか?コンセプトやストーリーあたり。

コンセプトのアイディア出してくれたのは、うぉんじまさんじゃないですか(笑)!

あわわわわ......

うぉんじまさんの持ち込み企画ですよね。

今回のマイクロテックの一つアイデアとして、アートも学べるようなプログラミング教材みたいのがいいんじゃないかっていうアイディアをいただいて、いろいろと議論しながら膨らませていったって感じですね。生みの親はあなたです。

美術館で見て、すごいブルブルって来たんですよ。

北欧の方ですよね。

フィンランドのセラミックアーティストのルート・ブリュックです。直感的にこれでなんかできないかなって思いながら見てて、その後に丸善に行ったら、子供向けのプログラミング関係の冊子が置いてあって。アートとプログラミングを合体できるんじゃないって思ったんです。次の日に出社して、代表の山根に「昨日美術館に行ったんですけど・・・」と伝えたら、そのままプロマネYくんのところに行ってみようとなり......私の個人的な思いつきというか、こんなのできたらおもしろくないですかという妄想を、取り入れてもらえたのがびっくりでした。

ちょうどプログラミング教材みたいなのをチャレンジしたいよねという流れがあったのと、今までやったことのないアートっぽいのもマイクロテックでチャレンジしてもいいじゃないかなって。

それで、ストーリーとかタイトルとかっていうのはどういうふうに作られていったんですか?

大枠が決まったところから2人に話し合いに入ってもらいました。最初は、「そもそもプログラミングって何だろうね」とか、「教材ってどんなのだったら楽しめるんだろう」とか、「絵を描くときの楽しさって何だろうね」、「子どものとき何してた?」など遠回りな議論をするところから始まって、だんだん夏休みの宿題で困っている子どもがプログラミングで絵を描いてちょっと助かるみたいなストーリーがいいんじゃないかとなっていきました。

ところで、なんで「ぱぴぷぺほ」なんですか?

今回アート系のプログラミングツールを作ろうって話をしてたときに、石神井の近くのデザインスタジオに見学に行くって話があったんですよ。子どもたちが自由に絵とか創作活動できる場所で、「スタジオパパパ」っていうんです。そこからもインスピレーション受けて、楽しくわちゃわちゃ描ける感じがいいよねって。その辺りの要素も入れつつ、名前決める時に、「ぽぽぽ」?「ぷぷぷ」?という感じで話してて、「ぱぴぷぺぽ」でいいんじゃないみたいな感じで、そのあとに意味どうしようってなって。

夏休みの宿題が終わらなくて追い込まれてて、パニックで、ピンチで、プログラミングで、ペイントするから、夏休みでホリデーみたいな感じで「ぱぴぷぺほ!」になりました。

プロジェクトの中で大切にした童心にかえることでの弊害

今回のミーティングでは、何かしかけとかありましたか?以前は、毎回ミーティングの場所を変えたり......。

屋上でポップコーン食べながらミーティングしてました。沈む夕日を見ながら、子どもの心を思い出して......。

K.Mちゃんは少女のころの気持ちを思い出せましたか?

うーん……思い出せたような気もします。

タマティくんはどうでしたか?

そうですね。食べながら話してると意外と思い起こされて、お互いに話してる中で自分の記憶もよみがえってくることがあって。

あの~タマティくん、ニットの覆面かぶったままで暑くないですか?

そうだよ、写真撮り終わってるのに!結局このプロジェクトを通して童心に戻り過ぎた後遺症みたいなものが出てますね......

プロジェクトの前はすごい大人だったんですけど、プロジェクトを通して僕も子供っぽいところを取り戻せたというか......(笑)

危機的状況は毎度やってきます、ひりひりを2度踏む問題

今回も危機的状況とかありましたか?

常に危機的状況だった気がします。私の場合はコードがうまく言うこときいてくれないとか、デザインでちょっとつまづいてるとか。

タマティくんは危機的状況ありましたか?

個人的には、スタートの時点で触ったことない言語とかライブラリ使うよって言われて、ちょっと「おおっ!」となりました。チーム的には......自分は危機的状況は知らなかったんですけど、プロマネYさんが山根さんたちから実は1回フィードバックをもらってて、あんまり芳しくなかったらしいと。きっと僕らは感じ取れてないですけど、プロマネYさん的には1回危機感を感じるポイントとしてあったのかなと。

いつもそうなんですけど、マイクロテックをやるときは「何かしらやったことにないことに挑戦する!」ということがあって。それは、デザイン的にも技術的にもです。いつもマイクロテックでは2段階でひりひりがあって。

そのひりひりはタマティくんには伝わっていなかったですか?

ミーティングの趣旨が少し変わったなというタイミングがありました。技術的にできるかどうかわからないけど、取りあえず形にしようっていうふうに進めたのが、割と個別にやっていた時期としてあって、そこから7月頭ぐらいにストーリーどうするとか、ゲーム性どうするっていう、チームとして考えるべきところが議題に上がり始めたので、そこがターニングポイントだったのかなとうすうす感じてました。

うすうす?プロマネとしてちゃんとひりひりを吸収して、でも、2人には自由にやらせて。プロマネの懐の深さっていうところですか?

そうですね!

結構自由にやらせてもらってましたね。

そのひりひりしてるところで、どう乗り越えたんですか?

私はパネルのデザインを決めるのが結構早かったので、それは先輩デザイナーのMさんとEDIX(教育ITソリューションEXPO)に行ってインスピレーションをもらって、それをアウトプットしてまずパネルができました。自分の好きな色と、得たインスピレーションと、対象年齢、ターゲット層とかを合わせて自分の好きなようにやっていたので、それがひりひりを乗り越えるモチベーションにはなってたかなと思います。

デザインの試行錯誤

タマティくんは何か乗り越えましたか?

個人の方だと、このマイクロテックとは別案件で採用管理ツールという硬いシステムを作りつつ、その合間にマイクロテックに取り組んでいたので、楽しい気持ちになるように開発していました。具体的にはシステムで絵を描くのですが、この絵つまんないとか、こういう要素入れたらどうかなとか、これだったら面白いかなっていうのを探り探りしたり。あとは「ポロック」っていう画家の抽象画を参考にしようっていう話もあったんで、抽象画に使われるパーツって何だろうって考えて実装するようにして、遊びの部分を出そうとしたっていう感じです。

今回のテーマは夏休みと絡めていたので、リリース時期が大切だったと思いますが、最後の追い込まれていった時は、どう折れずにやっていきましたか?

もともと出勤時間内に完全には終われないのがわかっていて、その中でどこまでできるかっていうところをすごいがんばりました。やれるところまでやって、あとはチーフのUさんに助けてもらったので、その前の7月の最後の週と8月の最初の週あたりは結構パニックでした。

個人的には、K.Mちゃん変わったなと思っています。前だったらやれるものからやっていくぜみたいな感じだったけど、今回はパニックになりつつもやれるものを見定めて、ちゃんとこなしていったかなって思ってるんで。マイクロテックって素晴らしいプロジェクトだ!

このプロジェクトに参加して面白かったこと、ためになったことはありますか?

今まで使ってみようかなって思ってたCSSがあったんですけど、それを今回初めて使ってみて、それがめちゃくちゃ面白くて勉強になりました。

タマティくんは何か?

僕も使ったことない、使い慣れてない言語とかだったんで、そこを使い慣れたっていうのはスキル面として大きいのかな。これまで個人的な仕事をやっていたので、人と連携するのにデザイナーさんはこういうふうに動くんだなとか、エンジニア同士の連携のときはこうやるんだなっていうのが、触りでも経験できて良かったです。

週2日×2ヶ月くらいで作りきる、時間はいつも足りない問題

K.Mちゃんとタマティくんは、出社日重なっていましたか?

僕は、週2回。

私は週3です。

週2の中で、意見交換しながら進めていった感じですか?

毎回、なんやかんやは話してたよね。

スカイプで「作ってみたよ!」とぽんっと来て、「いい感じですね!」って。

書いてみたのを披露し合いっこみたいな感じで、パネルが上がったり、こういう絵が描けるようになりましたっていうのをスカイプに上げたりしながら。

「ぱぴぷぺほ」の試作段階

その間はどんな感じですか?

楽しかったです。私は自分がデザインしたのをエンジニアさん側に出して、それを組み込んでくれて絵描けるようにしてくれてから、プロトタイプでやってみたら実際にばーって絵が描かれてるの見ると、私は全然しくみがわかってないので、中の構図をすごいって普通に楽しみながら見てましたね。遊びながら見て、じゃあこの動きならこういうパネルでもいいのかなって考えたりしたりとか。

タマティくんはK.Mちゃんからもらったもので影響受けましたか?

やる気がわきました!一つの要素の中に描くっていうところから始まって、だんだんパーツが追加されて、それっぽくなってきて。ちょっとずつデザインが更新されていくので、今度はデザインがこうなったっていう目新しさを感じながら作業してたので、(実は、結構飽き性なんですけど)あんまり飽きずにやれたかなと。

タマティくん、飽き性なんですか?

飽き性ですよ!まちがいなく飽き性です。(笑)

私にはそう見えませんでしたけど、飽き性だったんですね。それを乗り越えてやり遂げられたのは良かったですね!

タマティ1人だったら途中で飽きてたと思います。K.Mちゃんから違った視点をもらって刺激になったから、彼はやり遂げられたと思いますよ。最初、タマティが機械で描いた絵は、やっぱり機械っぽいんですよね。で、K.Mちゃんが出すデザインは、温かみがあったりかわいらしさがあったり、2人の距離が遠かったんです。この感じのテイストとここの世界観を合わせていかないとというところで、K.Mちゃん側からタマティ側に寄りつつ、タマティが絵のところでかわいらしさとか人らしさを足していって、徐々にプロトでできてくる絵の感じも変わっていきました。絵の様子がプロジェクトの状態表してるなと思っていて、最後ちょうど収まるところに収まったんじゃないかな。

これまでの不満をプロマネにぶつけてみましょうの時間

実は我慢してたけど、こんな不満があったっていう何かぶっちゃけ話ありますか?

いつも一番盛り上がる話だ(笑)

ちょっと考えさせてください。

いっぱいあるから。

K.Mちゃんはちょっと保留で、タマティくんありますか?

結構アイデアを膨らませるページとかなんですけど、その方向性とかは決まってるんだろうなって感じるポイントが何カ所かあって。最初にプロマネYさんとSさんで話されてたっていうことは、ある程度方向性がある中で話し合いをしてたのかなっていうのもうすうす感じてて、どうやって膨らませるんだろうって思ったときはありました。

我慢してたとこ?。何だろう……

もっとこうだったら良かったのにとか、あれが嫌だったなとか。何でもいいですよ。

結構ペンギンの絵をいっぱい描いたので、辛かったぐらいですかね。不満そんなにないって言ったらうそになるかもしれないですけど、でも、ぱっと出てこないっていうことはそんなに持ってないのかもしれないです。自分がああやれば良かったな、こうすれば良かったなっていうのばかり出てくる。

次やるとしたら、こうしたらもっといいかもっていうのはありますか?

自分が思ったことはアウトプットしてすぐ持っていこうっていうのはすごい学んだなと思ってて。ペンギンのときも、思いつきで持っていったんで。そういうの大事にしようって思いました。

タマティくんありますか?

最初、大枠の部分を作ってくださったコードがあったんですけど、結構きれいに書いてあったんですよ。それを僕が開発する中で、どんどん汚いコードにしてしまったので、最後少し改修するときに、この連携でやりにくい部分があったのかなと思ってて、だから、最後の最後まで飽きずにちゃんときれいなコードで整理整頓しながら書くっていうのは大事だなと思いました。

一緒にやる、作るって難しかったなと思います。デザインはK.Mちゃん直して、コードの部分はタマティが直して、僕もちょっと直したりすることもあって、連携が大変なところもあったり。もっとうまくやったらみんなスムーズに開発できるかなというふうに思ってますね。タマティが散らかしたっていう、やりにくさみたいなのはあって(笑)重なるところで協力するところは協力しつつ、でも、ストレスなく進められるようなところはまだ改善の余地がありますね。

プロマネの一言

最後に、プロマネしめてください。

今回はマイクロテック続けてきた中で、踏むべきステップを踏んで進められたと感じています。実際に社内の人にも見せた時に、面白いんじゃないって評価をしてもらった時は純粋にうれしかったですね。あとは2つのひりひりが出たときに、今までだと1個目のとりあえず形にして何とか出すみたいなことが多かったんですけど、その先のどうやったらもっと良くなるだろうねっていうところを議論したり、改善することもできたと思っていて。そこは次につなげられるものになったかなと思います。

次回はほかのチームの子とかも入れて、もうちょっと違った視点も入れながらいけたらいいかなっていうのをちょっと妄想中ですね。

随時募集中の採用情報もございます。Mogicで働いてみたい方はMogic公式サイトのリクルートページをご覧の上ご応募ください!

ブランディングを語るメディア
「さしすせそ」

Mogicブランディングチームの奮闘をまとめたWEBメディア「さしすせそ」はこちらから!