Shibajukuのクリスマスプロジェクトの一環として「クレーンゲーム プレゼント釣（ツ）リー」を制作しデザイン、イラストを担当したかっぱです。

このプロジェクトが始まってから３ヶ月間のこと、デザインのことについて忘れないうちに振り返りたいと思います。

便利グッズチームに加入

クリスマスプロジェクトが本格始動したのは8月末。私は当初どのチームにも所属していませんでした。仕事、家のこと（イヤイヤ期真っ只中の1歳児がいます）、自主制作など、やることが詰まっている状態。それでも、去年の夏まつりプロジェクトを近くで見ていて、チーム制作に憧れを抱いてたので、なにかしら参加させてもらえないだろうかと考えていました。

ただ、そこまでガッツリと制作ができるわけではないため

• ヘルプ程度で入れるところ
• 人がたりなければ入れてもらう感じで、たりていれば入らなくても大丈夫

というお話をして、デザインのヘルプとして便利グッズチームに加入することになりました。途中加入だったため、私がミーティングに参加できたのは9月の中頃。3回目の打ち合わせのときです。

もともと便利グッズチームとして集まり、ビンゴゲームをつくる予定だったのですが、皆さんのクリエイター魂が燃えあがり、話し合いの中でクレーンゲームを制作することになりました。

クレーンゲームをつくると決まったのは9月の中頃。クリスマスに公開予定なので、制作期間は3ヶ月ほどしかありません。夏まつりは半年ほどかけての公開でした。

果たしてこの制作期間でつくれるものなのでしょうか。「難しいしムリじゃない？」先生はきっとそう思われていたと思います。（クレーンゲームにすると言ったときの先生の声色がいつもと違い低かったので笑）

それでも私は、このチームにユイトさんがいらっしゃったので「できる」という確信がありました。未経験ではあるけど、そのポテンシャルは計り知れないと感じていたからです。

どんなクレーンゲームにするか

クレーンゲームといってもいろいろなタイプのものがあります。ノーマルタイプにするのか、引っ掛けて落とすものにするか。そんな中、kanaさんが釣りゲームと掛け合わせるというアイディアを出してくれました。

• 奥行きを出すのが難しそうなので、縦に並べて景品を釣り上げる
• 全体のテーマが「ほっこり」だったので、どうやってほっこり感を出すか
• ボタン操作
• 音楽
• ゲームのルール

どんな仕様にするか、いかにしてオリジナリティをだすかの話し合いで9月は終わりました。

ワイヤーフレーム作成

9月の下旬には「クリスマスツリーにプレゼントがついていて、それを釣り上げる」ということは決定していたので、できる部分からパーツをつくりはじめました。

イラストと並行してワイヤーも作成しました。使用したツールはFigmaです。

• トップ画面
• ゲーム説明画面
• ゲーム画面
• Finish画面

など、ボタンの押しやすさや操作性を考えながらつくるのが難しかったです。釣りゲームやクレーンゲームなど、いろいろなゲーム画面を参考に、どの位置にどのパーツがあるのかを調べておおよその配置を決めていきました。私はゲームセンターで働いていたことがあるので、そのときのことを思い出しながらアイディアをだしました。

ミーティングでは、Figmaで要素を追加しながら仕様を話し合いました。画面を一緒に見られるので「これがこうきてー、こう！」というようなあいまいな表現でも、配置してある要素を動かしながら説明ができたのでイメージがつきやすく、とてもやりやすかったです。

配置は、スマホでボタンの位置などを確認してもらいながら調整していきました。

クリスマスツリーと全体のテイスト

まずは必須となるクリスマスツリーから作成をはじめました。使用ツールはイラレです。最初は手書き風でいく予定だったのですが、しっくりこなかったので描き変えました。

結果として、ほかのチームと被らないほっこり感がだせてよかったのかなと思っています。最初に描いたツリーとと公開されたものを比較すると、ずいぶん雰囲気が違いますね。

キャラクターイラスト

しばサンタは、現在の先生に似せると「誰？」となりそうだったので、Twitterアイコンのイラストをベースに描きました。チャームポイントは目の下のクマです。何度もボカシやカーブを調整して時間をかけてていねいに描いた部分です。なんせ、チャームポイントですからね。

最後に登場する子どもたちは「しば子ちゃん」と「しばおくん」です。しばサンタの顔を流用しています。顔のパーツを下寄りにして女の子はまつ毛を付けて、目を大きくし、鼻を変えたくらいで、ほぼしばサンタです。目の下にチャームポイントのクマもあります。

アーム部分のサンタさんは、ぬいぐるみっぽいゲームにありそうなイラストにしました。トナカイは、子どものシルバニアファミリーの人形を参考に描きました。

表情やポーズはほぼ変えずに同じものを流用したので、もう少し時間があれば、表情なども変えてみたかったです。

ゲーム全体のデザイン

PC画面

PC画面の背景はクリスマスをイメージして緑にしました。ゲームのじゃまをしないようにできるだけシンプルに。そのかわり、星のマウスストーカーを実装してもらい、マウスを動かすことで背景が星空のキャンバスになります。星はすぐに消えてしまいますが、丸やハートなど、簡単な絵を夜空に描いてみてください。

スマホでゲームをすることを想定していたので、PC画面はSPを意識したつくりになっています。コーディングチームと話し合い、位置がズレにくいのでコーディングがしやすいということで、期限なども考慮してこの形になりました。

トップ画面

トップ画面はkanaさんが実装。ふんわりと光るオーナメントがかわいいですね。

ボタンのホバーアニメーションも考えてくださり、私の「かわいい感じで、流れ星を流したい」というザックリすぎるイメージをもとにデザインから考えてくださいました。流れ星がクルクルと回転しながら降っていきます。

ロゴについては後述します。

ゲーム説明画面

ゲーム説明画面は、文章を読まなくてもイラストで雰囲気が伝わるようにしました。私が文章を読まずにゲームを始めてしまうタイプなので……。

図解はパワーポイントのお仕事で作成させていただいており、この経験を活かしたいというのがありました。

プレイ中に「あれ？ このゲームどうやるんだ？」となってしまったときのために、ゲームの説明がモーダルで開くようになっています。

ゲーム画面

ここは、ユイトさんがいないと完成し得なかったところです！ 持ち前の責任感とハングリー精神でこの短期間でゲームの実装から、ひとつひとつ意味のあるアニメーションまでつけてくださいました。

ここで使用しているプレゼントボックスとプレゼントはPriusさん（@prius_hanco1）のイラストです。プレゼントは10種類あるので、ぜひコンプリートを目指してください。

ゲームがメインとなるため、まずこの画面からデザインを始めました。トップページの紹介文にも書いてあるイメージ、物語をつくって制作しました。

「サンタさんの町にある　秘密のクレーンゲーム」
サンタさんが住む町にあるプレゼントのなる木。今年も収穫のシーズンがきたようです。クリスマス当日だというのに、まだプレゼントが残っているみたい。慌てているサンタさんに「ちょっと手伝ってくれんかね？」と頼まれました。プレゼントを待っている子どもたちのために手伝ってもらえませんか？

クレーンのアーム部分はサンタさん。サンタさんがプレゼントを釣り上げています。レールをどうするかが最後まで決まらなかったのですが、kanaさんのアイディアで雪を積もらせることにしました。

しばサンタがプレゼントをキャッチしたり、取れなかったらひょっこりと顔を出したり、取れても取れなくてもほっこりするようなアイディアをユイトさんが考えてくださいました。ボタンも操作がわかりやすいようにと、押すボタンが光るように工夫をしてくれています。

背景は時間によって変化します。変更したのは背景の空の色と家の色と屋根に積もった雪です。昼と夜の雰囲気の違いも楽しんでみてくださいね。

ゲーム終了画面

ゲーム終了画面は、完成したのが12月に入ってからでした。ツリーの飾り付けやツリーの下にあるプレゼントの配置など、Priusさんにお手伝いをいただきました。

しば子ちゃんとしばおくんがプレゼントを持っていて、もくもく〜っと取れたプレゼントの中身が表示されます。初めは、もっと簡素なものだったのですが、はまたろうさんのアイディアで最後にほっこりできる演出が加わりました。

MerryChristmasの文字のアニメーションもかわいいですよね。ここは私がグラデーションにしてしまったことでとても苦労されていました。「時間もないから単色でOKです！」と言ったのですが、しっかりとグラデーションで表現していただきました。

最後にモーダルウィンドウが開くので、よければゲームの感想などツイートお願いします！！

ゲームロゴ

ゲームのロゴは一番最後まで決まりませんでした。

「ロゴつくりますね〜」と軽く言ったものの、ロゴ制作は今まで逃げてきたのでできません。ほかの誰かにお願いしようかとも思ったのですが、これも経験！ とチャレンジしてみることにしました。

やはり、文字組みがヘタすぎてなかなかどうするかが決まりませんでした。フォントは「わんぱくルイカ」をベースに角に丸みをつけたり、線の長さを変えたりして調整しました。

ユニークポイントである「プレゼントを釣る」という部分をロゴにも取り入れてみましたが、少し無理矢理感があったかもしれません。

ほっこり感を演出したかったので、リースの中からサンタさんとトナカイがポンッと飛び出しているイメージを付け加えました。本当はこの部分に飛び出すアニメーションをつけたかったのですが、技術がたりず、kanaさんに実装で全体に動きのあるアニメーションをつけていただきました。

ロゴは前日まで悩みました。文字部分を3Dにしてみました。すべてイラレです。結局、ここだけ3Dは変かなと思い、背景に合わせてグラデーションがかかった文字に決定しました。

フォントが苦手すぎて、一番力を入れて勉強している部分でもあるので、もう少しキレイな文字組み、文字のつくりができるようになりたいです。

コーディングチームに感謝

• ユイトさん（@yuito_miki）
• はまたろうさん（@Hamacamp5）
• kanaさん（@friy04）

この3名がいてくれたからこそ、この短期間で公開に至ることができました。本当にありがとうございます。

チームリーダーのユイトさん

未経験とは思えないほどのスキルレベル。私がふわっと「こういう動きしたいんだけど〜」というと、すぐに「これですね！」と何案か提示してくれるスピード感。ゲーム画面やローディング画面などのアニメーションもすべて考えてくれて、とても素敵な動きがつきました。

エラーやほかのメンバーが困っている部分も一瞬で解決。「ユイトさんがいれば実装は大丈夫！」 という私のふわっとした勘は大あたりでした！

そして、時には無理をしすぎて心配になってしまうくらい責任感が強く、このチームを引っ張ってくれました。物腰もとてもやわらかく、チームの雰囲気をつくってくださいました。

はまたろうさん

コーディングチームの中で唯一の実務経験者。はまたろうさんが実装する部分のPC版のデザインをつくり忘れていたり、パーツを用意していなかったり、ひどいデザインデータだったのですが、経験者のよしな力で見事にカバーしていただきました。

デザインもできる方なので、デザインが間に合わない部分を「ちょっといい感じに配置しておいてもらえますか〜」という私の適当すぎる指示でチャチャっとコーディングしながらやっていただき、デザイン面でも助けられました。

そして、家庭を大事にするよきパパです。

kanaさん

とっても頑張り屋さんのkanaさん。実装で使うPugやGit、webpackなど、このチームで使用すると決まってから猛勉強。レベルが高すぎて心配していたのですが、この短期間でしっかりと身につけていて驚きました。

とても明るくチームのムードメーカーで、たくさん笑わせていただきました。そして、アイディアマン！ クレーンゲームになったのもkanaさんの発案です。デザインが決まらず詰まっていたときも、kanaさんのアイディアで前に進むことができました。

kanaさんがいるだけで、その場がパァ〜ッと明るくなるような不思議な魅力を持った方です。

反省点

コーディングチームの皆さんは、新しいことにどんどん挑戦し、スキルが格段に上がっているのに対し、私は今できるもので表現しただけになってしまいました。

本当はアニメーションをつけたり、もっとデザインに手をかけたかったと悔しい思いがあります。当初の予定よりも規模が大きくなったこと、もともとヘルプとして入っていたのが、イラストからデザインまで1人ですることになってしまい、新しい技術を身につける余裕がありませんでした。

10月〜11月中頃まではハードスケジュールすぎて、記憶がほぼありません。Priusさんにヘルプで入っていただいたおかげで、正気を取り戻しました（笑）。

デザインカンプも未完成のまま実装に入っていただくことになり、コーディングしづらかったと思います。アニメーションもほぼ指定しておらず、コーディングチームの3人が考えて実装してくださいました。

今回の製作を反省点として、もっとコーディングのしやすいデータづくりをしていきたいと思いました。

まとめと来年の抱負

この3ヶ月、正直にいうと楽しいだけでなく、辛いと感じることもありました。でも、結果として今のチームメンバーと一緒に制作ができたことは、この仕事をする上での宝となりました。本当に、終わってしまったのが寂しいです。

最終的に「やってよかった！」「楽しかった！」と思える制作ができてよかったです。

そして、来年はストップしていた自主制作を進めつつ、アニメーションやイラストなどの新しい技術を身につけていきたいです。

長くなりましたが、最後まで読んでいただきありがとうございました！