みなさんこんにちは、RUNTEQです！
2023年2月11日（土）、第3回目となるプログラミングスクールRUNTEQ主催のWebアプリバトルイベント「BATTLE OF RUNTEQ」が開催されました。
BATTLE OF RUNTEQ -バトラン- vol.1 レポート
BATTLE OF RUNTEQ -バトラン- vol.2 レポート
もぜひご覧ください！
今回もたくさんの応募の中から予選審査を勝ち抜いた6作品が技術力やアイデアを競い合い、見事最優秀賞に稲井さん制作の「TechFinder」が輝きました！！
本記事では、イベント概要・出場作品のご説明と共に当日の熱い戦いの様子を改めて皆さんと一緒に振り返ります♪
＼動画で当日の様子を観戦することができます！／
「BATTLE OF RUNTEQ」とは？
「BATTLE OF RUNTEQ」（バトルオブランテック）とは、プログラミングスクールRUNTEQ内の予選を勝ち抜いた受講生・卒業生が作成したWebアプリ（ポートフォリオ）を発表し、その優劣を競い合うバトルイベントです。
RUNTEQでは未経験エンジニアの就職活動に必須となるポートフォリオ制作のサポートに力を入れています。
今回でBATTLE OF RUNTEQは第3回大会を迎えました。第一回大会から引き続き、BATTLE OF RUNTEQは「プログラミングスクールの常識を変える！」というテーマを掲げております。スクール生の皆さんが本気で制作したレベルの高いWebアプリを評価していただくことで、エンジニア業界発展の後押しとなるイベントを目指しています。
審査員の方々のご紹介
ご多忙の中、審査にご参加いただきました審査員の皆様のご紹介に移ります。
本イベントでは、Web界隈に精通しYouTubeでもご活躍されている方々をお招きし、各作品をビジネスとエンジニアリングの両方の視点から評価、さらにはマーケティング力やユーザーの実績などを含めた多角的な審査をしていただきました。
そんな豪華な3名の審査員の方々をご紹介いたします。
– 「エンジニアチャンネル」株式会社エンジニアチャンネル 代表 小川亮様
– 「エンジニア転職チャンネル」株式会社スタートアップテクノロジー CTO 菊本久寿
皆様お忙しいところご参加いただきまして誠にありがとうございました！
審査基準と賞、賞品
本イベントで授与されるのは、最優秀賞、3つの部門賞、オーディエンス賞、優秀賞です！
参加者は持ち時間5分半という短い時間で発表を行い、その内容を元に 「技術力」「アイディア」「サービスクオリティ」という3つの審査基準で評価されます。
優秀賞は予選を勝ち抜いた6名の本戦出場者に授与されます。
3つの部門賞（技術力賞・アイディア賞・サービスクオリティ賞）は、審査員の皆様に、各部門10点満点で投票をいただき、最優秀賞以外の作品の中で一番高い点数の作品に授与されます。
そして最優秀賞は、審査員の投票した得点全ての合計点数が最高点の作品に授与されます。
オーディエンス賞は、全ての出場者の発表が終わった後、オーディエンスの方々に投票いただき、一番多くの票を獲得した方に授与されます！
また、各賞を受賞した方には、以下の豪華な景品も贈られます！
「最優秀賞」：HKKB無刻印モデル
「技術力賞」：Open comm骨伝導イヤホン
「アイディア賞」：なりきりひさじゅセット（リングライト・Webカメラ・卓上スタンド）
「サービスクオリティ賞」：外部モニター
「オーディエンス賞」：Amazonギフト5000円分
「優秀賞」：RUNTEQ校長ひさじゅセレクト書籍『情熱プログラマー ソフトウェア開発者の幸せな生き方』
出場者のうち、一体誰が各賞を受賞したのでしょうか？
出場者による作品紹介ピッチ
今回はファイナリスト6名へ事前インタビューを行いました！日々の学習の様子や今回のバトランへの熱い思いを語っています。そんな素敵なインタビュー動画も一緒にご紹介します！
1. 宮城 沙織さん『mirume | パーソナルカラー色識別クイズアプリ』
↓動画を再生すると宮城さんの発表箇所から始まります↓
宮城さんはなんと今回、緊急開催されたRUNTEQ内での敗者復活戦を勝ち抜き、最後のファイナリストの座を勝ち取った方です！敗者復活戦の案内を聞いたときは「まさか！？」と非常にびっくりされたそうです。
美容部員としてのご経歴をお持ちの宮城さん。ここ数年若い女性を中心に「パーソナルカラー」「パーソナルカラー診断」の需要が高まっているそうです。
自分に合う色を見つけることができるのはとても魅力的ですよね。しかし、自分のパーソナルカラーのタイプを知ることはできても、いざ商品を選ぶ際に色を見分けることはとても難しく、実生活に活かせていないというユーザーの課題に気づきました。
色識別を学べるようなツールも現在は少ないようです。
そこでパーソナルカラーの色識別クイズアプリ「mirume | パーソナルカラー色識別クイズアプリ」を制作しました。
メイン機能は全128色からランダムに出題される「クイズ機能」、間違えた問題を自動抽出してくれる「復習機能」、出題される色を確認できる「色一覧機能」、さらには間違えやすい色をランキング形式で確認することもできます！
リリース後、実際にアプリを使ったユーザーからは「楽しい！でも難しい…」という声をたくさんいただいたそう。
そこで宮城さんはこれまで4択だったクイズに2択形式を追加し、クイズの難易度を下げる改善を実施しました。
さらに特定のカテゴリの色だけ繰り返し解きたいというユーザーの要望にも、カテゴリの絞り込み機能を追加することで応えています！
アプリのこだわりポイントも紹介しています。
Ajaxにより1問解くごとにすぐに答えを表示することで無駄な画面遷移やクリックの回数を減らしユーザビリティを高めたり、採点結果や総クリア数をTwitterでシェアできるようにしゲームのように楽しめたりと、宮城さんのユーザーファースト思考が伝わってきます！
実際に多くの方がTwitterシェア機能を用いてクイズ結果を共有していました。また宮城さん自身もクイズを配信するなど拡散活動に努めており、リリースから1ヶ月でPV数は4837、UU数は497を記録しています！
発表後、審査員のセイト先生様からは「ゲストログイン機能」の存在についてお褒めの言葉をいただきました。
これに対し宮城さんは「アカウント登録はユーザーにとってハードルが高いと考え、それまでに一度サービス経験ができるといいと思った」とお話しされており、ユーザーへの気配りが伺えました。
宮城さん発表お疲れ様でした！
2. 浦部 貴資さん『にくきゅう診断』
（サービスへ ）
↓動画を再生すると宮城さんの発表箇所から始まります↓
浦部さんはエンジニア転職に関して、ご年齢の不安を抱えながらもRUNTEQのキャリア相談会に参加。ご自身の努力とエネルギーを信じてエンジニアの世界へ飛び込むチャレンジを決めたそうです！
浦部さんは愛犬と遊ぶことが趣味ということで、同じように犬や猫を飼われいる皆さんに使って欲しいアプリを開発しました。
その名も「にくきゅう診断」！肉球の写真からペットの性格を診断し、その結果を用いて世界に一つだけのプロフィールカードを作ることができます。
飼い主さんが楽しみながら自然と愛着が増し、今よりもさらにワンちゃんネコちゃんが可愛がってもらえるサービスを作りたいという浦部さんの愛が伝わってきます。
メイン機能はペットの気持ちを考えるきっかけを与えられる性格診断とプロフィールカード作り。
実際にアプリを動かしながら説明が進みます。お名前を記入し肉球の画像をアップロードすると診断結果が出てきます。結果はSNSシェアが可能で、ユーザーからは「性格診断が当たってる！」という声が数多く届きました。
プロフィールカードは好きなおやつや好きなおもちゃなどの情報、また18種類ある背景の中から好きなものを選ぶことで作成できます。背景を選び直して繰り返し作成することも可能です。その後ユーザー登録をすると、作成したカードとユーザー情報が紐づきます。
アプリを試してからユーザー登録できるのは嬉しいですね！！
またこのアプリでは継続してアプリを楽しんでもらえるよう季節やイベントごとに期間限定カードを用意しています！
アプリを開発する上で一番工夫した点は、性格診断で使う画像識別のためのモデルを1から作成したことだそう。
サンプルデータを500個も集め、ユーザーがアップロードするであろう画質の悪い画像や背景が多く入ってしまっているものも採用し診断の精度を上げています！
ペットの肉球の写真を撮るのは確かに大変ですよね…実際に使う方のことがとても考えられているサービスです！
ユーザーからのフィードバックをもとに、LINEシェア機能を実装したり、使う前からイメージが湧くようにトップページに使い方を追加したりとアプリの改善にも取り組んでいます。
またこれまで4枚のカードを作成していたところを欲しいカード1枚のみを作成することでレスポンスの高速化も実現しています。
わんちゃんねこちゃんがさらに可愛がってもらえる世界にこのアプリが貢献できたら幸いですという愛溢れる浦部さんのお言葉で発表は終了しました。
審査員の小川様からは「肉球の診断とプロフィールカード作成のつながり」についてアドバイスをいただき、診断機能とカード作成機能を繰り返し使ってもらえるようなサービス改善のご提案もありました！
浦部さんはアプリ開発時にうまくいかなかった肉球を手形を押すようにカードに表示する実装についても再チャレンジしたいと話していました。
浦部さん発表お疲れ様でした！
3. しゅとーさん『三つ星トイレ』
突然ですが、外出中にトイレを使う時「汚かったらどうしよう…」と心配になることはないでしょうか？ そんなお悩みを解決してくれるのが「三つ星トイレ」です。
「三つ星トイレ」は日本各地の設備豊富なトイレを検索、閲覧、投稿・評価することができるアプリ。
しゅとーさんご自身の「出先でトイレを使う時の不安を解消したい」という悩みから開発されました。
アプリを利用できるのはユーザー登録者のみ。スポットのデータはユーザーからの投稿に基づいているので、リアルな情報を知ることができます。
トイレ検索アプリはこれまでも多くあったものの、「本当に綺麗かどうかわかりづらい」という課題がありました。
「三つ星トイレ」は綺麗なトイレから厳選して探せるので、ユーザーの悩みを大きく解決することができます。
スポット情報の評価も可能なので、トイレの綺麗さが明確になるのも特徴。評価項目には「ホテルみたい！」「リラックスできる」「マキシ丈の服でも安心」など女性ならではの視点が反映されています。
さらに詳細情報から写真や情報をチェックすることもOK。トイレの雰囲気を事前にしっかり把握できます。
またリスト検索も可能。「授乳室」「おむつ交換台」「ベビーチェア」など用途に合わせて探せるので、子育て中のママには心強い味方ですね！
今いる場所の近くのトイレを探したい時は、マップ画面を閲覧すれば一目瞭然。位置情報からはもちろん、周辺施設名から検索することもできます。
おでかけ中の利便性を追求すべく、スマホファーストのデザインにしたのがこだわり。Map表示にはGoogle Maps API、登録時の地点登録にはGeocoding API、ログインにはTwitterAPIを導入しました。
運用実績については、8595PV、285UU、スポット数100件という状況です。
今後はユーザーにさらに便利に使っていただくために、性別ごとの設備情報やこだわり一括検索など、検索項目の強化を計画しています。
条件を細かく検索できれば、より多くのユーザーに喜ばれそうですね！
しゅとーさん発表お疲れ様でした！
4. 志田 有希さん『夢絵日記』
（「夢絵日記」は、夢を絵日記にできる夢の画像生成アプリ。
「楽しくて目覚めたくなかった…」「どうしても忘れられない」といった夢を絵として表現できるサービスです。
夢絵日記の作り方はとっても簡単。項目にタイトルや夢の内容、見た日、キーワードなどを入力していきます。夢の印象と睡眠の種類は検索タブからセレクト。
「絵を生成してみる」ボタンを押すと画像が出力！入力した内容が一枚の画像としてプレビューされます。こちらでよければ作成に進みます。
公開フラグをつければ、夢絵日記を公開したり、他の人の日記を見ることもできます。ログイン状態であればいいね、お気に入り登録、コメント、Twitterシェアも可能です。
楽しかった夢を友達に話してもいまいち内容は伝わらないもの。そんな時、絵日記を作って見せれば、理解してもらいやすくなるでしょう。新しいコミュニケーションのツールの一つになりそうです！
使用した技術はこちら。アイデアに優れている上、ハイレベルな技術が使われているのも特筆すべきところです。
「絵日記＝縦書き」とイメージしたという志田さん。文字は縦書きにしたのもこだわった点です。さらに伸ばし棒を90度回転させたり、句読点の位置を右上にずらしたりと細かい配慮を行いました。
今後、考えている改変は大きく2つ。まず画像生成APIの変更。現在使用しているJapanese stable diffusionは固有名詞の反応が良いとは言えませんでした。そこで改良が繰り返されているinspinityへの変更を検討中とのことです。
もう1つは絵日記の素材画像の追加です。現在、良い夢、悪夢、明晰夢を設定していますが、日記そのものの見た目は同じでした。今後は夢のイメージに合う素材を選んで、日記を作成できるようなコンテンツを計画しています。
ぜひ皆さんも夢絵日記を作って、夢の輪を広げてみませんか？
志田さん発表お疲れ様でした！
5. 稲井 友亮さん『TechFinder』
個人開発で詰まった時、ネットの技術記事を参考にする人は多いでしょう。一方で「媒体が多すぎて検索しづらい！」と感じたことは一度や二度ではないかもしれません。
そんな悩みを解消したのが個人開発者のための技術記事データベース「TechFinder」です。
「TechFinder」の特徴は各サイトの記事を抽出して一元化していること。これにより知りたい情報を効率よく検索することができます。
メイン機能は大きく２つ。カテゴリの絞り込み機能では、アイコンをタップすることで関連する技術記事が一覧で表示されます。
ブックマーク機能はログインユーザーのみが利用可能。記事下にあるボタンをクリックすることで、いいねやコメント、ブックマークすることができます。
工夫した点は３つ。１つ目はUI/UXをシンプルなレイアウトに徹底したこと。必要最低限の機能を実装することで、直感的にわかりやすい操作が可能となりました。
またSPAの採用により、関連カテゴリをタップし続けてもサクサク記事を閲覧することができます。
2つ目はパフォーマンスです。API側から取得したデータをキャッシュすることで、初回マウントのみのデータを取得。無駄なデータ取得を減らしました。
さらにBetter UX by Stale While Revalidateを採用することで、古いレスポンスデータを表示。ユーザー体験の向上を狙います。
3つ目は設計です。リリースまで日数が限られていたため、設計段階で工夫を重ねました。
ログイン機能はFirebaseを用いたGoogleログインのみで実装。ユーザー登録時の手間が省けるため、簡単に実装することができました。
使用技術とインフラ構成はこの通り。ポイントはHusky＆lint-stagedを用いたこと。取り込み時にリントとフォーマットを走らせ、バグが生じにくいコードを生成しました。
利用状況も上々。UUは303、PVは約1万、告知ツイートのインプレッションは15519を達成しました。利用状況は日に日に増えているようです。
「個人開発で挫折してしまう人を少しでも減らしたい」という想いが込められた「Techfinder」。全国のエンジニアの救世主となりそうなサービスですね！
稲井さん発表お疲れ様でした！
6. 戸塚翔子さん『CLARUS』
CLARUS（クララス）は、西洋占星術が活用されたおまじないアプリ。
「過去の自分を振り返り、変化を見つめ直すことで、人は成長できる…」という想いが開発の原点にあります。
西洋占星術では、月の満ち欠けが物事のサイクルの前提となっています。新月はこれから光を得ていくため物事のスタート、光が満ちた満月は物事のゴールを表しています。
新月にはそれに対応した満月があります。例えば2月20日の魚座新月に対応する満月は8月31日の魚座満月となるのです。
星座にはそれぞれテーマがあり、魚座であれば、喜び、大いなる力、やさしさ、芸術、平和、無条件の愛など。これらのテーマにちなんだ願い事はより叶いやすいと言われているそうです。
アプリの活用としてはまず新月に願いごとを宣言し、その半年後の満月に願いを振り返るという流れです。
画面を開くと直近の新月のテーマが表示。テーマを確認しながら、願い事を入力していきます。
新月に対応する満月が現れるのは半年後。「うっかり忘れていた！」を防ぐため、LINEアカウントと連携し満月の当日にお知らせが届く仕組みになっています。
振り返り画面では、願い事の達成状態「願い中」「成就」「不必要」のいずれかを選択。非公開メモとして感想を入力することもできます。
続いて、願い事の達成状況が表示。成就したら満月＆ハイライトになるなど、達成状況がひと目でわかるのもポイントです。
他のユーザーの願い事を閲覧できる機能も実装。他の人の願いを見ることで、自分の内側に潜む願いを知るきっかけにもなりそうです。
使用技術はこちらの通り。レスポンシブ機能やユーザーガイド、ゲストログイン機能など、ユーザーの使いやすさを重視して実装しました。リリース後、4ヶ月で560UU、8200PVを達達成！
情報が溢れ、何かと慌ただしい現代。そんな日々だからこそ、心の中の想いを言葉にしてみることで、新たな気づきが生まれるかもしれませんね。
戸塚さん発表お疲れ様でした！
審査結果発表
審査員のトークタイムや休憩を挟んだのち、いよいよ審査結果の発表が行われました。ドキドキですね…！！
ここでは一気に受賞作品の発表を行いたいと思います♪
オーディエンス賞「夢絵日記」
一般観戦者の方からの投票で決まるオーディエンス賞を受賞したのは、志田さん制作の「夢絵日記」です！
オーディエンス賞を受賞した夢を例に出し、発表をしていた志田さんですが、なんと正夢となりました！おめでとうございます！
技術力賞「にくきゅう診断」
技術賞を受賞したのは浦部さん制作の「にくきゅう診断」です！
審査員から熱いコメントが寄せられました。
肉球のアルゴリズムを取り入れたこと、また500枚もの写真を学習させるなど、しっかり努力されていることが伝わりました。アイデアも非常に楽しいですね。
アイデア賞「三つ星トイレ」
アイデア賞を受賞したのはしゅとーさん制作の「三つ星トイレ」です！
審査員からのご講評です！
アプリ名だけでサービスが想像できるネーミングセンスが素晴らしい。データさえしっかり揃えれば、より多くのユーザーに使用されると思います。何よりもシンプルに面白い！僕自身が使いたいくらいです。
サービスクオリティ賞「夢絵日記」
サービスクオリティ賞となったのは、志田さん制作の「夢絵日記」です！オーディエンス賞とのW受賞となりました。
審査員からのコメントもご紹介します！
世界感と技術を上手く融合させて作り上げられた作品です。サイトに入るだけでワクワクしそうなデザインも魅力。今後変更を検討されているとのことですが、個人的にはこのままでも良いと思うほどです。
最優秀賞「TechFinder」
そして、栄えある最優秀賞に選ばれたのは・・・稲井さん制作の「TechFinder」です！おめでとうございます！
審査員からは激励のお言葉が寄せられました！
ユーザーが抱えがちな悩みを解決し、パフォーマンス向上を狙う点が良かったです。エンジニアを育成すRUNTEQとして共感できる部分が非常に多かった。素晴らしいエンジニアになれるはず。今後も頑張っていただきたいです。
稲井さんからも感想を頂戴しました！
他の作品のクオリティーが高く、正直あきらめていたので、うれしさ半分、驚き半分というところです。仲の良かった受講生が予選落ちしてとても悔しがっていたので、彼の想いを背負う気持ちで頑張りました。その願いが叶い、すごく嬉しいです。本当にありがとうございました。
RUNTEQで就活に直結するWebアプリを制作しよう！
さて今回はポートフォリオバトルイベントBATTLE OF RUNTEQ vol.3のレポートをお届けしました！皆さんいかがでしたでしょうか？
工夫を凝らした素晴らしいポートフォリオ作品を見られるだけでなく、サービスに対する想いや熱が様々な視点から伝わったのではないでしょうか！
BATTLE OF RUNTEQの今後の情報は随時公式サイトからお届けしております！
公式サイト：https://battleof.runteq.jp/
また、RUNTEQにご興味のある方は、まずはお気軽にキャリア説明会へお越しください！ 運営一同お待ちしております♪ https://runteq.jp/
