Figma経験2ヵ月の学生がハッカソンに挑戦(チームB)

こんにちは、デザインコース所属、かどたあやと(Slack:AyatoKadota_design)です。1年生で初めてのハッカソンに参加し、4日間でチームの仲間とおばけゲームを作りました。

参加したハッカソン

2021年8月30日~9月2日の4日間、Shinonome株式会社の大学生コミュニティ「Playground」内でチームを作って競い合うハッカソンに参加しました。

テーマ

テーマは「夏」でした。
夏から連想されるものをチームで作りました。

今回作ったもの

おばけゲーム「Ghost ground」を作りました。
なぜ、おばけがコンセプトになったかというと、ハッカソンのテーマ「夏」から肝試しを連想したからです。

  • スタート

  • ゲーム説明

  • 設定

  • プレイ

  • クリア

  • ゲームオーバー

使用した技術

PixiJS、HTML、CSS です。Github pagesで公開してます。
デザイン担当の私は Figma のみに専念してました。

体験

  • アイデアだし
    テーマ「夏」から、マインドマップ形式でアイデアを出し合いました。先輩がFigjamでマインドマップを共有してくれました。チームの行く末を決める大事な第一ステップでした。マインドマップ形式は、つながりを考えていくもので、メンバーお互いがアイデアに乗っかっていくことになり、否定的な側面が少なく、アイデア出しにはうってつけでした。ここで、先輩の心遣いを感じました。

  • イメージ共有
    作業を進めていくと、初めのアイデア出しでは共有しきれなかった部分が出てきます。コンセプトが曖昧なときは、必ずメンバーで集まって相談し共有すべきだとわかりました。なぜなら、一人が違うイメージで物事を進めていくと、後々ロスが生じるからです。例えば、私が一人でゲーム画面のデザインを試しに作っていた時です。これで合っているだろうと思った画像を選び、背景にしました。次にその背景に合ったボタンを考えました。しかし、後に、メンバーに見てもらった時、そのデザインが尖りすぎていることがわかりました。だから、これからは、もっと相談してから作業段階に進もうと胸に誓いました!

  • 素材どこ?
    デザインを描くことはないので、どこからか画像・イラストを探しに行くことになります。このときに、探すという工程のむずかしさにぶつかりました。まず、どのサイトで探し、どのワードで検索するかの器用さが試されるからです。おばけには、怖さの段階があります。チームでイメージした怖さに一致して、かつ、ほかの無駄な要素のないイラストとなると、想像以上に見つかりません。素材の引き出しをどれだけもっているかが、短期間での開発には重要だと感じました。

  • バリアント化の必要性
    デザインに使うパーツを整理するとき、バリアント機能が大きな力を発揮することを知りました。パーツのジャンルが頭の中で整理できていると、バリアント機能を上手く使うことができ、マウスだけでパーツを簡単にすばやく変更することが可能になります。パーツが散らばっていると、デザインにゆとりをもてなくなります。Figmaをもっとすばやく的確に操作するには、もっとFigmaに時間を費やさねば…と思いました。

まとめ

初めてハッカソンに参加しましたが、知らないことにぶち当たることが多い分、自分の可能性を広げるための絶好の機会となりました。途中で、遠回りしてしまうことも多々ありました。近道をたどろうとする意識を心がけねばと思いました。時間を忘れるぐらい一生懸命にハッカソンに取り組めて、とても楽しかったです。