見出し画像

「ノブ笑い」アプリが爆速でできるまでの制作エェ話。

いまの会社に入ってから3プロジェクトずっと同じチームでやってきた貫井さん。そして、アプリやソフトウェアデザインに対する思想をあれこれ教わったmy師匠です。そんな貫井師匠が会社を卒業するとのことで、すごくお世話になったし、何か個人的にお礼をしたいなと思いました。最初は好きなものを買って贈ろうかと思い、あれこれ好きなものを考えたのだけど、どう考えても「貫井さん=iOSアプリおじさん」。買って贈るのもなんか全然オモロない気がしたんで、「ほじゃったら、もう、自分らでアプリ作ったらえぇじゃん。」とのことで、作ることに。デザイナーは、紙とペンさえあれば、どこでもなんでも生み出すことができるんですよ!

そんなこんなで、1ヶ月でアプリを爆速制作した秘話です。(結構、結構長いです。)

Day1: 5分でできたコンセプト
何あげようかな→ってかアプリ作る?→アプリコンテンツ浮かばない→貫井さんの顔をいじくりまわして変顔をつくって遊ぶアプリにしよう→アプリ名「ノブ笑い」: 貫井さんの顔の福笑いアプリ

ってことで、渋谷駅〜家着いて5分後にアプリコンセプトが降臨。ぶっちゃけ、アプリなにしよ?から5分くらいしか考えてない。絶対すぐ作れそうだし、オモロくなりそうだし、素材あるし、上手くいくのではと。貫井師匠卒業が公表された当日、2/24(火)の夜のことです。

当日同僚タッキーとのLINE会話。興奮して夜このコンセプトを送ったけども、その日はナチュラルスルーされてしまい私はシュン。。けど、翌日お昼過ぎに「はい、OK」と、やや淡白ながらも返事がきたので、まじで作ることに。

Day2: 24時間以内にチーム編成
1人ではできないので、貫井さんのアイコンを既に描いてた、いぬじーとiOSプログラマー、イレインにすぐ声をかけてみたら、やろうとのお返事。速攻、slackにシークレットチャンネルができました。このタイミングで、まだコンセプト発案から24時間も経ってない事実!!!ただ、貫井さんのアイコンやらをslackで送りあっていると、貫井さんにaiファイルを目撃されてしまい、危うくモロばれする危機に。もしかしたら、カンのいい貫井さんにこの時点でバレていたかもしれない。。できるだけバレないよう、「貫井さん」と発しない、貫井さんにまつわるワードをファイル名につけることを一切禁止にしました。名前を言ってはいけないあの人、「ヴォルデモート」のごとくあしらいました。

Day2: よく言われてる、高速プロトタイピングってやつ
それぞれのやるタスクを決め、私はワイヤーを描くことに。お風呂上りにベッドの上でノートと鉛筆を広げ、画面をスケッチ。スケッチを写メ。画面遷移のリンクを貼る。(ちなみに、私がいつもやってるお仕事がこれね。)

アイディアがカタチになり動き出すとなんか興奮してきて、そのままのテンションでデザインカンプも作ることに。夜のクリエイティビティとまらNight降臨。気づいたら夜中の3時でした。この時点でようやくアイディアから1日経過。これは、スガシカオが札幌に行く飛行機の中、たった1時間半で夜空ノムコウの歌詞を一気に書き上げたごとくのスピード感ですよ。

Day3: 第1回ランチ30分ミーティング
みんなそれぞれプロジェクトを抱えてるため、ランチでさっとミーティング。動くプロトを見せながら、プログラマーイレインに実装工数相談。すぐできそう、との良好なお返事。とにかくミニマムな実装を週末までにやることに。

Day4: 4日目で8割完成の兆し
仕事終わりの金曜日。ほぼやりたいことが含まれるいい感じのソースを発見。パーツを触ると動く。シェイクすると、パーツが散る。もはや8割方できたじゃん、と一同興奮。

Day5: 初の週末
私がラフを作る&タスク整理→タッキーがデザイン調整→いぬじーグラフィック制作→イレイン実装という、いい感じのフローでスムーズに開発進行。みんな休日にもかかわらず、楽しく爆速で制作。普段のデザインスキルが大集結!!!当初アイディアになかった、貫井さんBabyの絵も、5日目で完成を迎えました。

↑背景が渋すぎる、という理由で後に青色に変更されたデザイン

Day6: 【悲報】せっかくのプロトタイプのデータが削除完了のお知らせ

タッキーが新しく作ったプロジェクト名が以前と同じだったせいか、コンフリクトしたようです。せっかく夜な夜な作ったプロトタイプデータが、タッキーの手で削除される事態が発生!!「プロジェクト削除完了のお知らせ」って、悲報すぎる!なにこのお知らせ!!シュン、、としながらも、元データはあったので、画像をアップし、リンクを貼り、またいちから作り直すことに。そんなことでは、我々めげない。制作にはハプニングがつきものです。

Day7-10: 次々アウトプット出てくるよアプリのロゴやスプラッシュ画面、シェイクの文字など、いぬじーの高速workで次々とアウトプットが出来上がっていきました。みんなであーだーこーだいいながら、次々とクリエイティブをブラシュアップ。動きのインタラクションや英語ver.もつくろう!、とこの時点で盛り上がりました。

↓どんどんよくなっていくスプラッシュ画面

↓このおっさんをオモロくしてください、という謎の私の注文

Day11: UT-meでTシャツ発注
せっかく顔のアイコンを描いたから、親子で着てもらおうと、Tシャツも発注。UT-meアプリで素材をアップし、夜中の12時半に入稿。5分くらいでできました。Tシャツを1着から一瞬で作れるなんて、すごい世の中です。

Day12: 著作権侵害ではないかと、UT-meから疑われる
イラストのクオリティーが高すぎてどこかのキャラを勝手に使用していたと疑われたのか、「他者の権利を侵害するもの」に当てはまったのか、とにもかくにも、UT-meのガイドラインに引っかかったらしく、著作権侵害ではないのかと疑われ、翌日確認の連絡が来ました。ウケる。違う旨をきちんと申請し、無事発注に。

Day14: もうTシャツ届く
入稿して2、3日しかないのにTシャツが届きました。UT-me爆速!!

Day15: Tシャツを包む
無印へ行き、淡々とスタンプで装飾。Tシャツの用意ミッション終了。

 Day19-23 : もっともっとブラッシュアップ
実際に動き出すといろいろなところが見えてきて、サイズの調整や、インタラクションの動きを調整、触ったらどんな音が出るか検討。音は最後までなかなかまとまらず。

↓パーツが小さくて触りづらかったため、顔を当初より一回り大きく変更、顔デカイ。

Day24: 音のデザインを始める
もう時間があまりないなと思いつつ、音を入れないとシュールすぎるし、オモロさが5%くらいしか伝わらなかったので、何としてでも音を入れることに。とりあえず試しに、ボイスレコーダーアプリで「シュッ!シュッ!(シェイクの音ね)」など、1人虚しく色々喋ってみて録音。Garagebandでメロディーを作ってみたりもするも、微妙すぎたため却下。

↓♪おじさんおじさんノブおじさん、という謎のメロディーが録音された形跡

Day26: エンジェルkidsの声を録音 & 貫井家のイラストが完成
いろいろブレストして、やっぱり子供のゆるい声がいいね、ということで、会社の竹田さんkidsに喋ってもらい、録音することに。子供の声はまじエンジェル!!ボイスレコーダーで録ったけど、予想以上のいい感じの音に仕上がり感無量。涙。

残りの工数的にも間に合ったので、貫井さんの奥さんを隠れキャラとして登場させることに。いぬじーが爆速で1日で描きあげてくれました。似てる。

貫井家完成。

Day27: 音を編集
オール明けで死にそうになりながらも、気合を入れてオシャピーなcafeに行き、録音素材を編集。録音素材にkidsが発した「シュートドロキ!」っていう謎の人物の連呼があったけど、淡々と私、編集。子供の声は、正義。萌える。音をいい感じのところで切ったり、音量とか、音のお尻を調節し、どんどん素材ができていきました。

Day28 (残りDay4) : なんかバグがいっぱいでてくる
音をいれると、クオリティーが6割増くらいアップ!!!録音してよかった、本当によかった!!けど、なんかあと4日しかないのに、バグがちらほら出てきました。逆にオモロイ。

ここまで実装イレインががっつり夜な夜な頑張ってくれたんだけど、横で私たちの会話を聞いていたiOSエンジニアの石井さんが、がっつりヘルプしてくださることに!!神!

Day29 (残りDay3): 最後のブラッシュアップデー
音が入ったあたりから、結構本格的に遊べるように。けど細々詰めのタスクがあったので、遠隔で作業していた私たちはみんなで終結して、就業後最終ブラッシュアップすることに。貫井さんが社内をウロウロするので何度も危ういシーンがあったけど、無事隠し通しました。

一番工数をかけない予定だった、隠し画面、「制作メンバーから貫井さんへのメッセージ」。テキストをそのまま貼るだけの画面だったけど、石井さんが一瞬でガッツリインタラクションするコードを書いてくださり、メイン並みの画面に仕上がりに。みんなの愛が詰まったとてもハートフルな画面になりました。

↓工数低めの最初のデザイン(テキストをベタで貼っただけ)

↓超絶ブラッシュアップされたデザイン(画面をスワイプすると、人が切り替わってその人のメッセージがゆっくり読める仕様に。メッセージ内容は、貫井さんのみが見れるヒ・ミ・ツ)

Day32 (本番当日!): サプライズ決行!!
本番当日!メッセージページの調整に時間がかかり、できたのはギリギリ19:00!!キィーーー!!貫井さんさよならパーティの1時間前のことです。

ただ気を抜いてはならない。貫井さんのiphoneを奪い、勝手にアプリをインストールするという、最後の重大ミッションが。そこはタッキーにお任せし、「iPhoneちょっと貸して。」と、かなりストレートかつ強引に貫井さん携帯をget。

ほじゃ、インストールするよ!!!わくわく。

しかし、まさかの、wifiが飛んでいない事実!!!インストールできない!!Oh, NO!!!さよならパーティー会場の新しいオフィスにwifiがまだ飛んでおらず、うろたえる我々。

本社に戻り、wifiを拾ってインストールすることに。鍵が閉まってたから、出口で。なんかスパイ映画っぽい。今度はどうかね?

まじ、今度はdeploygateの謎のエラー。。インストールできない。。今インストールできないと、まじ今までが水の泡。。最後の最後まで波乱あるで!と思ってたら、ようやくインストール成功!!!うぉーーーー!涙!!!そして、勝手にめっちゃ目立つとこにアプリを配置。これなら、絶対わかるっしょ。

再びさよならパーティー会場へ戻る我々。

さぁさぁ、渡すよ!!

戻ってきた自分のiphoneを見て、異変に気付いた貫井さん。変なアプリが勝手にインストールされてるで!

ソフトウェアプレゼントされちゃったwと興奮 & めっちゃ爆笑する貫井さん。

Tシャツもプレゼント!親子で着てね。

泣かせることはできなかったけど、予想以上に喜んでもらえて、大・大・大・成功!!!!

1ヶ月くらい準備していたので、渡すとき自分らが泣いちゃうかも知れないと思ってたけど、ハプニングと無事ミッション遂行できるかの緊張で、そんな余裕はなく。


週末とか仕事の後とか、おそらく実質手を動かした時間は、トータルで1週間くらい。「アプリ作って贈りたいな」という5分くらいの妄想から、カタチになり、結果貫井さんにめっちゃ喜んでもらえたので、とてもとても嬉しい限りです。動き出せばカタチになる!!そして何より、チームみんなが楽しく制作できたのがよかったです。talentedな制作メンバーと、サポートしてくださった石井さんや竹田さんファミリーなど、協力してくださった人たちに感謝です。

「ノブ笑い」アプリはもう少しブラッシュアップした後(誰が遊んでくれるかは不明だけど)、iOSリリース予定なので、遊びたいとか、興味深い人はもう少しお待ちください。(ここまで書いておいて、アプリの全容がわからないっていうねw)音がカワイイから是非たくさんの人に遊んでもらいたいです。

アプリで作った変顔は、ここにアップされていきす。

http://nobwarai.tumblr.com


貫井さん、ありがとうございました。おつかれさまです。そして、これからもよろしくおねがいしゃす!

#日記 #デザイン #アプリ #アイディア #UI #プレゼント #制作

みなさまにSpiciiを発信し、届けるためにいろんなとこへ行ったり、ベルリンでサバイブする資金にいたします。