【初心者】アイデアの価値を確かめるWebサービスをつくりました。

こんにちは。そば[（＠rie3uu）](https://twitter.com/rie3uu)です。

今回は、アイデアの価値を確かめることのできるWebサービス
「みんなのアイデアチェッカー」をリリースしたので、その記録を発信します。

ちなみに、生まれて初めてWebサービスというものを作りました。

##みんなのアイデアチェッカーとは

[みんなのアイデアチェッカー](https://idea-checker1.web.app/)

アイデアはどんどん浮かぶんだけど、その価値をすぐに知れる環境が欲しい！
と、思い立って作成されたWebサービスです。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1667694/ce24d610-1286-1661-5fe5-e5f1ac43922b.png)



プログラミング歴一週間ほどの高校生2人が、約1ヶ月半ほどかけて完成させました。
このプロジェクトは、そば(@rie3uu)という人物が、がーな(@red_ghana)に、Webサービスを作りたいと提案し、製作がスタートしました。

##なにができるのか

このWebサービスでは、アイデアのインプット、アウトプットの２つが体験できます。

###アイデアのアウトプット

投稿フォームを押して、入力欄の指示に沿って「うかんだアイデア」「アイデアの内容」を記入していき、送信します。

こうすることで、「みんなのアイデア」というTwitterでいうタイムラインに公開され、
アイデアを見た人からいいねをもらったり、ツイートで共有してもらったりして、投稿したアイデアの需要を知ることができます。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1667694/52916b61-d3a0-c80f-7e5d-259b40e2093d.png)


また、投稿されたらこのようにTwitterに飛んで、ツイートすることもできます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">アイデアを思いついたよ！<br><br>本のしおり専門フリマサービス<br><br>これって需要ある？<a href="https://twitter.com/hashtag/%E3%81%BF%E3%82%93%E3%81%AA%E3%81%AE%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#みんなのアイデアチェッカー</a><br> <a href="https://t.co/nmSAQXlTSR">https://t.co/nmSAQXlTSR</a></p>&mdash; そば (@rie3uu) <a href="https://twitter.com/rie3uu/status/1406979696475049990?ref_src=twsrc%5Etfw">June 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###アイデアのインプット

「みんなのアイデア」を見ると、みんなが投稿したアイデアのすべてを見ることができます。
様々なアイデアの中から一つタップすると、モーダルウィンドウが表示され、アイデアの内容が表示されます。

アイデアとアイデアを合わせて、よりオリジナリティのあるアイデアを生み出したり、あまり良くないかもですがそのまま真似してみたり、使い方は自由自在です。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1667694/65735326-944f-c420-17e7-65fa8c1bf16b.png)

これらの考え方は、[アイデアのつくり方](https://www.amazon.co.jp/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9-%E3%82%B8%E3%82%A7%E3%83%BC%E3%83%A0%E3%82%B9-W-%E3%83%A4%E3%83%B3%E3%82%B0/dp/4484881047)という本に記載された
『アイデアとは既存の要素の組み合わせである。』に影響されました。




##機能関連
JavaScript
当初はVue.jsを使用しようと考えていましたが、そもそもVue.jsの基盤はJavaScriptであり、基礎となる書き方もわかっていなかったため、採用を見送ることにしました。
https://developer.mozilla.org/ja/docs/Web/JavaScript

Firebase
初めてサーバーを扱うのはセキュリティ問題が不安だったので、比較的簡単にアップロードのできるFirebaseを使用しました。
公式ドキュメントは一度理解すればわかりやすいのですが、その一度の理解にとても苦労しました。
初心者の方は、こういったドキュメントを理解するという挫折ポイントを、どう乗り越えるかが課題だと思いました。
https://firebase.google.com/?hl=ja

##デザイン関連

FontAwesome
言わずと知れたアイコンが公開されたサイト。
有料のProもあるが、ほとんど良いと思うものが無料で用意されているため、大変助かりました。
https://fontawesome.com/

GoogleFont
思った以上にフォントの種類があり、どれにしようか迷った挙句、使用率の高い「Noto Sans JP」に至りました。
https://fonts.google.com/

Bootstrap
使おうと思いましたが、はじめての開発くらい純粋なCSSをつかって完成させたい！と思ったため、最後まで我慢しました。次回は手を出すかも。
https://getbootstrap.jp/

CSS
君がいないと、生きていけない。
次回は、Tailwind CSSを使用してもっと効率的にコーディングしたいです。
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics

Storyset
最近知ったフリー画像サイトです。著作権フリーなので、ブログなどでも使用できます。
有料かと疑うくらい完成度が高くて、ビジネス系画像も豊富なので、ぜひ使ってみてください。
https://storyset.com/

##作業分担
がーな（＠red_ghana）　JavaScriptでの機能実装・HTML
そば（＠rie3uu）　デザイン全部・企画・UI

VSCodeのLiveShare機能を使用し、リモートで作業をしていきました。
リンクを数時間に一度更新しないと、リンク切れになってしまうというめんどくささもありましたが、同じ環境で作業できるという利便さは、とてつもないものでした。

参考にさせていただいた記事
https://qiita.com/irico/items/b67328fdaa2d9a306cba

##反省点

###作業中の反省点
デザイン側がJavaScriptを深く理解していないため、指示しても分かり合えない箇所があった。

機能を作る側とデザインする側の労力がお互い把握できなかった。

序盤は機能側が忙しかったが、機能が充実していくにつれ、デザインの作業が増え、結果的にどちらも忙しい状況になった。

片方のメンバーが他の予定によって作業時間を空けると、もう片方が作業しない状況ができていた。

###サービスの反省点

はじめてということもあるが、実装したい機能を経験不足で諦めたものが多い。

フレームワークを活用するなどして、次回はもっと作業を効率化したい。

###今後アプデしたい内容

ImageMagickを導入して、アイデアタイトルが記入されたOGP画像に、毎回変わるようにしたい

デザインが質素すぎる気がするので、もっと色味のあるものに改善したい

アカウント機能を設けて、削除・編集・コメント機能などを追加したい

##最後に

チームの力というのは本当に大きく、挫折する箇所も、同じ場で頑張っている人がいるから自分も頑張らなきゃ！という連鎖になり、挫折することなく進むことができました。初心者の方は特に挫折の壁が無数にあると思うので、人と協力して一つプロジェクトをこなすというのは、自分の成長にとても効果的なのでおすすめです。

元々私自身、ずっと一人でWebサービスを作りたいと思っていましたが、挫折してはまたやりはじめてはまた挫折。というループを約半年ほど繰り返し、チームを組むことによって、ようやく一つサービスを完成させることができました。

最近では、自分より若く技術力の高い人ばかりいて、比較して自信を無くしてしまう機会が多かったりしますが、そういった悩みを抱えているけど挑戦してみたい人たちの、サービスを作り始める動機になればなと思います。

最後に、Twitterで新しく作成するWebサービスの進捗状況をリアルタイムでツイートしています。
私たちのモチベーション向上のためにも、ぜひフォローをお願いいたします！
https://twitter.com/rie3uu
https://twitter.com/red_ghana

長い文章でしたが、最後までありがとうございました！