はじめに
この度「私のことをどれだけ知ってる？」をコンセプトにした、問題の作成、回答ができるクイズアプリ、「〇〇王！！ - quiz about me -」をリリースしました！
知ってる方も多いかと思いますが、実はこのアプリ、Youtuberさん達の間で人気の企画「〇〇王」からインスピレーションを受けています！
この企画、見てるだけでも面白いですが、私たち視聴者も参加したいと思いませんか？？
そんな時に使っていただきたいのがこのアプリです。
Youtuberさんが問題を作成し共有することで、視聴者さんも問題に回答できるようになります！
もちろん、友達同士で問題を出し合っても楽しそうですね！
使い方・機能紹介
1. トップページ
若者受けしそうなデザインを意識しました。
ニックネームを入力することで問題を作成できます。
2. 問題作成する
こちらの画面で問題の作成、削除ができるようになっております。
また、デフォルトで問題をいくつか用意させていただきました。
作った問題はSNSで共有してみてください。
3. 問題に回答する
ニックネームを入力することで問題に回答できます。
また、クイズをより楽しくするため、ランキング機能を設けました。
回答結果もSNSで共有してみてください。
使用技術
バックエンド
・ Rails 6.0.4.1
・ Ruby 2.6.6
・ RSpec 5.0.2
フロントエンド
・ HTML
・ CSS (SCSS)
・ JavaScript (jQuery)
・ Bootstrap4
こだわった点
テーブル設計
問題の選択肢を増やせるように実装しました。
詳しくは以下の記事でまとめています。
https://qiita.com/ykemoemo/items/9b351c0293eef781ded5
ユーザーのストレスをできるだけ減らした
このアプリはじっくり使うというモノよりかは、サクッと気軽に遊べるような作りにして、ユーザーのストレスを減らすような作りが良いと考えました。
具体的には問題回答時、問題を1問ずつ表示するのをAjaxを使いページの遷移をさせないような作りにしました。
また、問題作成の際、作成や削除をページ内で完結させたかったため、同じようにAjaxを使いました。
ログイン機能もユーザーに対する１つの壁となる気がしたのであえて用意しませんでした。
問題を1問ずつ表示させる方法は下記の記事にまとめています。
https://qiita.com/ykemoemo/items/de8195a261233cb8a997
デザイン面
できるだけシンプルかつ、ポップで若者(特にJK)に受けそうなデザインに仕上げました。
問題を表示する箇所はインスタのストーリーで使われている問題機能を参考にしました。
Youtubeをテーマにしてることから、ユーザーのほとんどはスマホでアクセスすると思ったので、デザインはスマホに寄せております。
おわりに
自分自身Youtubeで「〇〇王」という企画を見るたびに、これ友達同士でもやれたらいいなと思っていたので、形にできたのがすごく嬉しいです。
サービスをデプロイ後たくさんのユーザーさんに、「バズりそー！」などと感想をいただきました。
正直このサービスを思いついた時は、自分天才だな？なんて思ってしまいました（笑）
また、感想以外にもご指摘など、ありがたい言葉をたくさんいただきました。ありがとうございます🙏
今後ご意見を参考にしつつ、サービスをよりよいものにしていけるように頑張っていきます！
最後までご覧いただきましてありがとうございました！