アイデアをお金に変える、実現させるWEBサービス作ってみた！（デモなので、実際はできません）。


![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/727a4cc0-5b6c-1048-1482-a690175590a2.jpeg)

ちょっとしたアイデアがお金になったら、うれしいですよね！？


というわけで、

「いろんなアイデアが欲しい」、「このアイデア実現してくれないかな？」って思う人のためのWEBサービスを作ってみました。

持っているアイデアを売り買いできる、アイデアのメルカリといった感じ。

（今回はデモ版のため実際の金銭の取引はできません。サービス案として作っています。一つの自作サービス例として見ていただけたら幸いです）

<span class="b">サービス「インスピレーション」のURLとコード（Github）</span>
<div class="surrounded">
<ul>
 	<li>URL：<a href="https://inspi-web.herokuapp.com" target="_blank" rel="noopener noreferrer">https://inspi-web.herokuapp.com</a>（heroku無料サービスが終了。現在閉鎖中です）</li>
 	<li>Github：<a href="https://github.com/don-do/inspiration" target="_blank" rel="noopener noreferrer">https://github.com/don-do/inspiration</a>（現在はprivateのため、閲覧できません）</li>
</ul>
</div>
サービス名「インスピレーション」。

思いついたら出品し、アイデアの概要まで無料公開。課金すればアイデアの詳細を見られるというもの。

クリエイターが投稿するnoteと似たものです。主に、ビジネスアイデアの売買プラットフォームという感じ（デモ版のため、実際の金銭のやりとりはできません）。

以下は、当記事の内容。
<div class="surrounded">
<ul>
 	<li><span class="b">サービス概要：</span>ユーザー登録〜アイデアの投稿など。制作期間について</li>
 	<li><span class="b">サービスを作った理由：単品でアイデアを売買できるように</span></li>
 	<li><span class="b">使用技術：Docker・AWSS3・Laravel・Vue（Vuex・VueRouter）など</span></li>
 	<li><span class="b">工夫したところ・難しかったところ：購入からメール送信までのユーザとのコミュニケーション</span></li>
 	<li><span class="b">やってみて感じたこと、得られたこと：似たコンセプトのWEBサービスをマネする大切さ</span></li>
 	<li><span class="b">今後の課題として取り組んでいきたいこと：IT・自動化によってゲームのようにクリアするよろこび、IT用語や歴史など面白いと思った気づきを発信</span></li>
</ul>
</div>
<h2>サービス概要：ユーザー登録〜アイデアの投稿などと、制作期間について</h2>
サービス概要について、ざっくり３点。
<div class="surrounded">
<ul>
 	<li>アイデアの投稿</li>
 	<li>売買</li>
 	<li>カテゴリー検索</li>
</ul>
</div>
まず、本サービスの商品であるアイデア投稿について。
<h3>アイデアの投稿</h3>
ユーザー登録・ログイン後、ヘッダーのアイデア投稿ボタンから画面遷移できます。

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/9f8793a3-2759-8b2c-95a6-433bed6847ca.jpeg)


画像イメージを投稿したり、カテゴリを選択したり、アイデア名・概要・アイデアの内容・価格を入力したりできます。投稿後に変更することも可能。
<h3>売買</h3>
商品の詳細画面から購入することができ、お気に入り登録することもできます。

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/a401b0cf-0c48-ea05-54df-e5edf8ecb58d.jpeg)

自分が売ったものを買ってもらったり、他のユーザーのアイデアを購入したりすることもできます。
<h3>カテゴリー検索</h3>

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/13f38900-d896-fef2-5985-786e6e073eff.jpeg)

カテゴリーで検索をかけたり、

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/a71a761e-f5d8-8565-e323-4b4706b12fa1.jpeg)


価格で検索とか。あと、
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/d9c3a26f-1f2a-fecf-8385-5a67ed5975e8.jpeg)

投稿日で検索をかけたりもできます。

基本的な売買の処理と、検索が簡単に行える仕様です。
<h3>制作期間</h3>
合計５０人日ほど。

外観と機能の洗い出し（１人日）。以下のような感じ。
<div class="surrounded">
<ul>
 	<li>ユーザー登録</li>
 	<li>プロフィール編集</li>
 	<li>ログイン・ログアウト</li>
 	<li>パスワードリマインダ</li>
 	<li>アイデア登録・編集・削除</li>
 	<li>マイページに購入一覧・気になる一覧・投稿一覧・レビュー一覧表示</li>
 	<li>他ユーザーのアイデアに気になる</li>
 	<li>他ユーザーのアイデアを購入</li>
 	<li>アイデア一覧の検索機能</li>
 	<li>アイデアのTweetシェア機能</li>
</ul>
</div>
ワイヤーフレームはカンタンに。（２〜５人日。デザインカンプ・モック作成は飛ばして、デザインはコーディングしながら。）

スマホ版から作って

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/d6116a12-8f5a-a945-f361-009d61afcd78.jpeg)


PC版も作成。
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/8c39f3d8-54e6-c552-2849-11cbb99565eb.jpeg)


DB設計・ルーティング設計（２〜５人日。都度調整しつつ）
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/aed084ce-5e6d-8a09-b599-4b94c891dcb4.jpeg)


あとは、各機能と画面のプログラミング。

Dockerに環境を作り、Laravelを入れ、各機能の作成とSCSSによる画面作成。

このバックエンド側１５人日とフロントエンド側１５人日、サーバと繋いで最終調整１０人日という感じです。

AWSやherokuと繋いで、レンタルサーバにアップという流れ。
<h2>サービスを作った理由：単品でアイデアを売買できるように</h2>
アイデアはすぐに共有される時代ですが、ニッチなアイデアや権威性のある人の作ったアイデアであれば欲しい人がいると思いました。

思いつきを商品に出してみるというWEBサービスがあっても良いなと。

アイデアを出した人も、アイデアが欲しい人もメリットがあるようにしたいと思い、作っていきました。
<h2>使用技術</h2>
LAMP（Docker）・AWSS3・heroku・Laravel・Vue（Vuex・VueRouter）・SCSS・FLOCSS。

LAMP環境を作って、そこにアプリを作成。Dockerを使いました。開発環境を共有できるので、ちょっと使ってみたかったんです。

AWSS3は、画像の保管庫用に使用。AWSも使ってみたかった。S3くらいだったらちょっとつなげるだけ。

また、サーバーはherokuを使っています。
<h2>工夫したところ・難しかったところ：購入やレビューからメール送信までのユーザとのコミュニケーション</h2>
プログラムを組む以上に、<span class="b">使っている人に良い感情を抱かせたり次の行動を促したりすることが、やりがいを感じるところであり難しいところでもありました</span>。

こうした方がいいんじゃないかとかあれこれ考えるのが楽しいです^^

購入すると、購入者と販売者にメール送信されます。また、商品へのレビュー時もメール送信されます。

以下のコントローラで情報を拾って、view側で出力。メールの受け手が、どんなメッセージを受け取れば安心できるのか考えながら作るのにちょっと頭を使いました。

```php
<?php

  /**
   * 購入時、購入者へメール送信
   * @param string $id
   * @return array
   */
  public function purchaseMail(string $id)
  {
    $soldIdea = Idea::where('id', $id)->first();
    $purchaser = Auth::user();

    if ( $purchaser->name ) { // 名前を登録済みなら、名前を挿入
      $mail_text = $purchaser->name.' 様、ご購入ありがとうございました。';
    } else { // 名前が未登録なら、Eメールを挿入
      $mail_text = $purchaser->email.' 様、ご購入ありがとうございました。';
    }
    $data = 'ご購入されたアイデア 「'.$soldIdea->title.'」';
    $ideaDetailUrl = 'https://inspi-web.herokuapp.com/ideas/'.$soldIdea->id;
    $mail_to = $purchaser->email;

    Mail::to($mail_to)->send( new TransactionMail($mail_text, $data, $ideaDetailUrl) );
  }

  /**
   * 販売時、アイデア投稿者（売り手）へメール送信
   * @param string $id
   * @return array
   */
  public function sellMail(string $id)
  {
    $soldIdea = Idea::where('id', $id)->first();
    $seller = User::where('id', $soldIdea->user_id)->first();

    if ( $seller->name ) { // 名前を登録済みなら、名前を挿入
      $mail_text = $seller->name.' 様のアイデアが購入されました。';
    } else { // 名前が未登録なら、Eメールを挿入
      $mail_text = $seller->email.' 様のアイデアが購入されました。';
    }
    $data = '取り引きが成立し、販売したアイデア 「'.$soldIdea->title.'」';
    $ideaDetailUrl = 'https://inspi-web.herokuapp.com/ideas/'.$soldIdea->id;
    $mail_to = $seller->email;

    Mail::to($mail_to)->send( new TransactionMail($mail_text, $data, $ideaDetailUrl) );
  }

  /**
   * アイデア投稿者（売り手）に、レビュー通知メール送信
   * @param string $id
   * @return array
   */
  public function reviewNotificationMail(string $id)
  {
    $reviewedIdea = Idea::where('id', $id)->first();
    $seller = User::where('id', $reviewedIdea->user_id)->first();

    if ( $seller->name ) { // 名前を登録済みなら、名前を挿入
      $mail_text = $seller->name.' 様のアイデアに、購入者からレビューが投稿されました。（レビューは削除される場合があります）';
    } else { // 名前が未登録なら、Eメールを挿入
      $mail_text = $seller->email.' 様のアイデアに、購入者からレビューが投稿されました。（レビューは削除される場合があります）';
    }
    $data = 'レビューが投稿されたアイデア： 「'.$reviewedIdea->title.'」';
    $ideaDetailUrl = 'https://inspi-web.herokuapp.com/ideas/'.$reviewedIdea->id;
    $mail_to = $seller->email;

    Mail::to($mail_to)->send( new TransactionMail($mail_text, $data, $ideaDetailUrl) );
  }
```

サービスとユーザーとのコミュニケーションがサービスの質を向上させる上で重要なので、ユーザーとのコミュニケーションを自動化することを工夫しました。

<h2>やってみて感じたこと、得られたこと：似たコンセプトのWEBサービスをマネする大切さ</h2>
ゼロからオリジナルで作らずに、他のWEBサービスを参考にしました。

コンセプトの似たようなサービスを比較すると学びが多い。

note：<a href="https://note.com/" target="_blank" rel="noopener noreferrer">https://note.com/</a>

brain：<a href="https://brain-market.com/" target="_blank" rel="noopener noreferrer">https://brain-market.com/</a>

Blabo!：<a href="https://bla.bo" target="_blank" rel="noopener noreferrer">https://bla.bo</a>

junk mart：<a href="https://junkm.art/" target="_blank" rel="noopener noreferrer">https://junkm.art/</a>

SURF SCAPE：<a href="https://surf-scape.com/" target="_blank" rel="noopener noreferrer">https://surf-scape.com/</a>

どれもアイデアの共有を目的としており、ユーザーの動きを考えられたものなっています。

<span class="b">商品投稿者の情報が分かりやすい</span>というのが、購入するユーザーにとって安心できるポイントだと改めて感じさせられ、良い点を取り入れようと工夫しました。

マネこそ最上の学び。
<h2>今後の課題として取り組んでいきたいこと：生活をゲームのようにクリアするよろこび、IT用語や歴史など面白いと思った気づきを発信</h2>
取り組みたいことは２点。自動化と教養・雑学の発信です。
<div class="surrounded">
<ul>
 	<li>自動化や工夫によって、生活を楽に豊かにする情報発信</li>
 	<li>IT用語や歴史に関する教養・雑学の発信によって面白いと思ったことを提供すること</li>
</ul>
</div>
<h3>自動化によって生活をゲームのようにクリアする喜び</h3>

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675914/0cfd293b-0373-1b3b-96b8-17bb834f53bf.jpeg)



１点目は、自動化や工夫で生活が楽に豊かになること。生活の攻略法・取扱説明書のような形で、クリアする喜びを共有していけたら最高だなと思います。

アイデアを売買するWEBサービスを作っていく中で、日々の生活を振り返ることが多かったです。

過去に、ITやお金・事業などの道具の使い方を知らないばっかりに無駄な労力を使ってしまうことが多々あり^^;その反省を踏まえて、今後はより効率的に楽しく道具を使っていけるようになりたい。

今まで労力をかけていたことがやらなくても良いと分かった時や、より効果的な方法が分かった時などとても喜びを感じるんです。

そういったポジティブな気持ちとともに発信していきたいです。
<h4>情報があればショートカットできる。そして、モノは断捨離</h4>
特に、情報があればいろんなことを便利に使え、面倒なことはショートカットできるし、時には笑えて楽しい瞬間に出会える。

<span class="b">「そっかこうやってやるんだ！」とか「なるほどこうなってるんだ！」という達成感や気づきって嬉しいものです。</span>

情報源としては、Googleの検索だけでなくYouTubeや有料メルマガなどからも情報を得ていると楽しく日常を過ごせることに日々嬉しさを感じています。

逆に、物理的なモノについてはどんどん無くしていっている自分に気づく。

この情報があれば、こういったモノは不要だなと気づく場面が多く、これも達成感につながります（車も手放しまして、工夫して生活できるか実験中です）。

アイデア・情報っていうのは、こんなにも<span class="b">肩の荷を軽くしてくれるものなのかと、改めて気づくことが多いです。</span>

そして私自身も、「なるほどなあ」と思えるような情報を発信して行けたらいいなと思っています。
<h3>ことばや歴史の教養・雑学による面白い発見</h3>


２点目は、実用的ではないけれど、視野を広げるような情報発信をしていきたい。特にITに関わる用語や歴史などです。

視野を広げることができて楽しい。そんな気持ちを発信していきたい。

とくにIT・プログラミング、英語などの語学、歴史や歴史上の人物、心理・社会、投資・金融など。

テクノロジーが社会を変える様を見ていると嬉しくなるし、言葉の意味を知ることが楽しいという感覚も共有したいんです。

また、歴史や心理など社会の仕組みについて知ると嬉しくなる。

自分が気になる情報を追って発信し、人に良い影響を与えられる内容を心がけていきたいと思っています。

自分の情報発信を通じて、時間を充実させられたらなと。

何よりIT・英語、歴史や歴史上の人物、心理などに関する情報が好きだという気持ちがいっぱいの世界観を作ることができたらなと感じています。
<h4>生きるゲームを楽しく</h4>
以上のように人生の攻略本や取扱説明書のようなノリで、IT・生活の工夫・自動化などを発信し、生きるのをゲームにするような感覚で発信したい。

そして、視野が広がった嬉しさとともに語学・歴史教養系の情報発信も行っていきたいです。

最後までお読みいただきありがとうございます。では！