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

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

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

こんにちは、@マーティ と申します。
東京のデザイン&開発会社の下っ端エンジニアです。

Zenn初投稿です。

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

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

Works Thumbnail Generator

なんでつくったの??

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

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

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

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

結果どうだったの？

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

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

いいね・リツイートしてくださった方々、ありがとうございます🙏
まだ間に合います。ぜひお願いします🙏
投稿こちら

ただ、めちゃくちゃ便利！というお声はちらほらいただき
学びも大きかったので、作ってよかったなと心から思っています。

そして、収益は６円ゲットしました。笑

↑めちゃくちゃハッシュタグつけてお願いしたけど全然バズっていない図

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

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

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

netlifyよりvercelがよさそう

もともと静的ファイルのホスティングは
netlifyを使っていました。

しかし、vercel のほうが速いらしい
という情報を見つけたのです。

VercelとNetlifyの違いが分からなかったので実際に比べてみた。

このことをツイートしてみた ところ、
日本からだと遅い という内容の記事を
リプライしてくださった方がいて
納得しました。
感謝🙏

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

• 言語
  - Vue.js (Vue CLIで構築)
  - component管理
  - Atomicデザインベース

• ホスティング
  • Vercel
• 画像生成周りの仕組み
  • Page Speed API
  • dom-to-image

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

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

まずはこちらをご覧ください

そう、

長いと邪魔なんですよね。笑

そりゃそうなのですが、さすがに長過ぎました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

もしよければTwitterフォローいただれば
秒で返します（もしリリースされてるもの見つけたら拡散もします）ので、よろしくお願いします。

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

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