「あの人が紹介してたアレ何だっけ？」→調べても出てこない
1年前、フライパンの焦げつきがヒドくなったので買い替えたくなったときの話です
妻「YouTube であの人が紹介してた油を引かなくても焦げないフライパン、なんて名前だったっけ？」
自分「あー、ダイエットレシピ動画の途中で一瞬だけ紹介してたやつね！ちょっと調べてみます」
自分「…まったく見つからない＼(^o^)／」
誰が紹介していたのかは憶えていても、タイトルにも概要欄にもフライパンと書かれていないせいか、検索で見つけることができませんでした。結局、レシピ動画をひとつひとつ確認してようやく紹介されているシーンを見つけたときは嬉しかったですが、意外と苦労したのを憶えています
そのとき、この問題を解決する Web サービスがあったら、使ってくれる人がいるのではないか？ という話に。たとえば、購入品紹介の動画についてひとつひとつの商品を検索できたり、その商品について他の YouTuber の口コミも確認できたりすると便利そうです！
ワケあって専業主婦をやってもらっている妻でしたが、Web デザインと HTML や CSS のコーディングに挑戦を始めて、夫婦で個人開発をやってみることにしました
「BuyTube」をつくりました！
それから1年3ヶ月でようやく Web サービスをリリースできました。こちらから確認できます！
BuyTube を使うと、あのとき苦労したフライパンを簡単に見つけられます
詳細ページでは、YouTube の埋め込みプレーヤーを使って 紹介しているシーンの秒数から動画が再生される ようにしています。
別の動画でも同じ商品が紹介されていた場合はそれも表示します。また、商品の購入リンクからフライパンを買えるようになっています！それで BuyTube というサービス名にしました
ぜひ、さわってみていただけると嬉しいです
Web デザイン未経験の妻がやってきたこと
リリースにたどりつけたのは、何をおいてもまず、IT に興味ゼロだったはずの妻が、何かをやりたいという気持ちでゼロから Web デザインの勉強を頑張ってくれたおかげです。
これから Web デザインに挑戦する人の参考になるかもしれないので、彼女が取り組んできたことを紹介します
Adobe XD
まずは直感的にさわれる画面のデザインからということで、当時は無料だったデザインツールの Adobe XD を使って、とにかく作りはじめました。本を1つ買いましたがあまり本には頼らず、わからないことは検索しながらとにかく体で身につけていった感じです。
Web デザインをどのように習得するかについて調べてみると「自分がいいと思うデザインをとにかくたくさんトレース（模写）すること」というのが定石のようです。Mimic というプラグインを利用して、少しずつトレースに取り組んでいました。
でも、2022年9月に Adobe が Figma を買収する ことになるなんて、そして今では XD は消失して Figma に統合されるという噂も出ているなんて、当時はわかりませんでした…。今だと Figma を選ぶことになるのでしょうか
MENTA
私には Web デザインについては聞きかじりの知識しかなく、黒歴史ですが HTML や CSS の知識も中学生のときに自分のホームページを作った頃からあまりアップデートできていないので、だれか添削してくれる先生が必要でした。
そこで、MENTA を利用しました。あらゆるスキルのプロから学べるこちらのサービスも、創業者である入江さんの個人開発から始まったということで、ぜひ使いたいと思っていました。
自分たちの場合は、Adobe XD と HTML と CSS のコーディングまで見てもらえる先生を探してメッセージで相談するところから始めました。最初は単発のプランで添削をお願いしようかと考えていましたが、個別にサブスクプランを作成する機能があるようで、サービスのリリースまで継続して見ていただけるように調整していただけました！
気になっている方はとりあえず相談してみるのがいいのかなと思いました。MENTA の先生には本当にお世話になり、感謝しています
Progate → Codestep
HTML と CSS の基礎を勉強するのに、Progate を利用しました。課題をこなしながら、短い期間でひと通り書けるような力がつきました。
しかし、自分でつくった Adobe XD のデザインを HTML と CSS に落とし込んでいくイメージがなかなかつきません。
そこで見つけたのが Codestep でした。実際に XD のデザインカンプからコーディングに挑戦する課題が用意されていて、こちらに取り組みながら MENTA の先生に質問をすることで、かなりイメージが掴めました！
BuyTube のデザインとコーディング
体当たりでつくった BuyTube の XD を MENTA の先生に丁寧に添削してもらい完成までもっていきました。そこから HTML と CSS をつくりはじめ、これも添削していただきながら完成までたどりついたのが最初からちょうど1年たった頃です。
たった1年前には HTML や CSS の存在も知らなかったことを考えると、進捗がスゴすぎます！HTML と CSS のコーディングを妻に担当してもらい、サーバーサイドの動きを自分がつくって合体させました。良さげなデザインが用意されていると、開発もテンションが上がります
お金について
できれば夫婦で個人開発したサービスからお小遣いが出て、少しでも生活の足しになると嬉しいです。本音をいえば、いますぐリタイアして夫婦ふたりで森で暮らせるような財産を築きたいです。
サービスのマネタイズ
課金要素のイメージも湧かず、おもに検索エンジンや SNS からの流入を狙うことになりそうなサービスなので、商品購入のシンプルな導線からアフィリエイトの収益を得られることに期待しています。
今後は、SEO や SNS の運用で戦っていくことになるのかなと思っています。どちらも初心者なので、手探りで進めていくことになります。アカウントをつくったので、ツイッターでフォローおねがいします！
基本無料のサーバーレス構成
Bref との出会いが大きかったです。Bref は Serverless Framework を利用した、PHP を簡単に AWS Labmda で動かせるツールです。Laravel を動かすことができました。AWS Lambda と API Gateway で Web サービスを公開できるということは、基本無料でおいておけるということなのが嬉しいです
BuyTube の開発にあたって、これまでのサーバー費用は400円くらいで、ほとんどがドメイン代です。ドメインと画像配信には Cloudflare を利用して AWS と組み合わせました。無料枠はありますが、これがリリース後にどうなってくるのかは気になっています！
- AWS
- Lambda: 0円
- S3: 今日までで 1円
- CloudFront: 0円
- API Gateway: 今日までで 1円
- TLS 証明書: 0円
- Cloudflare
- buytube.win ドメイン購入: 400円くらい
- DNS サーバー: 0円
- R2 から CDN で画像を配信: 0円
サーバー構成などについては改めてもっと詳しく記事を書きたいと思っています。
Laravel を使うのは初めてでしたが、ChatGPT に聞いて開発したりしました。とにかく動くものをつくるという点で ChatGPT はかなりの助けになると実感しました。
個人開発で影響を受けた記事
サーバー代を気にせずにサービスを継続できるということはチャンスが増えるということ。以前 テック・ブック・ランク についてのジャバ・ザ・ハットリさんの記事を見たときに本当にそのとおりだと思って、何かそれを実現する方法があるかなと探していました
また、DiQt のかわんじさんの記事には心臓を撃ち抜かれたような気持ちがして、最近ずっと「恥ずかしいうちにリリース！」という言葉を口に出して自分に言い聞かせてました。
本当は去年のうちにリリースしたかったのですが、1ミリもサーバー側の開発が進まずに年を越してしまいツラい気持ちになっていたところを直撃しました。それから毎朝30分の時間をとって進捗を出せるようになりました。当時おかしくなってツイートしたんですが、いま見ると最後の一文が本当に恥ずかしい
そして、Englister のちぇんさんです。3日でサービスをリリースまで持っていくというのが本当に衝撃で、まったく自分には達成できないスキルだと思いつつも、まずはコアな機能をつくって出すということを強く意識するようになりました
今後の課題
サービスをさわっていただくとすぐにわかってしまうと思うのですが、データが少ないです。身内のご協力を得たりしながら手動で入力を進めていますが、限界があります。何を優先して入力していくかなど工夫できると思いますが、どうにかして半自動化するなど何かできることがないか悩んでいます
実は、コスメに特化してはいますが、同じようなサービスを見つけてしまいました！素敵なサイトさんです、ご紹介させていただきます 
フォーコスメさんとどのように差別化していくかというのも BuyTube のポイントになってきそうです
さいごに
ここまでお読みいただきありがとうございました。個人開発について情報を追ったりしたいので、Twitter フォローしていただけると嬉しいです！！@morimura0