Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?
@ykemoemo

【個人開発】Youtubeの企画をテーマにしたアプリ「〇〇王!! - quiz about me -」をリリースしました!

はじめに

この度「私のことをどれだけ知ってる?」をコンセプトにした、問題の作成、回答ができるクイズアプリ、「〇〇王!! - quiz about me -」をリリースしました!

知ってる方も多いかと思いますが、実はこのアプリ、Youtuberさん達の間で人気の企画「〇〇王」からインスピレーションを受けています!

この企画、見てるだけでも面白いですが、私たち視聴者も参加したいと思いませんか??

そんな時に使っていただきたいのがこのアプリです。
Youtuberさんが問題を作成し共有することで、視聴者さんも問題に回答できるようになります!

もちろん、友達同士で問題を出し合っても楽しそうですね!

使い方・機能紹介

1. トップページ

若者受けしそうなデザインを意識しました。
ニックネームを入力することで問題を作成できます。
Image from Gyazo

2. 問題作成する

こちらの画面で問題の作成、削除ができるようになっております。
また、デフォルトで問題をいくつか用意させていただきました。
Image from Gyazo

作った問題はSNSで共有してみてください。
Image from Gyazo

3. 問題に回答する

ニックネームを入力することで問題に回答できます。
Image from Gyazo

また、クイズをより楽しくするため、ランキング機能を設けました。
回答結果もSNSで共有してみてください。
Image from Gyazo

使用技術

バックエンド

・ Rails 6.0.4.1
・ Ruby 2.6.6
・ RSpec 5.0.2

フロントエンド

・ HTML
・ CSS (SCSS)
・ JavaScript (jQuery)
・ Bootstrap4

こだわった点

ユーザーのストレスをできるだけ減らした

このアプリはじっくり使うというモノよりかは、サクッと気軽に遊べるような作りにして、ユーザーのストレスを減らすような作りが良いと考えました。
特に、問題作成の際、作成や削除をページ内で完結させたかったため、Ajaxを使いページの遷移をさせないような作りにしました。
ログイン機能もユーザーに対する1つの壁となる気がしたのであえて用意しませんでした。

デザイン面

できるだけシンプルかつ、ポップで若者(特にJK)に受けそうなデザインに仕上げました。
問題を表示する箇所はインスタのストーリーで使われている問題機能を参考にしました。
Youtubeをテーマにしてることから、ユーザーのほとんどはスマホでアクセスすると思ったので、デザインはスマホに寄せております。

おわりに

自分自身Youtubeで「〇〇王」という企画を見るたびに、これ友達同士でもやれたらいいなと思っていたので、形にできたのがすごく嬉しいです。

サービスをデプロイ後たくさんのユーザーさんに、「バズりそー!」などと感想をいただきました。
正直このサービスを思いついた時は、自分天才だな?なんて思ってしまいました(笑)

また、感想以外にもご指摘など、ありがたい言葉をたくさんいただきました。ありがとうございます🙏

今後ご意見を参考にしつつ、サービスをよりよいものにしていけるように頑張っていきます!
最後までご覧いただきましてありがとうございました!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?