カメレオンデイズ

読者です 読者をやめる 読者になる 読者になる

カメレオンデイズ

7色の顔を持つdoubleMの「非」日常✦ 今日は何して遊ぼっか?

【緊急!! ハッカソン】アプリは3日で出来るのか!?

ハッカソン 最高の遊び シェアハウス お知らせ

f:id:doubleM:20161002010715p:plain

先日facebookを眺めていたら、こんなお知らせが届いていました。

f:id:doubleM:20161002005829p:plain

日々愉快な出来事が起こりすぎて、私の脳内ではすっかり過去の記憶となっていますが、昨年の夏、シェアハウスに住む友人プログラマと共に口約束でチーム暖色』というクリエイティブチームを結成しました。その勢いで、LINEスタンプ合宿を決行し、幾つかのスタンプをリリースしたのでした。

※くわしくはこちらで↓
【チーム暖色のLINEスタンプ】 3種類同時【リリース!!】 - カメレオンデイズ

イラストの苦手なデザイナーと、イラレに初挑戦のプログラマー。後ろから私の作業を覗き込んでは「今のはどのコマンドでやるんだ?」とか「書き出し方のルールは…」なんて茶々が入りながらの作業…。最初は楽しかったけど…寝かしてくれなくて辛かったなぁ。。(遠い目)

そんな彼らは、今ではイラレを駆使してこーーーーんなアニメーション満載のキャラモノ学習アプリをリリースするまでに成長しております。※何度も言いますが、彼らはプログラマです。

企画からデザインから実装から、マーケティングまで自分たちでこなすなんて流石ですねぇ。

さて、そんな彼らとのスタンプソン1周年を記念して、この度「チーム暖色」は
緊急ハッカソンを執り行う運びとなりました。

カジュアルゲームアプリは3日で出来るのか!?
さぁ、新たなるチャレンジの幕開けです…!!!



余裕をかまし過ぎた1日目

達成目標の決定

このハッカソンが始まった理由…それは、昨年のLINEスタンプソンまで遡ります。1年前LINEスタンプを作った際に立てた目標は「LINEスタンプの収益で、3人でうなぎを食べに行くこと」でした。残念なことに、1年経った今でも目標は達成ならず…。必要な金額の半分まではどうにか集まったが、残りの半分を稼ぐには…ということで、LINEスタンプ売り伸ばしの施策として今回のアプリ制作が始まりました。

キャラクターを使おう!

せっかくなので、去年作ったスタンプの中でも愛嬌たっぷりの『生意気ひよこのぴよきち』を活かしたアプリを作ろう、ということで合意。
store.line.me

テーマ決定

今回制作したアプリはあの世界的大人気アプリ『Threes』リスペクトのゲーム!

Threes!

Threes!

  • Sirvo LLC
  • ゲーム
  • ¥360

パネルを組み合わせて大きな数字を作っていく仕組みはそのままに、「甥っ子から彼女まで」がカジュアルに楽しめるゲームを作ることにしました。

ターゲット設定

ターゲットは明確な方がいいよね。ということで…私のかわいい「甥っ子3歳(Sくん)」から仲良し大人レディ「雪乃ちゃん36歳(仮名)」までをメインターゲットにすることに決定!

言葉を話すようになってきた3歳の男の子Sくんと、大人になってもお風呂でのひよこ遊びが大好きな雪乃ちゃん…このターゲット設定が、果たして狭いのか、広いのか…答えは未だに明らかになっていません。

デザイン開始

とにもかくにもUI設計が必要…ということで、口頭で基本仕様を確認した後は、メインとなるプレイ画面から早速デザインに入っていきます。

デザイン画角ベース

デザインの画角はiPhone5S(640px ✕ 1136px)を基準に作成しています。

使用言語はswift

これは、メインプログラマを務める人物が興味本位で勉強がてら手を出すことに決定しました。
途中、swift2と3のマージ部分で若干苦労していたようです。事前にversionを合わせるの大事!笑

仕事帰りなのに眠らせてもらえない2日目

メンバー2/3人は仕事に向かいました。
プレイ画面のレイアウトサイズや分担は既に済んでいたので、各自空き時間に作業を進めます。帰宅後は淡々と画面デザインを進めていきます。アニメーションで散々お絵描きしたのに疲れて、「もうお絵描きなんてしたくないよぉーーーーーー!!!」とグズる私を見かねてアニメーション(実装)担当のフィジーが助っ人になってくれることに。

フィジー(※彼はプログラマです)「aiデータ頂戴。間のコマ埋めるくらいならやるから。。」

f:id:doubleM:20161002015101p:plain

プログラマに甘やかされるデザイナーdoubleM。

アニメーションから順次実装開始。

仕事から帰宅し、ワクワクしながらaiを開くと…コマも増えてるし、新しいキャラクターアニメーションも追加されてる✦ データに微調整を施した後、パーツ出し。
それを元に、黒髪メガネのフィジーがアニメーション制作に取り組みます。

画面総数も見えてきました。

一方、プレイ画面以外の各種画面UIも完成してきました。

f:id:doubleM:20161002013941j:plain

今回のアプリのメイン構成(※当初)は下記5画面。

  1. トップ画面
  2. プレイ画面
  3. クリア画面
  4. フェイルド画面
  5. アルバム&アルバム詳細画面

後に、Twitter投稿画面やチュートリアル用パーツ、その他メニュー用モーダルなど、色々と追加はあるのですが、まぁひとまずメインはそんな感じ。

飲み会に突入した3日目

上に上げたほぼ全画面のデザイン構成が完成し、parts出しに入ります。
「1度までなら変更してもええで」というお許しを頂いたので、画面遷移の関係上、プレイ画面のパネルサイズは変更させていただきました。レイアウト実装後なのにゴメンよナンスケ!

アニメーション実装をしているフィジーにもバシバシパーツを送りつけます。

修正しては出し、修正しては出し…

「このアニメーション、コマが飛んで見えるから2コマ目と4コマ目増やして!」「OK!」
「このパーツ、奇数や」「ゴメン!矩形切り忘れてた!」
「このイラスト、背景とヒヨコバラバラで出してみて」「りょ!」
「このパーツ、英語版も出しといてー」「翻訳めんどくさいよぉー!!」
とかなんとか言いながら、涙目のパーツ出し。

だがしかし、幾つもの戦場を乗り越えてきたdoubleMには伝家の宝刀があるのです!
それが…Slicy!!!
AdobeCCになってからというもの…Photoshopからの書き出しもだいぶ楽にはなったのですが、アップデートごとにちょこちょこ(アートボードが透明にならなかったりグループ解除するとサイズが変わったりする謎の)仕様変更が入ることを考えると、やっぱり安定してていいです、Slicy。

→ 私のSlicy愛について、詳しくはこちらの記事にまとめています。

そうこうするうちに夜に…。仕事帰りの仲良したちが続々集まり「何やってるのー?」「もう完成したー?」「これ食べるー?」「お酒飲むー?」と大所帯に。
片手間に会話と食事とアルコールを楽しむ間も、時計の針はガシガシ進みます。

もう、お気づきでしょうか?そうなんです。結果、このアプリは3日では完成しませんでした。

完成まで、あと2日。

微調整に追われる4日目

だいぶいい感じに形になってきました。
これまでの間に、わらわらと集まってきた友人たちを対象に、テストプレイも完了しています。幸運なことに、友人たちが想像以上にこのゲームにハマってくれたこと、そして中には(本ハッカソンに関わっていない)プログラマ(※テスト方法が超絶意地悪w)がいたこと、が功を奏して、かなりのレアケースも含めたバグ発見に繋がりました。

微調整フェーズ

4日目にはバグfix含め、細かな画像の揺れやアニメーション調整を行ないます。
このあたり(プログラマ&デザイナーからすると許しがたい挙動を調整するフェーズ)になると、いわゆる「一般の人」にはどこが変わったかわからない、という言われるようになってきます。常日頃、基本的には「完成品」にしか接することがないユーザにとっては、「0が+になれば気になるが、-が0になっても気づかない」という状態なのでしょう。
若干の寂しさを覚えつつ、とはいえこのチューニングによって確実にユーザにとってのマイナストレスは軽減されているものと信じて、先にすすみます。

多言語対応

この辺りから、多言語対応もスタートしました。画像内テキストを翻訳して、パーツ出しを永遠と。
いや……私、、、、英語は話せるけど、文法は苦手なんだってば!!!

翻訳に苦しむ5日目

プロモーションパーツを作成する傍ら、今後、英語版だけでなく中国語版なども展開することを見越してcsvデータを作り始めるdoubleM。
これも英語にしなきゃ…あーコレもか……なんていう、「気付きたくないのに気付いてしまう地獄」の時間の到来です。

Twitter投稿機能実装

自分たちもゲームにハマっているチーム暖色メンバー。

「これ、なかなかLv7たどり着けないバグがあるよー!!!!٩(๑`^´๑)۶」
「それはバグやない!ただの実力やっ!(-_-;)」

みたいなアホな会話を繰り広げながらも粛々とリリース準備を整える中、またまたdoubleMが 余計な いいことを思いつきました。

「これさぁ、めっちゃ惜しいとこまで行ったときに、こーんなに惜しかったのに!!っていうのをTweetできたほうが良いんじゃない?ただ単純にLv●に到達!とかだけつぶやいてもさぁ…」
「えーじゃあ最終画面のスクショを投稿できる仕様にする?」
「うんうん、それいいじゃん。やろう!!」

そんな感じで、サラッと仕様追加になりました。

「んじゃついでにTwitter投稿したら3日間広告非表示にしよう!」
「え。そんなこと出来るの!?」
「誰やと思ってんねん。そのかわり広告非表示版のUI考えといてなー?」
「…い、いいよ!」
こうして、無駄に高機能なTwitter投稿の仕様が追加されたのです。

最後の難関、利用規約の英語化

着々と申請準備に取り掛かる中、突如としてナンスケから利用規約を載せなければいけない事実を突きつけられるdoubleM。

多言語対応にあたって、パーツはどうにか英語にしましたよ?ええ、カンタンな文言部分は泣きながら、どうにかしました。辛かったぴよアルバムの翻訳は、帰国子女の友人を拝み倒してご協力いただきました。

でも…でも!!!!!!

利用規約…これは流石にサラッと人に頼めねーだろ!!!!

ということで、今回は泣く泣く自力で頑張りました。
基本的な簡易変換はgoogle翻訳に頼りつつ、でも時々あまりにもヤバイ英語になっているときは修正をする、というスタイルで。

ただし自覚があるくらいのクソ英語なので、近日ココナラなどでどなたかにきちんとした翻訳をお願いしようと思っています。

そんなこんなでついに来ました!リリース日✦
ババーーーーーン!!!

f:id:doubleM:20161002122444p:plain

これまでのDL数はなんと……
3日で68件!!!!!!





あれ…?す…く、ない。。。。。


果たしてこのアプリリリースは「うなぎ」につながるのか…?
今後のレポートにご期待下さい!!

シェアハウスの宣伝!

シェアハウスにご興味をお持ちの方は、こちらから情報をチェック✦入居時に登録をすると、オトクな割引が受けられますよ♪

ハッカソンって参加したことある?