【個人開発】爆速でClubhouseのアイコンを作れるサービスを作ったので振り返る

こんにちわ。れとるときゃりー([@retoruto_carry](https://twitter.com/retoruto_carry))と申します。

個人でwebサービスをたくさん作っている大学4年生です。

# 今回作ったもの

[Clubhouseアイコンメーカー](https://clubhouseicon.net)

Clubhouse用に、アイコンに枠や文字を入れることができるサービスです。

![Twitter post - 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/02d2efad-16e7-5384-264a-a2e3221653ec.png)

## 画面

<img width="500px" alt=screen.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/8bb36833-5c61-f012-f2b4-1e402164f3ad.png">

## 操作中の様子
<img width="500px" alt=using.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/3af8cbb3-e6e3-2e53-f11f-a1429a95d863.gif">


## 実際にClubhouseのアイコンに設定した例

<img width="500px" alt="clubhouse.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/25a9964e-9a1d-fcfd-b37b-c01989ad5d7c.jpeg">


ぜひ使ってみてください

👉　[Clubhouseアイコンメーカー](https://clubhouseicon.net)

# どうしてこのサービスを作ったか

Clubhouseで知り合いが、画像を編集してアイコンに文字を載せていました。

自分でも作りたいと思ったので、ついでにだれでもサクッと簡単につくれるようにしました。

# 制作期間

思いついてから4日間で、ドメイン取得→デザイン→実装→リリースまでしました。

# どういう技術で動いているか

Nuxt.js（SPAモード）をNetlifyでホスティングしています。

Typescriptで書いています。CSSフレームワークはTailwindCSSを使いました。

画像生成はSVGをVue.jsで動的に動かして、画像保存時にSVG→Canvas→PNGに変換しています。

# 開発の様子を振り返る

## Day1

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://t.co/1J3Fvpygtx">https://t.co/1J3Fvpygtx</a> 買った！！！！<br><br>clubhouse向けにアイコンをいい感じに編集できるサービス作ります！<br><br>Twiterで実況しながら作ります！</p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359538219679817731?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Clubhouseで話していて、「Clubhouesのアイコンメーカーとか作ったら面白そうですよね」って話をして、その場ですぐにドメインをとりました。

いわゆるドメイン駆動開発っていうやつですね（違います）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあえずComing soonだけおいた<a href="https://t.co/W4P0lXPgrm">https://t.co/W4P0lXPgrm</a> <a href="https://t.co/axpPQ0eZo6">pic.twitter.com/axpPQ0eZo6</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359575786739535874?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

とりあえずComming soonページまで作ってデプロイしました。

Webサービス開発RTAにおいては、一旦ドメインをとってデプロイまで済ませておくことが、短期間でやる気を出して完成させることへのコツです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">デザイン考え始めた <a href="https://t.co/a4706xMXnR">pic.twitter.com/a4706xMXnR</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359555801904336896?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

その辺にあった紙に適当にアイデアを書きなぐりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">デザインこんな感じかな <a href="https://t.co/X3gaJjF2QZ">pic.twitter.com/X3gaJjF2QZ</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359568282328518657?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

3〜４枚適当にUIを書いていって、それっぽい感じのUIまで落とし込みました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあず見た目だけつくった <a href="https://t.co/A9ovYB5oRE">pic.twitter.com/A9ovYB5oRE</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359604680192479232?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

サクッと見た目だけ実装します

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">実装方法どうしよう<br><br>svgをいじる感じ？<br>それともhtmltocanvasとか？</p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359570206880722944?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

次に実装方法を考えました。

この記事を参考にSVG→CANVAS→PNGの変換でできそうだな、とアタリをつけました。

[SVGを使って画像ジェネレーター的なものを作ったよという話 \- KAYAC engineers' blog](https://techblog.kayac.com/img-generator-with-svg)



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">SVGでできた <a href="https://t.co/hiEhlNzR1i">pic.twitter.com/hiEhlNzR1i</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359652121780445189?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Clubhouseの楕円形の切り抜きはSVGのパスでトリミングができました。

SVGで黒の半透明のフィルターを重ね、SVGのテキストで文字を埋め込みました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">きなこ（<a href="https://twitter.com/AsukaOkochi?ref_src=twsrc%5Etfw">@AsukaOkochi</a> ）と一緒にデザイン考えてるなう<br><br>Clubhouse用にアイコンをいい感じに編集できるサービス作ってる<a href="https://t.co/1J3Fvpygtx">https://t.co/1J3Fvpygtx</a> <a href="https://t.co/bQRZ7v5v5X">pic.twitter.com/bQRZ7v5v5X</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359655192929599490?ref_src=twsrc%5Etfw">February 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実装をやりつつ、並行して友達のデザイナーに手伝ってもらってデザインを詰めていきました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">できてきた！！！みて！！！ <a href="https://t.co/woffrAmCvy">pic.twitter.com/woffrAmCvy</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359735127312453635?ref_src=twsrc%5Etfw">February 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

基本機能を完成させました。あとはどんどん改善をしていきます


<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">進捗です！！！！！！<br>画像アップロードのUIを改善したのと、ボーダーサイズを可変にした <a href="https://t.co/QTXZMDASUy">pic.twitter.com/QTXZMDASUy</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359778968895852552?ref_src=twsrc%5Etfw">February 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

楽しくなってしまって、24時間くらい起きて作業していました。

熱中してると眠気より楽しさが勝つときってありますよね。

## Day2
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ボーダーのありなし切り替え機能つけた〜〜〜〜<a href="https://t.co/W4P0lXPgrm">https://t.co/W4P0lXPgrm</a> <a href="https://t.co/awcqVyMZGt">pic.twitter.com/awcqVyMZGt</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1359971133026566144?ref_src=twsrc%5Etfw">February 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">スタイルの切り替え機能つけた！！！！！！！<a href="https://t.co/qTKhYccQuH">https://t.co/qTKhYccQuH</a> <a href="https://t.co/nh17aAuMCt">pic.twitter.com/nh17aAuMCt</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360063820673110016?ref_src=twsrc%5Etfw">February 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このスタイル切り替え機能はちょっと頑張りました。

設計を工夫して、スタイルの追加やそれぞれのスタイルのオプションを別で設定できるようにしました。これは、翌日の実装時にとても助かりました。

この日はやる気が無かったので、半日作業して残りはダラダラしていました。

## Day3

前日休んだので、本気を出そうと思って、また２４時間くらい起きて作業しました。

 
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">共有導線つけた！！ <a href="https://t.co/MYZoiYKlC8">pic.twitter.com/MYZoiYKlC8</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360434154395955203?ref_src=twsrc%5Etfw">February 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

共有導線があると広まるかな〜と思ってつけました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今クラブハウスアイコンメーカー作っていまして、<br><br>こんな感じで、「聞き専」とか、よく入力しそうな言葉を下に表示しておきたいんですけど、どんな言葉がいいと思いますか？？？？<br><br>リプライで教えてください！！<a href="https://t.co/1J3Fvpygtx">https://t.co/1J3Fvpygtx</a> <a href="https://t.co/jXdqfNmqwp">pic.twitter.com/jXdqfNmqwp</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360332606051504128?ref_src=twsrc%5Etfw">February 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

フォロワーも巻き込んで開発していくととても楽しいです。自分では思いつかない部分はいつもフォロワーに聞いています。皆さんいつもありがとうございます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">テキストの候補を表示するようにした〜〜 <a href="https://t.co/Zg8JjUKr6o">pic.twitter.com/Zg8JjUKr6o</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360497318072442880?ref_src=twsrc%5Etfw">February 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これは簡単なので秒でした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スタイル追加した！！！！ <a href="https://t.co/AAGnewtgnz">pic.twitter.com/AAGnewtgnz</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360576029543211009?ref_src=twsrc%5Etfw">February 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

前日の設計のおかげでサクッと実装できました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">文字の色も変えられるようにした！ <a href="https://t.co/ubUCWAeLXi">pic.twitter.com/ubUCWAeLXi</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360612299363344391?ref_src=twsrc%5Etfw">February 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ここも前日の設計のおかげでサクッと実装できました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">サイトの見た目を整えた <a href="https://t.co/nXBhYjbqHM">pic.twitter.com/nXBhYjbqHM</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360639668908265472?ref_src=twsrc%5Etfw">February 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

CSSを整えました。サイトがきれいだとテンションがあがっていいですよね。

## Day4

今日中に絶対にリリースするというお気持ちで望みました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ラベルの位置とサイズを調整できるようにした <a href="https://t.co/ej6Lf8Owf3">pic.twitter.com/ej6Lf8Owf3</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360811709334650883?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

予定になかったのですが、自分がこのサイズ調節機能が欲しくなったのでつけました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">縁取り文字を追加した！ <a href="https://t.co/lmD3WBGDmT">pic.twitter.com/lmD3WBGDmT</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360838696325373953?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

スタイルをさらに追加しました。これかわいいですよね。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">OGP悩んでる <a href="https://t.co/vMOaRjmDPZ">pic.twitter.com/vMOaRjmDPZ</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360848414506815492?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

リリース直前になったので、OGP画像と宣伝ツイートに使う画像を考えました。毎回めちゃくちゃ悩みます。

### リリース
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Clubhouseのアイコンをつくれるサービスを作りました！！！<br><br>枠線や文字を入れることができます<br><br>頑張って作ったので、いいねやRTでみんなに教えてください！<br>お願いします🙏🙏🙏<a href="https://t.co/1J3Fvpygtx">https://t.co/1J3Fvpygtx</a> <a href="https://t.co/EzC5fR23zI">pic.twitter.com/EzC5fR23zI</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360921210855452678?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

リリース代わりの宣伝ツイートをしました。毎回この瞬間は不安と緊張で心臓がドキドキします。

「使われなかったらどうしよう」「流行らなかったら悲しいな」「うまくいけばいいな」みたいな感情になります。

ただ、今回のようにサービスを爆速で作ってしまえば、最悪無風でも、「数日で作ったからまあいっか〜。次のサービス作ろう〜」と割り切れます。


### リリース後

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画像保存できないって声があったから、画像の長押しか右クリックで保存できるように変更した！ <a href="https://t.co/OLSn6YT2wy">https://t.co/OLSn6YT2wy</a> <a href="https://t.co/AFRxonzX0P">pic.twitter.com/AFRxonzX0P</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360956114003652608?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Safariでの画像の保存の仕方がわかりにくかったので、急遽変更しました。リリース後は、修正が入ることが多いので、眠いときにはリリースしないほうがいいですね（戒め）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Heic拡張子の画像周りで沼ってるっぽい<br><br>ChromeだとそもそもHeic拡張子ファイルを読み込めないのに、Safariだと読み込めて、SVGからPNGの変換時にレンダリングされないっぽい</p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1360970472096100352?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">iPhoneで撮った画像だとうまく画像が保存できない問題を修正した！！！！！</p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1361006839542943751?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この問題もリリース後に発覚し、沼にハマってしまって5時間くらい溶かして解決しました。

#今回の振り返り

いい感じにサクッとWebサービスを爆速でリリースできたので良かったです。

もっと爆速でアイデアを形にできるようになりたいです。

４月から新社会人なのですが、それまでの間暇なので、毎週Webサービスをリリースするのを目標にやっていきます💪

応援よろしくお願いします

#ここまで読んでくれた方へ

ここまで読んでくださりありがとうございます。

👇　ぜひ、このサービスを遊んでみてください

[Clubhouseアイコンメーカー](https://clubhouseicon.net)

いいねやコメント、SNSでの共有等をしてくださると、今後の励みになります。よろしくお願いします。

良かったらツイッター([@retoruto_carry](https://twitter.com/retoruto_carry))もフォローしてね