【個人開発】モックアップ画像を一瞬でつくれるサービスをVue.jsでつくって学んだこと


# ただ、使ってもらえるものをつくりたい。

冒頭から
欲望を剥き出しにしてしまったことを
お許しください。

こんにちは、[@マーティ](https://twitter.com/marty_ojiya) と申します。
東京のデザイン&開発会社の下っ端エンジニアです。


このたび、　**モックアップ画像をURLや画像から秒で作れるサービス**をつくりました。

今回はそこから学んだことを書いていきます。
もしよければ最後まで読んでやってください。

[Works Thumbnail Generator](https://works-thumbnail-generator.vercel.app/)
![img_thumbnail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560551/10e64721-0f55-16d0-9ef8-2268cc992e61.png)


## なんでつくったの??

皆さまもご存知の通り
昨今、**駆け出しエンジニアが湧いております。**

主にTwitterに生息していて、
毎日、積み上げという行為を行っている方々です。

その"駆け出しエンジニア"の界隈で
バズっているのが`ポートフォリオ`らしい
という噂を聞きつけまして

Twitterで ~~駆け出す速度に追いつければ~~ リーチしやすいし
需要なくはないだろう
ということでつくりました。

## 結果どうだったの？

リリースしたのは、５月１７日
執筆日が５月２２日

これだけアピールしましたが
特にバズりませんでした。笑

いいね・リツイートしてくださった方々、ありがとうございます🙏
**まだ間に合います。ぜひお願いします🙏**
[投稿こちら](https://twitter.com/marty_ojiya/status/1394126369366282244)

ただ、めちゃくちゃ便利！というお声はちらほらいただき
学びも大きかったので、作ってよかったなと心から思っています。
#### そして、収益は６円ゲットしました。笑

![Screen Shot 0003-05-22 at 20.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560551/7180ff7a-cc8d-da7b-a35e-9f81086450ab.png)
↑めちゃくちゃハッシュタグつけてお願いしたけど全然バズっていない図


## ここからは学んだことを書いていきます


- ホスティング関連
    - netlifyよりvercelがよさそう
    - ドメイン名はできる限り短くしたほうがよさそう
- 宣伝関連
    - 狙い撃ち（リプライ）は効果がありそう
- 使ってもらうために必要なこと
    - 以下のどちらかを満たす必要がありそう
        - ”いま”使い始められるものをつくる
        - Memory（記憶）してもらう

順番にまとめていきます。


### netlifyよりvercelがよさそう

もともと静的ファイルのホスティングは
[netlify](https://www.netlify.com/)を使っていました。

しかし、**[vercel](https://vercel.com/) のほうが速いらしい**
という情報を見つけたのです。

[VercelとNetlifyの違いが分からなかったので実際に比べてみた。](https://qiita.com/fussy113/items/ba204747e3f0e6c59af0)

このことを[ツイートしてみた](https://twitter.com/marty_ojiya/status/1384052158069235719?s=20) ところ、
**日本からだと遅い**  という内容の記事を
リプライしてくださった方がいて
納得しました。
感謝🙏

ここでついでに今回の使用技術に軽く触れますと
こんな感じです

> - 言語
    - Vue.js (Vue CLIで構築)
        - component管理
            - Atomicデザインベース
- ホスティング
    - Vercel
- 画像生成周りの仕組み
    - Page Speed API
    - dom-to-image

大して書くことなかった（恥）

### ドメイン名はできる限り短くしたほうがよさそう

まずはこちらをご覧ください
![Screen Shot 0003-05-22 at 20.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560551/4d6a5bd0-ea22-437f-0878-81bf53d3264d.png)

そう、
#### 長いと邪魔なんですよね。笑
そりゃそうなのですが、さすがに長過ぎました。

ただ命名するとき
**モックアップっていう単語をどれくらいの人がわかるのだろう??**
という疑問があって、
今の名前にしてしまったのですが
生まれ変わったら`Mockup Generator` にしたいです。 


### 狙い撃ち（リプライ）は効果がありそう

今回のターゲット（駆け出しエンジニアさま）は
Twitterに多く生息していることがわかっていたので

`#駆け出しエンジニアと繋がりたい　ポートフォリオ`という
検索に引っかかった新着ツイートに
１日１０件ずつくらい、使ってください！という
リプライをしていました。

感覚としては、４割くらいの人が好印象をもってくれて、
実際に使ってくれるかもなという感触でした。

このお陰もあって、**リリース後も２桁アクセスは継続**できました

今後も何かリリースしたら、やっていこうと思います。


### ”いま”使い始められるものをつくるか、Memory（記憶）してもらうか

今回つくったサービスを使ってもらう上で難しいところは
**使うタイミングが限られている**
ということでした。

モックアップ画像なんて、多くても一生に両手で数えられるくらいしか作らないでしょう。

そこで、リリース時には
宣伝に対する消費者の心理のプロセスとされる
`AIDMA`の`Memory`までいってもらう必要がありました。

>宣伝に対する消費者の心理のプロセス AIDMA
>Attention：注意をひく
>Interest：興味を持つ
>Desire：ほしいと思う
>Memory：記憶する
>Action：買う（使う）

しかしそもそも
Memoryまでいってもらっているかを
測ることができません。

ある程度バズることは１つの指標になるかな
と思っていたのですが、それも叶いませんでした（泣）

つまり、これからのサービスの利用状況による、ということになります。

**この課題を解消するためには、**

**使うタイミングが限られない、**
**いま、使えるものをつくること**

しかないのかな、と思いました。

そして使ってもらって初めて、使い続けてもらうためには？
という課題がでてくるんだろうなと思っています。

## ここまで読んでいただいて、ありがとうございました。


諸先輩方はもちろん
個人開発をされている方を本当に尊敬していて
Twitterではよくリリース拡散のとかさせていただいています。

もしよければ[Twitterフォロー](https://twitter.com/marty_ojiya)いただれば
秒で返します（もしリリースされてるもの見つけたら拡散もします）ので、よろしくお願いします。


リリースして数日ですが、次につくるものが決まっていて
今回同様、少なからず需要もありそうで、
需要のある人にリーチができそうだ、
と思ってるので、その開発の様子もツイートしていきます。

改めてご覧いただいてありがとうございました🙏